LPトレース・分析（課題）

■トレースしたLP

シェアスクーター『HELLO SCOOTER』のLPをトレースしました。

■スタイルガイド

■PCとSPのデザイン比較

■工夫したこと 

1. 文字や余白のサイズ感覚を掴むことを意識

見出しや本文の文字のサイズや行間、コンテンツとコンテンツの間の余白のサイズなどの感覚を掴むことを意識しながらトレースしました。

2. pixel単位の微調整

見本のページの表示非表示を繰り返し、ずれがないようにトレースをしました。小さな円はpixel単位で大きさの調整をし、写真は少し透明にして下敷きとズレが出ないように調整しました。

3. 開発ツールやデザイン原則を活用したガイドライン制作

デザインガイドを制作する際、Chromeの開発ツールを使用して、htmlやCSSの一行一行をしっかり見て分析しました。まとめる際はデザイン原則である近接・整列・強弱・反復を意識しました。

4. スマホとのデザインの違いの理由を考えながら分析

PCとスマホのデザインの違いを分析する際に、実際にスマホでLPを見ながら分析をしました。「PCでは中央寄での文章がスマホでは左揃えになっている。スマホは横幅が小さいから文字量が多く感じるので、左揃えのほうが見やすいな。」といったように、PCのデザインと変えている理由は何故なのを考えながら分析しました。

■制作を通して学んだこと 

・検証ツールの活用方法

ひとつひとつ丁寧に検証ツールで要素を確認をしたため、CSSについても理解を深めることができました。検証ツール上で様々な余白pxやフォントサイズを試しながら検証を進めることで、最適なサイズ感について感覚を掴むことができました。

・配色バランス

本LPでは、一見同じに見えるカラーでも、明度や彩度がわずかに異なるカラーが多く採用されていました。色数は多いのにまとまっているのは、トーンやバランスに基準を設けているからだと知ることができました。