グラフィックデザイン・Webデザインを独学で勉強する方法・手順

 

こんにちは、デザイナー・ブロガーの
ゆっきー（@elcielo_design）です。

 

今回はデザインスキルを身につける方法を
まとめて紹介していきたいと思います。

 

はじめに

デザインの勉強をしてスキルが身につくと
デザイナーとしてやっていくのは別とし、
今まで以上に自己表現の幅が増えてくるし
発信したいものも自ら作れるようになります。

 

例えば、自分のWebサイトや名刺デザイン、
魅力的なプレゼン資料、ブログの画像等
依頼ではなくてもデザインができるだけで、
日常の様々な場所で役立ってくるでしょう。

 

なので、これから紹介する勉強の方法を
是非デザインを学ぶのに使って見て下さい。

 

「注意事項」

 

では、紹介していきますね。

 

スポンサーリンク

グラフィック・Webデザインの
勉強は独学でもできるのか?

デザインの勉強方法を紹介する前、
よくある質問に答えておきたいと思います。

 

「グラフィックデザインやWebデザインを
  独学で勉強するのは可能でしょうか。」

 

そういったような質問が多くありますが、
結論から言えば、独学でもデザインは
身に付けることができる分野になります。

 

ですが、学校で学ぶ一般教科と異なっていて、
デザインは正解と言えるのは1つでないので、
決まった勉強法がなく、独学で勉強するのは
比較的難しいものだと感じる人も多いです。

 

ただ、その難しいと言われる理由には、
「何を」「どのように」勉強すれば良いのか
分かっていないから難しい場合が多くあり、

 

デザインの学ぶステップを決めて (順序立て)
必要な知識やスキルなどを身につけれれば、
どんな人でも独学でデザインは勉強できますね。

 

デザインの勉強を始める前に
理解しておきたいポイント。

独学で身につけれるとは言いましたが、
デザイン勉強で失敗や挫折しないために、
いくつかのポイントがありそれをしっかり
念頭に置いて勉強していく必要があります。

 

「理解しておきたいポイント3つ」

 

まずは、「最終目的を決めることが大切。」

 

なんとなくデザインの勉強をやろうとしても
最終目的つまりゴールのようなものがないと、
何をどれ程勉強すれば良いか分かりませんし、
モチベーションにも少なからず影響します。

 

また、勉強時間をきちんと確保できなければ、
いつまでも取り組んでもスキルが身につかず、
なかなかデザインがものにならないでしょう。

 

「デザインを勉強する」決意が固まったら、
しっかりそれと向き合い、集中することが
実は独学で上手くいく秘訣だったりしますね。

 

もちろんですが、お金・時間に余裕があれば、
グラフィックデザインやWeb・UIデザインを
オンラインスクールや専門学校等で学ぶ方が
短期間かつ確実に身につき失敗は少ないです。

 

3つ目の要点は、学ぶ順を間違えないこと。
(例えばHTML・CSSの前にJavaScriptを学ぶ)

 

そういった前提の知識や基礎を飛ばして、
デザインを学んでもよく分からないだけで
時間を無駄にするので気を付けましょう。

 

前置きが長くなりましたが、
次からが「デザインの勉強方法」になります。

 

デザインの勉強方法

「デザインの勉強のステップ」

 

はじめにグラフィックデザインを学んでから、
Webデザインを学んでいくのが良いです。

 

ぼく自身、実際にWebデザインを学ぶ前に
ポスターや雑誌等のグラフィックデザインを
美術大学で基本から一通り学んだのですが、
今思えばそれは正しかったように思えます。

 

デザインの基本の部分は、Webデザインでも
紙面デザインの場合でも変わりません。

 

Webデザイナーでグラフィックデザインを
あまり学んでいない人も中にはいますが、
Webデザインをする上で他のものと差別化や
カッコいいものを作るにはグラフィックの
知識はあるに越したことはないですね。

 

もちろん、グラフィックデザインを先に
学ぶのが絶対ということではないですが、
デザインに関わるなら学んで損はないです。

 

それにWebデザイン (UI/UXデザイン) から
勉強をしはじめ、キャリア (経験) を積んで
その後にグラフィックデザインの分野を
始める人も実際には少なくはありません。

 

グラフィックデザインを学ぶ。

「グラフィックデザインの5つの学び」

 

