「ONIGIRI CAFE むすび（架空）」カフェサイト

デザインポイント

• 情報設計

  ｢カフェの存在について知ってもらうこと｣が目的のため、コンセプトや店内の画像などカフェの雰囲気が伝わるコンテンツを初めの方に配置し、メニューやお知らせなどの詳細部分を下部に配置しました。
  また、初めての方でも不安なく気軽に来店してもらえるように、メニュー欄にはおすすめのセットを表示し、セットの内容や選び方をわかりやすく説明しました。

• デザイン

  親しみやすさと暖かく優しい雰囲気を表現するために、全体的に丸みを帯びたオブジェクトやフォントを使用し、配色も人肌のぬくもりを感じさせるベージュをメインにピンクやブラウンなど暖色系を使用しました。
  また、お店のコンセプトである｢おむすび×結び｣に合わせて、ところどころ見出し部分におむすびやリボンをあしらい、懐かしい和食のメニューがメインのため、背景に和紙のようなテクスチャを使用しました。

• フォント

  • Nunito
  • Zen Maru Gothic

• 配色

  

• ロゴ

  お店のコンセプト｢おむすび×結び｣から、２つのおむすびを赤い紐で結んだイラストで、暖かみのある手書き風のロゴを作成しました。

  

• ポイント①

  キャッチコピーの右側にある画像のスライドショー

  どんなカフェかを知ってもらうために、最初にコンセプトの説明と提供するメニューの画像を配置しました。
  また、目を引くように画像は画面の横幅いっぱいに表示しました。

  

• ポイント②

  セットメニューの詳細部分のアコーディオン

  情報量が多くなって見づらくなるのを避けるため、最初は概要だけを表示して、すっきりとした印象を持たせるようにしました。｢セット内容を詳しく見る/セット内容を閉じる｣のクリックで、詳細部分の開閉を切り替えて表示するようにしました。

  • 閉じた状態（最初の表示）
  • 開いた状態