今回は独学でWebデザインの勉強をする時に必ず通る模写（トレース）について、効果の出やすいやり方を説明していきます。
トレース元サイトの選び方
まずはトレースサイトの選び方についてです。
イラストが多用されたサイトは選ばない
トレースではイラストやアイコンも自分で似たものを用意してつくることをオススメします。
そのため、訓練としてのトレースをする時にはイラストが多用されたサイトは避けましょう。
説明としてイラストが入っている分には問題ありませんが、イラストがメインとして使われているサイトは不向きです。
構造が複雑なサイトを選ぶ
構造がシンプルで、写真で魅せるフォトグラファーのポートフォリオみたいなサイトはトレースの効果がうすいです。
逆に構造が複雑で、色々な技法が使われているサイトは勉強になります。
ただし、構造が複雑すぎるサイトをいきなりトレースするのも難しいため、自分でできそうなレベルで選んでください。
お手本サイトを探すのにおすすめのサイト
81-web
デザインに凝りすぎず、標準的なレイアウトで組まれた作品が多いです。
検索性がよく、デザインプレビュー画面もとても見やすいです。
トレースの時に心掛けること
丁寧にやる
まずは面倒ですが丁寧にやること。
トレースは全力かつ丁寧にやらないと、自分に本当に合うデザインのスタイルが見えてきません。
隅々まで丁寧にトレースすることで、自分が気づいていなかった工夫やテクニックに気づくことができます。
ほぼほぼ見本デザインと同じレベル、というところまで突き詰めた上で、見本と比較を行いましょう。
トレースのルール
横幅1360px 縦幅700pxが基準
デザインの幅は1360px（1440px）で作成
だいたいこれくらいならば良いです。
理由としては、ノートパソコンのサイズが基本これくらいなので、それに合わせるということです。
デザインの1画面に収めたい要素は700pxに収める。
特にファーストビューは700px以内に収めるようにしましょう。
ただし、デザインによってファーストビューの写真をババンッ!!と見せたい場合には800pxで作る場合もあります。この辺は意図によります。
PCデザイン→スマホデザインの順でやる
また、基本的にはPCのデザインを作り、それを元にスマホデザインを作るようにします。
理由としては、スマホデザインの方がレイアウトが単純だからで、
複雑なPC→単純なスマホ の方がデザインのリサイズがしやすいからです。
もし、スマホファースト（PCでもスマホと同じ見た目になる）のデザインを作る場合は、スマホから始めて問題ありません。
ただし、スマホファーストのデザインはレイアウトが単調なため、デザイン力を高めるという意味では効果は薄いです。
写真はそのままパクらず、代用の写真を探す
写真やロゴなどの素材は、元デザインからパクッてはいけません。
それだと先述したように「同じデザインをただコピーする」だけになってしまいます。
重要なのは「アイディアをパクる」ことなので、写真素材は自分で似た者を探しましょう。
また、実務でも写真素材などは基本的に自分で探す必要があるため、その訓練にもなります。
Webデザインにおいて写真はクソ大事です。
いいデザインのサイトは、こだわって写真を撮ったり加工したりしています。
最終的には「こういう使い方をしたいから、こういう写真を取ってほしい」と要望が出せるようになりたいところです。
そのために写真は自分で用意し、元デザインに近づける手間をかけるようにしましょう。
ロゴ・アイコン素材に関しても、自分で作るか似たようなデザインを拾ってくるようにしてください。
アイコンひとつでも、線の太い細いで見え方が大きく変わってきます。
細かいパーツに関しても用意してみることで気づくことがたくさんあるので、こちらも自分で作るようにしましょう。
具体的な進め方3ステップ
1. 見本を隣に並べない
まず、考えなしに見本サイトのデザインを丸パクリしてはいけません。
トレースは「アイディアを丸パクリして、自分なりにデザインし直す」イメージで進めてください。
あくまでパクるのはアイディアの部分であり、デザインの考え方を吸収することが目的となります。
なので、「ブラウザで見て理解し、見た後にデザインをする」という感覚で進めてください。
もっと噛み砕くと以下のステップを踏んでいるイメージです。
- ステップ①見本となるサイトを自分で観察する
- ステップ②自分の頭で似たデザインを再構築する
- ステップ③手を動かしてデザインを作る
ただデザインをコピーするのでは勉強になりません。
あなたは最終的にゼロからサイトを作ることが目的だと思います。
なので、この訓練でも「ゼロからサイトを作っている」という認識を忘れないで下さい。
2. 面白いと思った事をメモ、言語化しながら進める
トレースをしてみると、自分が考えもしなかったルール・表現が現れます。
自分の常識と外れた表現なのに、なぜかカッコイイ・・・と感じる表現があったら、「なぜ成立しているのか？」を言語化してみましょう。
考察のやり方については後述の「やる時のコツ」のパートで詳しく説明しています。
3. 最後に改めて元デザインと見比べて、改善点を分析する
上記の考え方に基づいてトレースがし終わったら、最後に全体的に元デザインと見比べます。
そうすると、必ず自分のデザインは「なんかダサい」デザインになっていると思います。
その「なんかダサい」理由は何なのか、徹底的に突き詰めていきましょう。
恐らく、意識していないかった細かいポイントに気づくと思います。
プロっぽいデザインとは、その細かい違いや工夫によってできています。
その部分を自分のデザインに落とし込んで修正してきましょう。
これをすることで、自分が気づいていなかった課題が明らかになり、素人くささが抜けていきます。
やる時のコツ【考察をしながらトレースする】
よりトレースの効果を高めるために、以下の点について注目して考えながらやってみましょう。
- 仮説を立てる
- 自分ならどう応用するか考える
- 写真をデザインと捉えて、その効果を考える
- 感情のその先の得られる効果を考える
- よくあるパーツのデザインをどう工夫しているか注目する
一つ一つ説明します。
1. 仮説を立てる
デザインを考察するときは、単に「この文字は赤色だ」などと見たままを言語化しても意味がありません。
「○○という感情を抱かせたいから■■という表現にしているのでは？」という仮説を立てながら考えましょう。
仮説を立てる時は、聞いた人が「なるほどね」と納得するくらいのレベルまで理由を説明できるとよいです。
2. 自分ならどう応用するか考える
先ほどの考察したものを、今後の自分がやりたいデザインならどう使うかも考えてみましょう。
難しい言い方をすれば、「デザインの効果を抽象化し、他の例で具体化できるようにする」ということです。
例えば、あるパーツの色について下記の考察ができたとします。
「商品を使った時の清涼感を感じて欲しいから、ここには水滴のデザインを使ってるのでは？」
そうしたら、それを元に自分が後で応用できる形に変換します（抽象化）
「商品を使ったときの”体感”を感じてもらえるように、背景にはその感覚に近い色やイメージを用いる」
そして、自分ならどんなデザインに応用できるかも考えてみます。
「この学習教材を買えば勉強のやる気がアップすることを伝えるために、利用者の声の背景をオレンジの炎っぽくしよう」
こんな感じで、応用できる「公式」の形に抽象化すること、その先の具体を考えてみることでトレース元デザインを自分の武器にしていくことができます。
3. 写真をデザインと捉えて、その効果を考える
写真に対し、その写真を見ることでどんなイメージを持つか、どんなことを想起させるかも考えてみましょう。
例えば、「この写真なんか高級感を感じるな」と思ったとします。
そうしたら、なぜ「高級感を感じるのか」→「黒い部分が多めで全体的に彩度を落としているから」という考察ができます。
写真も一つのデザインと捉えて考えてみましょう。
4. 感情のその先の得られる効果を考える
「上品な印象を与えている」などの感情の考察で終わるのではなく、
「上品な印象を与える → 洗練された空間で治療を受けることができそうだと感じ、病院は怖いというネガティブな印象をあたえにくくなっている」など、その先で与える効果まで考察しましょう。
この時、考察がただのこじ付けにならないように気を付けてください。
5. よくあるパーツのデザインをどう工夫しているか注目する
以下のようなパーツはどのサイトでも入っているものです。
よくあるデザインパーツの例
マウスを向けた時のアニメーション、グローバルナビゲーション、見出し、ボタン、問合せ、フッター、スライダー、アンカーリンク、スマホメニュー、パンくずリスト
ですが、そのサイトならではのアレンジや工夫を施している場合も多いです。
この部分に注目し、同じパーツでも色々な表現の方法を知っておくと自分のデザインに活かすことができます。
コメント