Mayulabが勝手に制作した「架空のデモサイト」と、「実際の制作実績」をそれぞれ掲載しております。
デザインの参考にご覧ください！
デモサイト
Swellの機能内で制作した例です。
デモサイトは下記ボタンよりご覧いただけます。
実際のご依頼では、「CSSコーディング＋アニメーション＋フォント」を施しますので、よりハイクオリティな仕上がりになります。
ぜひご期待ください！
数年前に初めて作ったウェディング仕様のデモサイトをSwell版として改変しました。シンプルでベーシックな制作例です。
メインの画像は一枚にしたり、デモサイトのようにスライドショー表示にしても綺麗です。
ヘッダー下には画像をバナー表示して各ページにリンクを貼ることができます。
画像部分にはほんのりアニメーションも追加しています。
ヘッダーメニューのリンクはトップページ内のコンテンツにアクセスさせることもできるので1ページ完結のLP作成にもよきです。
Luca Galleryは、シックでクールでとにかく洗練されたデザインに全振りしたようなデモサイトです。
フリー素材とは思えないくらいモデルさんがエモい…。あんまり要らんことはせんとこう。引き算のレシピや！
ギャラリーサイトならこんな感じで写真をフルワイドで設置していくのも綺麗ですよね。
メインビジュアル部分の画像は小さくし、横にお知らせ欄を表示しました。
透け感・高級感・清潔感をイメージした配色とデザインです。
今回は見出しにWebフォントを採用。
寝ながらネイルしてもらいてえ～パーソナルカラー診断もあったらうれしい～というわがままな要望を盛り込んだサイト(笑)
人気の「ミニマル」をコンセプトに白とくすみカラーでまとめた、ドシンプルなていねいな暮らし系ブログ。
Swellはヘッダーの自由度が高いのでメインビジュアル部分にリンク付き画像を貼ったりすることができます。
タブ表示、プロフィールウィジェット、新着記事だけでなく人気記事の表示など、使いやすい機能がSwellには標準搭載されているので、ブロガーさんにも重宝されています。
子どもが生まれたのをきっかけに、こんな子育て施設あったらいいなデモサイトを考案しました。
こういう賑やかな色合いも楽しいですね～！
フォントはSwellに標準搭載されているちょっとポップなデザインを選択しました。しっくり来ますね～！
ロゴを作っていたら、これ顔やん！となり、口を付けてみました。これは特許取れるのでは(？)
Luca Galleryでも採用しているのですが、ヘッダーに記事スライダーが搭載できます。
飲食店をイメージしたデモサイトです。
NOCTURNEでは下層ページにメニュー表のイメージを作成しましたので、GRAND MENU、DESERT MENUを参考にしてみてください。
ヘッダー部分には動画を設定しました。インパクトあっていいですね！
ちなみにNOCTURNE「ノクターン」は、私の一番好きなクラシック曲です。
制作実績
こちらは実際に制作をお任せいただいたWebサイト(※Swellテーマに統一以降)です。
後からカスタマイズしていただくことも可能ですので、一旦完成時のスクショ画像を掲載しております。
画像はスクロール表示でご覧いただけます。
実サイトではアニメーション効果でパーツごとにふわっと表示させているケースが多いです。
鍼灸院 (Swellリニューアル)
ご自身でサイトをお作りになられていましたが、女性目線で作り直してもらいたいというご依頼でした。
本業の傍ら制作されていることもすごいですし、テーマの機能などもうまく活用されていました。
せっかくお任せくださいましたので女性目線を活かしたいのはもちろんのこと、トップページのコンテンツにボリューム感があるため、コマ割りや背景などの構成に留意しつつ制作させていいただきました。
ご用意いただいたバナーも活かしたいとのことでしたので、随所に反映できるようバランスを調整しています。
税理士事務所 (Swellリニューアル)
うわースマホでスクショしたらメインビジュアルの矢印が■になってしまった…
Web上ではちゃんと表示されますのでご安心ください。
今回のご依頼では下層ページのリニューアルも含まれますが、細かいご要望や修正がなく全面的にお任せいただいたためトータル13～14万円ほどでの制作となりました。
以下はスマホメニューと下層ページの例です。
スマホメニューはアイコンボタンで完結に表示するスタイルです。
ページ内ではタブ表示やページ内リンクを活用し、訪問者さまに分かりやすい構成を意識しております。
タイトルの背景画像はページごとに別々で設定することもできますよ！
マッチングサイト (新規制作)
すでにSwellテーマを導入の上機能もうまく活用されてコンテンツを入れておいてくださったので、内容をそのまま活かす形でデザインに手を加えさせていただきました。
ロゴもメインビジュアル画像も実はAIに生成してもらいました。
基本的に画像はご提供いただきますが、ご希望の場合はこちらでとりあえずのご用意も可能です。
企業向けページのみメインカラーを変更したいとのご要望がございました。※右下の画像
初めての検証ではあったものの一括で変更する方法を会得しましたので、レアなケースかもしれませんがいつでも対応できます！笑
コンサルティング (新規制作)
暖色系を基調にポップなイメージで制作した例です。
画像は写真ではなく線画系イラストを採用し柔らかさを表現しています。
イラストはフリー素材を拝借しています。
ご依頼者さまとのご都合が合わなくなりお取引が停止状態になったため料金も頂戴していないというビジネスとしては失格例ですが(笑)、一生懸命制作させていただいたのでサンプルとして掲載することにしました！
ピラティススタジオ (新規制作)
サイト制作に対してとても情熱的な方で、細やかなご要望をお伺いいたしました。
正直なところ、私の実力（HTML・CSSの知識）だけでは力及ばずかもしれないという場面が何度かあったのですが、すべて無事に完遂することができ本当にホッとした思い出です。
細部のデザインにこだわりたい方もまずはご相談ください。こちらでお調べした上で可能な限り対応できるよう尽力いたします。
ただ、特殊な機能が必要な場合などは、実装内容によってはMayulabでは対応可能な範疇を超えることがございます。
この場合はご予算の幅を広げてでも、より詳しい方にご依頼いただくことをお勧めいたします。
スクショではお伝えできませんが、トップページのネイビーの部分はフェードインアニメーションを入れています。
また、右下の予約ボタンは常時表示させています。
動物病院×トリミングサロン (新規制作)
動物病院さんとトリミングサロンさんが連携してペットのサポートを行っていらっしゃるということでした。
別々でサイトをつくるのが一般的ではありますが、まとめて1サイトで運営されたいとのご要望でしたので下層ページはタブで表示する形を取っております。
メインビジュアルにはご用意いただいた動画を反映しており、ペットちゃんたちの躍動感が最高でした… (動物好きなので癒されました)
「サービス内容」「料金表」「スタッフ紹介」ページなどの下層ページも作成代行を承りました。
WordPressの知識だけではできることが限られますが、CSSコーディングを合わせることでより柔軟なデザインを構築していきます。
美容サロン (Swellリニューアル)
「以前とあるクリエイターさんにサイト制作を依頼したが、仕上がりがイメージと違うので作り直してほしい」というご要望でした。
若干のプレッシャーを感じつつも、サイトを確認すると明らかな素人さんによる制作であることが見て取れました。
また作り直しになるようなことがないよう、細かい部分もしっかりヒアリングと確認を繰り返しながらご提案させていただきました。
メニューページのデザインはお任せいただき、左側にはご希望の固定コンテンツを配置し、目につきやすいように。
メインビジュアルは文字だけでよいとのことでしたのでシンプルに。
メニューページ
メニューページ
企業ブランディング (新規制作)
極力シンプルにつくりたいというご要望でしたので、PCからもスマホメニュー用の三本線を表示させ、よりコンパクトでミニマルな印象に。
アニメーションを使い、シンプルなサイトにもふんわりとした動きをつけています。
画像、フォント、色味(企業カラー)などはオーナーさまのご希望に沿ってベースを制作いたしましたが、カスタマイズ方法をお伝えしてお好みに調整していただく形です。
メニュークリック時の画面
メニュークリック時の画面
ブランディングサイト (新規制作)
初めて多言語化サイトをお作りさせていただきました。
※翻訳はオーナーさまのご提供です
動きのあるイメージをまんま表現したく、メインビジュアルに動画を掲載しました。めちゃくちゃ格好いいです！
メニューには力強いイメージのゴシック英フォントを採用しました。
イベント時のギャラリーを作成されたいとのことでしたので、見やすく年度ごとにタブ分けしております。
ギャラリーページです！
ギャラリーページです！
個人塾（WordPressリニューアル)
既に運営されていたWordPressサイトのリニューアルを承りました。
こちらは姉妹サイトのご相談です！
まったく別のデザインで制作する案もありましたが、色違いにすることで姉妹感マシマシ・コスト削減も可能なのでそちらでご提案させていただきました。
子どもたちそれぞれの個性や無限にある将来の選択肢のイメージから、カラフルでフラットなデザインを反映しております。
グローバルナビ(ヘッダーメニュー)はベーシックなデザインから一変し、イメージに合うようカスタマイズを行いました。
オーナーさまのご希望によりサイト内にインスタのタイムラインを表示しております。
また、新校が開設されるとのおめでたいご報告をお伺いし、それに伴う修正も対応させていただきました。
資格取得ブログ (WordPressリニューアル)
シンプルなタッチで女性が受け入れやすいサイトをご希望されていらっしゃいました。
ロゴや女性の線画画像はご用意くださり(自作すごい！)、合わせて手書き文字や淡い水彩で女性らしさを表現しました。
学習系ブログということで、ペタペタ付箋風のリンクを実装し、トップページ各エリアにスムーズにスクロールできるようユーザビリティを重視しました。
また、知りたい内容をすぐにサーチできるようヘッダー下にミニサイトマップを設けております。
テキストは一部タイピングアニメーションを導入しています。
サイトマップは何もしないとリンクが順不同でひたすら並ぶだけのページになってしまうのですが、今回はブログサイトでページが多いので分かりやすくまとめました。
サイトマップページ
サイトマップページ
女性専門セラピー (新規制作)
アダルトジャンルということもあり謙虚にご相談いただきましたが、特に偏見はなくむしろ女性という立場がお役に立てるのではと思い制作させていただきました。
制作にあたりライバルサイトをリサーチしたところ、女性目線とは程遠かったため差別化を注視しました。
全体的に淡いカラーや高級なイメージの背景画像等を用いて、上品なサイトを意識しております。
簡易ではありますがロゴの作成も担当させていただきました。
イメージが一致するまでとことんお付き合いさせていただきます！修正回数の上限もございませんのでご安心ください。
ご希望のデザイン通りに調整させていただくほか、こちらからのご提案も可能です。
これや！という仕上がりを目指してご一緒に楽しくお作りできればと思います。
