未経験から独学でWebデザイナーになるための具体的な手順【経験を元にした最短ルート】

このような方向けに、未経験から独学でWebデザイナーになるための効率的な学習手順を、できるだけ具体的に解説していきます！

私は完全未経験から6ヶ月間の独学でWebデザイナーに転職しました。
私の場合は1日5時間程度の勉強を6ヶ月間続けたので、約900時間程度の学習時間でした。

しかし、Webデザイナーとして働いている今、もっと効率的に学習できたなぁ‥‥と思うことがあります。

そんな経験を踏まえて、今回は現場で働くWebデザイナー目線で、未経験から独学でWebデザイナーになるための最短の学習方法をお教えします。

未経験から独学でWebデザイナーになる難易度・必要な学習期間は？

未経験でも継続して努力できれば、独学でWebデザイナーになれる

未経験から独学でWebデザイナーを目指している方の中には、

「本当に完全未経験から独学でWebデザイナーになれるの？」
「Webデザイナーってセンスが必要そうだから、正直不安‥‥」

という思いを抱えている方も少なくないのではないでしょうか？私も、最初はそのような思いを抱えていました。今までは製造業で働いていたため、デザインとは縁のない仕事でしたので、すごく不安でした。

しかし、Webデザイナーとして働く今、Webデザイナーに重要なのはセンスではなく引き出しの多さ・知識だと断言できます。

良いデザインには理由がある

普段、Webサイトを閲覧していて、「このサイトのデザインおしゃれ〜」と思うこと、ありますよね？
そのようなサイトは、あなた以外の多くの人も良いデザインだと感じています。

もちろん、人それぞれの好みもありますが、大多数の人が良いデザインだと感じるデザインは、確かに存在します。つまり、人が良いデザインだと感じるのには、必ず理由があるということです。

このような、「良いデザインの法則」を理解し、それを再現できるようになれば、未経験でも良いデザインができるようになります。

必要な学習時間は？

これから説明する、未経験から独学でWebデザイナーになるための学習手順に沿って進めていけば、約700時間でWebデザイナーとして最低限必要なスキルを身につけることができます。

• 1日2時間の勉強なら1年
• 1日4時間の勉強なら6ヶ月
• 1日8時間の勉強なら3ヶ月

これくらいが目安となります。700時間と聞くと果てしなく感じますが、1日の生活の中で学習時間を確保して、正しい手順で学習を進めることができれば、そこまで難易度は高くないので、安心してください！

こちらの記事ではかなり具体的に独学の手順をご紹介しますので、無駄なく効率的に学ぶことができると思います。

未経験から独学でWebデザイナーになるために身につけるべきスキル

未経験からWebデザイナーになるための目指すべきゴールは、「自分の制作物をまとめたポートフォリオ」を作成することです。

企業で働くにしろ、クラウドソーシングなどで仕事を受けるにしろ、あなたのWebデザイン能力を測る指標となるものが必要です。ポートフォリオがない人は、よほどのコネクションがない限り、土俵に立たせてもらうことすらできない場合がほとんどです。

ですので、未経験から独学でWebデザイナーになるには、まずはポートフォリオを作成することを目指して学習を進めてみてください。

ポートフォリオを作成するのに必要な最低限のスキルは以下の通りです。
それぞれの具体的な後の章で詳しく説明します。

• デザインスキル
• Photoshop
• Illustrator
• Adobe XD
• HTML,CSS
• jQuery
• WordPress

未経験から独学でWebデザイナーになるための具体的な手順

未経験から独学でWebデザイナーになるための具体的な手順の全体像を以下に示します。

環境準備→デザインスキルの習得（約100時間）→コーディングスキルの習得（約150時間）→ポートフォリオの制作（約450時間）といった流れで学習を進めていきます。

環境準備

PC・マウスを用意する

すでにパソコン・マウスをお持ちの方であれば用意する必要はありませんが、お持ちでない方は、パソコンとマウスを用意しましょう。

スマートフォンだけでもWebデザインを行うこともできなくはありませんが、デザインソフトはパソコンで操作するほうが圧倒的に作業効率が良いので、必ず用意しましょう。

