【課題】LPトレース

▼トレースしたLP

株式会社LUUP様のLPをトレースさせていただきました。

▼スタイルガイド

▼PCとスマホのレイアウト比較・分析

▼工夫したこと

■位置や文字間の細かな調整

トレースを行うにあたって、余白のピクセル数や文字のカーニング、フォントの色など細かく調整するよう意識しました。文字の黒色でも用途によって色味を調整していることに気づいたため、与える雰囲気のずれも意識して取り組みました。

■スタイルガイド

チームで共有する際の見やすさを工夫しました。使用されているカラーを用途別にまとめ、ポイントを記載しました。余白のピクセル数やフォントサイズに関しても、細かく分析しました。全体を通して余白を揃えることを意識し、見やすくて共有しやすいものにしました。

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

■配色の使い方

ブランドカラーをメインカラーにすることでユーザーにブランドイメージを伝える工夫がされていると感じました。また、メインカラーの補色になる色をアクセントカラーにすることで視認性を与えていることを学びました。メインカラーがはっきりしているため、ベースカラーを白とグレーにすることでシンプルかつ各要素を引き立てる役割をしていることを学びました。

■LPの基本的なフォントサイズや余白の取り方

可読性を考えたフォントサイズや文字間を学びました。余白に規則性をもたせることで全体を通してまとまりのある、ユーザーにとって見やすいLPになることを学びました。