【コーポレート】コンサルティング会社

クレジット

SHIZUKA ITO

WEBデザイナー

制作ノート

【デザインの説明】

1. Webサイトの目的

前提：「中小企業に特化したオーダーメイドの経営支援」を掲げ、中小企業向けのブランディングやマーケティング、コンサルティング事業を行なっている会社。設立から一年半、従業員数３めいの新しい会社。

サイトを見た営業先に「新しいけどしっかりした会社なんだな」という印象を持ってもらい、制約へのハードルを下げたい。ゆくゆくはコンテンツで集客できるサイトに育てたいので、問い合わせの導線は整えておいてほしい。

2. ターゲット像

中小企業の経営者やWEB担当者。年齢は３０−４０代がメイン。

コンサルティングを導入したいと思い、すでにかなりの企業を検討済み。今後長く付き合っていけるような信頼できそうな企業を探している。

3. キーワード

知的、スマート、信頼感

4. デザインコンセプト

”知的・信頼できそう”という印象を持ってもらうため、ブルーをメインカラーにしてダークでマットなトーンにすることでスマートさを演出。

あえてモノクロにしてシックな雰囲気を出したが、光が多く入った画像も使用することで明暗の強弱をつけ、光と影のバランスをとった。

設立したばかり、頼りなさそうというイメージを払拭するような、”知的、堅実、スマート、頼り甲斐”をイメージしたデザインにした。

5. ファーストビューのポイント

キャッチコピーである「ともに未来を作りたい」に合わせて、空と街が映った東京のビル群を選択。正面から見渡す配置が、「未来、希望、創造」を連想。モノクロにすることで、モダンさとスマートさを。広がりのあるレイアウトの写真のため、モノクロでも圧迫感を少なくすることができる。モノクロページの中で、大きめかつメインカラーのCTAを右下に持ってくることで、ページ内で存在感が生まれる。視点が自然に右下にいき、CVを無意識に促すことができる。

ロゴとハンバーガーメニューの色を統一し、リズムと一体感を出した。

6. フォントの意図

【事実・表層】

欧文：Roboto、和文： YuGothic

→【特徴・印象】

RobotoはGoogleのデザイナーが開発したフォント。AndroidやChromeOSのシステムフォントに採用され、Googleフォントの中でも最も人気のあるフォントである。ユーザーがよく目にしているので馴染み深く、違和感を与えずに読み進めてもらうことができる。

また、ビジネスデザインでよく使われるHelveticaと比べると、細部がシンプル化されており、無機質かつ癖がなくスマートな印象のフォントである。

YuGothic はMacでもWindowsでも共通で使え、柔らかく明るさもあるのが特徴の書体。

ただし、WindowsとMacではデフォルトのフォントウェイト設定が違うので、コーディングをする際はフォントウェイトの設定に注意が必要である。

https://qiita.com/Shinji-m/items/f38987692a4dffd0b1f4

→→【目的やターゲットを踏まえた狙い】

Aboutページや事業内容など、読まなければいけないコンテンツが多いため、フォントはなるべくシンプルで読みやすく、ユーザーに馴染みのあるものを選んだ。Roboto、Yugothicともに類似する他のフォント（Hevleticaやメイリオ）に比べるとスッキリして少し細身でスタイリッシュでり、サイトのコンセプトにも合っている。ターゲットは仕事が忙しく時間を無駄にしたくないビジネスマンであるため、フォントで遊ぶことはせず、見やすさを心がけ、オシャレ感よりも合理性を意識した。

代表メッセージにのみYuMinchoを使うことで、手紙感や人の温もりを表現。同じ YuシリーズなのでGothicとの相性もあっている。

7. 配色の意図

■メインカラー

ネイビーブルー。ブルーが信頼、リラックス、安心を与え、多くの企業がビジュアルアイデンティティに使うのに対し、ネイビーブルーはその印象を包括しながら、さらにフォーマルな印象を与えることができる。

知的、スマートというクライアントの要望をベイビーブルーで表現した。

■ベースカラー

寒色を少し入れてトーンを明るく整えた薄いグレー。白ではなくグレーにすることで、モダンさ、画像との調和を図った。

■アクセントカラー

ロゴに使われているグリーン寄りのブルー。ハンバーガーメニュー、フッターで使用することで、企業カラーを潜在的に覚えてもらうよう意識した。

フォントカラー

セクションタイトルにはメインカラーを使用。

テキストにはブルートーンの濃いグレーを使用して、全体と馴染ませた。