デスクトップでもノートPCどちらでも問題ありませんが、デザインソフトはメモリを多く使用するので、パソコンのスペックはある程度良いものを選びましょう。スペックの目安は以下のとおりです。OSはMacでもWindowsでもOKです。

• SSD：256GB以上
• CPU：Intel Core i5以上
• メモリ：8GB以上
• OS：MacでもWindowsでもOK

また、Webデザイナーは、デザインソフトでデザインを見ながらテキストエディターでコーディングしたり、ブラウザで参考サイトを見ながらデザインソフトでデザインを制作したりと、色々なツールを使用しながら作業を進めることが多いです。

そのため、ノートPCを使用する場合は、モニターも購入するとより効率的に学習を進めることができるので、お金に余裕のある方は購入することをおすすめします。

デザインソフトを購入・インストールする

Webデザインを制作するためには、自分が持っているPCにデザインソフトをインストールする必要があります。無料で使えるソフトもたくさんありますが、Webデザイナーを目指すなら、まずはAdobeのデザインソフトの使い方を学びましょう。

Adobeのデザインソフトの中で、Webデザイナーに必要なソフトは、主にPhotoshop・Illustrator・XDの3つです。それぞれのデザインソフトの特徴は以下の通りです。

Photoshop

画像出典：Adobe

Photoshopは主に画像編集に使用されています。Webサイトに載せる写真の色調を補正したり、画像を合成したりすることにより、美しい画像を作成することができます。

Illustrator

画像出典：Adobe

Illusratorはグラフィックデザインソフトです。Webサイトに載せるロゴやアイコンの作成に適しています。

XD

画像出典：Adobe

XDはプロトタイプ作成ツールです。Web制作においては、ワイヤーフレーム（サイトの大まかなレイアウト）やデザインカンプ（デザインの完成見本）の作成に適しています。

それぞれ単品で購入することも可能ですが、Webデザイナーになるには、上記3つはすべてインストールしたほうがよいので、割安のコンプリートプランで全てまとめて購入することをおすすめします。

また、購入の際は、「デジハリONLINEのAdobeマスター講座」から申し込みすると、格安で購入することができるのでおすすめです！

• Adobeの公式サイトから購入する場合：72,336円/年（税込）
• デジハリONLINEのAdobeマスター講座：39,980円/年（税込）

このように、約45%OFFの値段で購入することができます。以下のページから申し込むと、39,980円/年（税込）で購入することができます。

しかも、こちらから申し込みをすると、PhotoshopやIllustratorの使い方を動画で学べる「Adobeマスター講座」を申込み後、1ヶ月間のみ閲覧することができます。この講座のプロモーションを兼ねたキャンペーンになっているために、割安の値段になっているわけですね。

私もこちらから申込をして、いくつかの動画を見ましたが、非常にわかりやすく解説されていたので、時間に余裕のある方は、こちらの動画を見るのもおすすめです。

デザインスキルを習得する

デザインの基本を学ぶ

まずは、デザインの基本を学びましょう。未経験から独学でWebデザイナーを目指す場合、具体的に以下の2点が重要です。

• デザイン4原則をよく理解している
• 良いデザインを見て、そのデザインが良いと感じる理由を応えられる

人が見て、「良いデザインだ」と感じるデザインは、ある原則を満たしています。この原則は、「デザイン4原則」と呼ばれています。これを理解することで、万人受けするようなデザインを制作することができるようになります。

この「デザイン4原則」を理解した上で、良いデザインを見て、良いと感じる根拠を説明できるようになれば、自分でも良いデザインを制作することができるようになります。

具体的には、以下のような方法で学習を進めましょう。

「ノンデザイナーズ・デザインブック」を読む

まずはこちらの書籍を読みましょう。こちらは非常に有名で、デザイン初心者の登竜門のような書籍です。デザインにおいて重要な「デザイン４原則」について、具体的な例を交えながら丁寧に説明されています。

なぜこのデザインは良いと感じるのか？なぜこのデザインは悪いと感じるのか？といった「デザイナーの目」を鍛えることができます。

