【完全初心者向け! 】独学でWEBサイト制作者になるための技術ロードマップ【WordPress | WEB制作独学】

こんな方におすすめです。

はじめての方でも、勉強の方針がわかる、「WEB制作の学習ロードマップ」です。

完全に初心者の方が、WEB制作会社に就職、もしくは独立するまでに、この技術があれば百人力という、学習するべき必要なことをまとめました。

学習ロードマップとポイント

 

 

当ページの対象者

• 完全に初心者からWEB制作者として就職したい方
• 独学でWEB制作の方法を勉強したい方
• 将来的にWEB制作のフリーランスとして独立したい方
• WEB制作の仕事についているけれど、まだ技術を磨く必要がある方

 

必要なもの

• パソコン
• エディタ (当サイトではVisual Studio Codeを推奨)
• インターネット環境

 

初心者向け! WEB制作の学習ロードマップ

【STEP01】HTML &  CSSを学ぶ

まずは、世の中のホームページがどのような仕組みを元に表示されているかを学ぶ必要があります。

そして、その基礎とも呼ばれているものが HTML とCSSになります。まずはこちらを学んでいきましょう。

この世のほとんどのサイトは、このHTMLとCSSという言語で見た目が作られています。

ProgateのHTML&CSSコースでしたら、最初の基礎から、スマホやPCなどの異なる画面幅でもレイアウトを綺麗に表示れきる「レスポンシブ」についても学ぶことができます。

一度全てのコースを挑戦してみてください。

（ちなみに何周もコースに挑戦する必要はありません。1周できたら次にいきましょう。）

もしかしたら「よく分からない」となるかもしれません。でも、最初から完璧を目指す必要はありません。こんな感じで作るんだなってことがわかれば大丈夫です。

 

【STEP02】サイトを模写コーディングをしてみる

HTMLとCSSについてざっくりと理解できたら、今度は実際にコードを書いてサイトを構築する練習をしていきます。

コーディングの練習に関しては下記のサイトがおすすめです。

最初は簡単なサイトをコーディングするにも時間がかかるかもしれません。

色々と自分で調べながら進めていってください。例えば画像を挿入するにはどうしたらよかったかな？と調べたい時はGoogle検索で「html 画像」と検索するとやり方が載っているページがたくさん出てきます。この調べて実装するという工程が大切です。仕事でWEB制作をしていると、この工程の繰り返しになります。

 

【STEP03】サイトを公開する

仕事で請け負った場合、サイトが完成したら、お客様のサイトを公開する知識は必須となります。

また、就職する際や仕事を受注する際に、ポートフォリオという今まで作成してきたサイトやデザインを相手に紹介するページが必要となる可能性が高いため、練習の意味も兼ねて、サイトを実際に公開してみましょう。

サイトの公開では、一般的に「レンタルサーバー」と「独自ドメイン」が必要になります。

無料で公開することも可能ですが、後々のことを考えると有料のレンタルサーバーを契約しても良いかもしれません。

レンタルサーバーは、後ほど学習するWordPressに対応したサーバーを選びましょう。

ドメインは、独自ドメインと言って有料で好きな英数字のものを契約することもできますが、レンタルサーバーを契約すると無料で使えるドメインもついてくるので、独自ドメインはポートフォリオサイトなどを作成した後に設定しても良いかもしれません。

また、レンタルサーバーを契約した後は、簡単にサーバーに接続してファイルを転送できるFTPソフトで作成したデータをサーバーにアップします。

 

【STEP04】JavaScript基礎 & jQueryを学ぶ

世の中にあるサイトの多くは、スマホのクリックすると表示されるメニューや、画像が切り替わるスライドショーのような機能があるのではないでしょうか？

実は、このようなアニメーションや動きのある効果は上記のHTMLやCSSだけだと、実装が難しい場合があります。

そのため、より高機能で動きのあるサイトを作りたいと思った時に学ぶのが、JavaScriptとjQueryになります。

こちらを学ぶことで、WEBサイトに「動き」を追加することができます。

こちらもProgateで学ぶことができます。

現在JavaScriptはES6(最新版)とES5(旧版)のコースに分かれています。

ES6(最新版)は最新の仕様なのですが、まだブラウザによっては動かない書き方もあるので、現在、WEB制作者として学ぶことを考えるとES5(旧版)に挑戦した方が良いかもしれません。(2021年現在)

もし可能でしたら、STEP02で作成した模写したサイトに、学んだ機能をカスタマイズとして実装してみることをおすすめします。

【STEP05】WordPressの基礎を学ぶ

WordPress(ワードプレス)とは、サイトやブログの作成が簡単にできるシステムの一つです。

無料で使用できることもあり、世界中のおよそ4分の1はWordPressで構築されていると言われています。

