初心者がWebデザインスキルを上げるための模写・トレースの方法

よくWebデザイナーになりたいけど、「デザインの何から勉強していいかわからない」という相談を受けます。そんなときに私がオススメしてる方法はすでにあるデザインの模写になります。この記事では模写の始め方からどうやって模写からスキルアップをしていくかをご紹介します。

なぜ模写が良いのか

模写をオススメする理由はデザイナーに必須のスキルである観察力をあげるところです。デザインの本などを素人のときに読んでも「さっぱりわからん」みたいなことには良くなりがちです。じゃあどうやってデザインの「常識」を知っていくかというと自分の手を動かして学ぶのが確実です。やってみるとわかるのですが、自分で0からデザインを作ってみると時間もかかるし、比較して良いデザインまで持っていくのが難しいです。しかし模写の場合は要素も決まっているのでゴールがイメージしやすく回り道をせずに良いと思えるデザインを形作れます。これが模写の魅力ですね。当然模写ができたも、すごい！なんて言われませんがこういった地道な努力の積み重ねでデザインスキルって上がっていきます。

デザインの引き出しを増やす

模写に限らずですが、デザイナーとして働く場合日々勉強になります。特にWebの業界は成長スピードが早いので、デザインの流行り廃りの入れ替わりが早いです。デザイナーとしてよく求められるスキルとして「それっぽく作る」というのがあります。それっぽくは、業界特有のデザインであったり、今流行ってるよく見るデザインなど様々ですがクライアントがイメージしてるもの、ユーザーがよく見るデザインのセオリーなどを知っておくとハイスピードで良いものが作れたりしますので、デザインの引き出しはあればあるに越したことはありません。これは新人に限らず、ベテランデザイナーにも同じことが言えます。私がデザインで担当するときは、その業界の雑誌やサイトを見たりしてコンテンツの紹介のされ方やよく使われるフォント、あしらい方などのセオリーを見つけるところから始めています。これらを抑えておくと「それっぽい」ができてユーザーにもクライアントにも違和感なく受け入れられるようになります。こういったセオリーは違いに気がつく着眼点が重要になりますので、模写を通じてそれらを鍛えます。

デザインツールに慣れる

これはデザインツールの初心者限定になるのですが、デザインツールに慣れるという目的があります。この場合は本やUdemyの動画で一通りツールの使い方はイメージはできるが実際に「こういうときはどうすれば機能で実現できるか」みたいな実戦形式の練習になります。一度学んだ程度ではみんなデザインツールの使い方まで覚えるのは無理なので、こうやって何度か自分で考えて調べて実践するみたいな繰り返しで慣れていきます。最近Web業界で使われてるデザインツールは下記になります。

バナーなど画像単品を作るもの

Webサイトやアプリなど画面が豊富にあるもの

どのデザインツールを使うのが良いのか

1つデザインツールに慣れると他のツールを覚えるのはそんなに苦労しないので、まずは1つ得意なデザインツールを作るところから始めるのがオススメです。私が今使ってるのでfigmaやSketchになりますが、始めて使うことを考えると日本語で情報の多いadobe XDとPhotoshopの2つですね。このあたりは本で覚えるより動画で覚えたほうが頭に入りやすいのでオススメです。動画はUdemyにいくつかあるので、あなたのスキルにあったものを探してみると良いと思います。 Udemyは30日なら返金がしてもらえるので、そんなに悩まなくて良いです。 udemyについては別の記事でまとめていますのでご興味おありでしたら御覧ください。動画学習サービスUdemy（ユーデミー）を１年間利用してみた評判と感想

模写をするときに気をつけるところ

模写と一言で言ってもただトレースしてあまり意味はありません。見るべきところはいくつかありますが下記に注意すると良いです。

複数のジャンルに手を出す

旅行業界・不動産業界など様々なジャンルがありますが模写の時点でジャンルを固定すると視野が狭くなるので、ジャンルにこだわるよりは自分が今まで手を出してしないジャンルをやっていくと良いです。

継続してやる

