制作概要
イタリアン食堂「Ristorante Osteria」の予約・来店につながる導線設計を意識しながら、温かみのあるトーンでデザイン〜コーディングまで架空案件にて制作しました。
“背伸びしすぎない上質感”を大切にし、初めてのお客様でも入りやすい印象を目指しています。
“背伸びしすぎない上質感”を大切にし、初めてのお客様でも入りやすい印象を目指しています。
目的
予約数・来店数の増加（予約導線を強くする）
お店の雰囲気（やさしさ・落ち着き）を写真で直感的に伝える
スマホユーザーでも迷わず目的情報に到達できる分かりやすい導線にする
ターゲット想定
20〜50代の「外食を楽しみたい」層
友人・家族・カップル利用（普段使い〜ちょっと特別な日）
デザインのポイント
1) 写真を主役にして“おいしさ”を一瞬で伝える
ファーストビューは料理写真を大きく見せ、テキストは必要十分に。
「ここはおいしそう」と直感で伝わる構成にして、予約ボタンへ自然に誘導します。
「ここはおいしそう」と直感で伝わる構成にして、予約ボタンへ自然に誘導します。
2) 親しみ×上質のバランス
背景の淡いトーンや丸みのある要素でやわらかく、
一方で余白と整ったタイポグラフィで“きちんと感”も担保。
オシャレすぎないのに品があるを狙いました。
一方で余白と整ったタイポグラフィで“きちんと感”も担保。
オシャレすぎないのに品があるを狙いました。
3) “迷わない”ナビゲーション設計（スマホ最適化）
スマホではハンバーガーメニューで情報を整理し、
ABOUT / MENU / NEWS / INFO / ACCESS / RESERVATION と目的別に到達できるようにしました。
予約導線は常に目に入る位置に配置し、ワンタップで予約へ進める設計です。
ABOUT / MENU / NEWS / INFO / ACCESS / RESERVATION と目的別に到達できるようにしました。
予約導線は常に目に入る位置に配置し、ワンタップで予約へ進める設計です。
予約・来店を増やすための工夫
予約ボタンを目立つ位置に固定して、離脱を防止
お店の魅力を「空気感（内観）」「料理」「人（シェフ）」で伝える構成にし、安心感を強化
メニューセクションは視認性を上げ、価格感・内容がすぐ分かるように整理
アクセス/営業時間/問い合わせを下部に集約し、来店前の不安を解消
担当範囲・使用ツール
担当：デザイン設計 / UI設計 / コーディング（HTML / CSS / JavaScript）
使用ツール：illustrator/Photoshop（画像調整）、VS Code（HTML / CSS / JavaScript）など