そのため、WordPressを使ったサイト制作の案件は非常に多いため、WEB制作者として働きたい場合、WordPressの勉強はしておいた方が良いでしょう。

WordPressを触ったことがない方はまずはサーバーにインストールしてみて、使い方を確認し、可能なら実際にテーマを使って、ポートフォリオやブログを作成してみてください。

WordPressの強みは、プログラミングができなくても、簡単に記事などを追加でき、プラグインなどで簡単に機能を追加できることです。

そのため、WordPressの基礎的は使い方を、まずはマスターしてみてください。

【STEP06】PHP基礎を学ぶ

次に勉強するべきなのはPHPの基礎です。

STEP05でWordPressを使ってみましたが、実はWordPressの裏側では、PHPというプログラミング言語でサイトを作成しているのです。

そのため、WordPressのカスタマイズをしたい場合、このPHPを操作できる必要があります。

ですが、あまり難しく考えないでください。

プログラミングをすると言っても、ある簡単なカスタマイズでは、WordPress特有のコードを使用することで比較的簡単に実装できます。

そのため最初は、　簡単なPHPの書き方が分かれば大丈夫です。

 

こちらもProgateで学ぶことができます。

最初は基礎的な勉強のみなので、ProgateのPHPコースは「PHP I」のみで大丈夫だと思います。オブジェクト指向まで学んでしまうと、難しくて挫折してしまう可能性があるので、基礎的な書き方が分かれば次へいきましょう。

【STEP07】WordPressをカスタマイズする

PHPの基礎を学んだら、次はWordPressのカスタマイズで、最終的にオリジナルテーマを作れるようになりましょう。

STEP05の「WordPressの基礎を学ぶ」で、これだけでサイトは十分に作れるのに、何故次にPHPなどを学ぶ必要があるのだろうと思った人もいるのではないでしょうか？

実際の仕事で考えれば、プログラミングを使わず、WordPressの既存のテーマとプラグインでサイトを制作するやり方で、サイト制作の仕事をしている人もいます。

ただ、ここで覚えておかなければいけないのは、WordPressはプログラミングなしで簡単にサイトを作成できるからこそ、お客様でもある程度のPC知識があれば、サイトを自力で作成できるという点です。

そのため、WEB制作を仕事する上で、WordPressをカスタマイズできた方が仕事をとる幅が広がりますし、実際に私はこの方法で現在仕事をしています。

 

逆に、WEB制作の技術があまりなくフリーランスで仕事をしている人は、

• ディレクションやマーケティングの知識があり提案実践できる
• 営業力が凄まじい
• デザイン能力が素晴らしい

プラスαの卓越した能力が必要となるか、

• チームで働いている
• カスタマイズなどは他の方に外注する

などになると思います。

 

その他身につけておくと良いもの

Sass (SCSS)

Sassとは、CSSをより効率的にかけて、コードもみやすくすることができる書き方です。

必須ということはないのですが、現在のWEB制作会社はほぼ確実に使っていると思っても良いと思います。

そのため、WEB制作会社に就職したい、WEB制作会社から仕事を受けたいと考えている方は、やり方を覚えていきましょう。

Git

Gitとは、プログラミングのソースコードの変更履歴を記録・追跡するための管理システムです。

例えば、チームで共同で開発する時などに誰がいつどんな変更をしたかを記録し、自分が変更したファイルを、他の方も編集していたために、自分が変更した部分が消えてしまったということを阻止することが可能です。

また、コードを変更した後、過去のファイルに戻したいなというようなことや、コードをお客様に共有することもできたりします。

一人で開発する時にも意外に助けてもらっています。

プログラマーにとってはGitは使えて当たり前という方もいらっしゃるので、使えるに越したことはないです。

Adobeなどのデザインツールの使い方

このロードマップではサイトを作成するための技術的な紹介をしていたのですが、デザインツールも実はかなり必要になってきます。

例えば、サイトをHTMLとCSSでコーディングする仕事を請け負った際、お客様からはデザインデータが送られてきます。

そのデザインデータを開き、文章などをコピーしたり、画像を書き出したりする作業をする必要があります。

そのため、よく使われるデザインデータの使い方の基礎は覚えておく必要があります。

Web制作でよく使われるソフトは、Adobeの「Adobe XD」「Photoshop」「Illustrator」になります。

「Adobe XD」は、Webサイトやモバイルアプリなどのために特化したデザインツールで、2016年に公開されたソフトですが、とても人気なツールです。アップデートによりまだまだ新しい機能が追加され続けているツールです。

「Photoshop」「Illustrator」はAdobeの主力のデザインソフトです。どちらもWebデザインが可能です。また、「Photoshop」だと写真のレタッチ、「Illustrator」ですと、イラストやロゴの作成などそれぞれの特性に合わせた使い方もあります。