① デザインの基本ルールと
知識を理解する。

まずは、グラフィックデザインにおける
基本ルールや知識をしっかり学びましょう。
例えば、情報整理の仕方、揃えるポイント、
上手なメリハリのつけ方などになります。

 

これらはグラフィックやWebデザインを
やるから学ぶというものでは決してなく、
何のどのようなデザインをやるにしても
必要になってくる基本や知識の部分です。

 

また、デザインの基本は全く難しくなくて
いくつかのルールを覚え、それに合わせて
文字や画像を配置するよう意識するだけで
一気にデザインが良くなったりしますね。

 

以下の記事も参考にしてみて下さい。

 

デザインの基礎を書籍で学習

一番基本原則を学ぶには、
「ノンデザイナーズ・デザインブック」が
特に初心者でも分かり易いと思います。

 

その他の基本を抑えるのに読むべき
書籍も何冊か挙げ紹介しておきますね。

 

「ノンデザイナーズ・デザインブック」

 

「デザイン入門教室」

 

その他のデザインの基本が学べる本は
下の記事にまとめています。

 

② デザインの考え方・仕事の
仕方を理解しておく。

次にデザインを仕事にするデザイナーの
考え方や仕事の仕方を知っておきましょう。

 

そうすることで、グラフィックデザインの
学習を進める上で意識しておくべき点等が、
少しずつ分かってくるはずです。

 

参考になる書籍はこちらの記事で紹介。
気になるものから読んでみると良いです。

 

③ デザインツールの扱い方を覚えつつ
手を動かしてデザインを始める。

デザインの基本的な知識や考え方等に
ザックリ目を通すことができたならば、
実際に手を動かしデザインを始めましょう。

 

グラフィックデザインの勉強は結局の所、
沢山のデザインをすることが１番重要です。

 

ただし、デザインのルール (原則) として
意識しなければならない部分を知らずに、
感覚だけでデザインすると上達しません。

 

なので、先に紹介した書籍に目を通した上
手を動かし始めるのがおすすめです。

 

デザインツールを使えるようになる。

 

とはいえ、手を動かすにはツールが必要。
デザインツールを入手し準備しましょう。
そして、デザインツールを扱えるように
知識習得と共に練習をしていきましょう。

 

デザインツールは世界でも最も使われる
Adobe社が提供するツールがおすすめで、
グラフィックデザイン系の分野では主に
IllustratorとPhotoshop等を使えるように。

 

「基本となるデザインツール」

※ Adobe IllustratorとPhotoshopは、
グラフィックデザイン分野以外でも必須

 

ただし、ツールは機能が非常に豊富なため、
機能を順番に学ぶ方法はおすすめしません。
どこでどう使うかが理解できないからです。

 

そこで次の見出しで紹介する書籍を使って、
実際の制作物を作りながら学びましょう。

 

 

IllustratorやPhotoshopの使い方は
次の当サイトの記事でも紹介しています。

 

 

デザインツールIllustrator・Photoshopを書籍で学習

Illustrator・Photoshopの基礎を学ぶのに
個人的にお世話になった書籍を少し紹介。

 

「世界一わかりやすいIllustrator & Photoshop
　操作とデザインの教科書 改訂3版」

 

「Illustrator しっかり入門 増補改訂 第2版」

 

「Photoshop しっかり入門 増補改訂 第2版」

 

 

その他のIllustrator・Photoshopが学べる本は
下の記事にまとめています。

 

その他のIllustratorとPhotoshopが
合わせて学べる本は下の記事にまとめています。

 

④ フリーフォントをダウンロード

デザインは基本的に3つの大きな要素
「画像 (写真・イラスト)・文字・オブジェクト」
これらの様々な組み合わせでできています。

 

画像は有料・無料サイトから色々選ぶのに
フォントは定番や既存のものになりがち。

 

フォントも初めは無料のものでいいので
そのデザインや内容に合うものを選ぶことで
洗練されたデザインにつながります。

 

「PHOTOSHOPVIP」の下のページから、
フリーフォント一覧を見てダウンロード可能。

 

因みに、デザイン制作の際のフォントの選び方は
こちらの記事を参考に。

 

⑤ オリジナルのデザイン作品の制作
(良いデザインを参考に真似る。)

