見出し画像
Photo by chiyoizmo

「デザイントレース」をやる意味を改めて確認しておこう【初学者向け】

まいるどしゅがー/デザイナーのキャリアをデザインしたいインハウスUIUXデザイナー

こんにちは、まいるどしゅがーです。
これまで記事で書いてきた通り、私は今3人の新米デザイナーの育成に取り組んでいます。各人に対してコーチングメソッドを絡めたパーソナルトレーニングをしているため、それぞれ持ち帰る宿題はバラバラなのですが、先日その中の一人に「サイトトレース」の課題を出しました。

新米デザイナーにサイトトレースの課題を出すことで、改めてサイトトレースの意味を自分自身も再確認できたということで、この機会にnoteに残しておきたいと思います。

この記事では、具体的なトレースのやり方（まずサイトのキャプチャを取りーー、みたいな）は書かず、サイトトレースの意味を確認することで、より意識的で効率的なサイトトレースを誰でもできるようになることを目指しています。

トレースの意味①「見る力」が鍛えられ「手数」まで分解できるようになる

デザイン初学者の場合、ただデザインを見るだけではそこに加えられている処理にすぐ気付くことができません。「見る力」とは言い換えれば「施されている手数を分解できる力」とも言えます。

デザイン初学者の場合、上図右のように多くの手数が加えられているデザインであっても意外に見落としがちで、「メリハリがあってわかりやすい」という抽象的な分解にとどまってしまう場合が多いようです。

そうではなくて、具体的に施されている処理にまで分解することで、ようやくデザインを「見る力」と言えます。この「見る力」が弱いために、新米デザイナーの制作物には上図左のような手数が少ない（ないしはデフォルトのまま）の要素が散見されます。デザインがどこか野暮ったい、素人っぽいと感じる場合はこの辺りに起因している可能性があるかもしれません。

トレースの意味②デザインツールでアウトプットすることで再現力を鍛えられる

①でデザインを分解できたら、次はそれをPhotoshopやXDなどのデザインツールでアウトプットすることでデザインの再現力が身に付きます。

以下のような「写真の上に文字を載せる」という処理について考えてみましょう。

左下の状態を再現するための、Photoshop上での操作を書き出してみました（これ以外の方法もありますがあくまで一例として）。

・長方形ツールで長方形を作る

・その長方形で写真をクリッピングマスクする

・写真に対してレイヤースタイルのカラーオーバーレイで黒を5%乗せる

・テキストツールで写真の上に文字を乗せる

・文字に対してレイヤースタイルのドロップシャドウを加える

この処理ができるようになれば、「長方形ツール」「テキストツール」「クリッピングマスク」「レイヤースタイル（カラーオーバーレイ）」「レイヤースタイル（ドロップシャドウ）」計5つのツールや効果を覚えた、ということになります。

デザイン経験が浅いと、頭の中で考えたデザインを実際にアウトプットできず、もどかしい期間がそれなりに続くと思います。しかしこのように少しずつアウトプットする力=再現力が鍛えられていくと、いつか頭の中のデザインに追いつく時がきます。

①の「見る力」は、すなわち手数を分解する力だと説明しましたが、デザインツールで「再現」までセットですることで強制的に手数に分解する訓練だと言うことが出来ます。そのため初学者の場合、①②はどちらかだけではなく両方とも行うことをおすすめします。

トレースの意味③手癖を破壊できる

初学者と言えど手癖というものは存在します。加えて、少ない引き出しの中だけでデザインしてしまおうとするためデザインがワンパターンになりがちです。例えば「文字を斜めに傾ける」という手法を知った新米デザイナーが、その次のデザインも同じように文字を傾けて提出してきたりするのは往々にしてあります（その時は「前と同じじゃん」とフィードバックしました笑）。

そんな手癖を破壊するためにもデザイントレースは必要なのです。ちなみにこれは初学者に限った話ではなく、少し慣れてきた初学者〜ジュニアデザイナーくらいの方にも効果的なのではと思います。

トレースの意味④「四大原則」を見つけ「意図」まで想像できるようになる

手数の分解やツールでの再現に慣れてきたら、もう一歩進んで「四大原則」を意識的に探してみることにしましょう。

・ここはひとまとめに見せたいから「近接」されている

・目立たせるためにあえて「整列」が崩されている

・フォントサイズがタイトルは●px、本文は●pxと「強弱」がついている

・見出しデザインが統一され、「反復」して使用されている

四大原則がわかると、なぜそうしているのか？という「意図」がわかるようになります。デザインとは意図の塊です。そこまで想像できるようになると、自分でデザインをする際に逆算で「こうしたい（意図）→だからこう見せよう」という発想ができるようになります。

これが「引き出し」であると私は考えます。

デザイナーとは「こうしたい（=what）」という思いに対して「こう見せよう（=how）」という方法を幾つも提示できるプロだと思います。「目立たせたい」という依頼がきたら「色を変える」「サイズを変える」「余白を変える」「装飾を加える」「位置をずらす」など、いくつものhowを提示できることがデキるデザイナーなのだと思います。

最後に

デザイントレースのやり方を紹介している記事は数あれど、その意味を説明したものは意外に少ないのではないかと思い、今回こうして残すことにしました。前回の記事でも書きましたが、デザイントレースに限らず「何のためにやるのか」「何を目指してやるのか」を意識せずに無闇矢鱈にやるトレーニングは効率的ではありません。

意識的で自覚的なデザインのスキルアップをすることで、少しでも多くのデザイナーが生まれ、その価値が向上することを願いつつ、この記事が微力ながら助力できれば嬉しく思います。


いいなと思ったら応援しよう！

まいるどしゅがー/デザイナーのキャリアをデザインしたいインハウスUIUXデザイナー
よければ応援お願いします！ いただいたチップはデザイナーとしての活動に使わせていただきます！