UI/UXデザイナーがトレース100本ノックをやってみた（バナー/アプリ）

詳しく見ていきましょう。

はじめに

ぼくは26歳の時に未経験からWebデザイナー、UI/UXデザイナーを目指し、現在は事業会社のUI/UXデザイナーとして働いています。

ぼくのデザインスキルは雑魚でした。
ある時ぼくは、バナーやUIをデザインしても「なんか微妙…」な域から抜け出せず、もがいていました。
ぼくには、デザインの引き出しや審美眼が不足していたのです。

そこでぼくは、デザインのトレースを100本やり切ることに決めました。

デザインのトレースはとても大切で、うまい人のデザイン技術を吸収できます。
それは頭ではわかっていましたが、なまけ者のぼくは場当たり的にしかやってこず、
ちょっとだけやって「やった気」になっていました。

100本やれば間違いなく「やった」と言えるし、何か状況が変わるかもしれない…！そう思い、ひたすらトレースをしてみました。
おかげで少しデザインが上達し、見える世界が変わりました。

このページでは、ぼくのトレース100本ノックの様子や、100本ノックを通して学んだトレースの大切さをお伝えします。

少しでも参考になれば幸いです。

ルールとやり方

トレースのルール

なまけ者のぼくでも続けられるよう、ルールは次の２つだけにしました。

トレースは質を追いすぎると時間ばかりが溶け、かなり苦しくなります。
フォントや画像素材など、環境要因でどうしても再現しきれない部分もあるので、ある程度一線を引くことが大切です。

また、日によっては本業や趣味などで時間が取れないこともあります。
毎日できなくてもいいので、とりあえず100本やり切ることを目指しました。

トレースのやり方

ぼくは本業でアプリのUIデザインをやっているので、バナートレースとアプリ画面トレースを50:50くらいの割合で行いました。

バナーとアプリUIとでトレースのやり方が若干異なるので、それぞれ説明していきます。

バナーの場合

バナーの場合は、なるべく目トレ（目で見てトレース）を行います。

「目トレ」とは、バナーの上からなぞってトレースするのではなく、バナーを横に置いて、目で見ながら感覚で配置や色味、フォント等を合わせていくやり方です。

一通りトレースが終わったら、元のバナーと重ねてみて、どれくらいズレているかを確認します。
ズレていたら、また目トレでズレを修正し、重ねて確認…を繰り返します（時間が許す限りでOK）。

バナーの選び方ですが、BANNER LIBRARYやピンタレストを見て、「いいな」と思ったバナーを模写しました。

ぼくはシンプルでパキッとしたバナーが好きで、BEAMSのバナーとかをトレースしてました。
また、影の落とし方に苦手意識があったので、車やスマホ、食品系のバナーとかもたまにトレースしました。

アプリUIの場合

アプリUIの場合は、画面をなぞりながらでいいので、スペースの取り方やフォント等のサイズ、色などを、1px単位でかっちりと忠実に合わせていきます。

そして、気づいたこと、面白かったことをメモします。

アプリUIのトレースで大切なのは、各サービスのUIがどういう作りになっているのか、その仕組みを知ることです。

アプリはバナーと違い、日常的に使われることを前提にデザインされます。
たくさんの情報をうまくまとめながら、ユーザービリティと世界観を両立させるために、各サービスが様々な工夫をしています。

トレースするアプリですが、有名アプリやUIデザインに力を入れているサービスのアプリがおすすめです。

画面はどこでもいいですが、１画面全体をトレースすると結構大変なので、画面キャプチャ１枚分をトレースするので十分です（ぼくはホーム画面をよくトレースしていました）。

トレース1~100本の道のり

100本もトレースするので、楽しくトレースできる時もあれば、気が乗らない時もあります。

気が乗らない時は、文字組みだけのシンプルなバナーをトレースするのでもOKです。
大切なのは、とにかく100本やり切ること。

ちなみにぼくの場合、モチベーションをグラフに表すとこんな感じ↓でした（笑）。

1~10本目

わりと楽しくトレースを続けられます。

最初はトレースに時間がかかりますが、徐々に制作スピード（というか、時間内にそれっぽくできるようになる感覚）が上がってきて、成長を実感できます。

11~20本目

だんだんダルくなってきます（早い笑）。
作業ゲー感が高まってきて、手を動かす楽しさが薄れてきます。

一方で、色味の微妙な違いに気づけるようになり、色を合わせにいくのが上手くなってきました。

21~30本目

少し成長を感じにくくなります。

ここで一度、ゼロからバナーを作ってみるのですが、上手くいかず、焦ります。

「トレースのやり方を変えた方がいいのでは？」という迷いも出ましたが、
知り合いのデザイナーに相談し、今のままやり続けてみる決心をします。

31~40本目

気持ちが吹っ切れたのもあり、逆にトレースが楽しくなってきます。

気づいたら手を動かすのが早くなってきて、制限時間内にトレースをほぼ終えることができるように。
本業のバナー制作でも、ささっと手を動かしてそれなりのバナー、デザインを作ることができるようになってきました。

41~50本目

特に何も感じなくなり、無心でトレースを続けます。

