No.044 スタディサプリ ブランドサイト

No.044 スタディサプリ ブランドサイト

スタディサプリ　ブランドサイト

株式会社Recruitのブランド、スタディサプリのブランドサイト。

ファーストビューの印象

「学びを、もっと、新しく」のキャッチフレーズの背後に、ブルー〜スカイブルーで描かれた無数の円体が、拡大縮小、移動、整列、融合を繰り返す。

レイアウト

フルスクリーン

レスポンシブ対応

あり/なし
ブレイクポイント：375px,480px,640px,780px,1080px,1360px,1680px

フォント

見出し：DINNextLTPro
本文：apple-system

メニュー

PC：ナビゲーションバー
SP：ハンバーガーメニュー

カラー

ベースカラー：#FFFFFF ホワイト
メインカラー：#175BB2ブルー （グラデーション）
アクセントカラー：#0C41A0　ブルー

感想、参考になった部分

まず「学びを、もっと、新しく。」というキャッチフレーズの使い方が素敵だなと思った。

言葉を繋げずに３文字ずつ区切り、読点、句点を使い３列に表示している。それによって、言葉の一つひとつを大切にするとともに、テンポよく読むことができる。また、区切ることで四角に配置できるので、画面内の収まりも非常に良い。完全な黒ではなく、濃紺にしていることにより、背景のオブジェクトからも浮きすぎず馴染んでいる。

サイト全体が、知性をイメージするブルーで構成されている。開放感があり、一般的に「勉強」から感じる圧迫感を感じない。させられる勉強ではなく、自発的に、楽しむ「学び」という印象。

セグメント同士がシームレスに接続されており、非常にスムーズに読み進めることができる。videoタグで動画が埋め込まれているが、境目を意識することはない。動画以外の部分に関しても動きをつけることも、なめらかさの要因の一つだろう。

 

No.044 スタディサプリ ブランドサイト|Webサイト100選