9.スタディサプリ サイトレビュー
爽やかでポップなメインビジュアルにワクワク
TOEICや受験勉強ができるスタディサプリのブランドサイト。
ツイッターで以前話題になっていたのを見ていいなと思ったサイトです。
青や水色を使った爽やかな印象があるサイトです。
目的
・スタディサプリのユーザーを増やす
・スタディサプリについて知ってもらい、学校でも取り入れてもらう。
ターゲット
・受験生やその親御さん
・TOEICなど英語の勉強を始めたい人
・IT化を考えている学校関係者
特徴
余白
数値で測りきれない、縦250pxほど。全体的に余白広めで、伸び伸びとした印象を感じられる。
配色
#2bdef1 メインビジュアルの水色。
#1a65d6 メインビジュアルの青。
#0b41a0 メインカラーの紺。ヘッダーやボタンで使用。
#e9fbfb 薄めの水色。あしらいの丸で使用。
#f3fbff かなり薄めの水色。あしらいの丸で使用。
#e6ebec 薄めの灰色。あしらいの丸で使用。
青や水色を中心とした爽やかな配色。きちんとした数値では表せませんが、メインビジュアルで使用されている#2bdef1や#1a65d6を混ぜたようなグラデーションが使われています。
フォント
-apple-system
DINNextLTPro-UltraLight
PC:160px(h2)24px(タイトル)14px(本文)
SP:86px(h2)20px(タイトル)13px(本文)
-apple-system
初めてこの記載を見たので、こんな名前のフォントがあるのかな?と思ったのですが、違うみたい。このfont-familyを適用すると、San Franciscoというフォントが表示されます。(詳しくはこちらの記事)
DINNextLTPro-UltraLight
人気フォントのDINの一つ。DINらしく幾何学的な印象のフォントです。このサイト上ではUltraLightで使用されているため、よりクールな印象になっていると思います。
メインビジュアル
このサイトはメインビジュアルが常に動的でとてもワクワクしてしまいます。
サイト全体のモチーフとして丸が使われているのですが、メインビジュアルでは多くの丸がくっついたり、列を成したりしていてとても可愛いです。
スタディサプリはスマホで楽しく勉強できるアプリなので、このメインビジュアルではスタディサプリのワクワク感が感じられます。私の勝手な予想では、メインビジュアルの丸は「知識」の象徴で、丸がくっついたり、整理されたり、合体してどこまでも伸びていくは、スタディサプリにおける学習の可能性を表しているんじゃないかな、と感じました。
グラデーション
このサイトはシンプルながらとてもデザイン性が高いと思います。
このStatementの部分では、背景がグラデーションになっていてとても素敵です。このコンテンツ以下はロジカルなデザインが続くのですが、ここは情緒的な部分なのでグラデーション背景や半透明のタイトルがよく似合うと感じました。(テキストを透かすときはopacityプロパティ)
サイト全体として丸を意識して使用しているので、写真が丸っぽく見えるよう背景が切り取られているところもよいと思いました。
フッターも同じグラデーションが使用されていて、印象に残りました。
真似したいポイント
・全体的に丸をモチーフにして使用している。ヘッダーや写真の角丸、ボタンなど、常に丸で統一している。
→親しみやすさや学ぶ楽しさがイメージできる。
・ヘッダーは基本ハンバーガーメニュー。横幅1080px以上ではハンバーガーメニューではなく、長いヘッダーが用いられ、スクロールした時ハンバーガーメニューになる。
→スマホで使用するアプリのサイトということもあり、スマホファーストの使用。
・ヘッダーのロゴの部分で、スタディサプリの横にBRAND SITEの記載。
→スタディサプリのどんなサイトかわかりにくいため、記載があると親切。
・メインビジュアルのキャッチフレーズ「学びを、もっと、新しく。」が正方形になるよう配置さている。
→背景との境界線がしっかりしているため、ユニークな背景が際立つ。
・ボタンが大きい。
→丸のボタンは一般的な横長ボタンと比べて面積が小さいため、大きめに配置してあげると気づいてもらいやすく、押しやすい。
・コンテンツのタイトルは大きく配置し、色は薄い
→タイトルは深く理解が必要な項目ではないが、認識されることが大切なので、大きく配置して、薄い色というデザインは効果的だと感じた。
感想
今回はスタディサプリのブランドサイトを紹介させていただきました。私はTwitterで初めてこのサイトを見かけて、とてもワクワクして素敵なサイトだなと思い、自分もこのサービスを使ってみたいと思いました。
この分析を通して、なぜ私がユーザーとしてポジティブな感情を抱いたのか、デザインの根拠は何かを考えることができたと感じています。
ワクワク感はサイトにとっても重要な要素なので、この分析から学んだことを自分のサイト制作にも活かしていきたいです＾＾
この記事が気に入ったらサポートをしてみませんか？