LPトレース

OVERVIEW

SHElikes MULTI CREATOR PROJECTの課題で、LPトレースに取組みました。HELLO SCOOTER をトレースし、PCとスマホのデザインを比較・分析してまとめました。(制作時間:25時間)

YEAR 2021

* トレースしたLP *

HONDAが運営するシェアサイクル事業HELLO SCOOTERのLPをトレースしました。(実際のサイトはこちらです)

* デザインガイドライン *

* スマホとの比較分析 *

* 工夫したこと *


1. 文字・余白のサイズを知る

webページ制作にあたっての見出し・本文の文字サイズ、行間や余白の大まかなサイズ感覚を掴むことを意識してトレースしました。


2. ピクセル単位の調整

見本ページを下敷きと横に配置し、要素ひとつひとつの大きさや傾きを細かく調整しました。


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


1. 検証ツールの使い方
ページ上で使われているフォントや色、余白を検証ツールを使い調べたことで活用方法を学ぶことができました。


2. 余白と文字サイズの決め方

余白については一定の法則性(5の倍数)は持たせつつ、最終的には自分の目で見ながら微調整していくことでバランスの良いデザインになることを学びました。

文字は各セクションのタイトルと本文の文字の大きさが同じにすることで見やすいデザインとなり、実装する際にも役立つと思いました。


3. 配色方法

今回のLPにはとても多くの色が使われていましたが、同系色で濃淡を調整していることで色数の多さを感じさせない仕上がりになっていると考えました。又、イラストも配色をアクセントカラーにすることでまとまりが出ていると感じました。