なるほどデザインを読む

次に、こちらの書籍を読みましょう。こちらも非常に有名な書籍です。デザイナーがゼロからデザインを作り上げるとき、どんなことを意識しながら、どんな手順でデザインを制作していくのか、具体的な例を交えながら丁寧に説明してくれます。

デザインは選択肢が多すぎて、何から手をつけていいか迷うことが多いですが、この書籍で説明されているような手順でデザインを制作すると、シンプルに考えることができます。

Photoshopの使い方を学ぶ

画像出典：Adobe

Photoshopは主に画像編集に使用されています。Webサイトに載せる写真の色調を補正したり、画像を合成したりすることにより、美しい画像を作成することができます。

Photoshopは様々な機能があり、使いこなすには時間がかかります。そのため、最初は完璧に使いこなすことは目指さずに、Web制作でよく使う機能を重点的に学習しましょう。

書籍で学習する方法もありますが、私のおすすめは動画で学ぶことです。特に、AdobeのPhotoshopチュートリアルは非常に分かりやすいので、Photoshopチュートリアルの以下の項目の動画を見て操作に慣れていきましょう。

Adobe Photoshopチュートリアルサイト

• 「写真編集 – 色補正と切り抜き」全13動画
• 「デザイン編：基礎」全15動画
• 「1分で分かるPhotoshop」全5動画
• 「1分で分かるPhotoshop②」全4動画
• 「1分で分かるPhotoshop③」全2動画
• 「初心者向けのレイヤーマスクの使い方コース」全5動画
• 「写真からオブジェクトを削除するコース」全5動画
• 「実践編」全5動画
• 「合成」全4動画

Illustratorの使い方を学ぶ

画像出典：Adobe

Illusratorはグラフィックデザインソフトです。Webサイトに載せるロゴやアイコンの作成に適しています。

Illustratorも、Photoshopと同様に様々な機能があり、使いこなすには時間がかかるので、まずはWeb制作でよく使う機能を重点的に学習を進めましょう。こちらもAdobeのチュートリアルで学ぶのがおすすめです。以下の項目の動画を見て操作に慣れていきましょう。

Adobe Illustratorチュートリアルサイト

• 「今日から始めるIllustrator」全4動画
• 「初心者向けプロジェクト」全23動画
• 「1分で分かるIllustrator」全5動画
• 「1分で分かるIllustrator②」全2動画
• 「初心者向けの描画コース」全6動画
• 「アートワークの操作コース」全6動画

Adobe XDの使い方を学ぶ

画像出典：Adobe

Adobe XDは、アドビシステムズ社が提供している、プロトタイプ作成ツールです。Web制作においては、ワイヤーフレーム（サイトの大まかなレイアウト）やデザインカンプ（デザインの完成見本）の作成に適しています。

Adobe XDは、PhotoshopやIllustratorのように機能は多くないですし、直感的に使用できるので、使いこなすまでには時間がかからないと思います。こちらもAdobeのチュートリアル動画を見て学習するのがおすすめです。以下の項目の動画を見て、操作に慣れていきましょう。

Adobe XDチュートリアルサイト

• 「クイックスタート」全5動画
• 「XDの基本を学ぶコース」全5動画
• 「プロジェクトを設定するコース」全6動画
• 「画像の操作コース」全6動画
• 「グラフィックとテキストの作成コース」全7動画
• 「初心者向けプロジェクト」全15動画
• 「その他の初心者向けプロジェクト」全3動画

ワイヤーフレームやデザインカンプを作成するツールは企業によって異なり、SketchやFigmaなどを使用している企業も多いかと思います。

就職したい企業が決まっているのであれば、事前にその企業で使用しているツールを確認し、そのツールのチュートリアル動画を見て改めて学習するのが良いかと思います。

コーディングスキルを習得する

HTML,CSS

HTML,CSSの学習は、最初に「Progate」、次に「ドットインストール」というオンライン学習サービスで実際に手を動かしながら学習するのがおすすめです。

Progate

画像出典：Progate

