Web制作者・Webデザイナー になるには？未経験からのWeb制作学習ロードマップ！【2024年版】

今回はWebデザイン・Web制作の学習を進める上で必要となる「ロードマップ」について解説していきます。
現役Web制作エンジニアが監修しております。皆さんの今後の学習にきっと役立つ内容です。

また、この記事は「Web業界に転職をしたい人」「副業で稼ぎたい人」「フリーランスとして活躍したい人」に共通する内容に重視しています。

この記事があなたの背中を押して、これからの仕事人生を楽しくすることになれば幸いです。

学習をはじめる前に

そもそも「Web制作」「Webデザイナー」が何かということを、しっかりと理解できていない場合は以下の記事を併せて読んでみてください。

Web制作の学習を進める上でよく聞かれる質問のひとつとして、「デザインとコーディングどちらも勉強する必要があるのか？」「どちらを先に学習すべき？」というものがあります。

まず一つ目に対しては、結論「デザインとコーディングどちらかだけ」という選択も良いと思います。特に副業で考えている人にとっては、学習コストがかからず本業しながらでもやりやすいため、楽しくWeb制作に携わることできるでしょう。ただ、比較的低単価の案件が多いです。そして、就職やフリーランスを考えている方にはあまりおすすめできません。どちらかだけができる人はかなり多くいますので、その中であなたを選んでもらうにはより一層の努力、付加価値が必要となります。

二つ目の質問に関しては、当記事ではコーディングからの学習をおすすめします。
理由はデザインから学習する多くの人が、デザイン学習に時間をかけすぎてしまうためです。
デザインはコーディングと違い正しいやり方や成果物の形は複数あります。
デザインは0→1で制作するのは難しく、多くのデザインを参考にすることで上手く制作できるようになります。
ツールの使い方を覚えたからといって、デザイン制作で手を動かし続けていしまうと、「試行錯誤しすぎてしまい、コーディングの学習を始めないまま、時間が経ってしまう。」なんて人を何人も見ました。
デザインはインプットだけであればコーディング学習しながらでもできます。コーディングの際には、デザインのアウトプットにも繋がることを意識しながら、多くのデザインデータに触れるとよいでしょう。

学習ロードマップ

1. Web、PCに関する基礎知識を学ぶ
2. 学習環境の事前準備
3. HTML/CSS基礎学習（インプット）
4. デザインツールの使い方学習（インプット）
5. デザインデータからコーディング（アウトプット）
6. Sassの学習（インプット）
7. JavaScript/jQueryの学習（インプット/アウトプット）
8. WordPressの基礎学習
9. WordPress基礎のアウトプット/ポートフォリオ作成
10. デザイン制作・学習
11. ポートフォリオ作成 / WordPressオリジナルテーマ学習
12. ポートフォリオのブラッシュアップ

Web、PCに関する基礎知識を学ぶ

まずは、PCに関する言葉、Web業界で常識となる知識に関してインプットしていきましょう。
クライアントとの打ち合わせや面接の場面で、一般常識とされている知識を理解していないと「信用」を得ることができません。また、言語の学習を進めていく中でも解説の用語が理解できないと、手戻りが発生します。
実際に言語の学習をスタートする前に必ず学習するようにしましょう。

学習環境の事前準備

• Google Chromeをインストールする
• Visual Studio Codeをインストールする

まずは準備として、上記2点のインストールをしましょう。様々なブラウザで表示の確認ができ、webサイトを制作後は確認の必要もあります。ですが、制作はGoogle Chromeでやるのがおすすめです。

また、コーディングに必要なテキストエディターは「VS Code」を用いるのがおすすめです。
VS Codeは他エディタに比べて軽量であることやコーディングしやすくする拡張機能が充実しているため、多くのユーザーに愛用されています。

HTML/CSS基礎学習（インプット）

学ぶべき内容

• HTMLがどんな役割を持つものなのか
• HTMLの書き方
• CSSがどんな役割を持つものなのか
• CSSの書き方

基礎学習はドットインストールやYoutubeなどで学習するのがおすすめです。もし、より簡単なものからやりたければProgateを使っても良いですが、Progateだけだと不十分になってしまいます。

書籍で学習する方もいますが、選び方が重要です。中には稀にしか活用しない内容も収録されていて、情報が多すぎるものもあります。そのため、初心者にはあまりおすすめできません。学習途中で復習用や辞書のように使うのがおすすめです。もちろん、初心者学習に適したものもあるので、周囲のWeb制作者や購読者に聞いて選ぶと良いでしょう。

デザインツールの使い方学習（インプット）

