デザインサンプル

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

デモサイト


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

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

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

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

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

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

制作例


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

鍼灸院 (リニューアル)

自分でサイトを作ってみたが、女性目線で作り直してほしいというご依頼でした。

本業の傍ら独学で制作されたことに驚きでしたし、テーマの機能などもうまく活用されていてスゲー!となりました。

女性目線を活かしたいのはもちろんのこと、トップページのコンテンツが充実しているので、コマ割りや背景などの構成に留意しつつ制作させていいただきました。

ご用意いただいたバナーも活かしたいとのことでしたので、随所に反映できるようバランスを調整しています。

サービスページ
スマホ用メニュー

ピラティススタジオ

サイト制作に対してとても情熱的な方で、細やかなご要望をいただきました。自分では力及ばずかも…という場面が何度かあったのですが、無事完遂することができ本当に安心しました…という思い出です。

ご要望内容に対して料金の変動はございませんので、細部のデザインにこだわりたい方もまずはご相談ください。こちらでお調べした上で可能な限り対応できるよう尽力いたします。

ただ、特殊な機能が必要な場合などは、実装内容によってはMayulabでは対応可能な範疇を超えることがございます。この場合はご予算の幅を広げてでもより詳しい方にご依頼いただくことをお勧めいたします。

料金表
サービス内容

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

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

別々でサイトをつくるのが一般的ではありますが、まとめて1サイトで運営されたいとのご要望でしたので下層ページはタブで表示する形を取っております。

メインビジュアルにはご用意いただいた動画を反映しており、ペットちゃんたちの躍動感が最高でした… (動物好きなので癒されました)

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

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

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

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

「以前とあるクリエイターさんにサイト制作を依頼したが、仕上がりがイメージと違うので作り直してほしい」というご要望でした。

若干のプレッシャーを感じつつも、サイトを確認すると明らかな素人さんによる制作であることが見て取れました。

また作り直しになるようなことがないよう、細かい部分もしっかりヒアリングと確認を繰り返しながらご提案させていただきました。

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

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

メニューページ

メニューページ

企業ブランディング

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

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

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

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

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

曲芸飛行パフォーマーさまのブランディングサイト

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

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

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

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

ギャラリーページです!

ギャラリーページです!

個人塾(サイトリニューアル)

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

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

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

グローバルナビ(ヘッダーメニュー)はベーシックなデザインから一変し、イメージに合うようカスタマイズを行いました。

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

姉妹サイトです!

姉妹サイトです!

サービスページ

資格取得ブログ

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

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

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

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

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

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

サイトマップページ

サイトマップページ

女性専門セラピー

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

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

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

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

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

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

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