ブラウザ上でコードを書きながら学習を進められます。イチから丁寧に教えてくれるので、未経験でも抵抗感なく進められます。また、コンテンツのデザインやキャラクターがかわいらしい部分も、モチベーションを上げてくれます。

「Progate」公式サイト

一部のレッスンは無料でも受講可能ですが、Webデザイナーを目指すなら、全てのレッスンを月額1,080円（税込）で受けることができる有料会員プランに入りましょう。

具体的には、以下のレッスンを受講しましょう。

• 「HTML&CSS初級編」目安時間3h50min
• 「HTML&CSS中級編」目安時間4h30min
• 「HTML&CSS上級編」目安時間2h
• 「HTML&CSS Flexbox編」目安時間1h

これらのレッスンは、完璧に理解する必要はありません。なんとなく、「こんなことできるんだな～」くらいでOKです。完璧に理解しようとして、何度もレッスンを復習する必要はありません。一度でOKです。

Progateでの学習が終わったら、「ドットインストール」で実践環境で、どういう手順でコーディングを進めていくのかを学びましょう。

ドットインストール

画像出典：ドットインストール

ドットインストールは、動画でコーディングやプログラミングを学べるサービスです。

「ドットインストール」公式サイト

動画なので、手順が明確ですし、実際にテキストエディター（HTMLやCSSなどのコードを書くためのツール）を使いながら学習を進めていくので、より実践的なスキルを身につけることができます。

ドットインストールも、一部無料で動画を視聴できますが、全ての動画が月額1,080円（税込）で視聴することができる、プレミアムサービスに申し込みましょう。

具体的には、以下の動画で学習を進めましょう。

• 「HTML/CSSの学習環境を整えよう」全5回（　※WIndows編とmacOS編があるので、お使いのOSに合わせて選択しましょう。
• 「はじめてのHTML (全14回)」
• 「はじめてのCSS (全15回)」
• 「詳解HTML 基礎文法編 (全22回) 」
• 「詳解HTML フォーム部品編 (全8回) 」
• 「詳解CSS 基礎文法編 (全33回) 」
• 「詳解CSS セレクター編 (全12回) 」
• 「詳解CSS フレックスボックス編 (全16回) 」
• 「詳解CSS レスポンシブウェブデザイン編 (全8回) 」
• 「実践！アプリ紹介ページを作ろう (全16回)」

ここまで終えたら、HTML,CSSでどんなことができるのか、どういう手順でプログラミングしていくのかがざっくり把握できている状態になるかと思います。

jQuery

次に、Webサイトに動きをつけるための言語であるjQueryについて学んでいきましょう。

ここまで学習を進めてきた方であれば、プログラミングに対するイメージは掴めているかと思うので、Progateはやる必要はありません。ドットインストールのみで学んでいきましょう。具体的には以下のレッスンを学習しましょう。

• 「はじめてのJavaScript (全11回)」
• 「詳解JavaScript 基礎文法編 (全26回) 」
• 「jQuery入門 (全20回)」
• 「jQueryプラグイン入門 (全8回)」

jQueryはJavaScriptのライブラリなので、JavaScriptについても基礎を学んでおきましょう。難しく感じるかと思いますが、完璧に理解する必要はありません。実戦ではググりながら実装していけば良いので、軽い気持ちで臨みましょう。

サーバーレンタル・ドメイン取得・WordPressのインストール

次の章のWordPressサイトの構築方法を学ぶにあたり、事前にサーバーレンタル・ドメイン取得・サーバーへのWordPressのインストールを行う必要があります。これらに関しては、以下の記事で詳しく解説されていますので、こちらを参考にサーバーレンタル・ドメイン取得・サーバーへのWordPressのインストールを行っておきましょう。

サーバーレンタル・ドメイン取得方法↓
【初心者コーダー向け】現役Webエンジニアが教えるサーバー契約＋FTPでサイト公開までの全行程まとめ

サーバーへのWordPressのインストール方法↓
WordPress 簡単インストール

また、これでサーバーレンタル・ドメイン取得をしておくと、最後のポートフォリオサイトも、このサーバー・ドメインを使用してサイトを公開することができるので、一石二鳥です。

