技術の習得方法

【完全初心者向け! 】0から独学でデザイン能力を身につける勉強方法・スキルアップ方法【WEBデザイン】

  • デザインをどこから勉強すれば良いか分からない。
  • デザイン能力って身につけられるの?
  • 未経験からデザインの仕事ってできるの?
  • 素敵なWEBサイトを作りたい。

デザインはどこから学びはじめれば良いか分からないという方もいらっしゃる方もいらっしゃるのではないでしょうか?

デザインというのは一般的にアートと同一と思われている時があります。自分は絵心がないから、デザインは難しいかなと思っている方もいらっしゃいます。

ですが、デザインはアートではありません。絵が描けなくても、コツを掴むことによりデザインをすることはできます。

今回は「完全に未経験者の方が0からデザイン能力を身につけ、仕事にできるようになる学習方法・スキルアップ方法のロードマップ」をご紹介させていただければと思います。

この記事を書いた人

WEB制作のフリーランスをしているくまミックスといいます。美大卒業。大学卒業後、独学でWEBデザインを学び、WEB制作者・デザイナーとして7年ほど会社員をしていました。現在は、 ウェブ制作のフリーランスをしています。

デザイン習得へのロードマップ

 

学習ロードマップ
  1. デザインツールの基本操作を学ぶ
  2. デザインの基本テクニック・理論を学ぶ
  3. デザインを模写してみる
  4. デザイン・作品を作ってみる
  5. 自分のデザインを分析する・人に評価してもらう
  6. いいデザインを見ることは、日常的にする

当ページの対象者

  • 未経験でデザイナーとして仕事につきたい方
  • 独学でデザインを勉強したい方
  • 素敵なデザインのサイトを作れるようになりたい方
  • デザイナーだけど、スキルアップしたい方

 

必要なもの

  • パソコン
  • インターネット環境
  • Adobeの各種デザインソフト

 

デザインツールの基本操作を学ぶ

デザイナーになりたいけど、まずは何をすれば良いか分からないという方もいらっしゃると思います。

もしデザインの仕事ができるように目指すのなら、まずはデザイン用のソフトを使えるようになりましょう。

世の中には無料の画像作成ソフトなあるのですが、仕事をするのなら、Adobeのソフトは現在デザイナーにとって必須になっています。

WEBデザイナーが最初に使い方を学ぶべきデザインツール
  • (WEBデザインの場合) Adobe XD
デザイナーが汎用的に使えるようになった方が良いツール
  • Adobe Photoshop
  • Adobe Illustrator

まずは無料でやってみる

WEBデザインをまずは勉強したいという方は、Adobe XDをダウンロードしてみましょう。

Adobe XDは、WEBサイトやモバイルアプリなどのデザインを作成するのに適したソフトです。デザインやプロトタイプ、デザインの共有などの機能が使用できます。

操作方法がシンプルでわかりやすく、近年プロのWEBデザイナーの方も多く利用されています。

こちらはAdobe IDがあれば無料のスタータープランから利用することが可能です。

 

また、有名なデザインソフトといえば、Adobe Photoshop とIllustratorです。

Adobe PhotoshopもIllustratorもどちらもWEBデザインをすることが可能です。

また、ソフトの特徴上、

Photoshopは写真の補正や加工などに向いたソフトです。

Illustratorは、チラシなどのグラフィックデザインに使用したり、ロゴ制作やアイコンなどの制作に向いたソフトです。

 

どちらも、Adobe公式サイトから、1ヶ月無料で体験することが可能です。

ただ、もし1ヶ月以上使いたいという場合は、全てのソフトが使用できる有料の「Adobe Creative Cloud」を契約する必要があります。

 

デザインの基本テクニック・理論を学ぶ

デザインの基礎を学べるおすすめの書籍

なるほどデザイン
created by Rinker
〜目で見て楽しむ新しいデザインの本!〜
「デザイン=楽しい」を実感できる新しいデザイン書籍。

けっきょく、よはく。余白を活かしたデザインレイアウトの本
created by Rinker
「”今”のデザインがわかる! 」と大反響。
グラフィックデザイナーはもちろん、ノンデザイナーの方にも役立つ1冊。

デザイン入門教室[特別講義] 確かな力を身に付けられる ~学び、考え、作る授業~
created by Rinker
グラフィックワークから企画書、プレゼン資料まで。
デザイン基礎力は、一生役立つ武器になる!

 

整列

人は規則正しく整列をしているものを見ると、本能的に美しいと感じます。

デザインにおいても、画像や文字などを、要素同士をきちんと整列すると、デザインのまとまりや安心感を与えることが可能です。

