デザイン分析日記37
Webサイトから学ぶ、デザイン分析
こんにちは。
デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。
今回ご紹介するのは、QANDO様（https://qando.co.jp/）です。
表現の意図の仮説
今回のカンド様のホームページは、実績を分かりやすく見せることを軸にしながら、「この会社と一緒に仕事をしたい」「制作を依頼したい」と感じてもらうことを目的として設計されていると考えました。
そのため、サイト全体はモダンでシンプルなデザインを採用し、余計な装飾を抑えることで、制作実績そのものが際立つ構成になっています。その為、企業としての信頼感や実力が伝わりやすい設計になっていると感じました。
一方で、単にシンプルなだけではなく、ホバー時のモーションや細かなインタラクションによって遊び心も加えられていました。
これにより、洗練された印象を保ちながらも、クリエイティブ企業としての柔軟さやクリエイティビティを感じさせるデザインになっていると考えられます。
結論、「実績の見やすさ」と「クリエイティブらしさ」のバランスを取りながら、ユーザーに信頼感と期待感を与え、お問い合わせや相談へとつなげることを目的として制作されているのではないかと考えました。
サイトをどのように感じたのか？（私）
このサイトを見たとき、「モダンさ」「スタイリッシュさ」「洗練」「シンプルさ」「ちょっとした遊び心」を感じました。
どのような要素で感じたか？
（モーション・レイアウト・フォント）
①FV（ファーストビュー）
ファーストビューは、「QANDO」のロゴと、「クリエイティブの力で世の中の風景を変える」というキャッチコピーのみで構成された、非常にシンプルなデザインになっていました。
しかし、ロゴのフォントや文字間、余白設計によって、洗練された印象が生み出されていると感じました。
一般的に、要素を減らしたデザインはシンプルになる一方で、どこか物足りなく見えてしまうこともあります。
しかし、余白の取り方や文字の配置バランスが丁寧に設計されていることで、強い存在感と上質さを感じることができました。
そのため、ファーストビューを見た瞬間に、「デザインに対するこだわり」や「クリエイティブ企業としてのレベルの高さ」を感じました。
また、シンプルな構成の中にも遊び心が取り入れられていました。
ロゴの「QANDO」にカーソルを合わせると、文字が滲むようなホバーアニメーションが実装されており、思わず触れてみたくなる仕掛けになっています。
細かなインタラクションによって、シンプルなデザインの中にアクセントが生まれ、クリエイティブ企業らしい表現力や遊び心が感じられると考えました。
②フォント
日本語フォントには「Noto sans jp」、英語フォントには「Aktiv Grotesk」が使用されていました。
1. 「Noto Sans JP」が使用されている理由
まず、日本語フォントには「Noto Sans JP」が使用されていました。
Noto Sans JPは、馴染みがあると言っても過言ではないくらい汎用性の高いフォントでございます。特徴としては、高い可読性と視認性を兼ね備えており、クセの少ないデザインでございます。
また、直線的で無駄のないフォルムは、モダンで洗練された印象を与える特徴も持っています。
今回のサイトでは、制作実績やサービス内容を分かりやすく伝え、最終的にはお問い合わせへとつなげることが重要な目的であると考えられます。
そのため、デザイン性だけでなく、情報の読みやすさを担保できる「Noto Sans JP」が採用されているのではないかと感じました。
さらに、シンプルで主張しすぎないフォントであるからこそ、サイト内の実績やビジュアルを引き立てる役割も担っていると考えられます。
2. 「Aktiv Grotesk」が使用されている理由
英語フォントには「Aktiv Grotesk」が使用されていました。
Aktiv Groteskは、スイススタイルの流れを汲むサンセリフ体であり、無駄を削ぎ落としたミニマルなデザインが特徴のフォントでございます。
「Aktiv Grotesk」が使用された理由としては、「洗練された印象」・「スタイリッシュさ」・「プロフェッショナルさ」を自然に演出する為に使用されていると考えました。
また、日本語フォントのNoto Sans JPとも相性が良く、サイト全体に統一感を与えていました。
「余計な装飾を加えず、実績そのものを見せる」というデザイン方針が感じられるため、Aktiv Groteskの持つミニマルでモダンな印象が、その世界観をさらに強化していると考えました。
二つのフォントから、実績やコンテンツを引き立てるための設計になっており、クリエイティブ企業らしい引き算の美学を感じました。
③レイアウト※PC表示を基準に観察しています。
本サイトでは、サイドの余白が約85pxに設定されており、各セクションにおいても、タイトルとコンテンツの間に120〜140px程度の余白が設けられていました。
また、本文の行間についても、文字サイズに対して約1.7倍程度のゆとりを持たせた設計となっていました。
これらの余白が全体を通して比較的均一に設計されていることで、サイト全体に統一感が生まれ、洗練された印象につながっていると感じました。
余白を十分に確保することで情報同士が干渉せず、ストレスなくコンテンツを読み進めることができると考え、モダンさに加えて、「上質さ」や
「見やすさ」が自然と演出されていると考えました。
また、各セクションのタイトル位置が常に左上から始まるよう統一されていた点も印象的でした。その為、「視線の流れ」「情報のリズム」「読み進めやすさ」に繋がっており、ユーザーが迷うことなくスクロールできる構成になっていると感じました。
そして、特に印象的だったのがWorksセクションの写真配置です。
写真はグリッドレイアウトによって整然と配置されており、実績を一覧で見やすく閲覧できる構成になっていました。（構成としては、横3列 × 縦5行程度のグリッドレイアウトになっていました。）
規則的に並んだ写真群はモダンで洗練された印象を与えやすく、今回のサイト全体の世界観とも非常にマッチしていました。
実績を主役に見せる制作会社のサイトにおいて、とても参考になるレイアウト設計だと感じました。
このサイトはどのターゲットに向けて作られている？（仮説）
主なターゲット層は、企業の広告担当者やマーケティング担当者、そして発注に関わる意思決定者であると考えました。
その理由として、カンド様は2020年設立と比較的新しい会社であるため、問い合わせや相談を検討している企業担当者は、「どのような会社なのか」「どのような実績があるのか」を確認する目的でホームページを訪れるケースが多いと考えられます。
そのため、豊富な制作実績やクリエイティブの質を分かりやすく見せる構成を採用することで、「この会社なら安心して依頼できそう」「一度相談してみたい」と感じてもらうことを目的としているのではないかと考えました。
また、サイト全体を通してシンプルで洗練されたデザインが採用されていることから、自社のデザイン力やクリエイティブ力そのものをブランディングとして伝える役割も担っているように感じました。
採用サイトとしての側面も兼ねていると考えられます。
事業内容（どういったプロジェクトを進行しているのか）、働くメンバーも掲載されているため、転職を検討しているユーザーにとっても、企業理解を深めるための判断材料となる構成になっていました。
写真に注目
全体的に、明瞭で彩度の高い写真が採用されており、作品そのものの魅力や世界観が伝わりやすい写真を使用していると感じました。
また、実績紹介の写真では、ブランドや制作物が画面の中心に配置される構図や、写真の解像度も高く、細部まで綺麗に見える写真を使用されていました。
実績そのものが営業資料の役割を担うため、このような写真品質へのこだわりも信頼感につながっていると感じました。
また、下部に掲載されているメンバー写真も印象的でした。
人物ごとに体の向きは異なっているものの、顔は正面を向いている写真で統一されていました。
画面全体に適度なリズム感や動きが生まれながらも、統一感が損なわれていませんでした。
すべてを同じ構図にすると単調になりやすく、逆に自由すぎるとまとまりがなくなってしましますが、「体の向きは変えるが、顔の向きは揃える」というルールを設けることで、自然な変化と統制のバランスを取っているように感じました。
こうした細かな写真ディレクションによって、サイト全体の洗練された印象や、クリエイティブ企業らしい感性が表現されていると考えました。
最後に
今回の分析を通して学んだのは、「モダンで洗練されたデザイン」は、派手な演出や装飾によって生まれるのではなく、余白・フォント・写真・情報設計など、一つひとつの要素を丁寧に積み上げることで成立するということです。神は細部に宿りますね、、、。
シンプルなデザインほど誤魔化しが効かず、設計力や思想がそのまま現れる。そのことを改めて実感できたホームページでした。
私自身、シンプルで洗練されたデザインが好きだからこそ、今回のサイトから得られた学びは非常に大きかったです。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
