Webデザイン独学ロードマップ【挫折しない秘訣も紹介】

Webデザインってどうやって学べばいいの?
学ぶのに必要なものってある?
やる気が続くか不安…

1からWebデザインを学ぼうにも、何から始めれば良いのかわからないとやりようもないですよね。

また、スキル習得には相応の時間がかかるとはいえ、遠回りせずできるだけ効率的に学びたいと考えている方は多いはず。

この記事では、これからWebデザインを学び始める方に向け、基礎知識から独学の手順や方法、挫折しない秘訣までをご紹介します

今すぐ独学の仕方を知りたい方は、下記をタップして移動してください。

今すぐWebデザインの学び方をチェックする

この記事の要約
  • Webデザインは基礎から順序立てて学習すると挫折しにくい
  • Webデザインの独学には「侍テラコヤ」がおすすめ
  • 本・Webサイトは双方の併用がおすすめ
目次

Webデザインの基礎知識

画像:主なWebデザインの基礎知識は4つ

まず、Webデザインスキルの習得に最低限必要な次の知識を頭に入れましょう。

  • Webデザインとは
  • デザインとWebデザインの違い
  • Webデザインに必要なスキル
  • Webデザインに必要なもの・ツール

Webデザインの輪郭がイメージできた状態で学び始めれば、効率良くスキルを習得できますよ。

ではそれぞれ解説していきます。

Webデザインとは

画像:Webデザインとは電子端末上で閲覧できるものの見た目を装飾することを指す言葉

Webデザインとは、パソコンやスマホといった電子端末上で閲覧できるものの見た目を装飾することを指す言葉です。

日常生活で見かける機会の多いウェブサイトをはじめ、バナーに表示される広告やランディングページ(LP)など、Web上で見れるすべての装飾はWebデザインに当たります。

しかし、アプリに関する見た目の装飾を指す際は、UIデザインという言葉を用いるのが一般的です。

画像:UIデザインとはアプリに関する見た目の装飾を指す言葉

厳密にはWebデザインに当たるものの、Webデザインという言葉の解釈が広がりすぎてしまうため、わけて呼ばれています。

そのため、Webデザインはウェブサイトやホームページに関する見た目の装飾を指すのが一般的ですね。

ランディングページ(LP)とは
ランディングページ(LP)とは、検索結果や広告などを機に、検索エンジンの利用者がホームページの中で最初に訪れたページのこと。
ちなみに、IT業界では検索者を特定のページへ誘導するためのレイアウトページ、という意味で使われるのが一般的です。

デザインとWebデザインの違い

画像:デザインとWebデザインの違いは装飾する対象がWeb上のものかそうでないか

結論、デザインとWebデザインの違いは、装飾する対象がWeb上のものかそうでないかです。

例を挙げると、服の装飾はデザイン、ウェブサイトの装飾はWebデザインになりますね。

一見ややこしいですが、装飾するものが「Web上にあるかどうか」で区別するとわかりやすくなりますよ。

また、違いに慣れるよう、普段の生活から言葉の使い分けを意識すると良いですよ。

Webデザインに必要なスキル

画像:Webデザインには2つのスキルが必要

Webデザインと一口にいっても、「具体的に何ができるようになればいいの?」とイメージが湧かない方もいるはず。

結論、Webデザインには下記2つのスキルが必要です。

  • グラフィックデザインスキル
  • コーディングスキル

決してWebデザインに限った話ではありませんが、スキルを習得する際は「何ができるようになれば良いか」を念頭に置いた学習が重要です。

ゴールのないマラソンを走り続けるのが難しいように、習得するスキルへのイメージが湧かない状態でやみくもに学び始めては挫折しかねません。

「これができるようになればいいんだ!」とイメージしながら学べれば、スムーズにWebデザインスキルを習得できますよ。

ではそれぞれ解説していきますね。

グラフィックデザインスキル

画像:グラフィックデザインはWebデザインに必要なスキルの1つ

