【課題】LPトレース

１｜トレースしたLP

２｜スタイルガイドの作成

３｜P CとSP(スマホ)の比較分析

４｜工夫したこと

５｜制作を通して学んだこと

１｜トレースしたLP

OpenStreet 株式会社が提供する「HELLO SCOOTER」のLPをトレースしました。

引用元 https://www.helloscooter.jp/

２｜スタイルガイドの作成

３｜PCとSP (スマホ)の比較分析

４｜工夫したこと

■色の抽出

色の種類は非常に多かったものの、どのように色数の多いWEBベージをまとめるのか知りたかったため、デベロッパーツールを使用しイラストやバナーまで色の抽出を行いました。

■スタイルガイドのデザイン

グループで制作することを想定し、初めてスタイルガイドを見た人でもわかるよう、項目を数種類作るなどカラーは特に工夫しました。また、HELLO SCOOTERの世界観を意識したデザインにもこだわりました。

■長方形ツールの変形

トレースの際に、菱形や凹凸のある長方形の作り方がわからなかったので、参考書やサイトを調べながら作成しました。

■料金表

トレースをした中で、非常に時間がかかった部分です。長方形ツールを組み合わせて整列を意識しながら作成しました。

■リセットボタンマークの作成

参考書やサイトを調べながら、イラストレーターで作成しました。

５｜制作を通して学んだこと

■色数の多いWEBページでのデザインの見せ方

色数の多いWEBページでしたが、工夫すればまとまりを見せることができるということを学びました。似た色味でも何十種類もの色を使っており、「なんとなく見やすいな」という印象が、デベロッパーツールを使用しスタイルガイドを作成することでより具体的に「なぜ見やすいのか」を明確にしており、デザインの工夫するべきポイントについて学ぶことができました。

■スタイルガイドの重要性

今回は特に色数の多いWEBページだったので、特にスタイルガイドの重要性について感じました。更に、WEBページを作成する上での余白の規則性やタイポグラフィの統一感、そして整列の重要性についても学ぶことができました。

■PCとSP (スマホ)での配置の変化

PCとSPで同じレイアウトにするのではなく、それぞれの利点を活かして配置にも工夫が施されていることが分かりました。