WEBサイト・LPのトレースはじめます。

きょうからトレースをやるぞ!と決めました。

目標

1週間に1トレース! WEBサイト、LP交互に行う

ふるいたった記事

liginc.co.jp

トレースのメリット

・デザインの細部を確認できる

・ 配色やレイアウトなど、デザインのトレンドを学ぶことができる

・ どういう作業にどのくらい時間がかかるのか知ることができる

サイトデザインの深いところまで思考することができます。

・ なぜこのマージンルールなのか

・ なぜこの配色なのか

・ なぜこのレイアウトなのか

liginc.co.jp

なぜトレースがデザインの上達につながるのか?

・「デザインは細部に宿る」と言われますが、その細部に気付く」

・「デザインの引き出しが増える」

・「自分の悪い所が解る」←これが一番重要!

トレースしながら意識するところ

・ 余白間(マージン)の取り方

・ 見出しやテキストとのジャンプ率の付け方

・ 使用色の割合と使用数、差し色の使い方

・ 要素同士のサイズ感のバランス

・ 際立たせたい箇所の目立たせ方

liginc.co.jp

トレース手順

①サイトの全画面スクリーンショットを撮る。

photoshopで開いて、その上からシェイプツールで要素の範囲を囲う。 画像は黄色、テキストは緑色、マージンは水色と自分の中でいルールを決めておく。

③サイトのcssを見て、カラーコードや使用しているフォントなどもチェック。

y-hmd.com

careerhack.en-japan.com