LP トレース
既存LPサイトのトレースを通して、スタイルガイドを作成し考察・分析、PC・S Pのデバイスによるレイアウトの変化を考察・分析しました。
｜制作概要｜
制 作 期 間 ：約３週間（平日３時間、休日６時間）
スタイルガイド（11日）、トレース作業（7日）、分析資料（1日）
ブラッシュアップ（2日）
制 作 範 囲 ：スタイルガイド作成、トレース作業、分析資料作成
使用ソフト：Photoshop
｜目次｜
1. 目的
2. 制作物
3. 工夫したところ
4. 制作を通して学んだこと
１.目的
・Webデザインにおける基本的なビジュアルデザインの感覚を掴む
・Webデザインをする際に一定のルールに則ってデザインするということを学ぶ（スタイルガイド）
・Webデザイン特有のデバイスによるレイアウトの変化を学ぶ
２.制作物
OpenStreet 株式会社様の「HELLO SCOOTER」 というサービス提供サイトをトレースさせていただきました。
３.工夫したこと
▼スタイルガイド
たくさんの色を使用してもまとまりのあるデザインになる方法を学びたくてデベロッパーツールで細かくカラーを確認しスタイルガイドに抽出しました。
▼トレース
画像の切り抜きもペンツールを使ったパスでの切り取り方を調べながら作成しました。
▼分析資料
資料としてわかりやすいよう線のカラーで分析内容を分けて記載しました。
４.制作を通して学んだこと
▼色
・たくさんのカラーを使っているが、メインカラーの色を薄くしたり、濃ゆくしたりすることで種類を増やし使い分けてあり、見やすい配色となっていました。
・グレースケールを取り入れることでごちゃごちゃとした印象にならないことを学びました。
▼タイポグラフィ
・数字はcentury-gothic（数字の視認性が良い）、文字は游ゴシック（Win・Macの標準搭載フォントが選ばれていることにより文字化けやデザインの乱れを防いでいる）で統一されていました。
▼余白
・余白にある程度の統一性を持たせることにより、見やすさだけでなく、グループ分けも表現できることを学びました。