【トレースしたLP】
ケロケロいちご様のLPをトレースしました。（引用元）
【トレース】
【スタイルガイド】
【PC・スマホ比較分析】
【工夫したこと】
- トレース元のページを再現できるよう、見本を作業スペースの横と下に配置し、細かい調整を行いながら作業しました。
- 検証ツールで使われているフォント、サイズ、余白を全て抜き出す作業が初めてだったため、抜けがないように気を付けました。
- スタイルガイドとＰＣ・スマホの比較資料を読みやすく作るため、フォントのウェイトや余白、要素の整列を意識しました。
【学んだこと】
- 検証ツールでフォント、サイズ、余白等を確認する方法など、基礎的な使い方を習得しました。
- PCとスマホの画面を比較することで、それぞれレイアウトで意識する部分が異なることを学びました。
- フォントや配色についてデベロッパーツールで確認することで、より深く考察することができました。フォントは特徴から与えたい印象を考えることができました。配色は同系色で複数の色を使うことでメリハリを出したり、一色では出せないニュアンスを加えることができることを学びました。