模写って簡単に思われがちですが、やろうとおもうと結構大変です。そして、暇を見つけてやろうとするとなかなか継続できないので毎日ちょっとでも時間を見つけて継続してやるほうが良いです。デザインの事を毎日考える癖がつくだけで日常生活でよく見るデザインも気になるようになります。

リデザインする

これは慣れてきてからの話しになるのですが、模写したものを自分ならどうするか？でアレンジしてみると実践的な練習になるのでオススメです。業務の現場でも複数案だすのはよくあるので、一つの形に捕らわれずに提案するのが当たり前になれるとデザイナーとして強くなれます。観察するときは下記の要素を整理してから始めるとやりやすいです。

なんのサイトか
ターゲットのユーザー層を予想
推しの要素
配色
書体

ダメな模写の方法

模写を続けていても成長しない人の特徴を紹介します。

簡単なものばかり選ぶ

模写でもシンプルな要素でまとめられてるものもあれば、複雑な要素を絡めてるものなど様々です。最初は要素の少ないシンプルなものから始めるのをオススメしますが、「素材を集めるのが大変」「切り抜きが多い」「バランスが難しそう」など時間やセンスを問われ難易度が高いものを避けてばかりでは上達しません。

素材がないとか言い訳する

勘違いされがちなのですが、仕事の現場でもバナーの素材が無いとかはよくあります。素材がないとバナーが作れないというデザイナーは仕事の現場では求めらないので、ないならどうするかを自分で考えて提案できるようにならないと仕事としてデザイナーを続けるのは難しいです。

どのくらい模写をすればいいのか

この手の質問をする人は焦ってるか、一定の時間をかけたらデザイナーになれると思ってる人のどちらかかと思います。正直言うとそんなの無いですし、大学に合格するには何時間くらい勉強すればいいですか？くらい的外れな質問です。成長のスピードは人それぞれですし、行きたい業界が違えばそれだけでもインプットする時間も変わってきます。何時間やればいいのかではなく、今自分のデザインしたものが同業界のバナーと見比べて品質的に遜色ないかという目線で考えたほうが現実的です。そこまでに行くには自分に今何が足りてないか、何が苦手で何が得意かそういった第三者の評価を自分のデザインから汲み取れるようになると成長はぐっと上がります。

模写でレベルアップする流れ

模写にもいくつか始め方があるのでご紹介します。

バナーの模写

一番最初に始めるのが多いのはバナーの模写です。ここでは下記のような部分を学びます

フォントの選定
色のバランス
要素のバランス
キャッチコピーの重要性
デザインツールの使い方

バナーのギャラリーサイト

バナーはギャラリーサイトなどから自分が良いと思ったバナーを選びます。

Webサイトの模写

続いてバナーに慣れてきたらWebデザイナーの腕の見せどころのWebサイトです。はじめはUIの一つ一つをPC版・スマホ版と比較しながら模写していくと良い練習になります。慣れてきてから1ページまるごと、またはTOPページと下層ページをまとめてやる感じが良いです。ここでは下記のような部分を学びます

UIの基本を知る
デザインのルールを見つけ出す
PC/スマホのデザインの違いを知る
デザインツールで共通化して効率よくデザインする方法を探す

UIの名称などは下記のページが参考になりますので一読するのがオススメです。

webサイトのギャラリーサイト

アプリの模写

やってみないとわからない最大のポイントがアプリとWeb（スマホ）のデザインの違いです。この辺は普段自分が使うアプリや人気のアプリを模写してみてアプリ特有のルールを学ぶのに最適です。特にiPhone（iOS）とAndroidのアプリでデザインが違うのでそれが何故かを知っているとUIデザイナとしてはかなり強くなれます。模写ではなく、自分で考えるパターンですが、#DailyUIというのが流行っていて、お題に対して自分でデザインを考えるというものになります。ハードルは高そうですが、これができると実務でのスキルも想像しやすくなるのでポートフォリオに活かせます。何より100個のお題をこなせるだけで信頼値が高いです。

コーディングで模写

