サイトトレース | スタディサプリ ブランドサイト
トレース元サイト
トレースしたカンプ
![](https://assets.st-note.com/img/1644587246587-46rnRUfFxd.jpg?width=1200)
■気づいたこと
デザイン全体
青系の配色でシンプルなサイト
学習ツールらしい、知的なイメージが訴求されている
また3色のグラデーション/強いぼかしが使用されており、未来的な印象を受ける
本サービス(スマホ,PCを使った新しい学習サービス)の特徴や強みをトンマナで表現されていると思った
![](https://assets.st-note.com/img/1644587395867-Z4B7g8leDt.png?width=1200)
グロナビ
ドロップシャドウがかかっている
ベース部分は不透明度が下げられており、FVのアニメーションが淡く透けて見える
これにより画面に奥行きが生まれている
![](https://assets.st-note.com/img/1644587761816-o49uVD56Do.png?width=1200)
英語書体:DINNextLTPro-UltraLight /#f2f2f3
コンテンツの英語タイトル
weight:UltraLightでウィンドウ幅に隣接すようにレイアウトされている
細く繊細な印象を受ける書体で、画面にほどよく緊張感生まれる
見出し上の英語タイトルもメインカラー(青)で配置することで、
文字組が引き締まっているように思う
リンクUIの青と対角になるような配色なのでバランス良く見えるのかも
![](https://assets.st-note.com/img/1644588192598-DyfjgWWt3e.png?width=1200)
![](https://assets.st-note.com/img/1644588199314-NoqC1Was8P.png?width=1200)
写真のレイアウト
背景に円形のオブジェクト(#F2FBFE)や、ドット柄の装飾が配置されている
余白が大きシンプルなサイトだが、写真に装飾があることにより単調にならない。またレイヤー感も生まれる
![](https://assets.st-note.com/img/1644588478598-lzQBmoOSGO.png?width=1200)
導入事例スライド
各記事の画像内に情報がまとめられている
画像は下から上へ暗色のグラデーションがかかっており、白抜き文字の視認性が高くなるよう工夫されている
→グラデーションを配置することに、どんな写真でも白抜き文字のレイアウトに対応できるようになる
![](https://assets.st-note.com/img/1644588789358-YAMiMjtUgB.png?width=1200)
グラデーション
青、水色、青緑3色のグラデーション。強いぼかしにより広がりを感じ、未来的なイメージになっている
この記事が気に入ったらサポートをしてみませんか?