Webトレース

使用ツール　▶︎　Illustrator・Photoshop

トレースしたLP

▼  実際のサイトはこちら ▼

スタイルガイド

PCとスマホのデザイン分析

●  工夫したところ

①　見本と寸分違わぬよう図形や文字の大きさ、間隔など細かく調整しました。

②　全体を見て余白の取り方の塩梅を掴むこと、また、見本とトレースを比べて異なる部分がないかをチェックして完璧なトレースを心掛けました。

③　デザイン分析は色や線の太さを適切に分かりやすいものを選択しました。分析は「手段・目的・意図」で分かりやすいように説明をまとめました。

●  学んだこと

・フォントサイズ

見出し、本文で使われるフォントサイズには法則性があり、どのサイズならweb上で見て読みやすく、綺麗にまとまって見えるのかを学びました。

・色が与える印象について

初見では柔らかく温かみのある印象をもったため、何がその取っ掛かりになっているのかがトレースすることにより分かりました。

まず、本文に使われている色が濃いグレーであること。最初は黒だと思っていたので、では黒ではどう変わるか疑問に思い、トレースした後フォント部分を黒に変えてみたところインパクトが強く出たためグレーの方が全体のまとまりが出て雰囲気に合うのだと知りました。

また、グレースケールのバリエーションが豊かで、多くの色を使わずに変化をつけることを学びました。かわいいアニメーションや角を丸くしていること、その要素たちが柔らかな印象にまとまっているのだと思いました。

・ピックカラーを使いスポイトでweb上から色を抽出すること。

・remで文字サイズを指定出来ること。

・Yaku Han JPで約半の設定をつけ、句読点の余白を縮めることが出来る。

・フォントファミリーで使用するフォントを優先順位に並べて指定出来る。

・同じ意味を持つ記号は同じものを繰り返し使う（矢印等）

・Illustrator　アンカーポイントの追加と削除。グラデーションの作り方。