画像の編集・加工、文字の配置や大きさ、配色といったグラフィックデザインはWebデザインの根幹となるスキルです。

伝えたい情報やメッセージが一目で見た人へ届くかは、グラフィックデザインのスキル次第で決まるといっても過言ではありません。

また、グラフィックデザインのスキルを磨いておけば、装飾へのアイデアやデザインの全体像もつかみやすくなります。

「見ればわかる」「読めばわかる」、そんなWebデザインを作るには細部へこだわる姿勢も重要ですね。

グラフィックデザインとは
グラフィックデザインとは、装飾した物から情報やメッセージが見た人へ伝わるよう、画像を編集・加工したり、文字の配置や色を配色することです。

コーディングスキル

画像:コーディングスキルもWebデザインに必要なスキルの1つ

コーディングは、制作したデザインの実装に不可欠なスキルです。

制作したデザインは、HTMLやCSS・Javascriptなどのプログラミング言語を用いたコーディングによってWeb上へと反映させます。

そのため、自分がイメージしたデザインをどれだけ理想的に実現できるかは、コーディングスキル次第です。

コーディングスキルを磨けば磨くほど、イメージしたデザインを実現できるようになりますよ。

Webデザインに必要なもの・ツール

画像:Webデザイン学習には2つのツールが必要

Webデザインを行うには、最低でも次2つのツールが必要です。

  • グラフィックソフト
  • グラフィックソフトが扱えるパソコン

準備を整えた状態でWebデザイン学習に励みましょう。

それぞれ解説していきますね。

グラフィックソフト

画像:Webデザイン学習にはグラフィックソフトが必要

グラフィックソフトは、Webデザイン学習に必要なツールの一つです。

制作するWebデザインの目的や用途によって、扱うグラフィックソフトは異なります。

また、グラフィックソフトは相応のメモリ容量が必要になるものからブラウザで簡単に利用できるものまでさまざまです。

そのため、後々は目的や用途によって扱うグラフィックソフトを使い分けられると良いですね。

これからWebデザインを学び始める方は、無料かつ高性能なグラフィックソフトとして人気のある下記を利用するのがおすすめです。

グラフィックソフトとは
グラフィックソフトとは、Web上で画像データや図形を扱うソフトウェアの総称を指す言葉。
WebデザインではPhotoshopやIllustrator、UIデザインではFigmaやSketchといったソフトが重宝されています。
ここまでに読んでおきたい記事

グラフィックソフトが扱えるパソコン

画像:Webデザイン学習にはグラフィックソフトを扱えるパソコンが必要

PhotoshopやIllustratorといったグラフィックソフトが扱えるパソコンは、Webデザインを行う際の必需品です。

Webデザインでは多くの画像を編集・加工・保存します。また、PhotoshopやIllustratorなどのグラフィックソフトを扱うには相応のスペックやメモリ容量のあるパソコンが必要です。

そのため、快適にWebデザインを学べるよう、下記を満たすPCが用意できると良いですね。

PCのスペックを示すクリエイティブ

  • CPU:CORE i5以上
  • メモリ:最低8GB以上、できれば16GB

引用元:Illustratorの必要システム構成 https://helpx.adobe.com/jp/illustrator/system-requirements.html

もちろん、上記を満たすPCでないとWebデザインが学べないわけではありません。改めて用意するには手間やお金もかかりますからね。

とはいえ、作業の負荷に耐えられずPCが落ちたりフリーズやリロードを繰り返しては、学ぶやる気が下がりかねません。

ストレスなくWebデザインを学ぶためにも、できるだけスペックの高いPCを用意すると良いですよ。

CPUとは
CPUとは、コンピュータの演算や制御を行う部分のこと。CPUのスペックが高ければ高いほど、パソコンで画像を編集・加工する際の処理速度が早くなります。

Webデザインを独学する方法【簡単4STEP】

