デザイン分析日記32

Webサイトから学ぶ、デザイン分析

こんにちは。デザイン歴1年ほどのひよっこですが、本業と両立しながら、心を動かされたデザインを分析・発信していきます。以前は週一で発信していましたが、自分のタイミングにて発信できればと考えております、、、。（甘えてしまっておりますが何卒。）

今回ご紹介するのは、横浜銀行IT・デジタル人材向け採用サイト様（https://redesign.boy.co.jp/）です。

サイトをどのように感じたのか？

このサイトを見たとき、「先進性」と「見やすさ」のバランスが取れていると感じました。IT・デジタル人材向けの採用サイトであることから、将来性や成長性を感じさせる設計が意図されていると考えられます。
また、ブランドカラーである青色を基調としていることから、「誠実性」や「信頼性」といった印象も受けました。

まず、先進的な印象は主にモーション・インタクションの表現から生まれていると感じました。ファーストビュー内のアニメーションや、スクロール時にデバイスが動く演出、セクション切り替え時にアプリケーション画面・デバイスが変化する表現などが視線を引きつけ、デジタル領域に強みを持たせられることを直感的に伝えています。
また、3D的な表現・奥行きのあるビジュアル、滑らかなグラデーション背景なども加わることで、平面的になりがちなWebデザインに立体感と今らしさを与えていると感じました。

一方で、見やすさに関しては、フォント設計とレイアウトによって担保されていると考えられます。日本語フォントには可読性の高いNoto Sans JPが使用されており、長文でもストレスなく読み進めることができます。また、行間を約2倍程度に設定していること、文字間は0.3em(16pxに対して約0.5倍程度)に設定ことで、情報量が多くても圧迫感を感じさせない読みやすさを感じる構成になっていると考えました。

さらに、英語フォントにRoboto Condensedを使用することで、日本語フォントとのコントラストが生まれ、強弱がつけられています。これにより、単調にならず印象に残りやすいデザインとなっていると考えられます。

レイアウト面では、（80px）、余白（8px）サブタイトル（24px）余白（20px）文章（16px）といった情報の階層が明確に整理されており、左揃えで統一されていることから、視線の流れが迷わないストレスフリーの理解しやすい構成となっています。また、右側にモーションを配置することで、情報と演出の役割が分離され、見やすさを保ちながらもデザイン性を損なわない工夫がなされていると感じました。

これらの設計により、「信頼感を担保しながらも先進的な印象を与える」というバランスが実現されており、特にデジタル領域でのキャリアを志向する若手人材に対して、魅力的に映るサイト設計になっていると考えられます。

このサイトはどのターゲットに向けて作られている？（仮説）

本サイトの主なターゲットは、20〜40代の転職を検討しているIT・デジタル人材（安定性を求めながらも成長環境や新しい技術領域に関心を持つ人材）であると考えました。

その理由として、横浜銀行様のが持つブランドイメージである「誠実性」や「信頼性」をベースにしつつも、サイト全体に先進的な印象を与える設計がなされている点が挙げられます。

特に、ファーストビューやスクロール時のアニメーション、デバイスの動きといったインタラクション表現は、企業のデジタル領域における技術力や先進性を直感的に伝える役割を担っており、従来の銀行のイメージとの差別化にもつながっていると感じました。これにより、転職先としての将来性や魅力を視覚的に訴求していると考えられます。また、本サイトでは信頼感や見やすさを担保しつつ、アニメーションやインタラクションによって印象に残る体験を提供することで、応募への関心を高める設計がされていると考えられます。

このように、「信頼性・誠実性」と「先進性・将来性」を両立させることで、ターゲットとなる転職層に対して魅力的に訴求するサイト設計になっていると感じました。

制作者としての学び

本サイトの分析を通して、「信頼性とデザイン性を両立させる設計」の重要性を学びました。

最初の表現に関しては、フォトショップの下記表現にて真似ができそうと思いました為、下記表現してみました。

簡単にできますため、よければ下記記事を参考に作成をしてみてください。

今回はここまでにさせていただきます！
引き続き、デザインの言語化学習に努めていき、自分の引き出しを増やしていきます！
これからは、50回まで継続を目標に続けていきます！
引き続き何卒よろしくお願いいたします。