プロジェクト概要
お店の雰囲気と料理のおいしさが伝わるサイトを目指して制作いたしました。
WordPressで構築した、大阪市北区中津のもんじゃ焼き店「もんじゃ焼き koge」の店舗サイトです。大阪メトロ中津駅から徒歩1分、阪急梅田駅から徒歩6分の立地で、もんじゃ焼きとジャパンウイスキーを和モダンな空間で楽しめるお店です。menu・kodawari・accessの3セクションからなる1ページ構成で、ランチのかた焼きそばと五目天津飯、9種のもんじゃ、酒のアテと一品料理の価格、こだわり、住所・営業時間・最寄り駅からの徒歩分数、Instagramの最新情報を日英併記で掲載しています。
梅田に近い中津という立地から、近隣で働く人や観光客まで幅広い来店客に、下町の味であるもんじゃ焼きのおいしさと、和モダンな空間やジャパンウイスキーといった同店ならではの雰囲気を短時間で伝える必要がありました。メニューやアクセスは海外からの来店にも対応できるよう、英語でも読める構成が求められました。
鉄板の上で湯気を立てるもんじゃの写真を全面に敷き、手書き風の「koge」ロゴと「あなたの心を溶かす、下町の味。」のコピーを白で重ねて、料理と店の雰囲気を先に伝えました。ナビは右端のmenu・kodawari・accessの3タブだけに絞り、ページもこの順に並べて、知りたい情報へ最短で届くようにしています。配色は黒と茶に白文字で和モダンの空気感を出し、メニューとアクセスは日英併記にしました。
制作のポイント
鉄板の上のもんじゃ写真を画面いっぱいに敷く
最初の画面は、鉄板の上で湯気を立てるもんじゃの写真を画面いっぱいに敷き、中央にヘラのイラストと手書き風の「koge」のロゴ、「もんじゃ焼」「あなたの心を溶かす、下町の味。」の文字を白で重ねています。画面の下端には「koge Monjayaki」の英字が帯状に並び、スマホでは中央に下向きの矢印を置いています。
右端の縦タブでmenu・kodawari・accessへ移動する
ナビは右端に縦に並んだ「menu」「kodawari」「access」の3つのタブだけで、色を変えた帯で区切っています。ページもこの3つに沿って、メニュー、こだわり、アクセスの順に並び、最後にInstagramの最新情報を載せています。配色は黒と茶に白文字を合わせています。
ランチと夜のメニューを価格つきで載せる
メニューはランチの「かた焼きそば」「五目天津飯」の2品、豚もんじゃからカレーもんじゃまで9種のもんじゃを日本語と英語の名前で並べ、「酒のアテ」は品名と価格を一覧にしています。アクセスには住所と最寄り駅からの徒歩分数を日本語と英語で記載しています。WordPressで構築しています。
デザイン