Webデザインを学ぶ準備が整ったところで、ここからは具体的な独学手順を次の4STEPで解説します。

  • STEP1:Webデザインの基礎を学ぶ
  • STEP2:作りたいものを決める
  • STEP3:とにかくデザインを再現してみる
  • STEP4:形になったデザインをより良くする

上記4STEPの手順に沿って学習すれば、遠回りすることなくWebデザインスキルを習得できますよ。

ではそれぞれ解説していきます。

STEP1:Webデザインの基礎を学ぶ

画像:まずWebデザインの基礎を学ぼう

まず、Webデザインの制作に必要な基礎知識を抑えましょう。主には、レイアウトの基本や制作に関する用語ですね。

基礎知識があいまいな状態では、どんな学習サイトや参考書を活用しても、内容を理解するだけで一苦労です。

レイアウトの基本や頻繁に使う用語を抑えておけば、つまづく回数も少なく効率的に学習できますよ。

STEP2:作りたいものを決める

画像:次に作りたいデザインを決めよう

Webデザインの基礎知識を抑えられたら、次は作りたいものを決めましょう。

とはいえ、「いきなり言われても、作りたいものなんて思い浮かばないよ…」という方が大半ですよね。

もちろん、いきなり独自のオリジナルデザインを作りましょう!なんて言いません。

よく利用するウェブサイトや好きなウェブサービスから作ってみたいデザインを決めば良いのです。

「学は真似ろ」といった言葉があるように、すでに完成されたデザインを模倣した方が、効率的にWebデザインスキルを習得できます。

ちなみに、模倣するデザインは下記のサイトや参考書から選ぶのもおすすめですよ。

無料で利用できる参考サイトbookma!
I/O 3000
Responsive Web Design JP
参考書なるほどデザイン

STEP3:とにかくデザインを再現してみる

画像:とにかくデザインを再現してみる

作りたいWebデザインが決めれば、あとはとことん手を動かしてデザインを再現するのみです。

ここで重要なのは、完璧を目指さず7割完成を目指すこと。よくある誤解ですが、プロのWebデザイナーといえど、一息で完璧なデザインに仕上がることなんてほぼありません。

7割程度作りきったデザインへ試行錯誤を繰り返しながら完成形へ近づけていくのです。

始めのうちから完璧なデザインにこだわりすぎると、いつまでもデザインが完成しない危険もあるので、注意しましょう。

また、PhotoshopやIllustratorなどのグラフィックソフトの使い方や模倣するデザインの仕様がわからない時は、次の学習サイトや本を参考にすると良いですよ。

無料で利用できる参考サイトAdobeラーニング
サルワカ
Web Design Clip
ズロック|Webデザインのリンク集
参考書1冊ですべて身につくHTML&CSSとWebデザイン入門講座
ほんとに、フォント。フォントを活かしたデザインレイアウトの本
[新版]デザイナーになる! 伝えるレイアウト・色・文字の大切な基本と生かし方

STEP4:形になったデザインをより良くする

画像:1度仕上げたデザインはより良くして完成を目指そう

7割程度デザインが形になったら、完成形を目指し細部をより良くしましょう。

Webデザインは、「見ればわかる」「読めばわかる」ほどベストです。

また、「これで大丈夫かな…」と不安な時は、友人やデザイン経験者の知人に見せて感想をもらうのも良いですよ。

Webデザインの本文は作り手ではない他人が理解できてこそ。周囲からの率直な感想は、制作したデザインをより良くするヒントになりますよ。

ここまでに読んでおきたい記事

Webデザインの独学に適しているのは本?それとも学習サイト?

画像:Webデザインを学ぶのに本と学習サイトどちらがいいかといった優劣はない

Webデザインを学ぶ手順がイメージできた方の中には、

独学するなら本と学習サイト、どっちがいいの?

と疑問を感じた方もいるはず。

結論、Webデザインを学ぶのに本と学習サイトどちらがいいかといった優劣はありません。

大切なのは、Webデザインスキルの習得というゴールまで、よりストレスのない手段で学び続けられるかどうかです。

