【実践課題】LPページ分析
OVERVIEW
SHElikes MULTI CREATOR COURSEの課題として、LP分析・トレースを行いました。観察した内容をまとめています。
分析内容
色について
- グラデーションを用いてカラフルな中でも、緑みの青がメインとして生きている。
- 同じ色でも透明度を下げて使用することで統一感を持ったまま印象操作ができる。
- ビジネスイメージのブルーブラックを文字色などに用いつつ、緑みの青や黄色へのグラデーション、黄みの赤はフレッシュさや明るさを感じさせ、「新しい選択肢」感がある。
タイポグラフィについて
- 和文・欧文各1書体のみの使用。管理しやすく、イメージ統一ができる。
- レスポンシブで改行の必要がない大見出し・イメージは画像配置も有効。
- 見出し数字のみ欧文書体にして、和文との違和感も視線フックになっている。
余白について
- 右側にお問い合わせフォームがある前提のレイアウトが必要。多大な余白。
- 余白の入れ方には種類があるので、見えるだけの各種数値と見た目が一致しないことが多い。様々な余白の入れ方を持ってそう見えている構造を理解する必要がある。
課題を通して学んだこと
優れたサイトをトレースすることで仕組みを学ぶ、という感覚は掴めたと思う。これから参考サイトのものなどに触ってトレーニングに取り組めたらと思う。
webデザインはピクセル構造の画面にプログラムで呼び出して再構成して表示されるもので、ピクセル単位での管理が必要と思ってPhotoshopを選んだが、そもそもトレースするのにスクショにする時点で完全な再現にはならないということにやりながら気付いた。
だから検証ツールでの表示段階での数字を並行して見るべきだし、わからなければそこまでの学びとして自己補完することも必要だと思った。