デザイン分析日記20
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。週1〜2回のペースで続けていきます！（熱がこもりすぎると続かない気がするので…！）
今回ご紹介するのは、株式会社College8 (カレッジエイト)様（https://college8.jp/）です。
①なぜ良いサイトだと感じたのか？
このサイトを見たとき、真っ先に感じたのは以下のような印象でした：
第一印象：面白い世界観を持っているな〜です。
教育を主軸に活動されている企業様という点から、「将来に目を向ける姿勢」がサイト全体の世界観として強く感じられました。
社名にもなっている「College8（カレッジエイト）」には、ロゴにも使用されている「無限大」のモチーフが象徴的に取り入れられています。これは、教育プロデュースによって、社会にフィットする多様な人材を育て上げられる、無限の可能性と柔軟性を意味しているように感じました。
そうした価値観や理念が、サイト冒頭のメインビジュアルからも強く伝わってきており、非常に印象的でした。
配色も赤から紫といったグラデーションを使用されていること将来性や、わワクワク感を感じさせられる配色になっていると感じました。
また、グリットの線が使われ、きっちり整えられていることを視覚的にアピールする事で、きっちり・整理整頓さという観点から「誠実さ」も同時に印象を与えられるのではないかと考えました。
②このサイトはどのターゲットに向けて作られている？（仮説）
20~60代の男女問わず幅広い年代層に向けたもの、顧客の方、パートナー企業様、教育改善に興味があり、新しい事業を盛り上げたいと考える転職者向け
上記のターゲットになぜデザインが刺さると考えるのか？
彩度の高い赤・黄色・オレンジと、彩度を抑えた青のグラデーションを組み合わせた配色が特徴的です。この色設計は、教育改革への強い意志や、未来への希望や前向きなエネルギーを視覚的に表現しているように感じられました。
また、フォントには「Noto Sans JP」が使用されており、視認性と可読性を重視した設計となっています。
アイコンを活用した情報整理もされているため、サービス内容が直感的に理解でき、幅広い年代層や多様な顧客層にも配慮されたデザインであることが伝わってきます。
全体としては誠実で真面目な印象を受ける一方で、FVや各所に散りばめられたホバーアニメーションが、静的すぎない印象を与え、ユーザーにとって飽きを減らし、離脱防止を狙う構成となっています。これらの動的要素の活用によって、「他とは少し違う」「先進的な会社」というブランドイメージの形成にもつながっていると感じました。
このようなサイト設計は、転職を検討している方にとっても「ここでなら自分の未来を託せそう」と感じさせる希望や信頼感を生み出し、企業や事業への関心を高めることにつながっていると考えました。。
サイトで使われているフォントに関して
Noto Sans JP
■ 概要
「Noto（No Tofu）」という名前は「□（豆腐）」の文字化けをなくす、というコンセプトから。
世界中の言語・文字体系を網羅するためにGoogleが開発したフォントプロジェクトで、Noto Sans JP はその日本語版にあたります。
■ 特徴
多言語と統一感のあるデザイン
欧文・数字・記号が同じNoto Sans （ラテン文字版）と統一された設計。
日本語と英語が混ざる文章でもバランスが良い。
海外ブランドやグローバルサイトでも採用されやすい理由の一つです。
高い可読性とOS間の安定表示
スマホ、Windows、Mac、Androidなどどの環境でも見た目の差が少ない。
ストローク（線）が均等で、長文でも目が疲れにくい。
Webフォントとしても軽量で、読み込みが高速。
使用されているフォントは、ニュートラルで現代的（癖が少なく、どんなデザインにも馴染む）かつ清潔感・安心感を与えるフォントであるため、幅広い年代層や多様な顧客層に合わせて選定が行われていると考えました。
気になったセクションを見ていく。
1.FV
FVの表現
教育だから、ノートのようなデザインが施されていること。グリット線が変形してもどんな形にも柔軟にロゴが変形されるモーションは、無限の可能性を見出していると改めて、伺える。
また、マウスホバーをすることで、歪む仕様になっていることが、少しアクセント（遊び心）になっており、ユーザーの離脱防止の仕様になっていると考えられ、この仕様でも、柔軟さといった箇所が表されていると考えました。
2.セクション
「ミッション」セクションは、サイト全体の構成においても企業としての熱量を伝える役割を担っていると感じました。企業理念や価値観をストレートに伝えることで、訪問者の共感を誘い、信頼感を高める導線が意図されているように思います。
特に印象的だったのは、文字組の美しさと、それを支える細かな設計意図です。
タイポグラフィの設計：
赤字タイトル：22px／文字間1.76px
黒文字の太字タイトル：36px／文字間2.88px／行間52.2px
本文テキスト：18px／文字間1.44px／行間30.6px
番号付きの小見出し：14px／文字間1.12px
要素間の余白設計：
赤字タイトルと黒文字タイトルの間：38px
黒文字タイトルと本文の間：24px
番号同士の間隔：22px
文字サイズや行間、文字間を見てみると、タイトルとテキストでは2倍のジャンプ率や、文字間は.08emにて統一されており、一貫した設計が施されていることから視線誘導が非常にスムーズです。さらに、黒文字のタイトル部分にはすべて<span>クラスが適用されており、細かい文字間の調整までが丁寧に施されている点にも、細部へのこだわりが感じられました。
レイアウトの工夫：
右側に配置されているカードタイプのレイアウトは、最近のWebデザインでよく見られる「スクロールに応じてカードが重なって表示される」動的な演出が用いられており、視認性とインタラクション性を両立させています。
このような設計は、情報の塊を分解して、ストレスなく読み進めてもらうための工夫であり、特にミッションのような抽象度の高い情報を、ビジュアルとタイポグラフィの両面から伝える好例だと感じました。
3.セクション
Webサイト全体の印象を大きく左右するのがフッターセクションだと私は考えております。特にデザインが洗練されたサイトであればあるほど、フッターのクオリティが全体の完成度を左右するとも言えます。
今回のサイトでは、グリッドに沿った綺麗な整列がなされており、視覚的に非常に美しく、レイアウト設計の参考になる構成だと感じました。
構成要素としては：
ロゴとサイトマップをバランスよく配置（ブランド認知＋導線確保）
情報量は決して少なくないにもかかわらず、余白設計と整列によって圧迫感がなく、非常にすっきりとした印象になっています。
フッター箇所は、単に情報を「詰め込む」のではなく、何を伝えるべきかを取捨選択し、必要な情報を美しく見せる事が重要であると気付かされました。この情報整理がされているフッターは、無駄を削ぎ落としたデザインの好例だと感じました。
制作者としての学びと応用
配色・グラデーション設計 により、ブランドの世界観（教育×未来）を視覚的に伝える力をサイトから学べました。
タイポグラフィ（フォントサイズ・文字間・行間）の数字設計が明確で、「読みやすさ × 意図的な視線誘導」の両立がされている事。
レイアウト設計（グリッド線・余白・カード重なり）などから、整然とした構成の中に動きやリズムをもたせる手法が学べました。
「無限大」のロゴモチーフや、教育プロデュースというコンセプトとの整合性から、ブランドアイデンティティをデザインに落とし込む重要性を改めて実感しました。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
30回まで目標に続けていきますため、何卒よろしくお願いいたします。
