デザイン分析日記34
Webサイトから学ぶ、デザイン分析
こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。以前は週一で発信していましたが、自分のタイミングにて発信できればと考えております、、、。（甘えてしまっておりますが何卒。）
今回ご紹介するのは、日経電子版 for Education様（https://www.nikkei.com/promotion/education/）です。
サイトをどのように感じたのか？
このサイトを見たとき、「遊び心」や「ワクワクする童心をくすぐられる印象」を感じると同時に、教育という分野ならではの「真面目さ」も両立されたデザインであると感じました。
どのような要素で感じたか？
（モーション・レイアウト・フォント）
まず、全体の色使いとして、水色・黄色・青・ピンクなどのカラフルな配色が採用されており、ポップで親しみやすい雰囲気が演出されていました。また、絵文字やどこか懐かしさを感じる図形、線で囲った装飾などが使用されていることで、ニューレトロ／ポップレトロの空気感が表現されていると感じました。
さらに、ファーストビュー（FV）では、大きな図形や大胆な余白、あえてズラしたレイアウトなど、ブルータリズムを感じさせるような表現も取り入れられており、自由さや遊び心が強調されていました。これにより、教育というテーマに対して堅苦しい印象を与えるのではなく、「学ぶことへの楽しさ」や「ワクワク感」を感じられるデザインになっていると考えました。
一方で、真面目さや読みやすさもしっかりと担保されていると感じました。ファーストビュー以外のセクションでは、世界観に合わせた装飾を用いながらも、情報は整列され、視線の流れが整理された構成になっていました。また、文字サイズや余白も適切に設計されており、装飾性がありながらも情報が読み取りやすいバランスが取られていると考えられます。
フォント面では、日本語フォントに「Zen Kaku Gothic」が使用されていました。このフォントは、ゴシック体の読みやすさと、丸ゴシックのような柔らかさを兼ね備えている点が特徴であり、親しみやすさと可読性を両立できるフォントだと感じました。また、ニューレトロ／ポップレトロの世界観とも相性が良く、硬すぎず、可愛すぎない絶妙なバランスを演出していると考えました。
英語タイトルには「Instrument Serif」が使用されており、細身でありながら存在感のある印象を与えていました。このフォントを使用することで、ポップな世界観の中にもモダンさや洗練された雰囲気が加えられていると感じました。また、文字間隔を狭めることで、タイトル自体を装飾の一部として見せ、より印象的なビジュアルに仕上げていると考えられます。
モーション面では、ホバー時などのインタラクションに対して素早く反応する設計がされており、直感的な操作感が意識されていると感じました。一方で、サイト全体では過度なアニメーションは使用されておらず、世界観を保ちながらも使いやすさを重視している印象を受けました。
特に、ターゲットが学校関係者や意思決定者である可能性を踏まえると、派手すぎる演出ではなく、「親しみやすさ」と「情報の理解しやすさ」のバランスを重視したインタラクション設計になっていると考えられます。
これらの要素を通して、本サイトは「遊び心」と「教育としての信頼感」を両立させながら、学びに対するポジティブな印象を与えるブランド体験を設計していると感じました。
このサイトはどのターゲットに向けて作られている？（仮説）
本サイトの主なターゲット層は、学校関係者や教育現場の意思決定者であると考えました。
その理由として、最終的に日経電子版を教育現場へ導入するかどうかを判断するのは、学校関係者や管理職などの意思決定層であるためです。そのため、本サイトでは単に教材の機能を説明するだけではなく、「学びへの興味を引き出せる教材であること」を、遊び心や、童心をくすぐられるデザインにすることで直感的に伝えていると考えました。
特に、カラフルな配色やニューレトロ／ポップレトロの表現、大胆なレイアウトなどを取り入れることで、「勉強＝堅苦しい・楽しくない」という従来のイメージから脱却し、「楽しく学べる体験」を想起させるデザインになっていると考えられます。
また、ニューレトロ／ポップレトロの空気感は、現代的なトレンドも感じさせるため、「今の時代に合った学習教材である」という印象を与える役割も担っていると感じました。これは、学校関係者に対して「時代に合った教育を導入している」という先進性を訴求する意図も含まれていると考えられます。
一方で、サイト全体は単にデザイン性へ振り切るのではなく、情報整理や視認性にも配慮されていました。文字の読みやすさや整列されたレイアウト、過度なモーションを避けた設計によって、意思決定者が必要な情報をスムーズに理解できる構成になっていると感じました。
このように、本サイトは「学ぶ楽しさ」や「親しみやすさ」を演出しながらも、教育サービスとしての信頼感や情報の分かりやすさも両立させることで、導入への関心や問い合わせにつなげるサイト設計になっていると考えました。
写真に注目
写真に関しては、日経電子版を実際に教育現場で使用した際のイメージが伝わる写真が多く使用されていると感じました。
教育サービスにおいては、「導入後にどのような学習体験が得られるのか」が非常に重要であるため、実際の授業風景を通して、その効果や空気感を視覚的に伝えていると考えられます。
例えば、
生徒同士が笑顔で話し合う様子
真剣に授業へ取り組む姿
先生の話へ集中して耳を傾けるシーン
などが使用されており、「学びへ主体的に参加している姿勢」や、「楽しく学習へ取り組める環境」であることを表現していると感じました。
さらに、写真の切り抜き表現にも遊び心が感じられました。ホームページ全体を通してEducationの「E」の形に合わせて写真が切り抜かれておりました。
最後に
私自身、以前に自主制作で教育向けアプリのWebデザインを制作しようとした際、同じようにニューレトロ／ポップレトロの世界観を取り入れようと試みたことがありました。
しかし当時は、「遊び心」と「教育としての真面目さ」のバランスをうまく整理できず、自分の中で方向性に納得できないまま没にしてしまった経験があります。
今回、日経電子版様のデザインを分析したことで、単にポップな表現を取り入れるだけではなく、情報整理や可読性、視認性を丁寧に設計することで、「楽しさ」と「信頼感」を両立できることを学びました。
特に、ニューレトロ／ポップレトロの世界観を保ちながらも、情報の見やすさや導線設計が崩れていない点は、自分の中で腹落ちする部分が多く、非常に学びのあるサイトでした。
また、「なぜこの表現が必要なのか」「ターゲットにどのような感情を持ってもらいたいのか」まで一貫して設計されている点も印象的であり、今後の制作において参考にしたいと感じました。
今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。
