無理なく続けられる！手書きトレースのすすめ

こんにちは！tomonaca(@mt_web99)です。
この記事はOthloTech Advent Calender 2019の20日目の記事です。

はじめに

私はいつも、デザインの勉強をしようと決心しても取り掛かるまでに時間がかかってしまいます。作業に取り掛かるハードルが高く感じてしまうことが悩みです。

気軽に始められて、毎日続けられそうなデザインの勉強法ってないかな…と思っていたところに、TwitterのTL上で「手書きトレース」という単語を見つけたので、私も始めてみました。

（自己流）手書きトレースのやり方

実際にこちらから引用したバナーのトレースを例に説明します。
こんな感じで、バナーの手書きトレースの下に、自分なりに分析したことを書いていきます。分析する際には、

・惹かれた理由
なぜ目に留まったのか？を深掘りしてみる
・気づいたところ
レイアウト、余白、色味、コントラストなどについて気づきをメモ
・使用場面
ターゲット層、ユーザーがどんな場面で目に触れそうか、どんな感想を抱きそうかの仮説をメモ

この３つのポイントを意識して気づきを書き出しています。

この手書きトレースをするメリット

①時間がかからない

Illustratorなどのグラフィックソフトを使って本格的にトレースするよりも大幅に作業時間をカットできるので、忙しい日でも隙間時間にささっとできます。

②情報設計やレイアウトに集中できる

グラフィックソフトを使ったトレースだと、ソフトの操作方法や効率に目が行きがちなのですが、手書きトレースだと対象物そのものの情報設計やレイアウトに集中できます。

③デザインの意図・背景に着目できる

実際にユーザーの使用場面の仮説を立ててみる（妄想してみる）と、

なぜこんな言葉遣いのキャッチコピーが使われているのか？
なぜこのテイストのあしらいが取り入れられているのか？

という背景が見えてきます。

例で用いたバナーを例に考えてみます。

「キャラクターモチーフのポップなグッズの広告だから子どもに受けそう」「Youtubeの広告で出てきたら子どもがママに『ママこれ欲しい！』っておねだりしそう」
→子どもの注目を引くために、難しい言い回しを使わない
「おしゃべり」など子どもでも意味が理解できる単語をキャッチコピーに用いる

こんな感じで、（実際は違う可能性もありますが）自分なりにバナーとユーザーとのタッチポイントについて想像を膨らませてみると、ユーザー体験を考える練習になって良いのでは、と思います。

試験的に始めてみましたが、かなり良さげだったので続けてみたいと思います。

おわりに

この手書きトレースのやり方は、応用次第で色んな練習ができます。
バナー以外にWebサイトのキービジュアルをトレースしてみたり、Dribbbleなどに載っているUIなどをトレースして分析してみる、ということももちろん出来ます。トレースではなくリデザインしてみても学びが得られそうです。

もちろんグラフィックソフトを使って練習をすることも大事なのですが、こんな気軽なやり方でもじっくりデザインについて学ぶことができる！ということを共有できればと思い、この記事を書かせていただきました。

最後までお読みいただき、ありがとうございました！