デザインツールの操作の扱いに大分慣れて、
参考の書籍・本等の見本通りにある程度
デザインを作れるようになってきたならば、
後はオリジナルのデザインの制作を通して
どんどん、スキルを上げていきましょう。

 

特に、Adobe Illustratorを用いながら、
ポスターや雑誌、ビラ等を作ると良いです。

 

ですが、初めは難しいと思うので、
まずは自分の名刺やショップカード、DM等
小さいものから制作し挑戦してみましょう。

 

なお、オリジナルデザイン制作といっても
デザインの形を0の状態から作ることは、
デザインを長くやっている人達であっても
それなりに時間はかかってくるものです。

 

なので、全て自分自身の学びや知識から
デザインを１から作り上げていくよりは、
もう既にあるクオリティーの高いデザインを
参考にしたり真似るのが習得はとても早い。

 

(もちろん、公の場で公開するデザインの
パクリに当たる行為はやめましょう。)

 

デザインのレイアウト (配置) を真似し、
文字・画像だけをオリジナルに変更する
そのように真似るものを多く組み合わせて
徐々に新しいものを作り上げていきます。

 

そして真似しているとは思えないデザインに
見えるようになるまで制作していきましょう。

 

デザインのアイデアとしてはこの記事で
紹介しているサイトが役立つと思います。

 

自分の名刺をデザインしてみよう。

オリジナルのデザインの制作で、
まず挑戦して欲しいのは名刺のデザイン。

 

名刺は、91mm×55mmのサイズという
とても小さな印刷物ではあるんですが、
デザインの基本ルールを知っていないと
綺麗にまとめることが難しいものです。

 

以下で紹介しているデザイン書籍・本等
素敵なデザインを見つけて真似しましょう。

 

そしてできるなら、自分で印刷発注まで
一通りしてみると良いでしょう。

 

グラフィックデザインは印刷まで関わる
必要があるので、印刷の知識は不可欠です。

 

ただし、始めからきちんと印刷の知識を
身に付けることはハードルが高いため、
そこは実践で数をこなしカバーするのみ。

 

初めはネット印刷を使用して安い紙で、
「自分の名刺」を発注してみましょう。

 

⑥ 実践を沢山積み上げる。

基本的な書籍を使い、一番基本となる
名刺制作ステップまでまとめましたが、
グラフィックデザイン分野を極めるには
実践するのが一番早い習得方法です。

 

自分自身が使うものはもちろんのこと
自分の所属する会社・学校 (サークル)、
友人や知人のお店・バンド・結婚式など
身近なところからデザインできるものを
探し率先して、制作を行ってみましょう。

 

また、本格的なデザイナーを目指すなら
アルバイトでもいいので現場に入って、
デザイン作業するのが本当は一番の近道。

 

とはいえ、未経験からデザインの現場に
入るのはなかなか難しいはずです。
自分のできる範囲から少しでも多くの
実績を積み重ねることをおすすめします。

 

ここから先は、Web (UI/UX) デザインの
勉強方法・手順についての内容になります。

 

 

Webデザイン
(プログラミング) を学ぶ。

「Webデザインの9つの学び」

 

⓪ Webデザインで
必要な知識やスキルを知る。

「Webデザイン」と一言に言っても、
それぞれのWebデザイナーによって
得意・不得意の領域、専門外のこと等、
実はできることがことが異なってきます。

 

なので、記事の最初の方で述べたように
どう言ったデザイナーになりたいのかを
ある程度、ゴールを決めておきましょう。

 

一般的には、Webデザイナーと言う人は、
以下を一定のレベル使いこなしています。
( ※もちろん個人差はあります。)

 

Webデザインで必要な知識・スキルとして
SEOとアクセス解析のことを挙げましたが、

 

SEO施策をするのにあたっては
デザインやコード時点から配慮の必要があり、
その知識をWebデザイナーが分かっていると
Web公開後もアクセス数あるものを作成可能。

 

Webデザインも含めてデザイン分野全般に
ただかっこいいもの綺麗なデザインだけが
目的ではなく、完成後に役立つかも大切です。
(それができて、一人前のデザイナー？)

 

なので、HTML・CSS等の基礎部分はもちろん
UI/UXデザインの分野の勉強も必要ですね。

 

独学では全て学ぶのは難しいことですが、
不可能でないので1つ1つ積み上げましょう。

 

次の項目から具体的勉強方法を紹介します。

 

因みに、最低限必要なスキルはこちら。

 

