DESIGN FAM 様
お世話になります。
店舗Webサイトの件、ご依頼内容を拝見しまして
個人的にも好きなテイストで、ぜひ制作に携わってみたいと思い
コンペに参加させて頂きました。
【全体】
PC用デザイン
制作データ画面幅：1440px
コンテンツ幅：980px
無彩色ベースに茶系を加えて落ち着いた配色になりますが、
白黒のコントラストがカジュアルな印象を与え、
写真・コンテンツが映えるようデザインしました。
外観壁のブルーはオンマウス時の演出や下層ページの一部などにも
アクセントとして使用する想定です。
写真と背景デザインで雰囲気が伝わるように
その他のデザインパーツは飾り過ぎず、極力シンプルに統一しました。
遊び心をもたせるような表現はほんの一部にしています。
今後のスマホ対応、コンテンツ追加・更新のため
画像部分は差し替えのみ、テキスト部分はhtmlコーディングで
対応可能なデザインとしています。
【メイン】
中央に配置した店舗ロゴにヴィンテージ風のタイポグラフィを加えました。
これを常に固定したまま、店舗の写真が切り替わる想定です。
画面サイズに合わせてファーストビューに収まる仕組みになります。
○参考1：簡易なものでしたら、こちらのようなイメージです。
http://rhythmwp.wpengine.com/slider-background/
○参考2：今後、機会があれば撮影した動画を用いても効果的です。
http://rhythmwp.wpengine.com/video-full/
右端のアイコンとメイン直下のメニューは画面スクロールに追従します。
三本線アイコンをクリックすると、画像3枚目のようにナビゲーションを表示、
電話アイコンをクリックすると、モーダルボックスで連絡先を表示します。
○参考3：下記サンプルの仕組みを用います。スマホ・タブレットにもそのまま使えます。
http://tympanus.net/Development/PerspectivePageViewNavigation/index2.html
【コンテンツ】
情報をグルーピングし、スクロールによって
1画面ごとに1〜2グループが収まるようにする事で
ユーザーもサイト構造を掴みやすく、情報を整理して伝える事ができます。
また、背景デザインや動きの演出を取り入れやすく、
写真が別のものになったり内容が追加になった場合も、
スマホ対応や更新性に優れる点で、この構成にしました。
メイン直下は「コンセプト」「スタッフ」「アクセス」の導線として
売りポイントを訴求する文章をライティングしました。
以下、ユーザーの目的に応じてコンテンツに遷移できるようにしています。
【最後に】
「スタッフ」ページ導線となる写真（スタッフ様の写真）以外は
ご支給いただきました写真と、無料イメージ素材です。
ご要望のほか、追加変更等ございます場合も対応させていただきます。
お気軽にお申し付けいただければと思います。
ご査収の上、ご検討のほど宜しくお願いいたします。
