デザインサンプル

Mayulabが勝手に制作した「架空のデモサイト」と「実際の制作実績」をそれぞれ掲載しております。デザインの参考にご覧ください!

デモサイト


様々なジャンルを想定し、オーナーさんになりきって作成した妄想サイトです。
デモサイトの詳細は下記リンクよりご覧いただけます!

数年前に初めて作ったウェディング仕様のデモサイトをSwell版として改変しました。シンプルでベーシックな制作例です。

メインの画像は一枚にしたり、デモサイトのようにスライドショー表示にしても綺麗です。

ヘッダー下には画像をバナー表示して各ページにリンクを貼ることができます。

画像部分にはほんのりアニメーションも追加しています。

ヘッダーメニューのリンクはトップページ内のコンテンツにアクセスさせることもできるので1ページ完結のLP作成にもよきです。

制作例


こちらは実際に制作をお任せいただいたWebサイト(※Swellテーマに統一以降)です。
後からカスタマイズすることが可能なため、一旦完成時のスクショ画像を掲載しております。
画像はスクロール表示でご覧いただけます。

ピラティススタジオ

サイト制作に関してとても情熱的な方で「さすがに無理かも」というご要望も何度かいただきましたが、無事完遂できご納得いただける形で納品に至りよかったです!

ご要望内容に対して料金の変動はございませんので、細部のデザインにこだわりたい方もまずはご相談ください。

こちらでお調べした上で可能な限り対応できるよう頑張ります。

今回自身のスキルアップにも繋がりましたので、今後に活かしていきたいと思います!

料金表
サービス内容

動物病院×トリミングサロン

動物病院さんとトリミングサロンさんが連携してペットちゃんのサポートを行っているということでした。

別々でサイトをつくるのが一般的ではありますが、一緒にしたいとのご要望で下層ページはタブ表示で対応させていただきました。

「サービス内容」「料金表」「スタッフ紹介」ページなどの下層ページも作成代行いたしました。

WordPressの知識だけではできることが限られますが、CSSコーディングを合わせることでより柔軟なデザインを構築していきます。

サービス内容
料金表
スタッフ紹介

美容サロン (サイトリニューアル)

「以前ほかの方にサイト制作を依頼したが、イメージと違うので作り直してほしい」というご要望でした。

若干のプレッシャーを感じつつもサイトを確認すると、正直あまりにも素人制作で驚いてしまいました。

また作り直しとなっては大変なので、細かい部分もしっかりヒアリングと確認を繰り返しながらご提案させていただきました。

メニューページのデザインはお任せいただき、左側にはご希望の固定コンテンツを配置し、目につきやすいように。

メインビジュアルは文字だけでよいとのことでしたのでシンプルに。

メニューページ

メニューページ

企業ブランディング

極力シンプルにつくりたいというご要望でしたので、PCからもスマホメニュー用の三本線を表示させ、よりコンパクトでミニマルな印象に。

アニメーションを使い、シンプルなサイトにもふんわりとした動きをつけました。

画像、フォント、色味(企業カラー)などはオーナーさまのご希望に沿ってベースを制作いたしましたが、カスタマイズ方法をお伝えしてお好みに調整していただく形です。

メニュークリック時の画面

メニュークリック時の画面

曲芸飛行パフォーマーさま

初めて多言語化サイトをお作りさせていただきました。

動きのあるイメージをそのまま表現したく、メインビジュアルに動画を掲載。めちゃくちゃ格好いいです!

メニューには力強いゴシック英フォントを採用。

イベント開催時にアップされるギャラリーが見やすくなるよう、年度ごとにタブ分けしました。

ギャラリーページです!

ギャラリーページです!

複数経営されている個人塾オーナーさま (サイトリニューアル)

既に運営されていたWordPressサイトのリニューアルを承りました。

姉妹サイトとして色違いでそれぞれ制作させていただきました。

子どもたちそれぞれの個性や無限にある将来の選択肢のイメージからカラフルなイメージを反映しております。

オーナーさまのご希望によりサイト内にインスタのタイムラインを表示しました。

姉妹サイトです!

姉妹サイトです!

資格取得ブログ

シンプルなタッチで女性が受け入れやすいサイトをご希望されていらっしゃいました。

ロゴや女性の線画画像はご用意くださり(自作すごい!)、合わせて手書き文字や淡い水彩で女性らしさを表現しました。

学習系ブログなのでCSSでペタペタ付箋風のリンクを作成し、トップページ各エリアにスムーズにスクロールできるようユーザビリティを重視しました。

また、知りたい内容をすぐにサーチできるようヘッダー下にミニサイトマップを設けました。

テキストは一部タイピングアニメーションを導入しています。

サイトマップは何もしないとリンクが順不同でひたすら並ぶだけのページになってしまうのですが、今回はブログサイトでページが多いので分かりやすくまとめました。

サイトマップページ

サイトマップページ

女性専門セラピー

アダルトジャンルということもあり謙虚にご相談いただきましたが、特に偏見はなくむしろ女性という立場がお役に立てるのではと思い制作させていただきました。

制作にあたりライバルサイトをリサーチしたところ、女性目線とは程遠かったため差別化を注視しました。

通全体的に淡いカラーや高級なイメージの背景画像等を用いて、上品なサイトを意識しました。

簡易ではありますがロゴの作成も担当させていただきました。

イメージが一致するまでとことんお付き合いさせていただきます!修正回数の上限もございませんのでご安心ください。

ご希望のデザイン通りに調整させていただくほか、こちらからのご提案も可能です。

これや!という仕上がりを目指してご一緒に楽しくお作りできればと思います。