WordPressサイトの構築方法を学ぶ

WordPressとは、HTML,CSS,PHPなどについての知識がない人でも、ページ作成や記事投稿ができる、オープンソースのブログ投稿管理システムです。

このようなブログ投稿管理システムは、CMS（Contents Management System）と呼ばれています。

CMSの中でも、WordPressは圧倒的なシェアを誇り、インターネット上のウェブサイトの3分の1がWordPressで構築されています。

実務では、クライアントから、Webサイトを自分達で更新したいので、WordPressを導入してほしいと依頼されることが圧倒的に多いです。

そのため、一からWordPressを導入したサイトを作れるように学習しておきましょう。

WordPress構築の方法としては、ローカル開発環境で構築する方法と、レンタルサーバーを借りて構築する方法の2種類がありますが、実践を意識して、後者のレンタルサーバーを借りて構築する方法をお勧めします。

前章でサーバーのレンタル〜WordPressのインストールが済んでいると思うので、こちらを利用しましょう。

一からWordPressサイトの構築手順を説明してくれている「WordPress　仕事の現場でサッと使える！ デザイン教科書」という書籍で学んでいきましょう。

ポートフォリオを制作する

ここまで学習を進めてきたら、Webデザイナーになるために必要な知識は一通り学習できたことになります。ついに、ここからは実践のフェーズに移ります。一通り学習したとはいえ、一人でイチからデザイン～コーディングするのは、非常に大変です。でも、苦しくても、続けることさえできれば必ず一人でWebサイトを作成できるようになるので、諦めずに頑張りましょう！

架空サイトの制作

Webデザイナーとして働くために、あなたのスキルを証明するために架空のWebサイトを作成しましょう。架空のクライアントを想定して、

• どんなジャンルのサイトか？（例.美容院サイト）
• どんなコンセプトの店か？（例.カラーが得意）
• ターゲットは？（例.カラーが得意な美容院を探している30代女性）

などといった情報を設定し、架空のWebサイトをデザイン～コーディングまで全て一から自力で作成してみましょう。テイストの違うWebサイトを最低2つは制作しましょう。

いくらサイト数が多くても、素人感が出てしまうと、即戦力として認めてもらえないので、時間はかかっても良いので、既存のおしゃれなサイトに見劣りしない程度のクオリティを目指しましょう。

「とはいっても、初めてでそこまでのクオリティを求められても困る…」と思いますよね。というか、私はそう思っていました。笑

そこで、おすすめなのが、徹底的に他のおしゃれなサイトの良いところを盗むことです。

例えば、美容院サイトを作成すると決めたら、おしゃれな美容院サイトを30サイト程見つけて、そのサイトのおしゃれだと感じる部分をスクショして、おしゃれだと感じる理由を徹底的に挙げます。

そして、それらを自分のサイトに取り入れます。もちろん、もろパクリは良くないので、あくまでも参考にする程度です。この方法でサイトを制作すれば、ある程度のクオリティを保ったサイトを制作することができます。

ポートフォリオサイトの制作

最後に、自分で制作したWebサイトを載せるためのポートフォリオサイトを作成しましょう。ポートフォリオサイトを制作する際は、自分が制作したサイトのコンセプトなども載せておくと、クライアントの要望にしっかりと応えられることをアピールできます。

参考に、実際に私が作成したポートフォリオサイトを載せておきます。このポートフォリオサイトで、3社のWeb制作会社の採用試験を受けたところ、2社から内定をいただくことができました。

筆者の未経験時代のポートフォリオサイト

これから未経験からWebデザイナーを目指す方の参考になればと思います。

ポートフォリオサイトを作成することができたら、あとは仕事を見つけるのみです！企業でWebデザイナーとして働くことを目指している方、フリーランスを目指す方、副業としてWebデザインを行う方、様々かと思います。

いずれにせよ、未経験からポートフォリオサイトを作成できたあなたは、間違いなく可能性を秘めている方だと思いますので、自身を持ってアピールしましょう！

以上、最後まで読んでいただき、ありがとうございました！