【課題】LPトレース

OVERVIEW

SHElikes MULTI CREATOR PROJECTにて、WEBページのトレース課題に取り組みました。デザインガイドラインの作成と、PCとSPでデザインの異なる点やレイアウトの分析を行いました。 トレースページ:https://luup.sc/

YEAR 2023

①トレースしたLP

Luup様のLPをトレースさせていただきました。

②デザインガイドライン


③PCとスマホでレイアウトが異なる箇所の分析

④工夫したところ

■ソースを見ながらトレース

表面のデザインだけでなく、ソースを確認しながらトレースをし、余白やフォントのウェイト、透過の設定を細かく調整しました。

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

■全体のデザインの統一

LPが商材(電動アシスト自転車、キックボード)と同じ色でデザインされているためLPのみだけでなくブランド全体での統一感が出ており、ユーザーへの印象付けがされているなと感じました。デザインをする際LPのみではなく、ブランド全体での統一感を考えることも大事だと学ぶことができました。


■情報の出し分け

PCとSPでナビの内容に多く違いがあった。SPではアプリのダウンロードリンクが一番目立つ場所に設置されていたり、PCではアンカーリンクになっているナビがSPでは別ページが開くようになっていたりと、ユーザーが閲覧しているデバイスによってより適した情報を出し分けていた。