以前はWEBデザインでも「Photoshop」「Illustrator」が主流でしたが、「Adobe XD」が登場し、とても使いやすかったことで、こちらに切り替えるWEBデザイナーさんも一気に増えました。

ただ、この3つのソフトはデザインを仕事する上で避けては通れないので、最低限、1ヶ月の無料体験プランなどで使い方を覚えておくことをおすすめします。

WEBデザイン能力

サイトは、デザインがしっかりしているだけで本当に第一印象が違います。

そのため、WEBデザインもできると仕事の幅が広がります。

また、コーディングの仕事をするにしても、デザイナーさんの考えを学ぶことは、サイトのクオリティを向上することができます。

まずは、Adobeのデザインツールの「Adobe XD」「Photoshop」「Illustrator」の使い方の基礎を勉強し、その後、「Adobe XD」でサイトのデザインをしてみることをおすすめします。

デザインするサイトはなんでも構いません。

自分の、ポートフォリオサイトを作成したり、好きなカフェや車のサイトを空想でデザインしたりしてみましょう。

可能でしたら、自分でデザインしたサイトを自分で実装までできると良いかと思います。

ディレクション能力

サイトを作成する時、コーディングやプログラミング能力に目が行きがちですが、PCを使った技術的なことだけが求められるだけではありません。

例えばサイトを作成前には、お客様との打ち合わせや、サイトをどのような構成で作成するか、サイトの内容など決めなければいけないことが多いです。

マーケティングやブランディングなどの知識があるとさらにあなたの人材的な価値が高まり、より効果があるサイトを作成できるでしょう。

さらに、サイトを作成したあとも終わりではありません。

どれくらいサイトにお客様がきているか、どのように運用するかなど総合的なチカラが求められる場合もあります。

 

WEB制作学習のポイント

これまでは、サイトを制作するにおいて技術的に学んだ方が良いことを紹介してきました。

次は、学習をどのように進めるか、学習のポイントを紹介させていただきます。

はじめは完璧を求めない。6割理解したと思ったら次へ行く

WEB制作やプログラミングをはじめて挑戦してみると、分からないことだらけだと思います。

最初は誰でもそういうものなのです。

そのため、最初は完璧を求めず、6割理解したなと思ったら次の学習に行くことをおすすめします。

そして次でもわからなければ、Google検索で何度でも調べてみてください。

暗記をする必要はありません。

何かわからないことがあった時に、何度でも検索しながら進め、わからないことは最悪飛ばしても良いのです。

まずは手を動かして、色々と作成してみることが重要です。

 

テキストを読んでいるだけだと技術は身につかない。コードを書いてどのように動くか試してみよう

プログラミングを学習する上で、一番チカラが身に付くのは、実際に自分でコードを書いてみる意外に方法はありません。

もしかしたらこのページを見てくださった方の中には、色々と書籍を買ってみた勉強熱心な方がいらっしゃるかもしれません。書籍を買ったら読むだけでなく、まずは書籍に載っているコードを模写してみてください。

さらに次は、それを使って自分のサイトを作成してみてください。

実践に近いほど、技術は身につきやすいです。

そのため、もし可能でしたら、お友達の中にお店をやっていらっしゃる方がいれば、その店のサイトを作成させていただくことも良いと思います。

 

分からないことを自分で検索する能力は必須

サイト制作をしていて、必ずこれはどうやって実装するんだろうってわからないことがあります。

でもそんな時はGoogleで検索すれば一発です。

疑問があれば、Google検索をしましょう。

この仕事をしていて実は一番必要なことは、検索能力と言っても過言ではありません。

HTMLもCSSもプログラミングでも、よく使うコードは覚えるかもしれませんが、別に暗記をする必要はありません。必要な時に、検索をすれば良いのです。

 

一通り学んだ後は、自分はどれを深掘りするかを決めるのがおすすめ

ここまで書いてきましたが、WEB制作は色々と極めようとすると、無限のように勉強することや身につけることがあります。

そのため、最初は色々とやってみて自分は何が向いているのかは、いつも意識しておいた方がいいと思います。

コードを書くことが好きなら、プログラミングやコーディングの知識を深めても良いかもしれません。

コードを書くよりデザインをする方が向いているかもしれません。

PCで作業するより、人と話したり、案件を調整することが楽しいかもしれません。

 

人によって向き不向きは違います。

もしこれは自分にあまり向いていないなと思うことがあっても、向いていることに注力すれば、貴重な替えが効かない人材になることができます。

 

この記事のまとめ

いかがだったでしょうか？

現役WEB制作フリーランスが自分の経験をもとに、初心者向けの「WEB学習ロードマップ」を公開してみました。

これからWEB制作の仕事をしてみたいという方はぜひ参考にしてみてください。