アイキャッチ

WEBデザインのスキルを上げよう!~効率的な練習方法「模写」のやり方

「WEBデザインがもっと上手くなりたい」
「もっとセンスある素敵なサイトを作りたい」

そんな風に思って参考書や学習サイトなどで勉強していても、基礎知識は頭に入るけど、実際デザインをしてみると、「なんか違う・・・」なんてことありますよね。

また、独学は時間もかかるし、良いデザインができている実感がわかないという方も多いとと思います。

実は効率よくデザイン力が身につく方法があるのをご存知ですか?
実は、手を動かしながら、知識やテクニックを効率よく学べる練習方法があるのです。

ここでは、WEBデザイン力を上げたいあなたに、実際に手を動かしながら、デザインのテクニックやコツを学べる方法をお伝えします

すぐに実践できる方法なので、ぜひこの記事を参考にやってみてくださいね!

WEBデザインのスキルを上げるには

本を読んだり、ネットで調べたりしても、デザイン力を上げるのはなかなか難しいものです。

そこで、独学でも効率よくデザイン力をアップさせる方法をお伝えします。

デザインの模写がおすすめ

「模写」とは、その名の通り、お手本として選んだデザインと同じものを再現することです。
他人が作った作品を、見たまま自分の力だけで細部まで再現していくのです。

バナーだけでなく、WEBサイトやランディングページなども模写すれば、コーディングの練習もすることができます。

一見簡単そうですが、ただ同じものを真似して作ってみることが目的ではありません。
模写の目的を知っていると、デザイン力をどんどん向上させることができます

模写には学べることがたくさんある、とてもいい練習方法なので、次で模写のメリットをお伝えしていきますね。

なぜ模写がいいのか

模写のメリットとして挙げられるのが「観察力が身に付く」ということです
世の中に出回っているデザインには、先輩デザイナーの知識や経験が反映されています。

模写をすることで、作品に使われているテクニックや知識を見抜く観察力が身に付いていくのです。
次に、あげられるのが「デザインツールの操作をマスターできる」ということ。

実際に作品に使われているデザインを自分でも再現しようとした時、中には今まで使ったことがないテクニックを使わなければいけない時も出てくるでしょう。

自分が知らない使い方を調べながら作品を模写していくことで、だんだんとデザインツールの操作に慣れ、使えるテクニックが増えていきます。

このように模写は、先輩デザイナーの経験や技術を、自分の引き出しとして確実に手に入れ、自分の熟練度を増すことができる、効率の良い練習方法になのです。

模写で学べること

模写はデザイン力やツールのスキルアップに役立てられるメリットの多い練習方法です。
では次に、模写で学べることを具体的にお伝えしていきます。

デザインの構成や要素

まずは「いいデザインだな」と思う作品の構成要素を一つひとつ分解して、じっくり見てみましょう。
写真や文字、それぞれの色、余白などたくさんの要素で構成されていますよね。

このようにデザインをじっくり分析してみると、それぞれに意味があって、ルールに基づいて作られていることがわかると思います。

WEBデザイナーは配置や配色、配置や余白の量などを全て意図してデザインします。

例えば、写真とコピーの高さを揃えたり、余白は均等になっていたり、文字と背景の色に差をつけて読みやすくしたり・・・。

「なぜ、これはこういうデザインになってるのか?」と意識しながらじっくり見ていくことで、良いデザインの共通点を学び取ることができ、良いデザインとそうでないデザインの見極めができるようになります

こうして目を養うことは、自分が目指すクオリティのものを作れるようになる第一歩なのです。

デザインツールのテクニック

デザインの構成要素を観察していると、自分がやったことがないデザインの表現を発見するはずです。

例えば、文字にざらざらとしたテクスチャがついていたり、ボタンがもこっと飛び出て見えたり、さりげなく星がちりばめられていたり。

こういった表現は、本や動画を見ていても、実際にそのテクニックを使って作品を作ってみないと身につかないものです。

作品で見つけたテクニックを「どのように表現されているのか?」、「ツールのどの機能を使って作っているのか?」を調べ、実際に使ってみることで、ツールを使える幅がどんどん広がっていきます。

