有効なデザインの学習方法のなかに「トレース」というものがあります。辞書を引くと、「原図の上に薄紙を載せ、敷き写しをすること」とありますが、こうして模写することでオリジナルの作品のエッセンスを吸収する助けになります。
これはWebデザインやアプリの場合も同じ学習方法が有効で、例えば優れたデザインのWebサイトやアプリのUIデザインを模写したりすることで、独学によりデザインを学ぶことができます。また、Sketchなどのデザインツールの習熟のためにもちょうどいい使い方であるとされています。
UIデザイナーで、本当にスキルを身に着けたい人は、新規事業とかのキラキラした仕事を求めるのではなく、TwitterとFacebookアプリをSketch3で完コピして、何故このUIなのか背景を理解して、Prottで動かして触って、iOSのガイドラインを読み込むと早いと思うよ。
— Tomo Tsubota (@tsubotax) June 12, 2016
参考:【Sketch】TwitterのUIをトレースしながら研究しよう!(初心者向け) – NOGA BLOG
実際、僕もSketchを使いはじめた頃にTwitterやinstagramのアプリをスクショし、px単位で全く同じUIを作ってみるということをやっていたのですが、たしかにすごく参考になりました。
アイコンのサイズ、角のRの大きさ、区切り線の色、テキストの色、見出しの大きさ、日付のテキストの大きさ…、そのどれもがオリジナルであって、「なぜそうなっているんだろう…」と考えながらトレースするとものすごく学びが多い。
で、最近は提案資料を作ったり、プレゼン用の資料をつくる機会があったのですが、そのときに考えたのが「デザインが優れている資料をトレースするといいのではないか」ということ。
いま「すぐれたデザインを実現しているところ」と考えてすぐに思いつくのが、ベイジさんなのですが、その代表・枌谷さんのつくる資料が素晴らしく、トレースしてみようと思ったんですね。
参考:Tsutomu Sogitani, Ceo at baigie inc. at Baigie inc. | SlideShare
参考:Web制作会社・ベイジの新コーポレートサイトに、Webデザインの真髄を見た。 | ラキブラブログ – Lucky Brothers & co.
すると、やはりアプリのUIをトレースしたときと同様、すごくたくさんの学びを得られました。まあ、具体的なことはここでは触れませんが、すくなくともベイジさんが外に出す資料のデザインのクオリティの高さは、多くの資料作成者にとって参考になることと思います。
なにかひとつのTipsを見聞きしたとき、「あれにも使えるんじゃないか?」「こっちはどうか?」と横展開できる柔軟性は常に持っていたいものです。