仕事にする

独学でWebデザインを学ぶ方法|初心者からWebデザイナーになるための本と学習サイト

  独学でWebデザインを学ぶ方法|初心者からWebデザイナーになるための本と学習サイト

Webデザイナーを独学で習得するためには、どんな手順で、どんな知識が必要なのでしょうか。

Webデザイナーの習得が最短なのは、Webデザイナースクール に通うことですが、安いものではないので、独学で勉強したいという人もいるでしょう。

今回は、Webデザインのスキルを独学で習得するため、参考書や勉強に役立つサイトを習得目安と合わせて紹介します。

学ぶ内容が難しく感じ、挫折することがないよう、最低限勉強が必要なラインも解説します。

Contents

1. 独学でWebデザインを効率よく勉強する手順と心構え

Webデザインとは

Webデザインとは、WebサイトのPC、タブレット、スマホデザインのことを言います。

Webデザインのスキルは、Webサイトのデザインをして、HTML、CSS、Javascriptを使ってコーディングするところまで含まれます

Webデザインを身につけるまでのロードマップ

Webデザインを学ぶには、何から始めたら良いでしょうか。効率よく勉強するために、まずはその順序を確認します。

  • 【ステップ1】
    Webデザインの基礎を知る
  • 【ステップ2】
    PhotoshopとIllustratorを学ぶ←必須
  • 【ステップ3】
    HTMLとCSSを学ぶ←必須
  • 【ステップ4】
    JavaScriptとjQueryを学ぶ
  • 【ステップ5】
    ポートフォリオを制作する←必須

これはWebデザインを独学で学ぶための一般的な勉強の手順ですが、HTMLから勉強する方法もあります。その場合は、3→1→2→4→5の順番に進めましょう。

この手順で学ぶメリットは、まずはWebサイトを作ってみてからデザインに入ることで、サイトの構造を理解したデザインができるということです。

最低限の知識を身につけようと思うのであれば、2→3→5でも可能です。挫折しそうになったら、分かるところからどんどん進めて行きましょう。

Webデザインを独学で学ぶのは現実的?

これからWebデザインを独学で学ぶ方法を紹介するので、全く不可能なことはありません。ただ、実際Webデザイナーとして働いている人で、独学で覚えたという人が少ないのも事実です。

独学で学ぶ確固たる意志、やる気がないのであれば、Webデザインスクールが早いでしょう。

独学でやる気がある人は、頑張って習得しましょう。

うさ吉先生

独学は大変だけど、ファイトだ!

2. 独学を始める前の準備

Webデザインを独学で勉強する前に、パソコンとAdobe製品が必要になります。まずはこの2つを準備しましょう。

パソコンのスペックについて

Webデザインを始めるには、パソコンは必須です。持っていない場合は、購入する必要があります。

もし持っているならば、それを使用しましょう。目安としては、5年以内に購入し、金額が10万以上、または10万前後の商品であれば、MacでもWindowsでも基本的には問題ありません

ただ、デザインは挙動が重くなるので、スペックが高ければ高いほどやりやすいというのはあります。

これから購入する人は、MacかWindowsか迷うかもしれません。結論としては、どちらでも構いません。デザイナーは、フォントが多いことから、Macを利用する人が多い印象です。

今後フリーランスで活動するのであれば、Windowsをおすすめします。HTMLを作成する際、ブラウザ確認が必要ですが、ブラウザの中で一番癖があるのがIE(Internet Explorer)です。

昔に比べ、IEの表示は良くなりましたが、今もIEだけ違う表示になる場合は少なくありません。IEは、Windowsのみのブラウザなので、表示確認までしっかりする場合は、Windowsが良いでしょう。

うさ吉先生

Windows、Macどちらも使ったが、Windowsの方が無料の良いツールが多くて、Macはフォントが充実してるからデザインするときにはいいな

Adobe製品を用意する

