架空の日英カフェWebサイト※スマートフォンレスポンシブ対応済み(自主製作)

モックアップ引用元↓

http://www.freepik.com

Designed by d3images/Freepik

WebサイトURL↓

http://seina109web.html.xdomain.jp/website/index.html

トップページスクリーンショット(PC版)↓

トップページスクリーンショット(スマホ版 ※768px以下)↓

🔸目的

アメリカ出身のマスターが経営するカフェを想定して日英対応のサイトを作成。カフェの認知度と集客率アップ。

🔸ターゲット

美味しい食べ物とコーヒーをゆっくり楽しみたい客層。また日本人だけでなく日本在住の外国人や日本を訪れている外国人の交流の場となるようにしたい。

🔸工夫したポイント

・海外向けサイトのような、シンプルながら洗練されたデザインを目指しました。国籍問わず、誰にでも来てほしい、一人でも皆でもゆっくりくつろげる雰囲気がコンセプトなので、温かみのあるオレンジと、コーヒー豆を連想させるブラウンをキーカラーにしてデザインしています。

・ファーストビューは3枚の写真を大きく配置し、順番に切り替えることで、インパクトを出しつつカフェの雰囲気が伝わるようにしました。また、サブタイトル部分等に動きをつけることで、スクロールした時に飽きずに見てもらえるよう工夫しました。

・スマートフォン用では、pc版の雰囲気をなるべく壊さないようにしつつ、横長で見難い部分等は一部縦長のレイアウトに変更しています。(ナビゲーション部分の配置やMENUページ等)

※架空サイトの為各種SNSへのリンクはダミーです。What's newの部分についても、クリック後はFackbookの投稿に飛ばす想定ですが今回ダミーの為どこにも飛びません。

※メール欄部分についても今回はプログラミング部分は実装していません。