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

 

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

 

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

 

はじめに

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

 

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

 

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

 

「注意事項」

 

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

 

スポンサーリンク

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

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

３つ目の要点は、学ぶ順を間違えないこと。
(例えば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
　操作とデザインの教科書」

 

「Illustrator しっかり入門」

 

「Photoshop しっかり入門」

 

その他のIllustratorやPhotoshopが学べる書籍

 

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

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

 

名刺は、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はWebデザインの基礎部分、
これを扱えないとWebサイトが作れない。

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

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

 

HTML・CSSを書籍で学習

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

 

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

 

 

「いちばんよくわかるHTML5&CSS3デザイン」

 

「HTML5&CSS3デザインブック」

 

「HTML5/CSS3モダンコーディング」

 

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

 

その他の書籍は下の記事を参考に。

 

② 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の書籍も多くあるので
個人的に利用したオススメの書籍数冊を
ここでは簡単に紹介しておこうと思います。

 

 

「確かな力が身につく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
　UIデザインとプロトタイプ制作の教科書」

 

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デザインの学びの１つになるでしょう。

 

 

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

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

 

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

 

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

 

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

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

 

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

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