サイトトレースver.1

サイトトレースしたときの学びをまとめるため備忘録のような感じでこれから書いていきます。

今回はこちらのサイトをトレースしました。
https://www.justsystems.com/jp/

トレース方法はムラマツさんのツイートを参考にしました。

⚫︎弊社推奨のデザイン勉強トレースの鉄則

・見本を隣に並べない
・見本を上からなぞらない
・ブラウザで見て見た後にデザインをする
・面白いと思った事をメモ、言語化しながらやる
・写真をトレース元から引っ張ってこないで別の写真を探す
・出来ればイラストも、なぞって作るなり自前で用意する https://t.co/p5mdWEK8f8

— ムラマツヒデキ/QUOITWORKS Inc. (@muuuuu_chang) January 4, 2022

■トレースしたもの

以下、今回の学び

・今まで1920で作ってたがKVは1360、700で作るのが基本。
・1920で作ると画面が小さくならない。
・サイズの比率が違うと破綻してダサくなる。
・文字詰め大事。ベタ打ちだめ。文字打つときはオプティカルにする。
・KVの写真が白っぽいとナビやコピーの文字が見にくいため薄いグレーをかけたりすると見やすくなるのと、コピーも目に入ってくる。
・全体的に文字小さくしがちなので文字の大きさは自分が思ってるより極端につける。
・赤黄青の3色を写真に使うことで明るい印象を与えている。これが黒とかグレーだったりまたは全部同じ色だと今回の印象とは違ったものになりそう。
・選択とマスクでうまく切り抜けないときはパス使うと切り抜ける。
・写真かなり大事。写真がダサいと全てがダサくなる。
・イラストは線が統一されているから洗練されているように見える。線の太さがバラバラだと野暮ったい。
・余白が等間隔だからすっきりきれいに見える。
・細かい部分の積み重ねで全部完璧だと美しく見える。ボタンの角丸加減とか。
・トレースするときは写真が与える印象まで同じ写真を探す。構図が同じでも与える印象が違えばそれは違うものになる。
・写真もただ貼るだけでなく、色や明るさなどを加工して合わせる。
・会社のロゴが写ってる写真であれば取ってきた画像にロゴ入れてそれっぽく作ってみる。
・空の写真は雲が見えるから明るく爽やかな印象でイケてるように見えるが、雲のない青空だとベタ塗りの背景に見えるのでダサく見える。
・下まで作り終わったら比較してみる。自分が作ったものは必ずダサいので何が原因でダサいのか考える。
・トレースするときは全く同じではなく、同じようなクオリティで作る。見本よりもクオリティが下がるのは最悪。
・何がクオリティに影響してるのか調べる。

【感想】
ロゴ以外は自分で画像を用意したり、イラストもペンツールでなぞってトレースをしたので今までしてたトレースより圧倒的に時間がかかったのと、疲れも比じゃないなと感じました。でもこれが効いてるということなのでこれからも挫けずやっていきます！