デザインの説明
1.Webサイトの目的
サイトを見た営業先に「新しいけどしっかりした会社なんだな」という印象を持ってもらい、成約へ のハードルを下げたい。ゆくゆくはコンテンツで集客できるサイトに育てたいので、問い合わせ動 線は整えておいてほしい。
2.ターゲット像
中小企業の経営者やWeb担当者。年齢は30〜40代がメイン。
知的でスマートな印象のデザインを希望。配色も落ち着いたカラーが良い。
3.キーワード
知的 スマート 大人 落ち着いた 清潔感 紳士 さわやか 信頼感
4.デザインコンセプト
営業先への信頼を獲得して集客できるよう、コンテンツの読みやすさを追求して清潔感のあるデザインとする。
5.配色の意図
コンテンツの読みやすさ、そして清潔感を出すためにベースカラーを白に。そして信頼感を得るためにブルーを使用した。アクセントカラーはロゴの色と同じものを使用することでサイトに統一感が出るようにした。また、ロゴと同じ色にすることで会社のイメージも整いやすい。メインカラーはアクセントカラーと敵対しないよう同系色にし、その中でも清潔感、さわやかさが出る明度の高いブルーを使用した。フォントカラーはブルーベースよりの黒を使用して全体を見た時に色が浮かないようにした。
6.フォントの意図
和文:Noto Sans CJK JP
ターゲットが30〜40代の方のため読みやすいフォントを使用。明朝体と悩んだがロゴの文字が丸みを帯びていたためゴシック体を選択した。
欧文:Roboto
ターゲットが30〜40代の方のため読みやすいフォントを使用。和文のときのようにロゴと似たフォントを使おうとしたが、ターゲット像、読みやすさの観点から丸みを帯びたものは使用せず。RobotoはNoto Sans CJK JPとフォントタイプが似ていて相性が良いと判断。
7.ファーストビューのポイント
まだ新しい会社でこれから大きい企業に発展したいという思いがあるため、写真もこれからの未来を映し出すよう大きなビルを見上げているようにした。キャッチコピーからもクライアントの未来を成長させるという意図が感じ取れるため、今回の写真とした。文字を写真から飛び出して配置したのは、集客したい意図があるため写真よりも文章と問い合わせボタンの方が見て欲しいと考え、このような配置とした。ヘッダーのコンタクトの部分だけ背景色を付けているのもこのため。
8.その他工夫した点
写真と文章は重ねて表示させて視線の導線が少しでも短くなるよう設定した。
見出しとテキストでフォントサイズやフォントウェイトを変えてメリハリが出るようにした。
Read moreボタンはページ全体でカラー、サイズともに同じにして統一感が出るようにした。
知的でスマート、紳士さを表現するため、写真は人物を使用する場合はスーツ着用している人を選択した。
トップページの最初と最後の写真は似たものを使用することで統一感が出るため今回のサイトでも似た写真を使用した。
トップページと下層ページでデザインの違いが起こらないよう意識し、1つのサイトで統一感が出るようにした。
かっちりしたイメージを出すため、しっかり感が出るようメインカラーでのデザインは四角を意識した。サービスのページでリード文の部分が丸のデザインをしているのは、オーダーメイドで課題を解決するという柔軟性を表現するためである。
お問い合わせフォームでは必要最低限のあしらいにして、入力に集中できるようにした。