KOMEKO & TEPPAN Web制作｜米粉と鉄板
- HTML
- CSS
- JavaScript
- Figma
- Responsive
- Photography
OVERVIEW
プロジェクト概要
課題
HP が存在せず、2F で入口がわかりにくい店舗。 「どんな店か」「どこにあるか」を、来店前に伝える接点が不足していた。
目的
単価6,000円の店舗トーンに合うシンプルな構成で、 料理・外観・場所をひと目で伝える Web サイトを最短距離で立ち上げる。
ターゲット層 立地（学芸大徒歩5分・リピーター中心）と国産米粉100%という特性から、 来店前に店を調べる「健康・素材意識の高い40〜60代の女性」に設定。 検索して夫やパートナーを誘う“最初の意思決定者”だ。
PERSONA
ペルソナ
田中 久美子
- 気になった店を食べログ・Instagram でメモする習慣がある
- 「グルテンフリー」「国産素材」に反応する
- “ちょっといいたこ焼き屋”を夫や友人と探している
- 2階の店は不安で入店をためらった経験がある
「どんな店か・高くないか」を来店前に確認できないと一歩を踏み出せない。 この不安の解消が来店の鍵だと捉えた。
PROCESS
制作プロセス
-
PLAN
店舗トーンとターゲット価格帯から、必要なページ構成を決定。
-
SHOOT
素材がなかったため自ら撮影。外観・単品・集合写真をレイアウト想定で撮影。
-
DESIGN
余白を活かしたシンプルなデザインで、料理と価格帯のバランスを整える。
-
BUILD
HTML / CSS / JS でレスポンシブに実装。読み込みは軽量に保つ。
-
DELIVER
ホスティングまで完了し、検索流入の受け皿を整える。
GALLERY
成果物ギャラリー
SOLUTION
心理的ハードルを解く設計
来店前の不安を重要度順に3つ特定し、TOPで先回りして解消した。
店名から料理がイメージしづらい
TOPの主役をたこ焼きの写真に。言葉でなく写真で“何の店か”を一瞬で伝えた。
価格が読めず不安
おすすめを「1品いくら」で提示し、TOPで価格帯を可視化した。
2階で様子が見えず入りづらい
外観・内観写真を店舗情報としてまとめ、入店の心理的ハードルを下げた。
RETROSPECTIVE
振り返り・工夫した点
SHOT FOR LAYOUT
「料理写真」ではなく「レイアウトに乗る写真」を意識して撮影。 トリミング前提のサイズ・余白を計算しながら撮ることで、後工程の手戻りを最小化できた。
SIMPLE FOR PRICE
店舗の価格帯と空気感に過剰なデザインは合わない。 「映え」より「分かりやすさ」を優先したことで、来店前の安心感につながった。