例を挙げると、外出先のすきま時間を縫って学ぶなら学習サイト、自宅でしっかり時間を確保して学べるなら本、といった形になります。

ちなみに、本と学習サイト、それぞれを活用するメリット・デメリットは以下の通りです。

メリットデメリット
・情報量が多い
・比較的値段が安い
・古いものもあるので改訂版に気をつけなければならない
・サンプルなどが少ない
・質問できる人がいない
学習
サイト
・無料または格安な金額で学べる
・インターネット環境さえあればどこででも気軽に学べる
・カリキュラムがたくさんあるので吟味する必要がある
・質問できる人がいない

上の表を参考にしながら、自分に適した手段を選んでみてください。

Webデザインのおすすめ学習サイト

画像:Webデザインのスキル習得におすすめの学習サイト
サイト名料金特徴会員登録の有無
1侍テラコヤ登録無料~40種類以上の教材が学び放題
2サルワカ無料Webデザイン制作を手軽に体験
3Udemy1,840円~10万を超える豊富なオンライン教材
4chot.design無料グラフィックソフトの使い方から広告デザインまで学べる
5Adobeラーニング無料Adobe社公式の学習サイト
6Schoo無料~月額1,078円生放送授業なら無料で参加できる
7Codeprep無料~月額1,078円100冊以上の参考書が読み放題
8Progate無料~月額1,078円200万人以上が利用する人気学習サイト
9ドットインストール無料~月額980円Webデザインの基礎やコーディングが無料で学べる

・この一覧表は横にスライドします。
・利用料金は2021年7月時点の税込み価格を掲載しています。

アイコンをタップすると、公式サイトを閲覧できますよ。

また下記からは、今回は数ある学習サイトの中でも、特におすすめの無料学習サイトを3つ紹介します。

サルワカ

1-23
2-21
3-21
4-1
1-23
2-21
3-21
4-1
previous arrow
next arrow

サルワカは、デザインの基礎知識からHTMLやCSSのコーディングを無料で学べるオンライン学習サイトです。

また、Webデザインに関連するWordpressやAdobeソフトの使い方も学べます。

Webデザイン制作を手軽に体験した方におすすめの学習サイトです

公式サイトで詳細を見る

chot.design

1-33
2-33
3-33
4-2
5-2
1-33
2-33
3-33
4-2
5-2
previous arrow
next arrow

chot.designは、豊富なカリキュラムが特徴のオンライン学習サイトです。

Webデザインの基礎知識や制作に関する重要な考え方、HTML・CSSのコーディング方法が学べます。

また、PhotoshopやIllustrator、Figma・Sketchといった各種グラフィックソフトの使い方からバナー制作やランディングページの制作テクニックを学べるのも魅力の一つ

Webデザインスキルを網羅的に学べる無料とは思えない学習サイトです。

公式サイトで詳細を見る

Adobeラーニング

1-41
2-42
3-42
4-3
1-41
2-42
3-42
4-3
previous arrow
next arrow

Adobeラーニングは、PhotoshopやIllustratorなどの使い方が学べるAdobe社公式の学習サイトです。

チュートリアルを通じて、Photoshop・Illustratorの基礎知識や使い方だけでなく、Webデザインの制作ノウハウが学べます

PhotoshopとIllustratorを体験したい方におすすめの学習サイトです。

公式サイトで詳細を見る

Webデザインのおすすめ参考サイト

画像:Webデザイン学習に役立つおすすめの参考サイト
サイト名特徴
1I/Q 3000過去から最新のWebサイトまでチェックできるアーカイブ式の参考サイト
2bookma! v3好みのWebサイトをお気に入り登録できる
3ズロック Webデザインのリンク集ギャラリーをサイズ変更することで一度に大量のサイトを見比べられる
4Web Design Clip1000以上ものWebサイトを閲覧できる
5Responsive Web Design LP国内Webサイトに特化したギャラリーサイト
6SS-style細かくカテゴリーがわけられているため検索しやすい

