BLOGメッセージや想いを、目に視えるカタチに【#キョウノデザイン03】

ヤマダ
  1. HOME
  2. ブログ
  3. デザイン
  4. メッセージや想いを、目に視えるカタチに【#キョウノデザイン03】

こんにちは。ヤマダです。
今日も素敵なデザインのサイトをご紹介します。

目次

  1. サイトのご紹介
  2. 制作コンセプトを推考する
  3. 伝えたいメッセージを、目に視える形にする
  4. 全体的にちょっと暗いからこそ、有彩色や白が映える
  5. ワクワクするギミック・要素・あしらい
    1. 「イラスト+サイト」の難しさとパワー
  6. まとめ

サイトのご紹介

東京に本社がある、デジタルマーケティングとクリエイティブに強みがある企業様です。

制作コンセプトを推考する

デザインに込められた意味や意図を探るために予想してみます。

企業の特徴

  • 事業領域…「プランニング/プロデュース/ディレクション」と「リサーチ/アナリティクス」、2つの柱
  • 顧客の抱える課題を、デジタルマーケティングを通じて解決する。

キーワード

「クリエイティブ」「独創的」「先進的」

さらに踏み込んで考えると

  • 経営理念…「伝えたいコトを伝わるカタチに/ Bring your Message to LIFE」
  • 理念に込められた想い…お客様が伝えたいメッセージを、多彩な知識・技術を用いて具現化する
  • 社名にある「dot」

サイトを見ていくとわかりますが、企業コンセプトを形に落とし込むのが上手過ぎて、めちゃくちゃ凄いサイトです。

相変わらずのボキャ貧です。切り替えて中身について。

伝えたいメッセージを、目に視える形にする

一番目に留まるところはここでした。
円や多角形を組み合わせたアイコン・見出しは、恐らく社名の「dot」から。

このデザインの一番の良さは、デザインがメッセージ(経営理念)と完全にシンクロしているところだと思います。
また、そのメッセージ性を想起させることを意図に、経営理念のテキストはヘッダーにも配置させて、追従要素となっています。胸に響きますね。

「この会社なら、ウチの会社の課題を解決してくれるかもしれない!」といった、ある種のワクワク・期待感を抱かせる大事な要素だと思いました。

あと細かいところですが、「MORE」とか「BACK」とか、こういった部分もコンセプトを表現しているのが素晴らしいですよね。

全体的にちょっと暗いからこそ、有彩色や白が映える

背景はグレー・先述のアイコンや見出しは黒ベースなので、少し重たく見えそうですが、このサイトは要所要所での有彩色や白の使い方が絶妙で、バランスが取れているなと感じました。

特に、メインビジュアルで虹色のグラデーション置く発想が凄いです。僕だったら絶対思いつかない…。

また、「WORKS」のカードも白ベースなので、いい具合に目立っています。
ホバーアクションもめちゃ好きです。

あと影の使い方もオシャレですよね。全体的にのっぺりとした印象にならず、メリハリがあります。

ワクワクするギミック・要素・あしらい

このサイトには、「面白いな」って感じる要素が沢山見られます。

例を挙げるとドロワーメニュー。他のサイトではなかなか見られないので面白いですよね。

「WORKS」ページでは、メインビジュアルをblurでぼかしています。シンプルでかっこいいです。

また、他ページとは打って変わって採用情報ページでは、鮮やかな有彩色・グラデーションが良く映えてます。僕が入社志望者だったら絶対ワクワクすると思います。

「イラスト+サイト」の難しさとパワー

また、所々に配置されたイラストも好きです。

てか、「イラスト+サイト」って地味に難しいと思うんですよね。安易に取り入れると一気にテイストもっていかれちゃうので。

また、トレンドの影響を受けやすい要素でもあります。経年劣化しやすく、注意が必要だと思います。

個人的には、イラストを取り入れるのであれば、いっそブランディングまで視野に入れてやるべきだと考えています。

ちょっと話変わるんですが、最近イラストで世界観作ってるサービス増えましたよね。直近だとNotionとか。

これは以前TLで見かけたツイートですが、ほんとこの通りだと思ってて。

サービスだけでなくWebサイトにおいても、イラストはそのプロダクトの世界観を演出する上で大きなパワーを持っていると感じています。

まとめ

メッセージや想いを目に視えるデザインに落とし込むのって、正直すごく大変です。

僕もまだまだ自信もって「できる!」という人間ではないので、今後もこういった素敵なデザインから沢山勉強して、デザイナーとして成長していきたいと思います。