Webデザインを学ぼうと思った時に、次のようなことを感じたことはありませんか？
- Webデザイナーになるにはどんな勉強をしたらよいのか
- 何をどのような順番で勉強したらよいのか
- 自分の勉強の仕方が正しいのかわからない
そのような疑問や不安から、最初の一歩を踏み出せなかったり、遠回りした勉強になってしまう、なんてことにも…
効率よく学習していくために、正しいWebデザインの勉強手順を理解しておくことは重要です。
この記事では、独学によるWebデザイン学習のロードマップを公開します。
目次
Webデザインの勉強を始める前に
まずWebデザイナーを目指すのに必要なものを確認しておきましょう。
- パソコン
- Adobeソフト
- ネット環境
Webデザインに使えるパソコンを用意する
高価なパソコンは不要ですが、一般向けのエントリークラスのマシンでは力不足なこともあるので、Webデザインに適したパソコンを用意しましょう。
- CPUは core i5以上
- SSDストレージ
- メモリ16GB
- sRGBカバー率の高いディスプレイ
上記はWebデザイン向けのパソコンの主な条件です。
既に持っているパソコンが上記要件を満たしているなら新調しなくてOKです。
スペックの詳細やおすすめ機種については別記事で詳しく解説しているので参考にしてください。
Webデザイナー必携のAdobeソフトを購入する
パソコンにインストールするソフト（アプリケーション）の中で、必須なのがAdobeのソフト（Adobe Creative Cloud）です。
Adobeはサブスクリプション型のサービスで、Adobeの全ソフトが使えるコンプリートプランは年間で72,336円と高いです。
ですが、デジハリONLINE Adobeマスター講座を利用すれば、72,336円 → 39,980円と約45％OFFの値段で購入できるのでおすすめです。
デジハリONLINE Adobeマスター講座は、Adobeソフト1年分と使い方が学べる動画教材がセットになっている講座ですので、購入しない手はありません。
動画教材の視聴期間は1ヶ月間のみですが、Webデザイン初心者が最低限学んでおくべきPhotoshopとIllustratorの基礎は十分学べるでしょう。
なお、無料ソフトも含めてWebデザインに必要なアプリは別記事で詳しく解説しているので参考にしください。
安定したネット環境も重要
最近では家の固定ネット回線を引いていない人も少なくないでしょうが、Webデザインをやるには固定ネット回線は必須です。
固定回線は、容量が無制限であること、モバイルに比べて通信が安定していることが大きなアドバンテージです。
容量のあるファイルの送受信なども発生する仕事ですから、家の固定回線を整備しましょう。
最も利用者が多いのがNTTフレッツ光回線ですが、フレッツでは現在「光コラボ」というサービスモデルが主流になっており、ほとんどの場合、従来型の契約より料金が安くなります。
既に光回線を利用している人も、古い契約のままであれば、見直してみるのがおすすめです。
独学で勉強するにはどんな方法がある？
独学の方法はいくつかあります。
- 本
- 動画
- 学習サイト
基本的には自分のやりやすい方法で勉強していけばOKです。
複数の方法を組み合わせるのもよいでしょう。
それぞれの特徴を確認しておきましょう。
体系的に学ぶなら本
本の良いところは、体系的に学べるところです。
本を頭から順にページをめくっていって読み終える頃には、その本が題材にしていることをある程度網羅的に理解できるよう作られています。
目次や索引が充実しているのも本の良いところで、欲しい情報にアクセスしやすく、繰り返し学んだり、忘れた時の復習もやりやすいです。
良い本を選ぶ1つの方法として、本のバージョンアップがされているかを確認する方法があります。
Web関係の本は情報がすぐに古くなるので「増補改訂版」「第二版」のようにバージョンアップされることがよくあります。
バージョンアップがされるとすれば、その本は一定の支持を得ている（売れている）と推測できます。
「自分に合っているか」という視点は残るものの、客観的な視点での参考にはなるでしょう。
ちなみに、私がおすすめする初心者向けのWebデザイン本は別記事にまとめてあるので、よかったら参考にしてください。
Webデザインの勉強にはブックスタンドの使用を強くおすすめします。
本を見ながらの操作や入力が多いので、ブックスタンドが有るだけで本を固定するストレスがかなり軽減されます。
動画教材は理解しやすさ抜群
動画教材の良いところは、動きや時間による変化がわかりやすい点です。
Webデザイン関連で言えば、PhotoshopやIllustratorなどの学習で特に相性がよいでしょう。
「どう操作すると、どのような状態になるのか」を視覚的にイメージできます。
「理解しやすさ」で言えば、動画は本より優れています。
初学者に最も優しいスタイルの教材と言えるでしょう。
デメリットとしては、動画視聴の時間的な拘束を受ける点です。
それから、細かい情報を知りたい時にピンポイントでアクセスするのも苦手です。
動画教材の販売サイトだとUdemy
が有名です。
頻繁に開催されるセール時に購入すれば、かなりお得に購入できます。
Udemyで購入できるWebデザイン関連のおすすめ講座は別記事にまとめているので参考にしてください。
まずは無料から手軽に始められるオンライン学習サイト
サブスクリプション・モデル、または有料講座を販売しているWeb上の学習サービスです。
一部に無料コンテンツもあるので、体験してから判断できます。
サブスクリプション型サービスであれば、月額料金を払えばコンテンツが見放題（例外あり）なので使い方次第で非常にお得に学べます。
学習サイトは、項目が細かく分けられていて、1つあたりのコンテンツを短く消化しやすいよう工夫されていたりします。
反面、コンテンツが細かく分かれすぎていて知識が断片的になりやすい、体系的に学びにくいこともありそうな印象です。
コースも色々あるので、あれもこれもと欲張ったり脱線すると、かえって学習効率が悪くなるので、目的を明確にして使うとよいでしょう。
デザインが学べるサイト
コーディング (プログラミング) が学べるサイト
何を学ぶ？何から学ぶ？Webデザインの学習手順
学ぶべき内容とおすすめの順序は次の通りです。
- HTML・CSS
- Adobeソフト (Photoshop・Illustrator)
- デザイン理論
- jQuery (JavaScript)
HTML・CSS
Webデザインと聞くと「Photoshopを使ってサイトのデザインを考える仕事だから楽しそう！」というイメージを持つかもしれません。
それは間違いではないのですが、Webデザイナーが他のデザイナーと大きく違うのは、Web技術に対するリテラシーとスキルが要求されるところです。
ブラウザにページを表示させる仕組みを先に勉強しておくと、Webデザインがどんな仕事なのかイメージがつきやすくなると同時に、Webデザイナーとしての適性も見極めやすくなります。
もし勉強をしてみて、
「Web技術に何ら興味はないし、HTML・CSSなんて全然面白くない！」
と感じたなら、WebデザイナーよりもDTPデザイナーやグラフィックデザイナーなどを目指す方がよいかもしれません。
その意味で、HTML・CSSを勉強しながらコードを書いてブラウザに表示させることから始めてみるとよいでしょう。
HTML・CSSも奥が深いですが、初心者が身につけておくべきレベルとしては、レスポンシブ・デザインでサイトを実装できるくらいを目安としておきましょう。
もう少し具体的に言うと、CSSのメディアクエリやフレキシブルレイアウト（CSSフレックス）を駆使したコーディングができるくらいのレベルです。
なお、HTMLのタグ、CSSのプロパティを暗記する必要はありません。
あくまでサイトを作っていく過程で必要なタグを覚えていくイメージです。
HTML5+CSS3 手を動かしてマスターする WEBデザイン／プログラミング動画講座
Adobeデザインソフト
Webデザイナーに必須のAdobeソフト、PhotoshopとIllustratorの使い方を覚えます。
Adobeソフトを購入するならデジハリONLINE Adobeマスター講座がおすすめです。
Creative Cloud コンプリートプランの年間契約72,336円 → 39,980円（約45％OFF）の金額で購入できて、ソフトの学習講座も付いてきます。
Photoshop
Webデザインでメインで使うのはPhotoshopで、しっかりと習得しておきたいところです。
色補正、切り抜き、マスク、レイヤースタイル、シェイプやテキストツール、スライスなど一通りの基本ができていればOKでしょう。
Photoshop CC マスターコース : 動画で徹底的に学ぶ！ 確かな技術をマスターしよう！
Illustrator
ロゴ・アイコン・イラストなどのオブジェクト（パーツ）を作成するために使います。
つまり、WebデザインではIllustratorの用途はPhotoshopより限定的です。
ベジェ曲線・パスの基本操作ができればOKでしょう。
ただ、この基本操作がやや癖があるので、最初から上手くできなくても凹まないでください。あらかじめ、そう言うものだと割り切って取り組みましょう。
【初心者用】初めてのAdobe illustrator(イラストレーター)使い方講座【完全版】
デザイン理論
Adobeソフトが使えようがコーディングができようが、デザインを理解していないと、結果的にイケてないサイトの出来上がりです。
と言っても、Webデザインは商業デザインであり、ほとんどの場合、個性・独創性でデザインを勝負することはありません。
特別なセンスや才能などなくてもWebデザイナーになれますので安心してください。
まずは、レイアウトとカラー（配色）の基礎辺りを学んでおきましょう。
デザインの原則を押さえたユーザーに見やすいサイトが作れれば、とりあえずOKです。
色々なWebサイトを日頃から見ておこう
良いデザインに触れることも、デザイナーの経験として大切なことです。
日頃から色々なWebサイトを見ておくようにしましょう。
良いと思ったサイトをブックマークやキャプチャしておくとよいです。
反対に、良くないかかかかかわと感じたサイトを記録しておくのもよいでしょう。
そして、何が良かったのか・何が良くなかったのか、ということを自分なりに分析してみましょう。
自分の趣味で見ている範囲のサイトだけだと、デザインの幅は拡がりにくいです。
ありがたいことに、素敵なWebデザインを収集してくれているサイトがあるので、そういったサイトを定期的にチェックするのもよいでしょう。
jQuery (JavaScript)
JavaScript (ジャバスクリプト) はWebサイトに「振る舞い」を与えるプログラミング言語です。
「クリックした」「スクロールした」といったイベントを検知してページに何かしらの処理をさせる役割です。
JavaScriptはプログラミング言語なだけに、苦手に感じるデザイナーは少なくありません。
そんなWebデザイナーにも扱いやすいJavaScriptとして作られたのが、jQueryというライブラリです。
世界中のサイトでjQueryが広く使われてきた歴史があり、一般的な静的サイトでは今でも使われています。
そのため、Webデザイナーがまず勉強すべきプログラミングはjQueryの基本と言えます。
イメージスライダー、開閉メニュー、タブ切り替えパネル、スムーススクロールなど、普段よく目にする機能を実装する程度のスキルがあればOKでしょう。
イチからWebサイトを作る練習
教材で学ぶのはインプット型（座学）の勉強です。
対して、アウトプット型（実技）の勉強もあり、それは、自分でイチからWebサイトを作ることです。
Webデザインでは、インプット型よりもアウトプット型の勉強が重要で、それこそが知識の定着やスキルの向上に直結します。
「インプット型の勉強ばかりでアウトプット型の勉強が少ない」
これは初心者の勉強あるあるですが、間違いなく遠回りです。
基本的な知識をインプットしたら、どんどんサイトを作る練習をしましょう。
最初の1, 2サイトは大変に感じるかもしれませんが、いくつか作ると要領を得てきて、徐々に作業効率が上がっていくのを実感するでしょう。
サイト制作の手順
サイトは次のような流れで制作していきます。
- 企画・設計
- ワイヤーフレーム作成
- デザインカンプ作成
- コーディング
企画・設計
企画や設計なくしてWebサイトは作れません。
ゴール（コンバージョン）設定、ユーザーのターゲティング、ポジショニング、サイトマップ、要件定義などを取り決めていく工程です。
しかし、いきなり企画をしろと言われても難しいですよね。
まずは既存のサイトを参考にしてみましょう。
作りたいイメージに近いお手本のサイトを見つけて以下のようなことを分析（推測）してみましょう。
- 想定するユーザー像は？
- どのようなコンテンツか？
- サイトの構成は？
とりあえず、上記あたりを整理しておくと設計しやすいはずです。
コーポレートサイト（会社案内型サイト）、店舗サイト、ネットショップ、LPなどサイトの種類によっても特徴は異なるので、それぞれ作ってみるのも勉強になります。
ワイヤーフレーム作成
作るものが決まったら、ワイヤフレームを作ります。
ワイヤーフレームとは設計図のことで、レイアウトや構成を表した骨組みだけのものです。
Web制作において、いきなり完成形のデザインを作り始めることはなく、実務でもワイヤーフレームを先に作成します。
デザインを始めてからの修正・変更は大変です。
ワイヤーフレームを作っておくと、あらかじめデザイン上の問題点や改善点を見つけやすかったり、途中でデザインの軸が振れてしまうのを防げます。
ワイヤーフレームは、紙にペンで書いてもPhotoshop等で作成してもどちらでもかまいません。
デザインカンプ作成
ワイヤーフレームができたら、デザインカンプ（完成見本）をPhotoshopで作成していきます。
デザインはトップページと下層ページを作ってみましょう。
下層ページとは、個々に独自のコンテンツを持つ詳細ページのことです。
「事業内容」「商品・サービス詳細」「会社沿革」「ご利用ガイド」「お問い合わせ」など個別のページのことです。
下層ページの基本デザインは共通しているので、1, 2ページ分作ればよいでしょう。
コーディング
デザインカンプを基に、HTML・CSS・jQuery(JavaScript) でコーディングをして実際のWebページとして構築します。
「自分の作ったデザインがページ化しやすいのか？」
「HTMLは適切なタグを用いているか？」
「無駄な記述が増えていないか？よりシンプルなコーディング方法はあるか？」
設計からコーディングを考えたり、実務的な視点で試行錯誤してみると、新たな気づきを得られるとともにコーディング技術がどんどん磨かれていきます。
このように一連の流れでサイトを制作することが、最も重要なWebデザインの勉強なのです。
トレース (模写) で引き出しを増やす
初心者の時は「どこかしっくりこない」「うまくできない」と感じることも多いでしょう。
そんな時におすすめの学習方法がトレースです。
トレースとは写しをすること、つまり模写です。
様々な作品をトレースすることで、クリエイティブなアイデアの引き出しを、身体で覚えながら増やしていきます。
自分が素敵だと思うサイトでよいので、それをそっくりそのまま作ってみます。
Webデザインを集めているサイト等で見本を探してもよいでしょう。
デザインのトレース方法
Webページやバナーなど、真似したい物のスクリーンショットを取ってPhotoshopに貼り付け、それを下地にしてトレースをしていきます。
ページ全体のスクリーンショットは、アプリやブラウザ拡張機能などを使って抽出できます。
例えば、Google Chromeの拡張機能 GoFullPage は、ワンクリックでページを画像化してくれます。
貼り付けたトレース元画像は不透明度を下げて薄めに表示させます。
ページで使用されているフォントは、あらかじめ調べておくか、完全に一致しなくてもOKとします。
フォントを調べるなら、ブラウザの開発ツールか拡張機能を追加します。
Chrome拡張機能のWhatFontは、ページ上のフォントをクリックするだけで使用フォントを表示してくれます。
素材画像はコピーするか代替のものを用意します。
準備ができたら、見よう見まねで要素を作成していきます。
この時、実況・解説しながらトレース作業していくのがおすすめです。
例えば、次のようなことについて、好き勝手に独り言で論じながら作業します。
- デザインの根拠（なぜそのようにデザインされたのか）
- デザインが与えるであろう効果・イメージ
- 使われているテクニック・ルール
- 操作手順等
声に出すことで強制的に「考える → 言語化する」というサイクルが生まれるので、ロジカルにデザインを捉える訓練になります。
気になったこと・疑問に思ったことなどがあれば、後で調べられるようにメモを残しておくとよいでしょう。
コーディングのトレース方法
トレースするページのソースコードを見ずに、同じ表示になるようページをコーディングをしていきます。
使用されているフォントとカラーコードくらいは、最初に調べておいてかまいません。
ブラウザの開発モードを使わずに調べるには、ブラウザの拡張機能を追加しましょう。
フォントはWhatFont、カラーコードはColorPick Eyedropperなどがあります。いずれもGoogle Chromeの拡張機能です。
画像要素はコピーするか代替のものを用意しましょう。
一通りコーディングが終わったら、元のソースコードと自分の書いたコードを比較します。
デザインのトレース同様、実況・解説をしながら作業すると、より記憶に残りやすいでしょう。
ポートフォリオサイトを作る
ポートフォリオとは「作品集」の意味で、自分の作った制作物・実績を集めたカタログのようなものです。
ポートフォリオとなるサイトを用意しましょう。
転職活動をするにも、副業・フリーランスで仕事を取るにも、ポートフォリオは不可欠です。
例え未経験だろうが「ポートフォリオが無い」は通用しません。
必ず作りましょう。
掲載する作品は勉強の一環で作った架空のサイトでかまいません。
ホームページを欲しがっている知人がいるなら、ぜひ作らせてもらいましょう。
クラウドソーシングで仕事を獲得するのもよいでしょう。
実績がないことを条件に格安でやるなど提案を工夫すれば受注できるかもしれませんよ。
マイナス評価・逆効果になりやすいポートフォリオとは？
Webデザイナー志望者やなりたての方のポートフォリオを拝見したことがあります。
その中で、印象が良くないポートフォリオも結構ありました。
好ましくないポートフォリオの特徴は、次のようなものでした。
- オリジナルの作品が1つだけ
- ファーストビューの画像のみが多い（見せかけの数を増やしているがページ全体のデザイン無し）
- URLの記載がない
- 同じような作品ばかり
- 模写作品ばかり
失礼ながら「本当にWebデザインやりたいのかな？」と勘ぐってしまいます。
未経験者は実績がない分、ポートフォリオでやる気や情熱、可能性を感じさせてほしいのです。
付け焼き刃で作らず、その時点での自分の実力をきちんと表現できるものにしましょう。
Webデザインの独学に関するよくある質問
独学でWebデザインを勉強したい人からのよくある質問をピックアップしました。
独学でどれくらいの期間を勉強すればWebデザイナーになれますか？
人それぞれの状況によるので、一概には語れませんが、大まかな目安としては、6〜12ヶ月くらいでしょう。
毎日十分に時間を使える人なら、半年あれば独学でも習得できそうです。
しかし社会人で、平日は2時間程度の勉強が限度となると、1年くらいかかることもあるでしょう。
独学は「途中で学習につまづいては自分で解決し、またつまづいては自己解決し…」を繰り返すものなので、どうしても時間はかかります。
「いつまでにWebデザイナーになりたい」という目標の時期が決まっている人は、場合によってはスクールの利用も検討してみましょう。
スクールを利用すると学習期間を約半分に短縮できます。
なぜスクールを利用すると大幅に時間を短縮できるのか、その理由は別記事で詳しく解説しているので参考にしてください。
短期間でWebデザインを習得し働きたいです。今の仕事を辞めて勉強に集中したほうがよいですか？
私の意見としては、仕事を辞めるのはおすすめしません。
職を失うと、経済的にも精神的にも不安を感じやすくなります。
取らなくてよいリスクは取らないようにしましょう。
もし短期習得に拘るならば、短期型のスクールに通うのがよいでしょう。
独学をする時に気をつけておくべきことは何ですか？
独学で大切なのは、モチベーションを維持し続けることです。
例えば、学習途中でつまづいてしまい、先に進めなかった時、モチベーションが下がることがあるでしょう。
つまづきを解消し、先に進んだら、また別の難関にぶつかって再び停滞し…と、繰り返されることで徐々にモチベーションが下がることもあるでしょう。
あるいは、休日も遊ばずに勉強しているのに、まだまだ先が長いと考えると、焦ったり不安に感じてモチベーションが下がることもあるでしょう。
モチベーションが続かず学習が滞れば、Webデザイナーになる時期も先送りになって…と、悪循環に陥ってしまい、最悪挫折してしまいます。
どんなことも、人によってはモチベーションを左右する要因になり得ます。
自分がどんなことでモチベーションが下がりやすいのかを考え、自分に合った対策を立てましょう。
なるべくお金をかけたくありません。できれば無料で勉強したいのですが何か良い方法はありませんか？
独学なら、必要な教材を揃えたところで大した費用はかからないでしょう。
それでも教材費を捻出できないなら、まずは「教材費を捻出できない状況を変える」ことから始めるのがよいのではないでしょうか。
Webデザインに関するブログも沢山あるので、やり方によっては無料で勉強できると思うかもしれません。
ですが、そのやり方は恐ろしく非効率で時間がかかります。
必要な情報を取捨選択するのも難しいし、かなり時間がかかるでしょう。
それでも、教材を購入して独学している人と同じレベルにまで達せられるか、疑問です。
少しでも安く買いたいなら、セール時にUdemy教材を購入したり、サブスク型の学習サイトを短期で利用するなど工夫しましょう。
本当に1円もお金をかけずにWebデザインをきちんと習得できるとは思わない方がよいです。
インプット型（座学）とアウトプット型（実技）の学習は、どのくらいの比率でやればよいですか？
インプット : アウトプットは、5 : 5 か 6 : 4 の学習比率です。
制作スキルを磨くには制作の数をある程度こなす、これが本当に重要です。
インプット学習を一通り終えたら、どんどんサイトを作りましょう。
Adobe XDとDreamweaverも学んだ方がよいですか？
XDは業界的にも広く取り入れられ始めているので、使えるようにしたいソフトです。
初心者の段階では、余裕があれば学んでおきたいプラスアルファの項目と考えましょう。
Dreamweaverも同様にプラスアルファで学ぶ項目です。
コーディングツールには、Dreamweaver以外にもVisual Studio CodeやSublime Textなどの高機能テキストエディターがあります。
この手のツールは、人によって使っているものが違うので、好みで選んでかまいません。
WordPressは学ばなくてよいのですか？
Webサイト制作の案件でも特に多いのがWordPress案件で、Webデザイナーも身につけておくべき必須スキルです。
ただし、プログラミング言語のPHPやMySQLも関わってくるため、Webデザイン初級者レベルの人には難易度が高いです。
WordPressではない通常のWebサイト制作に慣れてから、WordPressに手をつけるとよいでしょう。
オリジナルテーマを作成できるくらいのスキルを目指しましょう。
Webデザインの独学ロードマップまとめ
Webデザインの正しい勉強方法をおさらいしておきましょう。
- HTML・CSS、Adobeソフト、デザイン理論、jQuery (JavaScript)の基本を学ぶ（インプット学習）
- 実務に近いフローでイチからWebサイトを作る（アウトプット学習）
- ポートフォリオサイトを作成してWebデザイナーを目指す
ポイントは上記2のステップに注力することです。
Webデザインは制作の数をこなすほど実践的な力が身についていきます。
ところが、インプットの勉強に多くの時間を費やしてしまう人も多くいるようです。
これは、「教材で勉強していても自力でサイトを作れるようにはならないのに、自力でサイトを作れないから、もっと知識を得ようとさらに教材で勉強をしてしまう」という初心者が陥りやすい間違った学習方法です。
実際、HTML・CSSも、JavaScriptも、Photoshopも、それこそデザインも、それぞれ奥が深いので追求するとキリがなくなります。
基礎を一通り学んだら、とにかくサイトを作る訓練をしましょう。
それこそがWebデザイン上達の秘訣です。
もし自分一人の力でやり遂げるのが難しそうと思ったら、スクールで学ぶことも検討してみるとよいでしょう。
おまけ：独学で挫折しないか不安な方へ
『スクールは高いから通えない… だけど独学で挫折しないか不安だ…』
そんな人におすすめなのが侍エンジニアプラス(SAMURAI ENGINEER Plus+
)です。
入学金無し、一ヶ月からOK、月額3,278円(税込)の低料金で現役エンジニアに質問し放題のサブスクリプション型の学習サポートサービスです。
30種類以上の教材も用意されていて学び放題です。
今なら毎月一回現役エンジニアとのマンツーマンレッスンまで無料で受けられるて非常にお得です。
コメント