また、繰り返し制作してみることで、機能の場所を覚えたり、ショートカットキーを覚えたりして、作業スピードもアップしていきます。

模写のやり方

次に、模写のやり方を順を追って説明していきます。

実際にあなたも模写をやってみましょう!

模写するデザインやサイトを探そう

まずは「このデザインいいな」と思うお手本を探しましょう。
お手本を探すのにオススメなのがギャラリーサイトです

バナー画像なら「バナーまとめ」や「バナーデザインアーカイブ」が、作品数も多く、サイズごとで検索できるのでオススメです。

HPなら「MUUUUU.ORG」や「81-web.com」といったサイトが有名で、今時のお洒落なサイトがたくさん掲載されています。

LPのギャラリーサイトといえば「LPアーカイブ」や「ランディングページ集めました」。

また、バナーやLPなどいろいろなデザインをひとつのサイトで見ることができる「Pinterest」は、使い勝手がよく重宝します。

なお、初心者がいきなりHPやランディングページをお手本にするのは少しハードルが高いので、最初はバナーがおすすめです

バナーで何回か練習をしてみて、ある程度慣れてきたら、少しデザインが複雑そうなもの、Facebookのやランディングページのヘッダー画像など、どんどんステップアップしていきましょう。

デザインに慣れスピードもアップしてきたら、ぜひHPの模写などにも挑戦してみてください。

お手本のデザインをよく観察しよう

お手本のデザインが決まったら、その作品をじっくりと観察しましょう。

具体的に観察すべきポイントは

  • レイアウト
  • 文字サイズ
  • 書体
  • 配色
  • 余白
  • 写真

です。

一つひとつ解説していきますね。

レイアウト

まずレイアウトが決まらなければ、どんなに素晴らしいテクニックを使っていても、デザインが引き立ちません。

どこに文字や写真を配置しているか、それぞれの大きさはどれくらいかを見極めましょう。
ノートに書き出してみると、よりレイアウトを把握できます。

お手本をよく見ると、何となく目立つ部分が見えてくるはずです。
「なぜ、この配置なのか」ということを意識してノートに書いていきましょう

文字サイズ

メインコピーとサブコピーで大きさが違ったり、装飾で使われている文字の大きさであったりと、ひとつの作品の中で、使われている文字のサイズはひとつではありません。

またHPやランディングページであれば、見出しや本文の規則性、行間などにもルールがあるはずです。

どれくらいの大きさが読みやすいのか、どれくらい大きさに差をつけるとバランスがいいのかといったことを意識してみましょう

フォント

フォントの種類で印象が変わる、ということを意識してフォントを選んでいますか?
基本的にデザイナーは、伝えたい印象やターゲットに合わせて、フォントを使い分けています。

例えば、子供向けのサイトと、高級化粧品のサイトでは使われているフォントは全然違いますよね。

このように使われているフォントから受ける印象と、そのデザインをみるターゲットを意識しながら観察してみましょう

配色

フォント同様、配色についても与えたい印象やターゲットに合わせて変える必要があります

例えば、ママ向けならパステルカラーで暖色を使っていたり、子供向けなら原色でたくさんの色を使っていたり。

また、色には色自体が持つイメージや心理的作用があります。

赤は情熱や活力のイメージがあり、採用ページによく使われていますし、紫には神秘や上品といったイメージがあるため、スピリチュアルや占いなどで多用されます。

他にも、同系色やアクセントカラーの割合や、色のトーンでも与える印象がかわってくるのです。
どうしてこの色が使われているのか?を考えながら、作品を見てみてください。

余白

デザインにおいて、余白はとても重要な要素です。
余白の取り方がイマイチだと、あっという間に素人っぽくなってしまいます。

余白にはデザインを目立たせてキレイに見せる目的と、全体のバランスを取る目的の二つがあります

どれくらいの余白がキレイに見え、バランスがよく見えるのか?
これはたくさんの作品を見ていくと、だんだんわかってくるものです。

たくさんの作品を見て、上級デザイナーのテクニックを吸収していきましょう。

写真

写真を何気なく置いてみたら、「なんか暗い」「雰囲気が思ってたのと違う」と感じたことはありませんか?