デザイン、コーディングで使用するツールは、AdobeのPhotoshop、Illustrator、Dreamweaver、XDになります。

Webデザイナーとして働くためには、Adobe製品は使えるようになる必要があります。これらが使用できるのはAdobe Creative Cloudコンプリートプランで、月額5,680円(年間68,160円)かかります。もし現在学生、もしくは教職員であれば、学割料金が使えるので、月額1,980円(年間23,760円)で使用することができます。

学生ならば良いですが、社会人も多いことでしょう。その場合は、スクールや通信講座を利用すると学割料金でAdobeが利用できます。 ヒューマンアカデミーは、アドビオンライントレーニング通信講座1ヶ月視聴とAdobe Creative Cloud12ヶ月の使用合わせて36,346円で利用できます。

社会人であれば、Adobeの使い方が学べ、通常のAdobe使用料より半額近いため、ヒューマンアカデミーでの申し込みがおすすめです。

ヒューマンアカデミーでアドビソフトウェアページへ

うさ吉先生

昔はサブスクがなかったから、Adobe購入に30万ぐらい必要だったんだ

3. 【ステップ1】Webデザインの基礎を知る

習得期間
1〜3週間
必ず勉強が必要?
このステップは飛ばしても進めますが、Web制作の全体が把握できるので、最後にでも確認しておきたい事項です。

まずは、Webデザインの基礎を学びましょう。Webデザインの考え方、運用方法など、一通り網羅した書籍で全体像を掴みます。

いちばんよくわかる Webデザインの基本◎

デザインだけでなく、HTMLやCSS、運用についてWeb制作全体を網羅した本です。まずは持っておきたい一冊です。

なるほどデザイン 目で見て楽しむデザインの本。

Webデザインに特化していませんが、デザインについて書かれた本です。デザインの基本的な考え方が学べます。絵が多いので、この本は息抜き代わりに目を通すと良いでしょう。

うさ吉先生

就職で仕事を探す上でも、Web制作の全体像を知っておくとやりたいことがより明確になるぞ

4. 【ステップ2】PhotoshopとIllustratorを学ぶ [デザイン編]

習得期間
4〜8週間
必ず勉強が必要?
必ず勉強しておく必要があります。実際、Illustratorは使わない場合も多いので、Photoshopだけ重点的に勉強しても良いでしょう

Webの基本を学んだら、実際にWebデザインを作っていきます。Webデザインをするときに一番使用するツールは、Adobe製品のPhotoshopです。Illustratorは、ロゴやアイコンなど部分的に活用します。最近では、XDもかなり増えてきました。

その他にもSketchなどのツールも少しずつ増えていますが、ほとんどの会社はPhotoshopとIllustratorを使っているので、PhotoshopとIllustratorは使える必要があります。

PhotoshopやIllustratorでデザインをする際、参考になる本やサイトをピックアップします。

世界一わかりやすい Illustrator & Photoshop & XD Webデザインの教科書

Photoshop、Illustrator、XDの基本的な使い方が掲載されています。まずは、PhotoshopとIllustratorに絞って勉強するで良いですが、後にXDの勉強をするときにも役立ちます。

Webデザイン良質見本帳 目的別に探せて、すぐに使えるアイデア集

デザインを作るときに一番困るのが、最初はデザインの引き出しが少ないこと。ヘッダー、フッター、メニューデザインをどうしようか、要素ごとに手が止まることも少なくありません。

デザインを作るときに、横に置いておけば、参考になり、デザインを作るスピードも上がります。

schoo(スクー)

schoo
https://schoo.jp/

schooは、リアルタイムのオンライン授業が無料で受けられるサイトです。授業のジャンルは様々ですが、Web関係の授業も数多く取り扱っています。

初心者には難しい内容が多いですが、最新の情報が得られるので、気になる講座があれば受けても良いでしょう。

うさ吉先生

schooは一通り勉強が終わった後に活用するのがベストだ

