こんにちは、プロクラスの杉本です！
前回は「上品・高級感」のあるWebサイトをデザイン分析を行いましたが、今回はまた違ったテイストのWebサイトの「デザイン分析」を行っていきたいと思います！
目次
今回分析する参考サイト
株式会社メディアプルポ様のWebサイトを分析させていただきました。
https://pulpo.jp
では早速分析していきます！
【Step1】デザインをパッと見たときの印象を言語化する
「ポップ」「明るい」「にぎやか」を感じました。
SANKOU!では、株式会社メディアプルポ様のWebサイトは「ポップ」「スタイリッシュ」のカテゴリに属しています。
【Step2】ロゴ・文章・写真からブランド理解を深める
「夢中をつくる。夢中でつくる。」や「つくるのは、みんなの心を動かすもの。」というキャッチコピーからは、視聴者・観客の感情に訴えかけるコンテンツをつくりたいという想いが伝わってきます。
ロゴは、手書き風の筆文字が使われており、「人の手でつくるコンテンツ」というこだわりが感じられます。
また写真からは、制作風景の写真や実際にメンバーが働いている写真が多く使用されていることもあり、「信頼感」を感じられます。
【Step3】レイアウト・余白を分析する
機能面
・セクションごとで背景色が変わることで、セクションの違いが分かりやすい。
・メインビジュアルとWORKSエリア・RECRUITエリアは、サイズ感の違う写真がバラバラに配置されていることで、リズム感を生んでいる。
情緒面
・メインビジュアルとWORKSエリア・RECRUITエリアは、サイズ感の違う写真がバラバラに配置されていることで、「ポップ」に感じる。
・セクションごとの余白が充分にとられてることで余裕・信頼感を感じる。
・ABOUT USエリアなど写真を大きく使用されていることで、「ダイナミック」で「エネルギッシュ」に感じる。
【Step4】色味を分析する
機能面
・ボタンを白色・黒色に統一することですぐにボタンだと認識しやすい。
・白テキストと赤色・水色背景の高コントラストにより、可読性が確保されている。
・白色背景のセクションを挟むことで、サイトの圧迫感を軽減させている。
情緒面
・赤色や青色などを背景に全面使用することで、活気のある会社だと感じる。
・コーポレートカラーの赤色を基調にされていることで、メディアプルポのサイトだと印象に残る。
・ボタンやテキストは、白や黒の無彩色を使用することで、サイトが引き締まり、「スタイリッシュ」に感じる。
【Step5】フォントを分析する
機能面
・行間が広めにとられていることから読みやすい。
・全体的に太めのクセの少ないゴシック体で、文字が大きく、読みやすい。
・文字のジャンプ率が高く、情報の優先順位が明確。
・タイトルにアニメーションが使用されている分、シンプルで読みやすいフォントが使用されている。
情緒面
・太めのクセの少ないゴシック体を使うことで、「ポップ」「スタイリッシュ」な印象になっている。
・タイトルなどで使用されている欧文フォントは、高さのある太めのゴシック体で、「ポップさ」もありながら「スタイリッシュ」にも感じる。
【Step6】あしらい
・ギザギザ円、矢印など装飾がカラフルで「ポップさ」を感じる。
・メインビジュアルとWORKSエリアの写真にドロップシャドウが使用されていることで、写真に動きがつき、「楽しさ」を感じる。
・見せたいところや押して欲しいところには、目を引く装飾が使用されている。
サイト全体のあしらいは、カラフルで目を引くものが多いことから、エンタメ業界らしい「ポップ」「にぎやか」に感じます。
【Step7】アニメーション
・ホバーアニメーションは、テキストが上下に回転するアニメーションや横幅の背景色が伸びるものなど多様であることから、「ポップ」に感じる。またスピード感のある演出で、「スタイリッシュさ」も感じる。
・スクロールアニメーションは閲覧者を飽きさせず、エンタメ業界らしい「楽しい」印象を感じる。
・タイトルが一文字ずつ浮き上がり、表示される演出は、「ポップ」な印象を感じる。
全体的にさまざまなアニメーションが使用されていることで、エンタメ業界の「楽しい」「ポップ」な印象を感じます。
また下に配置されているSCROLLのアニメーションは、自然と視線が下に誘導されます。
感想・まとめ
メディアプルポ様のサイトを7つのSTEPを踏んで分析してみると、見た目のインパクトだけではなく、「エンタメ感」を伝えるという目的に沿ってデザインされていることに気づきました。
また今回の分析で、デザインは装飾ではなく、意図を持ってデザインすることが改めて重要だと感じました。
次回は、また違ったテイストの参考サイトを「デザイン分析」してみたいと思います！