LPトレース

LPトレース・スタイルガイド

PC・SPでレイアウトが異なる箇所の比較、分析

工夫したこと

■画像やフォントの細かな調整

見本と全く同じ状態することを目指し、画像やフォントの配置を細かく調整しました。見本を下に敷いて細かいズレがないように調整し、色も同じになるよう、検証ツールを確認しながら取り組みました。

■スタイルガイドでフォントサイズ・余白の感覚を掴む

スタイルガイドは詳しい情報まで漏れなくまとめられるよう、検証ツールでひとつずつCSSを確認しながら進めました。フォントサイズや余白の感覚を覚えられるよう、フォントはフォントだけを集中して調べて分析し、余白も同じように調べ、自身がLPを制作することをイメージしながら取り組みました。

学んだこと

■レスポンシブデザインの工夫

PCとSPは同じデザインで「画像の配置」を変えているだけかと思いましたが、検証ツールでCSSを確認すると、PCはhoverでの見せ方を工夫していたり、クリックするボタンの大きさや位置、余白やフォントサイズなど、細かいところまで調整されていることに気付きました。様々な環境のユーザーに見られることを想定しながら、ユーザー目線に立った情報設計が大切だと感じました。

■検証ツールの使い方

使用されているフォントやサイズ、余白、CSSなど、検証ツールの活用方法について学ぶことができました。

■余白の取り方

余白はある程度の規則性がありつつも、かなり幅が広いことに気付きました。規則性はもたせつつ、目で見たときの違和感や美しさも重視しなければいけないのだと学びました。