デザイン分析日記36
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。以前は週一で発信していましたが、自分のタイミングにて発信できればと考えております、、、。（甘えてしまっておりますが何卒。）
今回ご紹介するのは、集英社様の採用情報（https://www.shueisha.co.jp/2026saiyo/）です。
表現の意図の仮説
今回の集英社様の採用情報サイトに関しましては、
集英社と言われる大手出版社内の本に対する熱量をアピールする場としての側面と本に対する熱い思いを持った応募者を巡り合うべくした意図があると考えました。ただ本という媒体上、静的であることや、未来を象徴すること、内に秘めた情熱を表現するべく水色ベースでのデザイン作成されていると考えました。
サイトをどのように感じたのか？（私）
このサイトを見たとき、「静けさ」「情熱」「洗練」「知的さ」「プロフェッショナルさ」「綺麗さ」「未来」を感じました。※自分のとても好みのホームページでした。
どのような要素で感じたか？
（モーション・レイアウト・フォント）
①FV（ファーストビュー）
初めのFV（ファーストビュー）は勉強机に本が山積みになっており、その中で、女性が本を読んでいる写真を使用されておりました。（自分の作業机と同じ感じで親近感が湧きました、、、。笑）
写真の構図としては、やや斜め後姿を撮影されております。そのため、正確に女性の表情は見えませんが、「読んでいる本に何か思う、感じること」がある表情を見せているようでした。
「本と真剣に向き合っていること」や「読んでいる本に確かなる将来性を見出している」とも感じ取れました。
また、コピーの「胸の高鳴りに、懸けてみる」合わさることで敢えて抽象的な表現から「内に秘めたる静かなる情熱」や、「本の将来性」＋「応募者本人の将来性」さを感じさせる演出になっていると考えました。
さらに、コピーに使用されているフォントには、滲みや煤けたような質感を持つ明朝体が使用されており、デジタル的な綺麗さだけではない、「紙面ならではの静的な熱量」を感じさせる表現になっていました。
そして、コピーのレイアウト設計も非常に印象的でした。
コピーは単純な縦書きではなく、以下構成になっておりました。
「胸の」→ 横書き
「高鳴りに、」→ 縦書き
このレイアウトによって、視線が自然に、ロゴ → 「胸の」 → 「高鳴りに、」へと流れるよう設計されていると感じました。
さらに、下記文字組を施すことでバランスを取っていると考えました。
「懸けて」→ 縦書き
「みる。」→ 縦書き
文字を中央の人物写真へ干渉しすぎない位置（中央を開けて）配置することで、写真そのものへ視線を集中させる構図になっている点も非常に秀逸だと感じました。
②フォント
日本語フォントには「Shippori Mincho」、本文テキストには「Zen Kaku Gothic New」、英語タイトルには「Instrument Serif」が使用されていました。
1. 「Shippori Mincho」が使用されている理由
まず、「Shippori Mincho」が使用されている点から、知性や文学的な空気感を強く感じました。明朝体は、本や新聞、出版物などでも多く使用される書体であるため、「知性・文章を読む体験」と非常に相性が良いフォントだと考えられます。
その中でも、「Shippori Mincho」が採用されている理由として下記理由があると考えました。
線の太さに緩急があること
手書きのような温かさを持っていること
墨のにじみを感じさせる質感があること
どこか活版印刷や紙媒体を連想させるような「静的な熱量・文学的な空気感」が生まれていると感じました。
また、このフォントによって、「情熱・静けさ・知性・上質感」が同時に表現されているようにも感じます。
2. 「Zen Kaku Gothic New」が使用されている理由
本文テキストには、「Zen Kaku Gothic New」が使用されていました。
このフォントは、ゴシック体らしい読みやすさを持ちながらも、どこか柔らかさや現代的な印象も兼ね備えているフォントだと感じました。
今回のサイトでは、「Shippori Mincho」が持つ文学的で温度感のある世界観を活かしつつ、本文ではしっかりと可読性を担保する役割として使用されていると考えられます。
もしサイト全体を「Shippori Mincho」のみで構成してしまうと、アンティーク感、重厚感が強くなりすぎてしまい、読みづらさや古さを感じる可能性もあります。
そのため、「Zen Kaku Gothic New」を組み合わせることで、現代性、
モダンさ、読みやすさを補完し、世界観とユーザビリティのバランスを取っていると感じました。
3. 「Instrument Serif」が使用されている理由
英語タイトルには、「Instrument Serif」が使用されていました。このフォントは、細身の骨格を持ちながらも、セリフ部分にしっかりと抑揚があり、非常に上品で印象的なフォントだと感じました。
また、やや長体気味のデザインによって、「クラシカルさ・繊細さ・洗練感」が強調されており、サイト全体に静かな高級感を与えているように感じます。
さらに、クラシカルなセリフ体でありながら、どこか現代的なミニマルさも持ち合わせているため、「落ち着いた印象・インパクト・モダンさ」を同時に成立させているフォントだと考えました。
そのため、本サイトでは、「文学的で静かな世界観」を壊さずに、ビジュアルとしての存在感や洗練さを加える役割として使用されているのではないかと感じました。
④レイアウト※PC表示を基準に観察しています。
サイドの余白が約140pxに設定されており、各セクションにおいても、タイトルとコンテンツの間に同程度の余白が設けられていました。
また、本文の行間についても、文字サイズに対して約2倍程度のゆとりを持たせた設計になっていました。
これらの余白設計によって、サイト全体にゆとりが生まれており、「落ち着き・上品さ・大人っぽさ・知的な印象」を感じさせるデザインになっていると考えました。
余白をしっかり確保することで、「焦らず丁寧に読ませる空気感」が作られており、サイト全体の静かな世界観とも非常に相性が良いと感じました。
また、各セクションのタイトル位置が、常に左上から始まるよう統一されていた点も印象的でした。これにより、「視線の流れ・リズム感・読み進めやすさ」が現れ、流れるようにスクロールができる構成（ホームページ全体を読み進められる構成）になっていると考えました。
このサイトはどのターゲットに向けて作られている？（仮説）
本サイトの主なターゲット層は、採用情報であることから若手〜の転職希望者に向けたサイトであるため、目的としては、応募者を募らせることを目的であることであります。そのため、集英社様の世界観であったり、応募者に向けた静かなる
写真に注目
採用サイトということもあり、集英社様で実際に働いている人々を主軸とした写真が多く使用されていました。
サイト全体の世界観に合わせて、写真の色味やトーンも丁寧にコントロールされているように感じました。
具体的には、
①彩度をやや低めに調整していること
②明るさを少し抑えていること
によって、落ち着きや知性を感じさせる印象へ統一されていました。
また、サイト全体が寒色系（水色寄り）のトーンで構成されていることから、写真にも数％ほど水色系のオーバーレイが加えられているように感じました。これにより、写真単体が浮くことなく、サイト全体に自然と馴染む工夫もされていると考えました。
また、人物写真では、正面を向いている構図が多く使用されていた点も印象的でした。
これは、採用サイトとして、「これから働きたいと考えているユーザーへ直接語りかける」ような役割を持たせているのではないかと考えました。
視線を合わせることで、距離感を縮めながらも、誠実さや真剣さを伝える演出になっており、採用ブランディングとして非常に参考になる表現だと感じました。
最後に
今回の分析を通して、集英社様のサイトは、「知性」や「内に秘めた情熱」、そして「プロフェッショナルさ」や「上品さ」を丁寧に表現することで、企業ブランディングと採用希望者への訴求を両立したデザインになっていることを感じました。
サイト全体を通して、特にフォーカスを当てるとすると、「クローズアップ」「人と仕事を知る」セクションにおいて、読みやすさを担保しながらも、少しランダムさを感じる配置が取り入れられていた点も非常に印象的でした。
整列だけで構成してしまうと単調になりやすい中で、あえてリズム感を加えることで、静かな世界観の中にも動きが生まれており、自分のデザインの引き出しとして非常に参考になりました。
さらに、静的な印象を持つテーマだからこそ、サイト全体では過度なモーションを使用せず、必要最低限のシンプルな動きに抑えられていた点も印象的でした。
特に、ホバー時の素早く控えめなアニメーションなどは、使いやすさを損なわずに、サイト全体へ程よい現代性を加えており、「世界観」と「UX」のバランス設計として非常に参考になると感じました。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
