続きまして、画面に表示された際のイメージ(スマートフォン)をお送りいたします。
続きまして、画面に表示された際のイメージ(PC)をお送りいたします。
続きまして、スライド別のデザイン(スマートフォン)をお送りいたします。
続きまして、スライド別のデザイン(PC)をお送りいたします。
続きまして、スマートフォンページのデザインをお送りいたします。
ベルハウスWebご担当者さま
夜分に恐れいります。
先日はお出しさせて頂いた質問などに
ご回答頂きありがとうございました。
デザイン案を制作させて頂きましたので
提出させて頂きます。
少しでも貴社さまのご意向を叶えられる
デザインを制作できればと思います。
★PCページのデザインからお送りいたします。
追って、スマートフォンページ、
各種見え方のイメージ違いのデザインを
お送りさせて頂きます。
ーーーーーーーーーーーーーーーーーー
デザインについて
ーーーーーーーーーーーーーーーーーー
【構成】
・提供して頂いたレイアウトのご用件を元に、
コンテンツの配置を検討させて頂き制作しております。
【トーン&マナー】
・ご所望の青系のトーンを、ロゴのカラーを基調にして、
現状のイメージを踏襲しつつ、
要所要所にて深いカラーを使うなどし、
シンプルさとメリハリを感じられることを目指しました。
・写真を多く使用しているため、ユーザーが得る情報量が
非常に多いので、インターフェースは白を基調とした
清潔感と信頼感のあるトーンにして、写真やコンテンツが
最も引き立つことを意識しております。
・2、3、4カラムとグリッドルールに沿って
要素をレイアウトすることで、整頓された印象をもたせ、
レスポンシブサイトとしての機能性も持たせております。
・使用するフォントはGoogle Fontsの「Notoシリーズ」を採用し、
デジタルデバイスとの親和性を担保し、
刷新感も演出できるようにしました。
【デザイン】
・現行サイトとレイアウトを変更させて頂いている箇所も
幾つかございますので、別紙(「★デザイン案のポイント」)の
資料の番号に添って以下に記載させて頂きます。
ーーーーー
⑤資料請求
→資料請求のコンバージョンエリアとなりますので
コンテンツに埋もれないようにきちんと独立させ、
ヘッダーの右上に配置し、ユーザーにとって
よりわかりやすい位置にデザインしました。
①スライド4枚
→写真を全面に使い、ダイナミックにレイアウトし、
配置する文字も最小限の表現にしぼり、
スタイリッシュな印象を目指しました。
4枚中3枚のスライドにリンク先が存在するので
そのことをボタンをつけることで明示的にしました。
②イベント情報
→イベントのタイトルに加え、イベントの日程が
よちひと目でわかるようなデザインにしました。
画像素材が無い場合も汎用的な表現にしております。
→イベントが近日開催されない場合はこちらの
エリアは非表示する仕様を想定しております。
③④⑨〈Bellhouse Quality〉
→下部に配置されていた「⑨狭小住宅」を上部に移動し、
〈Bellhouse Quality〉という、貴社様のオリジナリティや
品質を紹介するエリアとして設けました。
→画像全面にレイアウトし、ダイナミックで象徴的な
印象になることを目指しました。
→「④自然素材」は、より動画を閲覧してもらえるように、
いくつかTOPページに動画を直接再生できるような
デザインにしております。
→以下共通で、見出しの下に貴社様のロゴのダイヤのような
形をモチーフにしたあしらいを施し、細やかな
デザイン性を感じられるようにしました。
⑥⑦〈ベルハウスの土地サービス〉
→こちらのエリアは、上下に写真をしっかり
見せるエリアに挟まりますので、
ページ全体のメリハリを持たせるために、
深めのブルーとグリーン調で写真にカラーをかけて
表現しております。下部に配置される⑫と同じ
遷移先であることをこの色味でわかりやすくする
意図もございます。
⑧〈施工事例〉
→現行サイトよりも大きく写真を用い、
かつInstagramのような正方形の画角を用いることで
より魅力的な物件の見せ方を表現しました。
⑩〈お客様の声〉
→お客様のコメントをより大きく打ち出した
デザインにしております。
⑪〈ブログ〉
→写真と文章を分け、日付と内容がよりわかりやすい
レイアウトを施しました。4つ目の項目は
今後追加されることを想定してダミーでお作りしております。
記事が増えましたら下部の「moreボタン」を
追加する対応ができればと思っております。
ーーーーー
・電話のお問い合わせや、資料請求、無料相談などのエリアは、
PC、SPともに画面下部に常に追従してくる想定で
お作りしております。
【備考】
・コンテンツエリアの幅は、最大1122pxで制作しており、
こちらの数値は30pxのマージンで、2、3、4、6、8カラム
といった様々なサイズに均等に分けることができる
汎用性の高いグリッドを刻める数値となっております。
以上でございます。
長文でのご説明となり
お手数おかけして申し訳ございません。
引き続き何卒よろしくお願いいたします。
メンバーからのコメント
続きまして、ご説明のための資料をお送りいたします。