5. 【ステップ3】HTMLとCSSを学ぶ [コーディング編]

習得期間
6〜10週間
必ず勉強が必要?
必ず勉強が必要です。一番時間をかけたいフェーズです。

Webサイトは、デザインをHTMLとCSSを使ってコーディングすることで、Web上で閲覧できるようになります。HTMLとCSSが書けるよう勉強しましょう。

ツールは、Dreamweaverを使うことが多いので、HTML・CSSに関してと、Dreamweaverに関しての参考書やサイトを紹介します。

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

HTML、CSSの基本的な知識をつけるにはぴったりの本です。有名な「Webクリエイターボックス」ブログの運営者が書いた本です。

2カラムのサイト、フルスクリーンのサイト、タイル型のサイトと、色々なタイプのページの作り方が掲載されているので、コーディングの本としては最適です。レスポンシブについても触れています。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

Webサイトが表示される仕組みから、HTML、CSSと順に書き方を説明しています。

練習問題があるので、一冊沿って勉強すれば、基本が身につきます。「1冊ですべて身につく HTML&CSSとWebデザイン入門講座」とは似た内容なので、自分に合いそうな方を一冊選びましょう。

世界一わかりやすい Dreamweaver 操作とサイト制作の教科書 CC対応 世界一わかりやすい教科書

Dreamweaverの使い方を丁寧に解説しています。HTML、CSSの勉強をしながら、横に置いておきたい一冊です。

ドットインストール

ドットインストール
https://dotinstall.com/

動画を見ながら独学でHTMLやJavascriptが学べるサイトです。ほとんどの動画は、月額千円程度のプレミアム会員にならないと閲覧できませんが、本の代わりにこちらを利用するのも一つの手段です。

Progate(プロゲート)

Progate
https://prog-8.com/

Progateは、ドットインストールと同様、独学でHTMLやJavascriptが動画で学べるサイトです。こちらも多くの動画は、月額千円程度でプラス会員になる必要があります。

2サービスの違いは、ドットインストールの方が講座数が多いようですが、サービス自体は大差はありません。

うさ吉先生

HTMLとCSSは、できるだけ多くコードを書くことが上達の早道だ!

6. 【ステップ4】JavaScriptとjQueryを学ぶ [プログラミング編]

習得期間
4〜8週間
必ず勉強が必要?
できれば勉強して欲しい内容ですが、挫折しそうであれば、一旦飛ばしてポートフォリオの作成に進んでください。

Javascriptを独学で学ぶとき、JavaScriptのライブラリのjQueryを中心に勉強すると良いでしょう。

jQueryは、Javascriptを簡単に書けるライブラリなので、プログラミングが苦手な人でも勉強しやすくなります。

Javascriptでつまづく人も多いですが、できると差がつくので、しっかり勉強しておきたい技術です。

確かな力が身につくJavaScript「超」入門 第2版 (日本語) 単行本

初心者であれば、まず読んでおきたい一冊です。Javescriptの基礎がわかります。

jQuery標準デザイン講座

この本は、より実践ベースで活用できます。よく使用されるスライドショーやビューアーの書き方が載っています。

Javascriptの基本を身につけた後は、実際に動かしてみると上達が早くなります。

うさ吉先生

独学の中でJavascriptは山場かもしれない

7. 【ステップ5】ポートフォリオを制作する

習得期間
4〜8週間
必ず勉強が必要?
Webデザイナーとして仕事にするなら、必ず必要です。

デザイン、HTML、Javascriptの学習が終わったら、ポートフォリオを作成しましょう。正社員、アルバイト、副業、フリーランスを目指しているのであれば、どの場合も必要になってきます。しっかり作り込みましょう。

Webデザイナーのポートフォリオの作り方は、以下のコンテンツにまとめています。

もし趣味で勉強している人や、自分のショップや会社のホームページを作るため勉強している人は、自分の作成したいサイトを作りましょう。

