キムカツはなれ

単なる店舗紹介ではなく新業態そのものを紹介する役割を持つサイトのため、まずは「キムカツブランド」や「はなれ」の特徴、展開規模を伝えた上で、メニューや店舗情報へつながる構成にしました。
一方で、店舗利用を目的とするユーザーが必要な情報へすぐに進めるよう、ナビゲーションに視認性の高い予約ボタンを設置しています。また、当初トップページの店舗情報下に配置していた「お知らせ」をファーストビュー直下へ移動させるなど、ブランド訴求と店舗利用の双方を意識し、ユーザーが迷わず必要な情報にたどり着ける設計を心がけました。

ファーストビューには、「食の壁を越えていく。世界の食を変えていく。」というキャッチコピーを配置しました。
サイト制作に合わせて撮影された、ミルフィーユカツだけを載せた一皿の写真を大きく使用することで、「日本発のミルフィーユカツが食文化を超える」という新業態のコンセプトを直感的に表現しています。

外国人ユーザーの利用を見据え、クライアントの要望により日本語・英語の2言語に対応しました。英語原稿は、クライアントが作成したものを海外チームが確認したものをもとに、日本語サイトとの内容にズレが生じないよう細かく調整を重ねています。
また、日本語サイトでは縦書きを中心とした表現を採用していますが、英語サイトでは横書きに適したレイアウトへ変更。それぞれの文字の向きや読み方に合わせて、デザインを最適化しました。

今後の店舗展開を見据え、増えていく情報をスマートに追加できる構造を検討しました。すべての店舗情報をページ上に並べるとページが長くなるため、必要な店舗をクリックして詳細を確認できるモーダル形式を採用し、今後店舗が増えても追加しやすい構造としています。
また、ハラル対応に関する証明などの詳細情報はフードメニューページに「ハラルポリシー」としてまとめ、トップページとは明確に情報を棲み分けました。

スマートフォンでの表示では、縦長の画面でも読みやすくなるよう、文字の向きや地図、あしらいなどを画面幅に合わせて再配置しています。
JavaScriptによるスクロール時の表示スピードには、日本らしい「スッと差し出す」所作のイメージを取り入れました。また、店舗情報のモーダル制御や、PHPを用いたお問い合わせフォームも実装。予約については外部予約サイトを利用する運用に合わせ、お問い合わせフォームはサイト内で必要となる基本的な内容に絞って制作しました。