INDEX of This Page
Planning
カリー専門店の魅力を、ビジュアルの第一印象から直感的に伝えることを目的に、LPのように縦スクロールで世界観を体験できる構成にしました。
飲食店サイトでは、店舗情報を網羅すること以上に、「おいしそう」「気になる」「この店の特徴が伝わる」という感覚を最初の数秒でつくることが重要だと考えています。
そのため本案では、料理写真を大きく見せながら、テキストは要点を絞り、写真の訴求力と情報の読みやすさを両立する設計を意識しました。
また、単に料理写真を並べるのではなく、ファーストビュー→こだわり紹介→メニュー訴求→利用シーン提案という順番で、魅力が段階的に伝わるように構成しています。
スクロールするごとに新しい見どころが現れる流れにすることで、ユーザーが飽きずに読み進めやすく、店舗の印象が残るページを目指しました。
Design View
ファーストビューの工夫
1. 料理写真を大きく見せて、第一印象で「おいしそう」と感じてもらう構成にしました。
画面上部では、カリー皿の写真を大きく配置し、料理そのもののシズル感が最初に伝わるようにしています。
特に、皿のボリューム感や具材の彩りがよく見える構図を使うことで、文字を読まなくても「どんな店か」が伝わる見せ方を意識しました。
背景にテーブルやカトラリーが見えることで、料理単体ではなく食事体験まで含めた空気感が感じられるようにしています。
2. ヘッダーは主張しすぎず、料理写真が主役になるよう整理しました。
上部ナビゲーションは余白を広めに取り、情報量を抑えることで、視線が自然にメインビジュアルへ向かうようにしています。
飲食店サイトでは、最初から情報を多く見せるよりも、まず「おいしそう」と感じてもらうことが重要なため、ファーストビューでは装飾を増やしすぎず、写真を主役に置いた設計です。
3. メイン写真の下にサブ画像を置き、視覚的なリズムを作りました。
大きな料理写真だけだと印象が単調になりやすいため、下部に小さな画像を複数配置し、店舗や料理の別カットをテンポよく見せる構成にしています。
これにより、1枚目で興味を持ったユーザーに対して、次の情報へ自然につなげることができ、ページ全体に動きが生まれるようにしました。
4. 導入エリアでは、写真だけで終わらず、店舗の世界観を文章と人物ビジュアルで補強しています。
ファーストビュー直下には、店舗紹介のテキストと人物のビジュアルを組み合わせています。
ここでは、料理の印象だけでなく、「誰が、どんな思いで提供しているか」まで想像しやすい空気感をつくることを意識しました。
料理写真だけでは伝えきれない人の温度感を加えることで、ブランドとしての親しみやすさを補強しています。
中盤の工夫
5. グリーンの帯で、情報の区切りとメッセージの強調を両立しました。
ページ途中にグリーンの背景帯を入れることで、視覚的な切り替わりを作り、スクロールの中だるみを防いでいます。
白背景が続く中で色面を挟むことで、「ここはコンセプトを伝えるブロックである」と認識しやすくなり、メッセージが埋もれにくくなるように設計しました。
また、暖色中心の料理写真が続く中にグリーンを入れることで、全体の配色バランスにもメリハリを持たせています。
6. 鍋の写真を横幅いっぱいに使い、調理工程の臨場感を出しました。
中段では、鍋の写真を大きく横断的に見せることで、単なる完成品紹介ではなく、「仕込みや調理の過程にも価値がある」ことが伝わるようにしています。
完成した料理だけを並べるよりも、調理中のビジュアルを挟むことで、店舗のこだわりや手間が伝わりやすくなり、ストーリーのあるページとして見せられるよう工夫しました。
7. 料理紹介セクションは、左右に写真を振り分けて単調にならないようにしました。
中盤の料理紹介では、左に料理写真、右に別カットや補足情報を置くなど、要素の位置に変化をつけています。
縦長ページでは、同じレイアウトが続くと読み飛ばされやすくなるため、左右の配置バランスを変えながら、視線にリズムを作ることを意識しました。
これにより、スクロールしながらでも各セクションの違いを感じやすくしています。
8. 「01」「02」などの番号を大きく使い、セクションの整理感を出しました。
料理や特徴を紹介するブロックでは、番号を見出しの一部として使うことで、情報が順番に整理されて見えるようにしています。
これはLP的な読み進めやすさを意識したもので、ユーザーが今どの段階の情報を見ているか把握しやすい効果があります。
見た目のアクセントとしても機能し、写真主体のページの中に情報設計の秩序を作っています。
9. 写真のトリミングに変化をつけ、ページ全体が単調にならないようにしました。
各料理の写真をすべて同じ見せ方にせず、丸型の写真や長方形の写真を使い分けることで、ビジュアルに単調さが出ないようにしています。
特に丸型の切り抜きは皿の形との相性がよく、料理の印象を柔らかく見せられるため、親しみやすさや軽やかさを出したい箇所で効果的に使っています。
10. 色設計は、料理の温かさを引き立てる暖色を中心に構成しました。
全体として、赤・ブラウン・ベージュ系の色を軸にしながら、必要な箇所でグリーンやホワイトを差し込むことで、画面全体が重くなりすぎないよう調整しています。
カリーや食材の色味と相性のよい配色にすることで、サイト全体を見たときにも「おいしそう」と感じるトーンを保てるようにしました。
一方で、文字情報が埋もれないよう背景色とのコントラストも意識し、訴求と可読性のバランスを取っています。
下部の工夫
11. 下部のメニュー一覧は、一覧性と選ぶ楽しさの両方を意識しました。
後半では、複数メニューを並べた一覧エリアを設け、「どんな種類があるのか」を視覚的に比較しやすいようにしています。
写真をカード状に並べることで、一覧としての見やすさを保ちながら、それぞれの料理の個性も伝わるようにしました。
飲食店サイトでは、選ぶ楽しさも来店意欲につながるため、単なる情報リストではなく、眺めたくなる見せ方を意識しています。
12. 2皿を並べた対比的な見せ方で、メニューの違いを印象づけました。
2つの皿を並べるセクションでは、背景色を左右で切り替えながら、料理の違いが印象に残るようにしています。
単に料理写真を追加するのではなく、対比のある見せ方を取り入れることで、ページの中に変化が生まれ、ユーザーの視線を止めやすくなります。
また、背景ごとに雰囲気を変えることで、それぞれの料理の個性も引き立つように考えました。
13. 最下部の導線は、写真訴求から行動導線へ自然につながるよう整理しました。
ページ終盤では、写真を見て興味を持ったユーザーが、次の行動に進みやすいよう、情報ブロックとボタンの関係を整理しています。
飲食店サイトでは、世界観だけで終わるのではなく、予約・来店検討・店舗理解など次のアクションへつながることも重要です。
そのため、最後まで見たユーザーが迷わず動けるよう、終盤の情報量と導線の見せ方にも配慮しました。
14. ポートフォリオとしての見せどころは、縦長1ページの体験設計にあります。
このデザインでは、料理写真を魅力的に見せることに加えて、スクロールに沿って印象が積み上がる構成を意識しています。
ファーストビューで惹きつけ、中盤でこだわりを伝え、下部で選ぶ楽しさや利用イメージを補強することで、単なる店舗紹介ではなく、ブランド体験として成立するページを目指しました。
そのため、表層デザインだけでなく、情報の順序・余白・視線誘導・写真の配置変化まで含めて設計した点が、この制作のアピールポイントです。