・すべての参考サイトが無料で利用できます。

アイコンをタップすると、公式サイトを閲覧できますよ。

こちらも次から、特におすすめの無料参考サイトを3つ紹介します。

I/O 3000

1-61
4-5
3-61
2-62
1-61
4-5
3-61
2-62
previous arrow
next arrow

I/O 3000は、使い勝手の良さが特徴のWebデザイン参考サイトです。

Webデザインの参考になる国内・海外サイトを豊富に取り揃えています。

また、更新頻度が高くサイト自体もアーカイブ式のため、過去から最新のWebサイトまでチェックできるのも魅力の一つ

おしゃれさと使い心地を兼ね備えた鉄板のWebデザイン参考サイトです。

公式サイトで詳細を見る

bookma! v3

1-7
2-71
3-72
1-7
2-71
3-72
previous arrow
next arrow

国内・海外を問わず、おしゃれなWebサイトが閲覧できるbookma! v3

パソコンまたはスマホビューへ簡単に仕様を変えられるほか、好みのWebサイトがあればお気に入り登録もできます。

また、気になったWebサイトの仕様や背景色にチェックを入れると、後で手軽に検索を絞れるのも嬉しいポイント。

制作したWebサイトの公開もできるため、アウトプットの場としても活用できるWebデザインの参考サイトです。

公式サイトで詳細を見る

Web Design Clip

1-8
2-81
3-81
4-6
1-8
2-81
3-81
4-6
previous arrow
next arrow

Web Design Clipは、1000以上ものWebサイトが閲覧できる参考サイトです。

スマホ対応のサイトはもちろん、LP(ランディングページ)も閲覧できます。

また、キーワードやレイアウトの名称でサイトを検索できる使い勝手の良さも魅力の一つ

ユーザー登録をしなくても、お気に入りのWebサイトを保存できる利用者に嬉しい機能が満載の参考サイトです。

公式サイトで詳細を見る
ここまでに読んでおきたい記事

Webデザインが学べるおすすめ本一覧表

画像:Webデザイン学習が捗るおすすめ本
書籍名価格出版日
11冊ですべて身につくHTML&CSSとWebデザイン入門講座2,486円2019/3/16
2なるほどデザイン〈目で見て楽しむ新しいデザインの本。〉2,200円2015/7/31
3ほんとに、フォント。フォントを活かしたデザインレイアウトの本1,980円2019/2/20
4[新版]デザイナーになる! 伝えるレイアウト・色・文字の大切な基本と生かし方1,980円2019/5/27
5けっきょく、よはく。余白を活かしたデザインレイアウトの本1,980円2018/7/20
6ノンデザイナーズ・デザインブック [第4版]2,398円2016/6/30

・この一覧表は横にスライドします。
・税込み価格を掲載しています。

アイコンをタップすると、Amazonの商品ページを閲覧できますよ。

こちらも学習・参考サイトと同様に、下記から特におすすめの本を3つ冊紹介します。

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

Webデザインの基礎からHTML・CSSのコーディングまでを網羅的に学べる一冊。

丁寧かつわかりやすい解説文に豊富な図解が盛り込まれているため、Webデザイン初心者でも頭を抱えることなくスラスラと読み進められます

書籍に抵抗がある方へも電子書籍での一読をおすすめしたい基礎学習に適した一冊です。

なるほどデザイン

「目で見て楽しむ」をテーマに、Webデザインの基礎から実践的なスキルを解説した一冊。

楽しみながら読み進められるだけでなく、目で見て理解できるよう挿絵や図解が豊富に盛り込まれています。

応用かつ実践的な内容も自然と頭に入ってくる、読みやすさと専門的な内容を兼ね備えた一冊です。

けっきょく、よはく。余白を活かしたデザインレイアウトの本

デザインにおける「余白」の重要性を、上手な余白の使い方も交えて丁寧に解説した一冊。

OK・NGなレイアウトデザインを豊富な例題を用いて、わかりやすく解説しています。