実は、キレイに撮られた写真であっても、意外に暗く見えたり、色味が合わなかったりするので、デザイナーは作品に合わせて加工を施しています。

他にも、切り抜いた画像にさりげなくドロップシャドウをつけていたり、境界線をつけたりといった加工もよくみられます

お手本のデザインをよく見て、どんな加工をしているのか見抜いていきましょう

デザインツールを使って模写しよう

お手本となる作品を観察し、要素の大きさや配置などを書き写したら、意識すべきポイントを書き込んでみてください。

そして、お手本の作品のスクリーンショットを撮影し、デザインツールで開きます。
そのスクリーンショットを下敷きにして、その上にデザインを作っていくようにして模写します。

写真は、同じものが手に入らない場合、似たようなもので構いません。

フォントはなるべく同じものが良いですが、有料のものなど全く同じものが用意できない場合は、似たフォントでも大丈夫です。

装飾や背景画像、特殊効果などのデザイン部分は、細かいところまでしっかりと観察して細部まで出来る限りコピーしてください。

このやり方で模写をする時は、ぴったり合わせて作り、1pxのズレもないように作っていきます

そうすると、部分的に微調整していたり、特殊効果の度合いであったりと、すごく細かいこだわりまで気付けるようになります。

慣れてきたら、上からなぞるやり方ではなく、お手本を横に置いて、それを見ながら模写してみましょう。

少し難易度が高くなりますが、是非チャレンジしてみてください。

もっとデザイン力をアップするには

模写は、デザインの知識と制作スキルの両方を学ぶことができますが、もっとデザイン力をアップするは以下のことをやってみましょう。

気づいたことをアウトプットしてみる

模写を終えたら、たくさんの気づきがあったことでしょう。

デザインを模写することは、あくまでもインプット作業になりますので、まずは、デザインをしてみて気づいたこと、次に活かしたいことなどをメモしておきましょう

そして、得たテクニックや知識は、引き続き使わないと忘れてしまうので、次回からのデザイン制作でも、どんどん活用してってください。

スキルアップには、インプットだけでなくアウトプットすることも大切なのです。

オリジナル作品の制作で得たスキルを実践する

模写を何回かこなしたら、オリジナル作品を制作して模写で得たスキルを試してみましょう。
オリジナル作品では、いろんなことに挑戦するチャンスです。

例えば、お手本のレイアウトや装飾はそのまま利用して、色味を変えてみたり、違う効果を付けてみたり。
フォントを変えてみるのもいいでしょう。

お手本からいい要素だけを抜き取り、オリジナル作品に反映させてみてください

いろんなことを試してみて、元のデザインとの違いを考えてみてください。
そうすることで、模写とはまた違った新しい気づきが得られ、さらなるスキルアップにつながります。

スキル定着のためには、模写を継続するのが一番

模写をやり続けることは大変かもしれません。
ですが、スキルを定着させるのには、やはり継続することが一番です。

時間がとれる時に、少しずつでも模写をしていきましょう。
できれば毎日が理想ですが、難しい場合はスケジュールを組んでやっていくことをオススメします。

毎日続けていると、自分がうまくなっているのかどうかあまり分からないかもしれませんが、最初のころの作品と見比べると上達しているのがわかるはずです。

また、制作するスピードも早くなっていることでしょう。
継続することで成長を感じられ、自信にもつながっていきます。

模写は地味な努力ですが、継続することはデザイン力のアップになることは間違いありません

まとめ

今回は、模写はデザイン力アップに最適な練習方法だと言うことをお伝えしました。

模写は、お手本として選んだデザインと同じものを再現することで、デザインに使われている技術を見抜き観察力が身につき、さらにデザインツールの操作、デザインのコツやテクニックを学べる効率的な方法です。

良いデザインだと思うお手本をよく見ながら、ズレなく再現していくことで、上級者のテクニックを自分の引き出しにすることができます。

模写でスキルを得たら、それを定着させるために自主制作で実践していきましょう。

デザイン力は、継続して作ることが大切です。

世の中にはステキなデザインがたくさんあるので、そういった作品から技術を吸収して、どんどん自分の力にしていってください!

関連記事一覧

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。