【実践課題】LPトレース

｜トレースしたLP

ケロケロいちご様のLPをトレースの課題に選びました。

https://kerokeroichigo.com/

｜スタイルガイド

｜PCとSPのレイアウト比較

｜工夫した点・頑張った点

スタイルガイドをトンマナに合わせてまとめました。デベロッパーツールを使用し、気付きや色・フォント・余白がどういう意図で使われているかなどかなりじっくり考えました。特にメインカラーやアクセントカラーなどの判断が難しく何度も考え直して最終的にこの内容に落ち着きました。

トップへ戻るボタンがスクショするとグレーになってしまい、見本がグレーの状態だったので、グレーと思いこんで途中まで進めていましたが、スマホ画面と見比べながら確認していたときに緑だと気づき、自分で見本とトレースともに図形で作って色をちゃんと緑にして完成させました。細かい部分までしっかり確認しトレースすることができました。

｜課題を通して学んだこと

バナーの小さなサイズから、下に長い構成のLPに取り組み、見せ方が全然違うということ学びました。下にスクロールしていかに飽きさせないか、パッと見てわかりやすいボタン配置や、視線誘導などたくさんのことに気を配って１つのサイトが作られているということを学びました。デベロッパーツールを使用して色やフォント、余白を調べ、スタイルガイドにまとめることでWEBサイトではどのようなフォントサイズが見やすいのか、タイトルや図形などの余白には規則性があるのかなどをしっかり考察することができました。