人の目はとても優秀です。少しのずれでも違和感を感じます。そのため、デザインをする際に「整える」という意識はとても重要になります。

隣接

人間は無意識のうちに同じ形をしたものや、近くにあるものを、1つの「グループ」として認識しようとします。

デザインにおいて、この法則を利用すると、わかりやすく見やすい情報として、第三者に伝えることができます。

強調

コントラストとは、ある要素と別の要素を「対比」させることで、情報の優先順位が分かりやすくなり、そのデザインを見る人が情報を読み取り安くする効果があります。

例えば、「見出し」と「テキスト文章」のサイズやデザインを変え、「見出し」をまず見やすくすることで、パッとみた時に、全てのテキストを読まなくても、どのようなことが書かれているか推測することが可能です。

また、全ての要素を同じ大きさでレイアウトをしてしまうと、短調で面白みのないデザインになりがちです。そのため、コントラストを使用することにより、より魅力的なデザインを作ることが可能です。

反復

反復は、複数の要素に同じデザインルールを使用することで、デザインに統一感が生まれ、情報をみやすくする効果があります。

記事一覧など、基本的なデザインのパーツを並べたサイトのページをよく見るのではないでしょうか?

それらは、この「反復」を使用しています。

デザインを模写してみる

デザインはどうやって練習していいか、分からないという方も多いのではないでしょうか?

基礎的なデザインの考え方を学んだら、あとは、自分で手を動かすしかありません。

ですが、いきなりデザインをしてみてと言われても何をすれば良いか分からないという方もいらっしゃるのではないでしょうか?

まず最初はデザインソフトの使い方の練習という意味でも、素敵だと思うサイトの模写をしてみてもいいかもしれません。

やり方は、自分が素敵だと思うサイトのスクリーンショットをとり、デザインでアートボードの横にそのスクリーンショットを貼り、真似していきます。

 

こちらの練習をする際は下記のことを意識してください。

 

模写する時に意識すること
  • 要素と要素の余白は何pixelか。
  • 色はどんな色を使っているか。どんな組み合わせを使っているか。
  • この元のデザインは何を強調したいか。
  • 文字の大きさや行間。
  • どんな写真やイラストが使われているか。それがどんな印象をもたらしているか。
  • レイアウト

上記はデザインを見る上でも重要な視点です。

 

デザイン・作品を作ってみる

次に、自分でデザインを作ってみましょう。

WEBデザインの場合は、例えば架空のカフェやお店などを想定して作っても良いかもしれません。

また、好きなお店やブランドがある場合はそのお店のサイトデザインを作ると想定してデザインしても面白いかもしれませんね。

デザインを作る際は、「どのようなデザインを作るか」の他にも、「このお店はどんなことをお客様に伝えたいか」「どう見せれば、お店がより魅力的になるか」を考えながら作成してみましょう。

自分のデザインを分析する

自分でデザインしたものを分析し、どこがよかったか、どこが上手く表現できなかったかを分析してみてください。

自分がなぜこのデザインにしたかを言語化できるのはとても大切です。

チェックすること
  • 余白はしっかりと取っているか。
  • なぜこの色にしたのか。
  • なぜこのレイアウトにしたのか。
  • なぜこのデザインにしたのか。
  • 最初に設定したお店のコンセプトにあっているか

また、もし可能でしたら、人に見て意見をもらうと良いかもしれません。

その際は、どんなことを意識し、どんなコンセプトで作ったのかを必ず一緒に伝えましょう。

(ただ、人によっては悪いことを言ってくれない方もいらっしゃるので、こちらは聞く相手を選んだ方が良いかもしれません。)

 

いいデザインを見ることは、日常的にする

いいデザインを見ることは、習慣にした方が良いです。

WEBサイトで良いデザインを集めたギャラリーサイトがあるので、こちらは目を通しておきましょう。

おすすめは下記になります。

  • SANKOU!
  • MUUUUU.ORG
  • URAGAWA

また、デザイン全体ですと下記サイトがおすすめです。

  • Pinterest
  • Behance
  • Dribbble

 

この記事のまとめ

現役WEB制作フリーランスが自分の経験をもとに、初心者向けの「0から独学でデザイン能力を身につける勉強方法・スキルアップ方法」を公開してみました。

これからWEBデザインの仕事をしてみたいという方はぜひ参考にしてみてください。

ABOUT ME
WEBクリ開発者
当ブログでは主にWeb制作・HTML・ CSS・SCSS・JavaScript・jQuery・Vue.js・Wordpress・個人開発情報の情報を発信。 WEBデザイナー・コーダー・プログラマー向けのサイトです。 また、個人開発のサービスやアプリのお知らせもさせていただいています。