Web制作は今や世界中で求められるスキルの1つとなりました。
しかし、初めて学ぶ人にとっては、何から始めていいのかわからないことも多いでしょう。
そこで本記事では、Web制作の独学ロードマップをご紹介します。
このロードマップに従って学ぶことで、フリーランスのWeb制作者として活躍するために必要なスキルを身につけることができます。
また、案件獲得に必要な知識や技術も学ぶことができますので、本記事を参考に、自分のスキルアップに役立ててみてください。
Web制作の流れを把握しよう
Web制作について学習する上で、Web制作の流れを理解しておくことは大切です。
Web制作の流れがわかれば、実際の案件での作業イメージが湧き、これから具体的に何を学ぶべきなのかがわかりやすくなります。
この章では、Web制作の流れと必要なスキル・知識について解説します。
Web制作のおおまかな流れ
Web制作のおおまかな流れは以下の通りです。
- 企画
- 設計
- 制作
- テスト
- 公開
まず企画では、クライアントの意見を聞き、Webサイトの目的やターゲットを設定します。
目的やターゲットがあいまいだと、ユーザーに上手く情報を伝えられないので、企画の段階でコンセプトをしっかりと固めておくことが重要です。
次に、決定したコンセプトをもとにサイトを設計します。
具体的な設計の内容は、Webサイトのどこに何を配置するか、どのようなコンテンツを制作するか、などです。
続いてデザインを制作し、決定したデザインをもとにWebサイトを構築します。
Webサイトを構築したら、次はテストです。
Webサイトが正しく動作しているか、画面上の表示が崩れているところはないか、などを確認します。
テストを終えたらいよいよWebサイトの公開です。
もし公開後に不具合があれば、修正などの作業を行います。
必要なスキル・知識はコレ
Web制作に必要なスキル・知識は、以下の4つです。
- コミュニケーション能力
- インターネット・デザインに関する知識
- コーディングのスキル
企画の段階で必要なスキルは、コミュニケーション能力です。
クライアントの要望を聞き取るためにはコミュニケーション能力が欠かせません。
設計の段階では、インターネットに関する知識が求められます。
Webサイトの集客力を高めるためには、インターネットの仕組みやWebマーケティングを理解し、最適な構造やコンテンツを決定する必要があるからです。
制作の段階では、デザインに関する知識・コーディングのスキルが求められます。
例えば、デザインに関する知識は、レイアウトや配色のルールなどです。
コーディングのスキルは、HTML・CSSなどの言語が挙げられます。
インターネットに関する知識・コーディングのスキルについては、後ほど解説するので参考にしてください。
Web制作独学のコツ
Web制作独学のコツは以下の3つです。
- 目標を設定する
- 完璧を求めすぎない
- アウトプットの割合を高める
目標から逆算して自分が今何をすべきかを明確にすることで、最速で成長することができます。
「転職して年収600万円以上を目指す」「将来的にフリーランスになる」でもよいでしょう。
また、完璧を求めすぎるのはよくありません。
学習を進めていくうちにどんどん深堀りしたくなりますが、独学で完璧を目指すのは難しいものです。
ある程度理解できたら、後は実践で身につける意識を持っておきましょう。
さらに、アウトプットの割合を高めることも大切です。
参考書などを読むだけでは実践的なスキルは身につきません。
どんどん手を動かして、インプットとアウトプットの割合は3：7を意識しましょう。
【ステップ1】インターネットの基礎とHTML/CSSを学ぶ
Web制作を独学するロードマップとして、まずはインターネットの基礎とHTML/CSSを学びましょう。
Web制作において、基本的なインターネットの知識とHTML/CSSの知識は欠かせません。
この章では、それぞれの知識を身につけるためにおすすめの教材や、教材から学べることについて詳しく解説します。
インターネットについて学ぶ
現代社会において、私たちが普段利用しているSNSやWebサイトなど、全てがインターネットを通じて提供されています。
インターネットについて学び、Webサイトの仕組みを知ることで、Webサイトをどのように設計・制作すればよいのか理解が深まるでしょう。
おすすめの教材としては、『イラスト図解式この一冊で全部わかるWeb技術の基本』が挙げられます。
この教材から学べることは、主に以下の通りです。
- インターネットの仕組み
- HTTPとは
- TCP/IP・IPアドレスとは
- インターネット上で使用されるデータ形式
- Webシステムの基礎知識
- Webアプリケーションの基礎知識
- セキュリティ・認証
この1冊でインターネットについて体系的に学習できます。
Web制作において、これら全てを詳細に理解しなければいけないというわけではありません。
まずはインターネットやHTTPの仕組みについて、基礎的な知識を身につけましょう。
HTMLとCSSを学ぶ
Web制作の多くの場面で使用されるHTMLとCSSについても学びましょう。
HTMLとは、Webサイトを構造化するための言語です。
具体的には、見出し・本文・表・リスト・ハイパーリンクなど、どの文章がどのような役割を持っているかを表すために使われます。
CSSとは、Webサイトの見た目の部分を作る言語です。
背景色や文字の大きさ、フォントの種類などを指定するために使われます。
WebサイトはHTMLとCSSを組み合わせて作られるので、この2つは同時に学ぶとより理解しやすいでしょう。
おすすめの教材は『1冊ですべて身につくHTML＆CSSとWebデザイン入門講座』『ほんの一手間で劇的に変わるHTML CSSとWebデザイン実践講座』などです。
また、書籍以外に学習サイトや動画サイトでも情報が豊富に掲載されています。
おすすめの学習サイトはProgate、動画サイトはドットインストールなどです。
ステップアップしたいならコレ
基礎から少し抜け出すためには、次の3つも学習してみましょう。
- CSS設計
- pxパーフェクトコーディング
- Sass
前述したように、Webサイトを制作する際は、CSSを使ってページの見た目を設定します。
しかし、CSSが膨大になると、管理が難しくなってしまいます。
そこで、CSS設計という方法を使うことで、見やすく整理することが可能です。
pxパーフェクトコーディングとは、1pxのズレもなくデザイン通り正確にWebサイトを制作することを指します。
Sassとは、CSSを簡潔に書くための言語です。
例えば、値を変更したい時に何度も同じ値を入力しなくても、一括で変更することなどが可能になります。
【ステップ2】JavaScript・jQuery
HTMLやCSSだけでもWebサイトは作れますが、それだけでは実務レベルには足りません。
現場でよく使われるJavaScript・jQueryについても学習しておくことが必要です。
この章では、JavaScript・jQueryの概要とおすすめの教材を解説します。
JavaScript
JavaScriptは、動的なWebページを作成するためのプログラミング言語です。
具体的には、JavaScriptを使って以下の機能を実現しています。
- ポップアップウィンドウを表示する
- Webサイト内の検索機能
- マップを表示させる
- リアルタイムでグラフなどを動かす
- 問い合わせフォームを作る
HTMLとCSSだけでは、このように動きのあるWebサイトは作れません。
そのため、JavaScriptは欠かせない言語の1つとなっています。
また、JavaScriptを使うことで、Webページから別のWebページに移動せずに、データを読み込んだり送信したりすることも可能です。
これをAjaxといいます。
JavaScriptの学習は難しく感じて挫折する人も多いので、まずは簡単な教材から取り組みましょう。
おすすめの教材は、ドットインストール、Udemy、『JavaScript コードレシピ集』などです。
jQuery
jQueryは、JavaScriptのライブラリの1つです。
ライブラリとは、Webサイトやアプリケーションの制作でよく使う機能をまとめたものです。
JavaScriptは、動的なWebサイトを制作することができますが、書き方が複雑でコードが膨大な量になってしまうという欠点があります。
そのため、jQueryはJavaScriptをより簡単に使えるように、よく使われる機能を短いコードで書けるようにしました。
例えば、JavaScriptでは10行のコードが必要な処理でも、jQueryなら1〜2行で記述することも可能です。
既存の機能以外にも独自のプラグインを作成できるため、自分が使いやすいようにカスタマイズもできます。
また、JavaScriptは特定のブラウザ上でしか動作しないこともありますが、jQueryはどのブラウザでも動作するのが特徴です。
jQueryは、実際にWeb制作の現場でもよく使われるため、JavaScriptと合わせて学んでおきましょう。
おすすめの教材は、Udemy、『jQuery標準デザイン講座』などがあります。
ステップアップしたいならこれ
JavaScriptに関してさらにレベルアップするなら次の3つにも挑戦してみましょう。
- GSAP、EJS、slickなどのライブラリ
- JSフレームワーク
- WebAPI
ライブラリを使えるようになると、Web制作を効率よくできるようになります。
よく使われるライブラリには、アニメーションの実装に特化したGSAP、HTMLを分割して管理するEJS、スライド表示が簡単に実装できるslickなどがあります。
JSフレームワークは、JavaScriptを使ったアプリケーションを開発するためのツールセットのことです。
WebAPIは、Webサイトやアプリケーションの中で、別のサービスの機能を利用できるようにする仕組みのことです。
例えば、WebAPIの1つであるGoogle Maps APIは、Webサイトやアプリケーションで地図を表示することができる機能を提供しています。
【ステップ3】WordPress・PHP
WordPressは、多くのWebサイトで使用されているため、学習することが必須です。
PHPというプログラミング言語を使用して開発されているため、PHPの学習もセットで行うとよいでしょう。
WordPressとPHPを学習することで、Webサイトの構築やカスタマイズに必要なスキルが身につき、より高度なWebサイトの開発が可能になります。
WordPress
WordPressとは、Webサイトを制作するためのソフトウェアです。
多数のプラグインやテーマが用意されているので、Webサイトの機能拡張やデザインの変更を簡単に行えます。
WordPressの学習におすすめの教材はこちらです。
- Udemy
- unazuki
- 『[改訂版]WordPress 仕事の現場でサッと使える! デザイン教科書[WordPress 5.x対応版] (Webデザイナー養成講座)』
- 『ゼロから学ぶ はじめてのWordPress [バージョン6.x対応]』
- 『WordPressレッスンブック5.x対応版』
基本事項をひととおり学んだあとは、実案件でよく使われる以下のことができるようにしましょう。
- WordPress化
- カスタム投稿
- タクソノミー
- カスタムフィールド
WordPress化とは、HTMLやCSSで作ったWebサイトをPHPという言語を使用してWordPress上で再現することです。
WordPress化することによって、Webサイトを効率的に管理できるようになります。
カスタム投稿とは、通常の投稿とは異なるオリジナル形式の投稿を作成することです。
例えば、商品ページ用・お知らせ用・スタッフブログ用など、1つのWebサイトの中で方向性の異なるさまざまな投稿ができます。
タクソノミーとは、WordPressで投稿やページのカテゴリーやタグのような分類を管理する機能です。
投稿の内容に紐付いたカテゴリーやタグを作成できるので、商品のカテゴリーやレシピの種類などを管理しやすくなります。
カスタムフィールドとは、WordPressで投稿やページに入力するデータの項目を独自に定義することができる機能です。
例えば、商品の価格やレシピの材料など、通常の投稿やページにはない項目を追加できます。
PHP
PHPは、Webサイトやアプリケーションの開発に使用される言語です。
会員登録やログイン機能、商品一覧ページや注文フォームなどを作成する時に使われています。
また、WebサイトをWordPress化する際にもPHPのスキルが必要です。
PHPの構文は、ほかの言語と比べるとシンプルでわかりやすいので、初めて勉強する人でも理解しやすいでしょう。
PHPの学習におすすめの教材はProgateです。
Progateには「PHP I」〜「PHP IV」までの4つの学習コースと「道場レッスン」という演習コースがあります。
その中でも特に大切なのは学習コースの「PHP I」です。
PHPの概念や基本的な構文を解説している部分なので、しっかりと理解しましょう。
「PHP Ⅱ」以降は、オブジェクト指向やより詳細な構文について解説しています。
こちらは1回さっと目を通すだけでも構いません。
ロードマップ外で学んだほうがいいこと
ここまで、独学でWeb制作するためのロードマップを解説しました。
インターネットに関する知識や、プログラミングスキルが必要なことはわかりましたが、このほかにも身につけておくべき知識はあるのか気になりますよね。
ここからは、ロードマップ外で学んだほうがいいことについて見てみましょう。
SEO
SEOとは、Webサイトの内容を評価し、ユーザーにとって有益なページを検索結果の上位に表示させるための仕組みのことです。
日本語では「検索エンジン最適化」ともいいます。
通常ユーザーが何かを調べる時、検索結果の上位のWebサイトを訪問することがほとんどです。
Webサイトの集客力を高めるためには、検索結果の上位に表示させるSEO対策が欠かせません。
SEOについて学ぶ際には、最新の情報を得る必要があります。
Googleのアルゴリズムは頻繁に更新されるため、古い情報を参考にしてしまうと、効果的なSEO対策ができなくなってしまう可能性があるからです。
書籍・YouTube・ブログの記事などで情報を集める際は、常に最新版の情報であるかを確認しましょう。
アクセシビリティ対応
アクセシビリティ対応とは、年齢・性別・身体的な特徴・障害の有無などを問わず、誰でも利用しやすい製品・サービスを作ることです。
近年、日常生活でインターネットは欠かせない存在であるため、Web制作においてもアクセシビリティ対応が求められています。
ただし、アクセシビリティ対応について学べる書籍はあまりないのが現状です。
情報が多くはありませんが、インターネット上で地道に調べて学習するのがよいでしょう。
ロードマップ学習後は現場へ！案件獲得のためにやること
Web制作に必要なスキル・知識を学習したら終わりではありません。
フリーランスとしてお金を稼ぐためには、実際に案件を獲得する必要があります。
しかし「案件を獲得するのは難しそう」と不安に思う人もいるのではないでしょうか。
そこで、この章では案件を獲得するためにやるべきことを2つ解説します。
ポートフォリオ制作
ポートフォリオとは、自分が作ったWebサイトなどの作品をまとめたものを指します。
自分のスキルや実績をアピールできるので、フリーランスとして案件を獲得するために必要不可欠なものです。
ポートフォリオを制作する時に意識することは、以下の4つが挙げられます。
- 自分が得意な分野やスキルを明確に示す
- 自分がどのような価値を提供できるのかを示す
- 自分が過去に手がけた実績を具体的に示す
- 見やすく、わかりやすいデザインにする
作品はインターネット上で実際に動作するものを見てもらったほうが効果的なので、サーバーにアップして公開しましょう。
この時、サーバーへの公開手順も学べるので一石二鳥です。
クラウドソーシングに登録
クラウドソーシングとは、インターネットを介して仕事の依頼者と仕事を請け負う人（フリーランサー）をつなぐサービスのことです。
クラウドソーシングサイトでは、Web制作の案件が数多く募集されているので、いくつか登録してみましょう。
ただし、はじめのうちは案件を獲得するのが難しいでしょう。
特に高単価の案件は実績がないと獲得できません。
初心者でも獲得しやすい案件は単価が低いことがほとんどです。
クラウドソーシングでは実績が重視されるため、まずは実績を作るためにも、単価の低い案件をこなすことを覚悟する必要があります。
ある程度の実績ができたら、少しずつ単価の高い案件に挑戦していきましょう。
メンターサービス利用も検討してみよう
独学やフリーランスだと、ほかの人と繋がりにくかったり、相談できる相手がいなかったりする場合が多々あります。
そんな時は、メンターサービスを利用してみましょう。
メンターサービスとは、エンジニアやデザイナーなどの同業の専門家に悩みを相談・質問できるサービスのことです。
学習でつまずいた時、気軽にプロへ質問できるのはうれしいですよね。
代表的なメンターサービスには、MENTAがあります。
MENTAは1回1,000円〜利用することができ、プログラミングスクールに比べてリーズナブルな価格が魅力です。
1人で悩んでいると挫折してしまうことも多いので、近くに相談できる人がいない場合は、メンターサービスの利用も検討してみましょう。
Web制作学習にまつわるQ＆A
ここまで、独学でWeb制作を学ぶロードマップ〜実際に案件を獲得するためにやるべき準備を解説しました。
しかし、「今から学習しても遅くない？」「学ぶことがたくさんあるけど、PHPはどこまでの知識が必要なの？」と、まだ疑問が残っている人もいるかもしれません。
この章では、Web制作学習にまつわるQ＆Aを2つ紹介します。
- Web制作はオワコン?今から学習する価値はあるの?
- PHPはどこまで学べばいいの?
Web制作はオワコン?今から学習する価値はあるの?
結論からお伝えすると、Web制作はオワコンではありません。
そもそもWeb制作がオワコンといわれている理由は主に以下の3つの理由があります。
- ノーコードツールが充実してきたから
- 人材が飽和状態だから
- 単価が安くて稼げないから
ノーコードツールとは、専門的な知識がなくても簡単にWebサイトを作ることができるツールのことです。
ノーコードツールが導入されることで、人間の仕事がなくなってしまうのではないかといわれています。
確かに簡単なコーディングができるだけの人材では、もしかしたら仕事が減ってしまうかもしれません。
しかし、Web制作には企画・設計、人員の管理など、ツールではできない仕事もたくさんあります。
また、Web制作は未経験からでも始められるため人材が飽和状態で、単価も安いといわれています。
実際には、飽和状態なのは技術レベルの低い人材で、高度なスキルを身につけた人材は不足しているのが現状です。
Web制作の高度で専門的なスキルとともに、コミュニケーション力やマネジメント力などを身につけた人材は、今後も必要とされるでしょう。
そのような人材はさまざまな現場で必要とされるため、高単価な案件も目指せます。
PHPはどこまで学べばいいの?
ProgateのPHP学習コースは「PHP I」〜「PHP IV」の4つがありますが、先にもお伝えした通り、「PHP I」をしっかりと理解しましょう。
「PHP I」では、主に以下の内容を解説しています。
- そもそもPHPとはどのようなものなのか
- PHPで使うデータの種類（変数・文字列など）
- if文・swich文などの条件分岐の使い方
- 配列の使い方
- for文・while文などのくり返し処理の使い方
- 関数の使い方
- 問い合わせフォームの作り方
PHPの基礎的な内容なので、理解が不足していると後々の作業に支障が出てしまいます。
一度に理解するのが難しい場合は、何度も見返して学習しましょう。
なお、演習コースの「道場レッスン」はやらなくても問題ありません。
「PHP Ⅱ」〜「PHP IV」では、より踏み込んだ内容を解説しています。
WordPress化をする上では理解しておいたほうがいい内容などもあるので、一度目を通しておくとよいでしょう。
完全には理解できなくても、雰囲気をつかめれば大丈夫です。
Web制作を独学でマスターしよう
今回は、Web制作を独学するためのロードマップを解説しました。
Web制作に必要なスキルや知識を身につけるために、書籍・学習サイト・動画サイトなどを活用するのがおすすめです。
学習でつまずいて挫折するのを防ぐため、プロに相談できるメンターサービスの活用も検討してみてください。
まずは基礎をしっかりと固めて、案件を獲得できるようになりましょう。
ただし、これから求められるのは、Web制作の高度で専門的なスキルとともに、コミュニケーション力やマネジメント力などを身につけた人材です。
基礎を身につけた後もどんどんスキルを磨き、フリーランスとしてさまざまな案件で活躍できる人材を目指しましょう。
