カフェ「BAGEL & COFFEE」 デモサイト

OVERVIEW

公園の近くに店を構えるカフェ「BAGEL & COFFEE」のデモサイトを制作いたしました。

サイトURL https://kunren.sakura.ne.jp/202304web06/bagel&coffee/index

概要

  • 制作時期:2023年9月
  • 制作時間:企画・ワイヤーフレーム・・・約10時間

      デザインカンプ・・・約15時間

      コーディング・・・約30時間

  • 使用ツール:Photoshop / Illustrator / HTML / CSS / jQuery
  • ページ数:5ページ

制作意図・工夫点

  • 休日はたくさんの人でにぎわう、大きな公園の近くにあるカフェを想定してサイトを制作。
  • SNSで話題の「おしゃピク(おしゃれピクニック)」ができるのがウリ。
  • 太陽をイメージし、オレンジをメインカラーに採用。


サイト訪問時のオープニング レジャーシートをイメージ


  • ターゲットは、20代前半学生、30代家族連れ
  • ペルソナは、20歳大学生2回生/休日はカフェ巡りするのが趣味/サークルのメンバーで集まることが多い


  • トップページの上部にPICK UP欄を配置し、目立つ場所に期間限定メニューや、サービス等を記載することで、集客UPを狙う。

トップページ - PICK UP



  • Instagramの運用をおこない、SNS世代への拡散をねらう。

トップページ - Instagram



  • イメージを交互に配置、ふわっと文字とイメージを出すことで視線の誘導をおこなう。

ABOUTページ



  • マップはGoogleマップを埋め込み、色味を抑えてうるさくないように。

ACCESSページ



  • お日様のもとでみんなが笑顔にをイメージしてオリジナルロゴを作成。

ロゴ


  • レスポンシブ対応


コメント

あったら行ってみたいと思うカフェを想定してサイトの制作をしました。

いろいろ動きをつけようと調べながら試行錯誤し、オープニングやスライドショーを取り入れましたが、まだまだ勉強不足ですのでこれからも頑張りたいと思います。


ペルソナを設定したり、配色を考えたり、集客のためにどうすべきか時間を掛けて企画をイチから練りました。

ベーグルをメインにした理由は、企画を練っている間に、ヘルシーでダイエットに良いと何かで目にしたからです。ただ、根拠がよくわからなかったのでそこは記載していません・・・。