「Webデザイナーになりたいけど、独学でなれるもの？」
「Webデザイナーになるにはどんなスキルが必要か知りたい」
未経験から独学でWebデザイナーを目指すことは可能ですが、相当な努力は必要ですし、明確なゴールがないと挫折することもあるでしょう。
本記事では、
- 独学でWebデザイナーになれるか
- Webデザイナーに求められるスキル
- Webデザイナーになるための勉強方法
- Webデザインの独学におすすめのWebサービス、書籍、参考サイト
などを紹介していますので、Webデザイナーに興味がある方は是非参考にしてみてください。
Webデザイナーの仕事内容などについては「【3分で分かる】Webデザイナーとは？年収・仕事内容・資格を紹介」で解説しています。
※記事内の価格は執筆時の内容です。最新の情報は公式サイト等でご確認ください。
【無料カウンセリングを実施中！】
テックキャンプはこれからのIT時代で自分の可能性を広げたい人を応援します。
- もっと自由な働き方をしたい！
- クリエイティブな仕事がしたい！
- 副収入を得られるようになりたい！
「自分がIT業界に向いているかどうか」などIT転職に興味がある方は、ぜひ無料カウンセリングをお申し込みください。
この記事の目次
独学でWebデザイナーになるのは可能
独学でもWebデザイナーを目指すことはできます。しかし未経験からWebデザイナーとして就職・活躍するためには相当の努力が必要、と理解しておきましょう。
特に現在Webデザインとは無縁の仕事に就いていて、漠然とWebデザイナーの仕事に興味を持っている段階であれば、
- Webデザイナーの具体的な仕事内容
- Webデザイナーに必要なスキル
をまず理解することから始めなければなりません。
その上で自分が目指したいWebデザイナー像をイメージし、必要なスキルを獲得するための学習をスタートさせましょう。
未経験・新卒でWebデザイナーとして就職するポイントは以下の記事を参考にしてください。
この記事もオススメ
海外で活躍するWebデザイナーになる方法については、以下の記事を御覧ください。
この記事もオススメ
【このページを見ている方限定】受講料30,000円OFF
- プログラミングは難しくて挫折しそう
- 独学でちゃんとスキルが身につくのか不安
- 効率的にプログラミングスキルを習得する方法を知りたい
ぜひ無料カウンセリングにお申し込みください！
Webデザイナーとは？主な仕事内容
WebデザイナーとはWebデザインの業務に携わる人のことを指します。Webデザインの効果でWebサイト全体を見やすく整えたり、商品を魅力的に伝える役割を担います。
Webデザインは魅力的で使いやすいWebサイトを作成するのになくてはならない存在です。
WebデザイナーはWebページ全体のレイアウトや、ページに使用する写真や画像、動画の作成や加工などを行います。PhotoshopやIllustratorなどのツールを使用するスキルが求められます。
またHTMLやCSSなどのマークアップ言語を使ったり、プログラミング言語JavaScriptなどを使ってWebサイトに動きを付けたりする作業を行うケースもあります。
Webデザイナーを中心とした、デザイナーになる方法については、以下の記事を御覧ください。
この記事もオススメ
この記事もオススメ
Webデザイナーなるには？必要なスキル
Webデザイナーになるには以下のようなスキルが必要といわれています。
- HTML/CSS
- JavaScript,/jQuery
- デザインの基本スキル
- UI/UXデザインのスキル
- デザインツールのスキル
- SEOとアクセス解析
「Webデザイナー」と一口に言っても携わる業務はさまざまで、Webサイト制作に関してはコーダーやプログラマーと連携して業務を行うこともあります。
なのでデザインツールのスキルだけでなく、プログラミングやUI/UXデザインの知識も求められるのです。
ここからそれぞれのスキルを一つずつ見ていきましょう。
HTML/CSS
HTML/CSSとは、Webページの見た目を作るマークアップ言語です。HTMLはヘッダーやフッター、見出しなどの情報構造に、CSSは文字の装飾などに用いられます。これらを整えることで、読者が読みやすい、わかりやすいサイトを作ることができます。
例えばこの記事にも見出しがあり、重要な項目は太字になっていたり色が変えられていたりするでしょう。このような見た目はHTML/CSSで構成されています。
この記事もオススメ
JavaScript/jQuery
JavaScriptはさまざまなWebサービスで用いられるプログラミング言語、jQueryはJavaScriptライブラリです。
ライブラリとは汎用性の高いプログラムを再利用できる形にまとめたもの。JavaScriptライブラリであるjQueryを活用すれば、コーディングの手間が省けたり、管理がしやすくなると言うメリットがあります。
JavaScriptはWebサイトに動きをつけるときに用いられます。例えばポップアップウィンドウを表示させたり、ボタンがクリックされた際にアニメーションを表示させることが可能です。
デザインの基本スキル
デザインには基本となる4大原則（近接・整列・反復・コントラスト）があります。初心者からWebデザイナーを目指す場合は、このような基本を押さえる必要があります。
この4大原則は後ほど紹介する書籍「ノンデザイナーズ・デザインブック」で学べるので参考にしてください。
また色の配色やレイアウト、フォントデザインなどの知識も必要です。このような知識は実際に優れたデザインで作られたWebサイトを参考にしたり、Webデザインについてまとめられた記事を参考にするといいでしょう。
UI/UXデザインのスキル
UIとはユーザーインターフェース（User Interface）、UXとはユーザーエクスペリエンス（User Experience）の略です。
インターフェース（Interface）とは「境界面」や「接点」を意味する言葉。UIはユーザーの目に触れる部分、例えばWebサービスで表示されるデザインやフォント、製品であればその外観のことを指します。
一方でエクスペリエンス（Experience）は「経験」や「体験」を意味する言葉。UXとはユーザーが製品やサービスによって得る体験のことを指します。
UXへ影響を与えるものの中には、前述したようなデザインやフォントと言ったUIの部分も含まれます。なのでUXを高めるためにUIの改善から取り掛かるケースも多いです。例えば問い合わせフォームの配置（UI）を変更することによって、ユーザーの導線をスムーズにする（UX）ことができます。
ECサイト制作においては、このようなUI/UXがコンバージョン（商品購入などの最終的な成果）に大きく影響します。必要とされるWebデザイナーになるためには、UI/UXデザインのスキルが重要と言えるでしょう。
この記事もオススメ
デザインツールのスキル
Webページのレイアウトや使用する写真や画像の作成にはツールを使います。Web制作現場で使われる代表的なデザインツールには、以下のようなものがあります。
- Sketch
- Adobe XD
- Photoshop
- Illustrator
これからWebデザイナーを目指すのであれば、まずはPhotoShopを使いこなせるようになっておくといいでしょう。それぞれのツールについては後ほど詳しく解説します。
SEOとアクセス解析
いくらわかりやすく魅力的なWebサイトを作っても、ユーザーにアクセスされないと意味がありません。その際に必要となるのがSEOです。
SEOとはサーチエンジン最適化のこと。あるキーワードで検索をかけたときに、検索結果の上位にサイトが表示されるようにすることを指します。
SEOを効果的に行うためには、キーワードで検索したユーザーにとって有益なWebサイトにする必要があります。
WebデザインがSEOに与える影響
WebデザインがSEOに与える影響は以下のような点です。
- 直帰率（一つのページを見ただけでそのサイトから離れた率を出したもの）
- 滞在時間
- ページ表示速度
- モバイルファースト（モバイルで見たときにわかりやすいデザインかどうか）
これらの条件を総合的に見て、検索エンジンは有益なWebページを判定しています。直帰率や滞在時間などは、アクセス解析ツール（Googleアナリティクスなど）で判定できます。
なので解析ツールの知識も持ち合わせておくと、評価されるWebデザイナーになれるでしょう。
HTML/CSSを独学で身につけるには
HTML/CSSのスキルは独学で身につけることも可能です。ここではオンラインサービスと書籍で学ぶ方法を紹介します。
この記事もオススメ
オンラインサービスを使う
HTML/CSSが学べるオンラインサービスを紹介します。
Progate
Progateは無料でプログラミングを学べるサービスです。
スマートフォンやタブレットにダウンロードできるアプリもリリースされています。
ProgateのHTML/CSSコースは初級編・中級編・上級編があります。スライドで言語の解説を学び、エディット画面で課題に取り組みます。プレビューで確認しながらコーディングできるので、全体像を把握しながら学習を進められるでしょう。
仕様書に沿ってWebページを一から作る道場コース（プラス会員受講可能）などもあり、着実に力をつけたい人にもおすすめです。プラス会員の価格は公式サイト参照ください。
ドットインストール
ドットインストールは、1本3分程度の動画でプログラミングを学べるサービスです。
「はじめてのHTML」、「はじめてのCSS」と言う初心者向けレッスンがあり、合わせて32回で構成されています。
実際に作業している動画を見ながら解説を聞くことができるので、初心者でもわかりやすいです。1本3分なので、仕事の昼休み中などに動画で流れを理解しておいて、時間のあるときに動画を見ながら手を動かして学ぶといいでしょう。
プレミアム会員になると中上級者向けレッスンを見ることもできます。プレミアム会員の価格は公式サイト参照ください。
Codecademy
Codecademyは無料からプログラミングを学べるサービスです。
英語のサービスですが、翻訳機能を使えば問題なく学習を進められるでしょう。
HTMLのコースは7時間、CSSのコースは15時間が学習時間の目安です。画面の左側に表示される解説に従って、真ん中のエディット画面で指示通りにコードを書き、右側のプレビュー画面で確認できるようになっています。
プロ会員（有料）になるとクイズやプロジェクト形式で学習できます。月額料金19.99ドル、12ヶ月継続プランは月額15.99ドルです。
書籍で勉強する
HTML/CSSは書籍でも学習できます。書籍を選ぶ際は最新情報が載っているもの選ぶようにしましょう。ちなみに現在主流となっているバージョンはHTML5/CSS3。ここから2冊紹介します。
スラスラわかるHTML&CSSのきほん
Webサイトを作りながらHTML/CSSを学べる書籍です。モバイル端末にも対応したサイトを作ることができます。詳しい操作方法が載っているため、初心者でも読み進めながら手を動かせるでしょう。
現在主流となっているレスポンシブWebデザインの基本が学べます。レスポンシブWebデザインとは、パソコンだけでなくタブレットやスマートフォンなどのデバイスでも安定したWebサイトを作るために必要な知識です。
HTML5/CSS3モダンコーディング
実際のWeb制作現場の流れを学べる書籍です。現在主流となっている3つのデザインスタイルを適用したサイトを作りながら学習を進められます。
現場目線で書かれていますので、「これから仕事でWeb制作に関わることになった」と言う場合でも役立つでしょう。先に紹介した書籍で基礎固めをし、さらにステップアップする際にもおすすめです。
JavaScript/jQueryを独学で身につけるには
JavaScript/jQueryはWebサイトに動きをつける際に用いられます。オンラインサービスと書籍を活用すれば独学で身につけられるでしょう。
オンラインサービスを使う
先に紹介したProgateとドットインストールにはJavaScript/jQueryのカリキュラムも用意されています。
例えばProgateでおすすめなのは「Webデザインコース」。こちらは全11レッスンで構成されており、HTML & CSS・Sass・JavaScript（ES5）・jQueryと言った、Webデザインの現場で用いられる言語をセットで学ぶことができます。
書籍で勉強する
JavaScript/jQueryを学べる書籍を2冊紹介します。まず前述したようなWeb学習サービスで概要を掴み、その上で書籍で実際に手を動かしながら学ぶと力になりやすいでしょう。
確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)
サンプルを作りながら学べる書籍です。実際に現場で使えるようなサンプルなので、モチベーションを保ちやすいです。
一方で全くの初心者は理解が難しい内容もあります。Progateなどで基礎固めをしたあとにこの書籍で学ぶのがおすすめの手順です。
現在Webデザインに携わっている人でも参考になる内容なので、一冊持っておくと重宝するでしょう。
作りながら学ぶjQueryデザインの教科書
実用サンプルを作りながら学習を進められる書籍です。jQueryの基本からレスポンシブWebデザイン、UI/UXの知識までまかなえます。
ありがちなミスについての解説もあるので、挫折を防ぎながら学習を進められるでしょう。基本から応用までカバーできるので、「現場でjQueryを使っているがイマイチ理解できていない」と言う人にもおすすめです。
デザインスキルを独学で身につけるには
デザインスキルを独学で身につけるには、まずは書籍で体系的な知識を学習するのがおすすめです。また、優れたデザインが施されたWebサイトを見て情報収拾するのも大切でしょう。
書籍で学ぶ
ここではデザインスキルを学ぶ際におすすめの2冊を紹介します。
ノンデザイナーズ・デザインブック
デザイン未経験の人に向けて書かれた、デザインの基本知識を学べる書籍です。前述したデザインの4つの基本原則（近接・整列・反復・コントラスト）を学習できます。
実例が多数紹介されており、良い例と悪い例を見ながら、基本原則をどのように使えばいいのかがわかる内容になっています。Amazonの商品ページで中身が一部公開されているので参考にしてください。
なるほどデザイン
楽しみながら学習できるデザインの参考書です。目で見て楽しめる内容なので、デザイン学習の導入としておすすめです。
目的別のデザインを実例とともに学べるようになっています。「右脳と左脳で色を考える」など、デザインのアイディアが得られる書籍でしょう。
Web制作の現場で使用されるデザインツール
Web制作では以下の4つのツールを使うことが多いです。
- Sketch
- Adobe XD
- Photoshop
- Illustrator
これらのうちSketchとAdobe XDは人気のUIデザインツール。UIデザインツールとはWebサービスなどのUI制作に特化したものです。
これらが使えるだけでもWeb制作は可能ですが、さらにPhotoshop、Illustratorといった高機能ツールが使いこなせると、より複雑なデザインを制作することができます。
Sketch
UIデザイン・Webデザインに特化したツールです。99ドル/年（1年間のアップデート保証）で購入できます。
ベクター（画像を数値で記録する）画像を扱うため解像度の変化に強いです。これまでPhotoshopを使ってきた人であれば、Sketchの軽さ・早さに驚く人も多いでしょう。
Adobe XD
Webサイトなどのワイヤーフレーム制作（サイトの設計図面）に適したツールです。ベクター画像を扱うソフトです。
体験版は無料で、単体プランは1,298円（税込）/月で購入できます。プロトタイプ（開発初期の試作品）機能などが備わっており、チームでデザインをスムーズに共有することが可能。
Sketchが大規模案件に適しているのに対し、Adobe XDは新規案件をスムーズに開発するのに適しています。
Photoshop
ラスター（ドットの集合で表現している）画像を取り扱うソフトです。フォトプランは12,936 円（税込）/年、単体プランは28,776円（税込）/年で購入できます。
写真などのドットの集合体でできた画像の加工に適したツールです。画像全体の色味の調整したり、フィルターやぼかしを加えたりできます。
関連記事：
Illustrator
ベクター画像を取り扱うソフトです。フォトプランは1,078円（税込）/月、単体プランは2,728円（税込）/月で購入できます。
アイコンやロゴ制作、レイアウトに適したツールです。クライアントに提示するWebサイトのデザイン案を作ったり、平面的なインフォグラフィックを作ったりできます。
まずはSketchから触れてみよう
「Webデザイナーに興味がある」あるいは「まず趣味でWebデザインに触れてみたい」段階では、Sketchをおすすめします。Sketchは動きが軽く初心者でも扱いやすいツールだからです。
本格的にWebデザイナーを目指す場合はPhotoshopは使いこなせるようにしておきましょう。さらにIllustratorも活用できると、あらゆるシーンのWebデザインに対応できるようになります。
デザインツールは書籍で学ぶのがおすすめ
デザインツールの使い方を学ぶ際は、書籍で体系的に知識をつけて、わからない部分はその都度検索するのがおすすめです。書籍で学ぶ場合は以下のポイントを押さえて選ぶといいでしょう。
- 基礎から応用まで体系的に学べる
- ツールに触れながら学べる
- つまずきがちなポイントの解説がある
- 現場で使える実践力が養える
例えば基本的な操作だけでなく、実際にサンプルサイトを制作しながらスッテプバイステップで学べるものがおすすめです。必要なサンプルファイルをダウンロードできる書籍ですと、初心者でも学習を進めやすいでしょう。
書籍でも補完できないことが出てきたら、インターネットで検索して情報を集めましょう。後ほどWebデザイン学習で参考になるサイトを紹介しますので、アクセスしてみてください。
SEOとアクセス解析を独学で学ぶ
SEOとアクセス解析を学ぶには、実際にWebサイトを作り、アナリティクスを導入し、実践で学ぶのが最も効率的です。そのためにはブログサイトなどを作って、実際に運用してみるのがいいでしょう。
またGoogleアナリティクスの活用方法はGoogleの無料サービスで学ぶこともできます。理解度テストに合格すれば「Google アナリティクス個人認定資格（GAIQ）」を取得することも可能。
Webマーケティングの勉強にもなるので、Webサイト制作に携わるのであれば学習しておいて損はないでしょう。
この記事もオススメ
この記事もオススメ
Webデザインのスキルをもっと高めるには
Webサービスや書籍で体系的なスキルを学んだ後は、現場で使える実践的スキルや、できるWebデザイナーとして必要なスキルを高めるのが重要でしょう。
自分でデザインを考えてレビューをもらう
デザインを模写するだけではなく、ユーザーの状態・課題に対してデザインをしていくという流れで学ぶと、実践的なスキルが身につきやすいです。そこでおすすめなのが「Cocoda!」というサービス。こちらではサービス上にアップされている架空の案件に取り組めます。
例えば
- カフェの空席情報がわかるアプリ制作案件
- アカウント管理アプリ制作案件
- モバイル名刺交換アプリ制作案件
などのお題からチャレンジできます。
各案件には依頼主や依頼内容などが設定されています。類似サービスも提示されているので、完成形をイメージしながら取り組めるでしょう。お題の取り組み方や制作の目安時間も設定されています。
綺麗なデザインや好みのデザインになんとなく仕上げるのではなく、どのような目的でこのデザインにするのか、という設計スキルが身につきます。また制作の意図を言語化してデザインと一緒に提出することで、自動的にポートフォリオを作成できるようになっています。
推奨デザインや他のユーザーのデザインとの比較もできるので、自身のデザインを客観的に評価する機会にもなるでしょう。
Webデザインのブログを定期購読する
さまざまなWebデザイン情報に触れることも、デザインスキルを上げるためには大切です。そこでおすすめなのが、Webデザインのブログを定期購読することです。
現役デザイナーが更新しているブログでは、すぐに現場で活用できるノウハウやツールが紹介されています。ここからいくつか紹介するので参考にしてください。
Webクリエイターボックス
Webクリエイターボックスは、海外勤務経験を持つWebデザイナーが更新するブログです。コーディングやデザイン、便利ツールなどが紹介されています。
Webデザインに関するものですと、先ほど紹介したAdobe XDの作業手順や、手軽にロゴ制作ができるサービスの紹介記事などがアップされています。
海外のトレンド情報も発信されているため、Webデザイナーとしてレベルアップしたい人はチェックすべきブログでしょう。
coliss
colissはフリーのWebデザイナーが更新するブログです。Web制作現場で役立つツールやサービス、CSS実装テクニックなどの情報が発信されています。
例えばCSSコーディングやUI/UXデザインのトレンドや、フォント管理に便利なアプリなどが紹介されています。
ferret
ferretはWebマーケティング会社が運営しているメディアです。Webデザインに関する記事が多数発信されています。
SEOなどのWebマーケティングに関する知識も学べるのが魅力です。Web制作全般の情報を収集するのにおすすめのサイトでしょう。
デザインが優れたブログを参考にする
ここまではWebデザインの知識を発信するブログを紹介してきましたが、デザインが優れたブログやサイトを参考にするのもおすすめです。
国内外問わずチェックしておくと、海外のトレンドもキャッチできるでしょう。特に気になるデザインがあればストックしておくのがおすすめです。
参照：おしゃれなブログデザイン23選〜参考になる国内外の美しいブログ｜サルワカ
気になるデザインを見つけたらストックする
前述したようなブログやサイトの中で気になるデザインを見つけたら、参考のためにストックしておきましょう。
「いいな」「素敵」と思うようなデザインを見つけたら、Evernoteなどに保存するのがおすすめです。その時デザインのどこが魅力的なのかざっくり分けておくために、タグ付けしておきましょう。例えば「ダークカラー」「おしゃれ」「可愛い」「かっこいい」など。タグ付けしておくとデザインを検索しやすくなります。
独学よりもっと効率的に学ぶには、スクールに通うのがおすすめ
ここまでは独学でWebデザイナーを目指す人に向けて、学習サービスや書籍をメインに紹介してきました。しかし初心者が独学でWebデザインを学ぶのはハードルが高いです。
中にはつまずき、挫折する人も多いでしょう。特に仕事をしながら勉強する場合、相当な志がないと継続が難しいです。
そこでおすすめなのがスクールでWebデザインを学ぶ方法です。自宅でも学べる教材があるスクールなら、平日は自宅で、週末はスクールで、と効率的に学習を進められるでしょう。
Webデザインが学べるスクールについては、以下の記事を御覧ください。
この記事もオススメ
稼げるWebデザイナーになるには
晴れてWebデザイナーとして仕事ができるようになったとしても、稼げなければモチベーションは保てません。稼げるWebデザイナーになるためには、「この人に依頼したい」「こういうデザインならこの人」と指名を得られるようなスキルが必要です。
このような売れっ子Webデザイナーになるためには、以下のようなポイントを意識しましょう。
- 常にトレンド情報をキャッチアップする
- コンバージョンにつながるデザインを理解する
- 制作意図を正しく理解して提案する
- チーム全体の動きを理解してデザインを提案する
- プラスアルファのスキルを持つ
コンバージョンとは、Webサイトにおける最終的な成果のこと。例えばECサイトであれば商品が売れることなどを指します。
プラスアルファのスキルとは、例えばイラスト制作に長けている、Webマーケティングの知識を備えている、プログラミングができるなど。このようなスキルも持ち合わせていると、Web制作の全体像を把握しやすくなります。
特徴的なスキルを身につけて実績を積んでいけば、フリーランスWebデザイナーとして独立することも可能です。
この記事もオススメ
最先端のITスキルが学び放題！AI時代で勝ち残る人材になる。
＼テクノロジー時代に活躍できる人材になりませんか？／
あらゆる業界でIT化が進んでいる今、
エンジニアではなくともテクノロジーへの理解が不可欠な時代になりました。
プログラミングを活用して新しい価値を生み出すことで、
あなたの人材価値を高めることができます。
プログラミングを学ぶと、
・キャリアアップ、年収アップを目指せる
・テクノロジーを活用した課題解決ができる
・業務効率化ができるようになる
・自分でサービスを作れるようになる
テックキャンプは、テクノロジースキルが定額で学び放題。
プログラミング、AI、デザイン、DXスキル、
そして、話題のChatGPTも学ぶことができます。
これからの時代で必要とされるスキルを学び、
市場価値を高め、個人で活躍できる人材を一緒に目指しましょう。