① HTML・CSSを学習する。

「HTML・CSS」

 

HTML・CSSはWebデザインの基礎部分で、
これを扱えないとWebサイトが作れない。

 

(コードを書かなくてできるものもありますが
やはり理解してると理解していないでは、
全然違てくるのでしかっり学びましょう。)

 

ですが、HTML・CSSは他言語と比較すると、
独学でも学習しやすく、短期間で基礎が学べ
習得しやすいWebデザインのスキルの一つ。

 

HTML・CSSの独学の学び方は以下の2つで
オンライン学習サービスを利用し学ぶか、
書籍で勉強するかに基本はなってきます。

 

HTML・CSSを
オンラインサービスで学習

「おすすめのオンライン学習サービス」

 

近年プログラミングやコーディングを学べる
無料のオンラインサービスが増えてきていて、
基礎だけでなく応用まで学ぶことができます。

 

オンラインサービスを利用することで、
インプットだけでなくアウトプットもでき
Webデザインのスキル習得を早めれますね。

 

ドットインストールかProgateどちらか
自分に合った方を是非使って見て下さいね。

 

codecademyは海外サービスになるので、
英語でも多少は大丈夫という方はどうぞ。
(英語はそこまで難しくなかったと思います。)

 

サービスの詳細やその他のものは下の記事で。

 

HTML・CSSを書籍で学習

書籍一冊にはWebデザインに必要な知識が
分かりやすくまとめてあるものが多いので、
オンラインより基礎を抑えやすいです。

 

ただ、始めから書籍で勉強してもいいですが、
オンラインサービスでHTMLやCSSの使い方の
ポイントやコツ等をある程度理解してから、
書籍でWeb制作全体の流れを掴むと効率よく
スキルを身につけれるような感じがしますね。

 

 

「1冊ですべて身につく
  HTML & CSSとWebデザイン入門講座 第2版」

 

「ほんの一手間で劇的に変わる
  HTML & CSSとWebデザイン実践講座」

 

この2冊を読めばHTML・CSSは、
大体理解できると思います。

 

その他のHTML・CSSが学べる書籍は、
下の記事にまとめています。

 

② JavaScript・jQueryを学習する

「JavaScript・JQuery」

 

JavaScript・jQueryはWebサイトに
動きを与える役割を担う言語になります。

 

HTML・CSSだけWebサイトはできますが、
デザイン性の面やユーザーの使いやすさを
追求すると必要になってくる場合が多い。

 

よく見かけるものだと、「カールセル」や
「ハンバーガーメニュー」と言ったものは
JavaScriptを利用して動作用していますね。

 

JavaScript・jQueryの独学の学び方も
HTML・CSSと基本は同じで以下2つで
オンライン学習サービスか書籍です。

 

JavaScript・jQueryを
オンラインサービスで学習

JavaScript・jQueryのオンライン学習も
HTML・CSSの内容で先ほど紹介していた
ドットインストールやProgateで学べます。

 

JavaScript・jQueryを書籍で学習

JavaScript・jQueryの書籍も多くあるので、
個人的におすすめの書籍数冊を
ここでは簡単に紹介しておこうと思います。

 

 

「1冊ですべて身につくJavaScript入門講座」

 

「jQuery最高の教科書」

 

 

その他のJavaScript・jQueryが学べる書籍は、
下の記事にまとめています。

 

③ 書籍・参考書等を見ながら、
Webサイトを作っていく。

①・②のステップで、HTML・CSS等の
知識を理解して学べてきたなと思ったなら、
次は書籍に載っている通りにコードを書き
Webデザインの制作をしていきましょう。

 

参考になる本のコードを丸写しするだけで、
かなりWebサイトを作る力はつけれます。

 

知識やスキルをしっかりつけてから
Webサイトの制作をしていくよりは、
分からないなりに手を動かすのが１番。

 

Webデザイン関連の書籍は、
次の記事にまとめています。

 

④ UIデザイン (プロトタイピング)
ツールを使えるようになる。

「特におすすめの人気のUIデザインツール」

 

本格的なWebデザインを制作する時は、
UIデザインをデザインツールを用いて作り、
そのデザインを元にHTML・CSS等で
コーディングして仕上がるのが一般的です。

 

(ある程度テンプレートがありそれを選んで、
HTML・CSSをいじるという場合もあります。)

 

