最近、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模写をしてみると、かなり違った見え方をして面白いと思います。
実践的な技術を学ぶ
ここまで来れば、UIデザインについて基本的な知識はかなり身についているはずです。
UI模写によって手を動かす技術も向上しましたし、レイアウトや配色設計といった理論も学ぶことができました。
この頃になれば、楽しみながら色々なデザインができるようになっていることでしょう。しかし、ここで次の壁にぶち当たることになります。
それは「自分の制作でプロのクオリティにたどり着けない」という壁です。
この壁は、どんな分野であっても独学で学ぼうとすると必ず行き当たるものです。
もし趣味レベルではなく、プロのデザイナーを目指すのであれば、さらに相応のスキルを身につける必要があります。
そこでおすすめしたいのが、TechAcademy（テックアカデミー）というオンラインスクールを利用する方法です。
元々プログラミング学習サービスとして有名でしたが、最近ではデザイン分野のコースにもかなり力を入れており、最近アプリUI/UXデザインコースも公開されました。
SketchやProttなど、実際に現場で使われているソフトの実践的なテクニックが学べるので、かなりおすすめです。
オンラインスクールということで、スキルアップしたい社会人や学生向けに作られており、自身のライフスタイルに合わせてプランを選ぶことができるという点も魅力です。
例えば、学生で集中して時間が取れるのであれば「4週間プラン」を。
社会人で毎日１時間程度しか時間が取れないのであれば「12週間プラン」を選ぶことで、働きながら無理なく学習を続けられるよう設計されています。
具体的な料金やカリキュラムなどは、上記リンクの公式サイトから確認できますが、その際、まずは無料の「オンライン説明会」の動画から見てみてください。
説明会動画を見れば、どんな事が学べるのかといった全体像も掴めますので、興味がある方は、一度説明会だけでも覗いてみてください。