TERRACOTTA KITCHEN
テラコッタキッチンは、産地直送の旬食材と薪窯で焼き上げる本格イタリアンレストラン。シェフこだわりの一皿で、特別な時間をお過ごしください。ランチ2,000円〜、ディナー5,000円〜
旬の恵みと炎が織りなす、高級イタリアンレストランの世界観を表現したLP制作サンプルです。上質な素材感とダイナミックな調理風景を活かし、グルメ層をターゲットに「他とは違う食体験」を訴求する設計です。6つのセクションで、こだわりからシェフ紹介まで、店舗の魅力を段階的に伝える構成になっています。
デザインのポイント
テラコッタの温かみのあるオレンジ・ベージュと、炎を連想させるディープレッドを配色の軸とし、高級感とアースカラーのバランスを実現しました。ファーストビューでは大きな背景動画やヒーロー画像を活かし、火で炙られた食材の質感をビジュアルで強調。スクロール時には各セクションが段階的にフェードイン・スライドインするアニメーション効果を用いて、閲覧者の期待感を高めています。
各セクションは縦長スクロール中心で、テキストと画像のコントラストを工夫。おすすめメニューは横スクロール対応のカード列で、お客様の声はタイムライン風レイアウトにすることで、単調なコンテンツを視覚的に充実させました。店舗情報はGoogleマップ埋め込みと営業時間を一体化させ、予約情報をまとめた導線設計です。
工夫した点
カラーパレットの統一感
テラコッタ・炎・食材という店舗コンセプトを反映したカラースキームを徹底し、色の組み合わせ数を絞ることで洗練された雰囲気を維持。グラデーション効果でさらに深みを演出
スクロール連動アニメーション
Intersection Observer APIを活用し、各セクション進入時に異なるアニメーション（フェードイン・スライドイン・スケール変化）を発火。ユーザーの没入感を高めている
メニュー表示の横スクロール実装
個別料理の高画質画像を活かしつつ、PC・スマホで見やすい横スクロールカルーセルを実装。Swiper.jsの軽量化設定で読み込み速度を維持
CTAボタンの段階的配置
ファーストビュー・メニューセクション後・店舗情報セクション下と複数箇所に予約ボタンを配置し、ユーザーのモチベーションタイミングを捉えた誘導を意識した設計