うさ吉先生

ポートフォリオのデザインの意図、工夫をロジカルに説明できるといいぞ!

8. ワンランク上のWebデザイナーを目指すなら

Webデザイナーで差をつけるとしたら、情報設計、UI・UXデザインができるかどうかです

以前は、IA(インフォメーションアーキテクト)という職種があるぐらいサイトの情報設計は重要視されていましたが、今はUI・UXという言葉に吸収された印象があります。

サイトの情報に合わせてより効果的にデザインできる人は、実際少ない印象です。情報を無視した方が、見た目を優先できるので、一見綺麗に作ることができます。でも、それではサイトの本来の目的、例えばお問い合わせを増やす、商品を購入してもらうという目的が達成できません。

そういう意味で、情報設計能力はとても重要ですし、ワンランク上のWebデザイナーになりたいのであれば意識して制作する必要があります。

さらに、WebサービスやWebツールのサイトを作成するときは、UI・UXの知識が必要になってきます。より使いやすいアクションや導線を考える必要があります。

実践の中で身につけていくのも必要ですが、常に本やセミナーから知識を学んでおく習慣も大切です。

情報設計、UI・UXデザインの参考になる本をいくつか紹介するので、余裕があれば読んでおきましょう。

今日からはじめる情報設計 センスメイキングするための7ステップ

オブジェクト指向UIデザイン──使いやすいソフトウェアの原理

UIデザイン みんなで考え、カイゼンする。

ノンデザイナーでもわかる UX+理論で作るWebデザイン

うさ吉先生

情報設計のできるデザイナーが増えてくれるといいなあ

9. その他押さえておきたい技術・知識

プラスアルファで押さえておきたいWordPressやSEOの書籍についてもご紹介します。

WordPressは必ず使っておこう

WordPressは、実際の案件で使用することが多数あります。ポートフォリオでも、WordPressを使って作品を更新しやすく作成しておけば、転職の際のアピールにもなるし、ポートフォリオの運用が楽になります。

WordPressのカスタマイズは範囲が広いので、ゼロから組み込むのまでは難しいにしても、既存のテーマをベースにカスタマイズできるようにはしておきましょう。

[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)

SEOの基本的な考え方は知っておこう

SEOは、Web制作の範囲に含まれないので、必須で身につけておく必要はないのですが、プロフェッショナルとして働くのであれば、基本的な知識は必要です。

特に、SEOの内部施策はWeb制作に関わってくるので、押さえておきたい知識です。

SEO対策・超入門2020

うさ吉先生

SEOの本はGoogleのアップデートに関係するので、なるべく最新を選ぼう!

10. Webデザインを独学で勉強する前に習得期間を決める!

勉強する内容がわかれば、習得時間を決めましょう。最短だと1ヶ月で習得する人もいますが、通常は3ヶ月〜半年が一般的な習得期間でしょう。

習得期間スケジュール例

【ステップ1】
Webデザインの基礎
0.5ヶ月
【ステップ2】
デザイン
1.5ヶ月
【ステップ3】
HTMLとCSS
2ヶ月
【ステップ4】
Javascript
1ヶ月
【ステップ5】
ポートフォリオ
2ヶ月

スケジュールを組んでおけば、就職活動もスムーズに計画できます。

11. まとめ

Webデザインを独学で学ぶには、かなり忍耐力が必要になります。全くの素人であれば、わからないことがたくさん出てきます。

この記事を読んで、独学が合わないかも、と思った人は、素直にWebデザインスクールや通信講座を利用するのが良いでしょう。

最初は難しいかもしれませんが、わかってくるとものづくりの楽しさに出会えます。

Webデザイナーを目指す人は、是非頑張って習得してください。

うさ吉先生

Webデザイナーになった後も最新の技術を学ばないといけないから、独学に慣れればその後もどんどんスキルアップしていけるだろう

お困りですか?