学び始めの方が疎かにしがちな余白の大切さを説いた、Webデザイン制作の参考書に適した一冊です。

また、「ほんとに、フォント。」は本書の応用編にあたる書籍なので、気になる方は合わせて読むのもおすすめですよ。

ここまでに読んでおきたい記事

Webデザインの独学で挫折しない3つの秘訣

画像:Webデザインの独学で挫折しない3つの秘訣がある

モチベーションが続くか心配…
最後までやり切れるかな…

Webデザインスキルの習得にやる気がみなぎる一方で、このような不安を感じている方も多いはず。

そこで最後に、Webデザインの独学で挫折しない下記3つの秘訣を紹介します。 

  • 毎日1時間でも勉強時間を確保する
  • 作品を公開し感想をもらう
  • 他人と比較しない

意識的に取り入れれば、学習が苦手な方でも理想のスキル習得を実現しやすくなりますよ。

ではそれぞれ解説していきますね。

毎日1時間でも勉強時間を確保する

画像:毎日1時間でも勉強時間は確保しよう

1日1時間または30分でも良いので、勉強する時間を確保しましょう。

Webデザインは日々積み重ねてこそ、習得できるスキルだからです。1日死に物狂いで勉強したからといって、次の日には身についているなんてことはありません。

また、実務レベルのWebデザインスキルを習得するには、最低でも600時間の学習が必要だと言われています。

しかし、多くの方にとって短期間でまとまった時間を勉強に割くのは難しいはず。仕事や学業のすきまを縫って、Webデザインスキルの習得を目指す社会人や学生の方であればなおさらです。

とはいえ、たとえ少ない時間でも事前に確保した時間で着実に勉強を積み重ねていけば、理想のスキルを習得できます

始めのうちは苦に思うかもしれませんが、続けていき学ぶ習慣さえ身につけば、日々歯磨きをするように勉強できるようになりますよ。

作品を公開し感想をもらう

画像:作品を公開し感想をもらおう

制作した作品は、積極的にネットへ公開したり、周囲に見せて感想をもらいましょう。

上記でも解説しましたが、Webデザインの本文は作り手ではない他人が理解できてこそ。周囲からの率直な感想は、制作したデザインをより良くするヒントになります

逆に、「自分へ都合の良いことだけを見聞きし、都合の悪いことは見ない、聞かない」精神では、いくら勉強しても実務レベルのWebデザインスキルは身につきません。

感想や指摘された点を素直に受け止め、修正や次の作品作りに活かせれば、スキルアップはもちろん良い作品を制作できるようになりますよ。

他人と比較しない

画像:他人とは比較しないようにしよう

学習の進み具合や身につけたスキルの程度は、他人と比較しないよう心がけると良いですよ。

もちろん、他人と比較すること自体が悪いわけではありません。

しかし、比較を機に「私、全然ダメだな…」「Webデザイン、向いてないのかな…」などとネガティブな気持ちが芽生えれば、モチベーションは下がり挫折のきっかけにも繋がります。

さらに言えば、学び始めた時期や年齢が近いなど、自分と共通点の多い人と比べるのが人間の性質です。

つまり、周囲と比べれば比べるほど、自分が苦しむことになります

とはいえ、意識したからといってすぐに比較を止められるわけではありませんよね。

比較を機に落ち込んだり不安を感じたときは、この記事を読み返したり、頼れる友人に相談するのも良いですね。

また、Webデザインを学べるスクールが行っている無料カウンセリングで相談してみるのもおすすめです。気軽に相談してみると、モチベーションを回復する機会になりますよ。

まとめ

この記事では、これからWebデザインを学び始める方に向け、基礎知識から独学の手順や方法、挫折しない秘訣まで紹介しました。

Webデザインは、高い需要と人気を兼ね備えたスキルです。習得できれば、今後選べるキャリアの幅も広がります。

今回の内容を参考にしながら、まずは実務レベルのWebデザインスキルを習得できるよう、学びを積み重ねていきましょう。

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次