UIデザインツールを扱えるようになると、
Webデザインで基礎からしっかりしたものを
作り上げるスキルを養うことが可能でしょう。

 

Adobe IllustratorやPhotoshopの利用で
UIデザイン制作ができないこともないですが、
近年は多くの企業でUIデザイン系に特化した
ツールを利用してWeb制作が行われています。

 

 

UIデザインツールの詳細は次の記事をチェック。

 

UIデザインツールを書籍で学習

UIデザインツールの基礎部分のスキルは
オンラインサービスでは習得し難いので、
きちんと基本からまとめてある書籍類を
参考に勉強するのがいいかもしれません。

 

 

「UIデザイナーのための
  Sketch入門&実践ガイド」

 

「豊富な作例で学ぶ
  Adobe XD Webデザイン入門」

 

「初心者からちゃんとしたプロになる
  Figma基礎入門」

 

その他のAdobe XDが学べる書籍は、
下の記事にまとめています。

 

その他のFigmaが学べる書籍は、
下の記事にまとめています。

 

UIデザイン自体を学びたいなら、
次の記事にまとめた書籍が参考になります。

 

⑤ フリーのコードを触りながら、
優れたWebを参考にテクニックを習得

ここまでのステップをある程度できてるなら、
ここで０から自身でWebを作っても良いが、

 

世界中でフリーで配布されている質の高い
テンプレートを無料ダウンロードして、
そのコードを好きなようにカスタマイズし
かっこいいWebを作るのも１つの方法。

 

ぼくも０からWebサイトを作る前に、
色々フリーのテンプレを触っていました。

 

合わせて、先輩のデザイナー達が制作した
かっこいい優れたWebサイト (デザイン) から
テクニックやアイデアを学んで吸収していき
自分のスキルに変えていくことが大切です。

 

Webデザインのギャラリーサイト

「おすすめのWebデザイギャラリーサイト」

 

かっこいい優れたWebデザインについては
Webデザインのギャラリーサイト等を
利用することで効率的に閲覧できますね。

 

また、最近のトレンドのWebデザインを
日々チェックするのにも欠かせません。

 

その他にも沢山あるので下の記事で
テーマ別に分けてまとめてみました。

 

⑥ 0から自分でWebサイトを制作

フリーのコードを触って制作もできたら、
もうオリジナルのWebサイトを0から、
作り上げていくことも簡単になってきます。

 

個人的に始めに作るのにオススメのWebは、
シングルページの完結型のWebがいいです。

 

もちろん、慣れるまではWebデザインも
各パーツごとに他のWebサイトを参考に
することでより良いもができてきますね。

 

そして、それと同時にWordPressを使った
Webサイトの制作をしていくのが良いです。

 

⑦ WordPressでWebサイトを制作

Webサイト運営や管理を簡単にするための
無料のソフトウェアとして「WordPress」
(ワードプレス) というものがあります。

 

実は、世界のWebサイトのおおよそ1/4は、
WordPressによりできていると言われており
Webデザインの分野を勉強しているならば、
ある程度扱えるようになっておきたいソフト。

 

WordPressを利用すれば、
基本のレイアウトはテンプレートがあるため、
元のデザインにアレンジを加えていくことで
Webサイトの制作をしていくことができます。

 

ブログやメディアを作成する時は、
特に使用することが多いソフトですね。

 

なので、WordPressの知識・スキルも
Webデザインの学びの１つになるでしょう。

 

 

なお、WordPressが学べる本は、
次の記事にまとめています。

 

⑧ SEOやアクセス解析の勉強をする。

Webサイトを制作して運営していく中で、
SEOについての知識はとても大切です。

 

Webサイトが完成しても見てもらえない
つまりサイトへのアクセスがなかったら、
頑張って作ったのに意味がないですよね。

 

アクセス解析のツーツについては、
「Google アナリティクス」が代表的であり
これだけで様々なアクセス解析が可能なので
とりあえずWebサイト制作後は入れましょう。

 

なお、SEOが学べる本は、
次の記事でまとめています。

準備中

 

⑨ Web制作で役立つ記事まとめ

Chromデベロッパーツールの便利な機能

 

 

最後にデザインを学んできた経験から

大学からグラフィックデザインを学び、
そこからWebデザインを学んだ経験から
思ったことや気づいたことを最後に紹介。