プレーヌモックアップ画像

喫茶店のWEBサイトを新設させていただきました。

サイトリンク

喫茶プレーヌ

担当

デザイン・コーディング

制作時間

20日

コンセプト・ターゲット

店舗の視察やオーナーからの聞き取り調査を行ったところ、近隣のオフィスに勤務する男性ビジネスが大半を占めていました。
店舗の利用目的としては、モーニング・ランチ・社外打合せでの利用が多いことが分かりました。
以上のことから、想定ユーザーを30~50代の男性ビジネスマンに設定しました。 また、ランチの利用が非常に多いことから、提供メニューの情報を全面に出すことにしました。

デザインについて

提供メニューへの導線が分かりやすい ように、ヘッダーナビゲーションは「トップ」「フード」「ドリンク」のみに絞りました。
また、トップページにもおすすめのフードとドリンクを表示し、なるべく短時間で目的の情報へ辿りつけるように工夫しました。
カラーはユーザーの年齢層も高めのため、落ち着きとレトロ感のある彩度の低い茶色に設定しました。
フォントは「ヒラギノ角ゴシック」と「游明朝体」を使用し、レトロ感と可読性の高さをだしました。
提供メニューについては、種類が多いため、切り替えタブを使い、スクロールの手間が少なくて済むように工夫しました。

コーディングについて

PC、タブレット、スマートフォンで表示できるようにレスポンシブ対応をしました。
また、後からの修正が容易になるように、コメントアウトでページ構成をわかりやすく記述するように工夫しました。