Ff1487f6b98b5bdc

webデザイントレース(課題)

OVERVIEW

SHE MULTI CREATOR PROJECTの課題として、スクーターのサブスクリプションサービス「HELLO SCOOTER」のLPをトレースし、スタイルガイドとレスポンシブ画面の比較分析表を作成することでデザインの意図や工夫を学びました。

YEAR 2020

トレース元:HELLO SCOOTER

スタイルガイド

PC・SPのレスポンシブ対応比較

◎頑張ったポイント

多色を使用したLPの再現

LP全体に使用されている色数が多く、時間がない中検証ツールを使用してひとつひとつの色を確認しながら丁寧につくりあげました。


見やすいスタイルガイドの作成

要素を揃えたりまとめたりすることで、分かりやすいガイドになるように心がけました。


字間設定とフォントスタイルの使用

フォントの字間や太さ、行間などがそれぞれ設定されており、太字設定ではなくフォントスタイルを、カーニングではなく字間設定を使用することで見本にぴったり揃えることができました。

◎学んだこと

規則性

LPを構成する色やフォント、余白などは規則性をもって制作されていること。



ターゲットにあわせたトンマナだけでなく、アニメーションやボタンの動きなどが加わることで見ているだけでも楽しめる要素が増えるので、適度なアニメーション使用はページをリッチに見せる効果があり利用者の増加のために有効である

・色数が多くても、明度や再度などを調整した類似色を使用することで散らからずにポップな配色をすることができる

・アクセントカラーでページに締まりが出る

・トンマナにあわせてグレースケールだけでなくブラウンスケールやブルースケールを活用できればまとまりを出しやすい

・ただし、小さな文字には濃いグレースケールを使い、しっかりと視認性を上げている

・検証ツールの使用。materialの検索や、opacity、place holder、line heightなどの用法