Project Overview
醤油・味噌・豚骨・つけ麺を提供するラーメン店「心燃」のブランドサイトです。 世界観の演出と、来店につながる実用情報の両立を意識して制作しました。
制作の背景と目的
「毎日仕込むスープ、香り立つ麺、最後の一口まで飽きさせない設計」という 店のこだわりを、Webサイトでそのまま体験してもらうことを目的としました。 ダークな背景色と料理写真のコントラストで食欲と期待感を高めつつ、 メニュー・営業時間・アクセスという来店判断に必要な情報へも 迷わずたどり着けるナビゲーション設計を意識しています。
| カテゴリ | Brand / Food / Restaurant |
|---|---|
| 制作範囲 | 構成設計・デザイン・コーディング |
| 使用技術 |
HTML
CSS / Sass
JavaScript
|
| プロジェクト | Project 04 |
Design Points
飲食店サイトに求められる「世界観の演出」「食欲の喚起」「来店への導線」を軸に、3つの設計ポイントを意識しました。
世界観を伝えるビジュアル設計
チャコールグレーとダークブラウンを基調とした重厚な配色に、 湯気の立つラーメン写真を大きく配置。 「心を燃やし、スープを炊く。」という力強いキャッチコピーとともに、 他店にはない店の個性と熱量を表現しました。
気分で選べるメニュー設計
「今日の気分で選ぶ」というセクションで醤油・味噌・豚骨・つけ麺を 写真と一緒に並列表示。「何を食べようか」という来店前の期待感を高め、 黒背景の人気メニューセクションで具体的な注文イメージを醸成しました。
来店判断を支える実用情報
営業時間・定休日・電話番号・アクセスをページ末尾にまとめて配置。 「行こうかな」と思ったタイミングで必要な情報がすぐ確認できるよう、 電話ボタンをCTAとして目立たせる設計にしました。
制作で意識したこと
「見た人が行きたくなるサイト」を目標に、演出と実用性の両立を意識しました。
食欲を刺激するビジュアルファースト設計
ファーストビューは文字情報を最小限に抑え、 湯気の立つラーメン写真とキャッチコピーだけで構成。 スクロールするにつれてスープ・麺・具材の素材写真が現れ、 「うまさの理由」を視覚的に体験できる流れを設計しました。
ダークトーンと赤の配色コントロール
背景のダークグレー・チャコールに対し、 アクセントカラーとして深みのある赤（エンジ）を使用。 ロゴ・CTAボタン・セクション装飾に一貫して用いることで、 ブランドの「熱さ」と「こだわり」を色で表現しました。
スマートフォンからの来店を意識した導線
飲食店への検索・来店判断はスマートフォンが主流です。 「電話する」ボタンをtap-to-callで実装し、 営業時間・定休日・アクセスをページ下部にまとめて配置。 「行く」と決めた瞬間のアクションを最短で完了できる設計にしました。
全ページナビゲーションの整備
ホーム・当店のこだわり・メニュー・よくある質問・店舗情報・お問い合わせと、 飲食店サイトに必要なページ構成をヘッダーナビに整理。 メニューはドロップダウンで種類別に展開できる設計にし、 目的のページへ最短でたどり着けるナビゲーションを実装しました。
Page Structure
世界観への没入から、来店判断・行動へ。飲食店サイトとして必要な要素を順序立てて配置しました。
Related Works
世界観・ブランド感を重視した他の制作実績もご覧ください。