色の合わせ方が上手くなり、１発でほぼ同じ色に合わせられるようになります。
目が肥えてきて、文字サイズやスペースの微妙な違いに気がつけるようになってきます。

このあたりからUIデザインのトレースも少しずつ始めていきます。

51~60本目

しっかりと審美眼が身につき、自分の感覚に自信が持てる感じになりました。

トレースの作業スピードがかなり速くなってきて、バナーによっては30分くらいで終えることも。

アプリUIのトレースは、AppleとGoogleのデザインガイドラインを読んでからの方が、的を得た感想を残せたなと反省（詳細は後述します）。

61~70本目

このあたりになると、ほぼアプリUIのトレースがメインに。

アプリUIの知見が溜まり、アプリごとのキャラクター性やデザイン手法、スペースの取り方などがわかってきます。

バナーのトレース量は減りますが、養ったスキルはちゃんと自分の中に残り続けます。

71~80本目

また作業ゲー感が高まってきて、飽きてきます。

この時は最近のアプリをトレースしまくっていたこともあり、アプリUIのトレンドがある程度わかるようになってきました。

テキストやアイコンの要素がかなり小さい傾向にあることに気づきます。

81~90本目

個人的にはここが一番キツかったです。

本業が忙しくなってきたのもありますが、休日にデザインするのがとても苦痛で、はやく終わりにしたい一心でした。

体にムチを打って、なんとかデスクに向かっていた気がします。

91~100本目

ようやく終わりが見えてきました（フルマラソンの最後みたい）。

もうこの頃になると目立った成長は感じにくくなりますが、100本やった充実感と心の余裕を感じられます。
デザインに対する自信がかなり高くなりました。

トレース100本ノックをやって学んだこと

ぼくがトレース100本ノックで得た学びは、大きく次の３つでした。

それぞれ見ていきましょう。

「マネてみる」はやっぱり強い…！

デザインに伸び悩んだ時、ぼくは「こうしたらデザインが良くなる！」系のHowTo本とか理論とかに目が行きがちでしたが、
やっぱり「いいと思ったものをマネる」が一番シンプルで楽しいし、成長を早く感じました。

もちろん理論も大事なのですが、やっぱりデザインは手を動かす場数が大切ですね。

何回・何十回もトレースをすることで、言葉では表現しにくい微妙な違いや「良さ」に気づけたり、
「〇〇っぽさ」を表現できるようになり、洗練されていく感覚が味わえました。

正直、100本もトレースしなくていいかも

ぼくがトレース100本ノックを始めた目的は、「なんか微妙…」なデザインスキルを改善することでした。

しかし、肌感ですが、この目的はトレース30~40本目あたりである程度達成した感じがあり、逆に40本目以降はけっこう成長が平坦になった感覚がありました。

グラフで表すとこんな感じ↓です。

なので個人的には、同じ目的で100本トレースを継続するよりは、

みたいに、30~40本区切りで目的を変えてみてもよかったかも、と思いました。

”デザインパーツ”がすごく貯まってラッキー！

”デザインパーツ”とは、例えば吹き出しやリボン、影の落とし方など、デザイン制作でよく必要になるあれやこれやを指します。

初見だと地味に制作に時間のかかるデザインパーツですが、トレースをやっておくと、こうしたパーツの作り方を自分の中にストックでき、次回からチャチャっと用意できるようになります。

また、一度作ったデータがあるので、振り返りもしやすくなります。

トレース前後でどれくらいデザインが上達したのか？

トレース100本ノックをやる前と後で、同じ案件でどのようにバナーのアウトプットが変わるのか、実験してみました。

今回用意した案件は、ざっくりと次のような内容です。

バナーのアウトプットはこんな感じ↓になりました。
左が100本ノック前、右が100本ノック後です。

右のバナーは、左のバナーを作った時の反省が多少含まれてしまっているので、ちょっとズルいところはありますが、
一応、個人的には次のような改善点が見られたかなと思いました。

いかがでしょうか？

デザイナーとしてはまだまだ改善点の多いデザインだし、賛否両論あるとは思いますが、
ひとまず、トレース100本ノックでどれくらいデザインスキルが変わるのか、その雰囲気だけでも伝われば幸いです。

補足：これから100本ノックをやる方へ

最後に、ぼくがトレースを進めてて思った、「これ先に知っておくと良かったな」ポイントをお伝えしておきます。

もしこの記事を読んで、「自分もトレース100本ノックやってみたい！」と思う方がいらっしゃれば、初めにこのポイントを読んでみてください。

きっと、スムーズにトレースが進められると思います。

また、前述したように、トレースするアプリUIは有名アプリやUIデザインに力を入れているサービスがおすすめです。

これは挙げるとキリがないのですが、ひとまず、ぼくが今回トレースしたもの中からおすすめを列挙しましたので、よければこれらを中心にトレースを進めてみてください。

これらのサービスは、UI/UXに力を入れて日々改善を行なっていたり、先駆的なUIデザインを取り入れていたりするので、なかなか勉強になると思います。

まとめ

以上でトレース100本ノックのお話はおしまいです！