これまではデザインツールでの模写でしたがwebデザイナであれば、コーディングもできて当たり前になります。コーディングの模写の場合もはじめはUIの1つ1つを模写していって慣れたら、1ページまるごとやっていくみたいな流れが良いです。コーディングの模写はいくつかコツがあるのですが、まずは自分で正解を考えるよりはそのサイトのCSSを真似ながら書いて、こういうCSSの使い方があるのかを知る流れが良いかと。慣れてきたら「自分ならこう書く」「こっちのほうが効率が良い」みたいな書き方が見えてくると思いますのではじめから無理にCSSを自分で考えてやるとはしなくて良いと思います。 CSSの模写を都度HTMLなどの環境を用意して書くのも大変なので、codepenのようにブラウザで書けるもので始めると楽で良いですよ。 CSSの応用というか、逆引き辞典のような本があるとこの場合役立ちます。

アニメーションの模写

忘れがちなのですがUIデザインを考える場合、アニメーションも重要です。アニメーションを作る場合はCSSやJSで書くのが望ましいですがadobe XDのようなデザインツールでもアニメーションを作れますのでそういったデザインツールでやっても良いかと思います。

模写でレベルアップするために気をつけること

模写をやるだけでは成長に限界があるので、ここを意識すると良いという習慣を紹介します。

挫折しない方法

模写に限らずですが、デザイナーになりたいっていう人はだいたい挫折します。体感ではWebデザイナーになりたいって言ってる人の6割くらいの人が途中で諦めてしまってます。理由は色々あると思うのですが、多くの場合は「理想と現実のキャップに耐えられない」ことかなと思います。私の場合仕事以外でも一週間の間に10時間くらいはなんらかの勉強に当ててます。 Web初心者の人でそれ以下の勉強時間の人はたくさんいます。 単純に勉強時間・手を動かす時間も少ないのに一人で諦めてしまう人が大半な気がしてます。特に最近は在宅やフリーランスなど魅力的な言葉でwebデザイナーになりたいって思う人は増えてるので…。個人的にいつもオススメしてる方法は小さな成功体験をたくさん積むことだと思ってます。まずは無理をせずに自分のできる範囲で「続けれる」インプットとアウトプットを習慣づけることで結構変わります。挫折しやすい人の多くは、難易度の高い目標に手を出してできないを繰り返す。そしてなぜできなかったかがわからない。それを繰り返して挫折してる人が多い気がしてます。はっきり言いますが、自分のスキル（立ち位置）も把握せずにやりたいだけが先行して理想のものをやろうとすればそうなるのは当たり前だと思います。偉そうなことを言いますがWebデザイナになるのは簡単ですが、ユーザーが「良い」と思ってくれるものを作るのは大変です。プロでさえ目立たない努力やスキルがあってその成果を出してることが多いです。挫折しない方法の根本として、自分の足りてるところと今後必要なところを理解しながら勉強するというスタンスがオススメです。そのためにはブログを書くのがオススメだったりします。ブログを書く理由は下記で紹介しています。未経験WEBデザイナーはブログを持ったほうが良いと思う私なりの理由

レビューをもらう

現役のデザイナーに模写のレビューをもらうのは実はめちゃくちゃ良いです。自分で気がついていない点、レベルが足りてない点を教えてくれますので、気付きのスピードが急速に上がります。レビューをもらうにはtwitterなどに上げて反応をもらうものもあれば、有料でメンターをつけてレビューをもらうというのもありです。私でよければこちらでメンターをしています。 MENTA

最後に

模写だけじゃなくデザイナーって泥臭いことがいっぱいあります。全然華やかじゃないところが多いです。ただ地道に努力を重ねて、自分の得意なデザインを見つけれるとWebデザイナーとしての価値が付きやすいです。 「これが得意です！」って言えるデザイナーは　いろんな人から評価されやすいです。 ※逆になんでもできますみたいに言うデザイナーは自分のスキル評価ができてない可能性が高いので、あまり評価されないですね…。ただ本を読むだけじゃデザインスキルは身につきにくいものなので、自分の得意を見つけたり、自分の適正を見つけるのに模写は最適なので諦めず続けていたらきっと良い結果に繋がりますよ(ゝω・)