最近、UIデザインの上達方法として「UI模写」が注目されています。
UI模写とは、スクリーンショットを見て、それをPhotoshopやSketchといったツールで完璧に再現する作業のことです。
なぜ、UI模写が注目されるようになったのか。また、どうしてUIデザインの上達方法としておすすめなのか。
今回は、そんな「UI模写」の概要や方法、メリットについて解説したいと思います。
UI模写のメリットとは？
UI模写のメリットは、「プロのデザイナーの思考をインストールできること」です。
なぜなら、既に完成したデザインを模写によって最初から再現することで、そのデザインの構成要素を明らかにできるからです。
デザインはよく「見た目を綺麗にすること」だと誤解されていますが、実際には様々な構成要素を緻密に組み立てることで成り立たせています。
例えば、UIデザインの場合、以下のような構成要素で成り立っています。
- レイアウト
- タイポグラフィ
- カラー
- トランジション
このような構成要素がどのように組み立てられているのかは、デザインの完成品だけを見ても分からないものです。
「すごく良いデザインだと感じるけど、どうして良いデザインなんだろう？」
それを分かるようにするために、UI模写が有効なのです。
UI模写を実際にやってみると、「この色は、こういう規則性で使っていたんだ！」「こういう場面では、このフォントを使っていたんだ！」という発見が得られます。
このプロセスを体験することで、UIデザインの上達につなげられるのです。
UI模写のやり方
UI模写のやり方は簡単です。模写する元になるデザインを横に置いて、それを見ながら隣で作業しましょう。
Sketchを利用する場合はアートボードを２つ作って、左側に完成品を置き、右側で作業するのが定番です。
ただし、完成品を半透明にして置いておき、その上からトレースするような方法はおすすめできません。
なぜなら、トレースはただ「なぞるだけ」の作業になりがちで、手段と目的が入れ替わりやすくなるからです。
UI模写は、デザインの観察力を養うという側面もあります。
隣に完成品を置いて、それを見ながら再現する方が「ここは20pxくらい空いているのかな？」といった気づきが得られ、UIデザインの実力も付きやすくなります。
UI模写をやるときの注意点
UI模写をやるときには、注意点があります。
それは「ただ手を動かすだけでは、UIデザインの上達にはつながらない」ということです。
UI模写というと、ひたすら模写するという「作業そのもの」に意識が向きがちです。
しかし、UI模写をする真の目的は、前述したように「デザインの構成要素を捉える」ことにあります。
ただ何も考えずにUI模写をしても、SketchやPhotoshopの操作方法には慣れるかもしれませんが、UIデザインの根本的な実力は身につきません。
よって「この配色は、どんなルールで行われているんだろう？」「このレイアウトは、どんな規則性で行われているんだろう？」と、デザインの構成要素を考えながら進めることがおすすめです。
もし余裕があれば、使われている色を抜き出してカラーパレットを作ってみたり、マージンの規則性を書き出してみても良いでしょう。
UI模写の目的は、模写するという作業そのものではなく、デザインの構成要素を掴むこと。
このことを、ぜひ覚えておきましょう。
基本的なデザイン理論も身につけよう
もし未経験の状態からUIデザイナーを目指す場合、残念ながらUI模写をするだけでは、それほどの効果は得られないかもしれません。
なぜなら、美大やデザインの専門学校に通った経験がない場合、そもそも基本的な配色やレイアウトといったデザイン理論が身についていないからです。
基本的なデザイン理論が何も頭にない状態でUI模写をしても、ただ何となくの作業になってしまい、デザインの構成要素を捉えるところまで到達しないでしょう。
そのため、UI模写という実際に手を動かす作業も大切ですが、未経験の場合は平行して座学的にデザイン理論の本を読むこともおすすめです。
デザイン理論を身につけるためには、下記のような本が良いでしょう。
この２冊は、デザイナーの卵や、デザインの勉強をし始めたばかりの読者におすすめです。
デザインの表面的なテクニックではなく、そもそもデザインとは何なのか、どういう考え方が大切なのかという本質を知ることができます。
これらの本でデザイン理論を学んでから、あらためてUI模写をしてみると、かなり違った見え方をして面白いと思います。