HTML/CSSの基礎学習ができた後は、デザインツールの使用方法を学習しましょう。
コーディング学習の次のステップはデザインデータからのコーディングです。
デザインを元にコーディングをする際は、スクリーンショットや画像をみて進めるわけではありません。
テキストや画像などの配置・サイズが設定されたデザインデータ自体（設計図のようなもの）を確認して進めます。
その際、デザインデータを正しく扱かったり、素材加工をするためにも、最低限デザインツールの使い方を学習しておく必要があります。

学習すべきツールとしては

• Figma
• XD
• illustrator
• Photoshop

があげられます。

デザインカンプを作成するのに使用される代表的なものが「Figma(https://www.figma.com/ja/)」です。
同様のツールとしてAdobe XDがありますが、現在単体でのダウンロードができなくなっているので、Figmaが使用される場面が多くなっています。とはいえ、まだ使用しているデザイナーはいるため、どちらも使えるようにするといいでしょう。
画像・イラスト加工や写真加工にはillustratorやPhotoshopを使用します。サイズや形の変更、切り抜き、色味調整など基本的なことはできるようにしておきましょう。

デザインツールの基礎学習にはこちらがおすすめです。

このインプットにあまり時間をかけすぎないように注意しましょう。実際にコーディングをしたり、後々デザインを制作する際に、いろいろなケースで実践することになります。

デザインデータからコーディング（アウトプット）

HTML/CSSの基礎とデザインツールの扱い方を学習した後は、デザインデータを元に実際にページコーディングをしていきます。とにかくたくさん作ることが重要です。ただし、注意点としては、デザインカンプはクライアントの要望とデザイナーの意図を反映したものなので、忠実に再現することを大切にしてください。

練習用のデザインデータにおすすめの参考サイトをご紹介します。

Sassの学習（インプット）

学ぶべき内容

• Sassがどんな役割を持つものなのか
• Sassの書き方
• SCSSの書き方

「Sass（サス、サース）」とは、CSSを拡張して、書きやすく扱いやすくしたメタ言語です。メタ言語とは、ある言語に別のルールを定義するために使われる言語のことで、拡張言語と呼ばれることもあります。Sassは、CSSをより効率的に記述するためのメタ言語として登場しました。
SASSにも様々な記法があり馴染みが無い方も多いですが、その中でSCSS記法はCSSに近い書き方ですので、初学者の方でも取り入れやすく、広く使われているので学習をおすすめします。
徐々に慣れてきたら、「コーディングスピードのアップ」に繋がります。
しかしSassは便利ではあるものの、Web開発を行う全ての現場でSassが導入されているわけではなく、CSSを使える人がSassを使えるとも限りません。また、使用には環境設定が必要ですので、学習に時間をかけすぎないようにしましょう。

JavaScript/jQueryの学習（インプット）

JavaScriptとは、Web サイトに動的なコンテンツを追加できるプログラミング言語です。HTML や CSS と組み合わせることでさまざまな動的な表現を可能とします。
そしてjQuery は、JavaScriptで記述されたものをさらに使い易くされているもので、一般的には「ライブラリ」と呼ばれています。jQuery の学習は必須ではありませんが、使用されている場面も多くあるため、学習をおすすめします。

学ぶべき内容

• JavaScriptの書き方
• jQueryの書き方
• jQueryの使ったアニメーションパーツの基礎的な作り方

JavaScriptとjQueryをつい早い段階で学習してしまう人が多いのですが、早い段階での学習はおすすめしません。
HTML/CSSなどのプログラミング知識のベースが整った後に学習しないと、JavaScriptとjQueryがどのような言語であるのかをしっかりと理解できません。
この段階でJavaScriptとjQueryの違いもしっかりと確認しながら基礎的な文法からインプットしていきましょう。

デザインデータからコーディング（アウトプット）

JavaScript/jQuery の基本的な書き方を学んだら、実際にJavaScript/jQueryを使って動きのあるWebページのコーディング経験をしましょう。

特に以下のような頻出するパーツは必ず経験しておきたいところです。

• ハンバーガーメニュー
• スライドショー
• タブメニュー
• モーダルウィンドウ
• ドロップダウンメニュー
• スクロールアニメーション
• スムーススクロール
• アコーディオンメニュー

各パーツのご紹介については以下の記事を参考にしてください。

また、jQueryには多くのプラグインが存在しているので、ご自身で調べながら実装してみても良いかと思います。　

PHP学習

WordPressでオリジナルテーマ制作をする際にPHPの基礎を学習する必要があります。HTML/CSSに比べて、学習のハードルが高く感じるかもしれませんが完全理解しなくても大丈夫です。WordPress化のときに分からない文法が出たら、その都度、見直して理解していけば良いです。
最低限学習すべき内容は以下の記事で紹介しています。

WordPress学習

学ぶべき内容

• WordPress管理画面の使い方/ 用語の理解
• WordPress 既存テーマを触ってみる
• WordPress でオリジナルテーマ制作をする
• カスタム投稿、カスタムフィールドを理解する

WordPressを実際に触ってみて、管理画面の使い方や用語に慣れていきましょう。初めはWordpress既存テーマと呼ばれる、すでに作成されたデザインと機能を備えたテンプレートを自由にカスタマイズしていくことをおすすめします。慣れてきたところでオリジナルテーマの作成に進みます。1からファイルの準備、設定を行っていくものです。
このあたりからしっかりと実務を想定し、デザインデータからWordpress構築を問題なくできるようにしましょう。
その際にカスタム投稿、カスタムフィールドについても扱えるようになる必要がでてくるはずです。

WordPressサイト制作について詳しくは以下記事でご紹介しています。

デザイン制作・学習

WordPress学習を始めると共に、デザインのアウトプットを本格的に始めても良いでしょう。
その際、ポートフォリオ用のサイトとして使用することを意識して、架空の会社やお店のホームページやLPをどんどん作成することをおすすめします。

デザイン事例を見る場合は以下のことに気を付けてください。

• 色んな種類のサイトを見る
• ギャラリーサイトばかり見ない
• 有名な制作会社の実績を見る

こちらの点に気を付けないと、制作できるデザインが偏よりすぎてしまったり、難易度が高すぎるデザイン、汎用性のないデザインの制作をついしてしまいます。
オリジナリティ溢れるデザインが作れることも良いことですが、よくあるホームページのデザインをできるようになることをまずは優先しましょう。

ポートフォリオ作成

ポートフォリオとは、自分が作ったWebサイトなどの作品をまとめたものを指します。
あなたの知識・スキルは口頭だけでは証明できません。
クライアントや面接官はその方が持つポートフォリオを見て「仕事を任せられるかどうか」を判断します。
できる限り多くのポートフォリオを作成し、信用を得る必要があります。
Web制作の学習の中で、習得したJavaScriptやjQuery、WordPressなどの知識を積極的にポートフォリオに反映させていきましょう。

制作したポートフォリオはインターネット上で実際に動作するものを見てもらったほうが効果的です。
サーバーにアップして公開しましょう。


ポートフォリオとは、自分が作ったWebサイトなどの作品をまとめたものを指します。
あなたの知識・スキルは口頭だけでは証明できません。
クライアントや面接官はその方が持つポートフォリオを見て「仕事を任せられるかどうか」を判断します。
できる限り多くのポートフォリオを作成し、信用を得る必要があります。
Web制作の学習の中で、習得したJavaScriptやjQuery、WordPressなどの知識を積極的にポートフォリオに反映させていきましょう。

制作したポートフォリオはインターネット上で実際に動作するものを見てもらったほうが効果的です。
サーバーにアップして公開しましょう。

目的別 学習後ロードマップ

「学習がひととおり完了し、ポートフォリオ制作ができたあと何をやればいい？」
実務につなげる手段は人や環境によって様々ではありますが、ここではおすすめな一例を目的別でご紹介いたします。

副業・独立編

1. クラウドソーシングサービスに登録
2. SNSを活用

クラウドソーシングサービスとは、ネットを介して仕事の依頼者と仕事を請け負う人をつなぐサービスのことです。そこではWeb制作の案件が数多く募集されています。代表的な例としては、クラウドワークス、ランサーズ、ココナラなどがあります。まずはいくつか登録してみましょう。
ただし、はじめのうちはなかなか案件を獲得することができませんです。
案件に応募する方は複数います。実績がないうちは選ばれる可能性が低いです。
まずは、たとえ報酬が低くても、しっかりと完遂できる案件に積極的に取り組んで実績数を増やしましょう。

実績や経験を増やす方法としてSNSも効果的です。「案件に対しリソースが不足している」などを理由に募集している方もいるので積極的にコンタクトをとりましょう。
しかし注意点として、スクールの勧誘、情報商材の営業を執拗にされることも少なくありません。
行動する限りチャンスはたくさんありますので、「おかしいな」と感じたら、必要以上にコンタクトをとらないように気を付けましょう。

就職・転職編

ポートフォリオが完成したら就職・転職活動を開始できます。そのクオリティや数、企業次第ではすぐに決まる方もいます。しかし、中には実務経験がないと受け入れてくれない企業も多くあります。なかなか決まらない場合は、一度、副業からスタートするのもひとつです。

副業・独立編でご紹介した内容を実施してみましょう。