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

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

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

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

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

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

Webデザインとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe製品を用意する

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

Webデザイナーとして働くためには、Adobe製品は使えるようになる必要があります。これらが使用できるのはAdobe Creative Cloudコンプリートプランで、月額7,780円（年一括86,880円）かかります。もし学生もしくは教職員であれば、学割料金が使えるので、月額2,180円（年一括26,162円）で使用することができます。

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

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

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

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

習得期間

1〜3週間

かならず勉強が必要？

このステップは飛ばしても進めますが、Web制作の全体が把握できるので、最後にでも確認しておきたい事項です。

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

いちばんよくわかるWebデザインの基本きちんと入門

デザインだけでなく、HTMLやCSS、運用について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は、リアルタイムのオンライン授業が無料で受けられるサイトです。授業のジャンルはさまざまですが、Web関係の授業も数多く取り扱っています。

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

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

習得期間

6〜10週間

かならず勉強が必要？

かならず勉強が必要です。一番時間をかけたいフェーズです。

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

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

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

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

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

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

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

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

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

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

ドットインストール

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

Progate（プロゲート）

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

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

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

習得期間

4〜8週間

かならず勉強が必要？

できれば勉強して欲しい内容ですが、挫折しそうであれば、いったん飛ばしてポートフォリオの作成に進んでください。

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

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

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

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

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

jQuery標準デザイン講座

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

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対策・超入門2023

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

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

習得期間スケジュール例

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

11. まとめ

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

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

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

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

• webデザイナー
• webコーダー
• フロントエンドエンジニア