Web制作を始めるに当たって、私が知っておきたかったなということをまとめました。
私がWeb制作を始めたときは、用語も、自分が何をするのか、どうしたらお金になるのかもわからず始めました。
どんな仕事かわからず、何をしたら良いかもわからず、ただなんとなくできそうだからと飛び込んだ私から見た、Web制作の世界を初心者の方に向けて紹介します。
Contents
Web制作ってそもそもどんな仕事？
Web制作と一言に言って、そもそも何をする仕事なんでしょうか？
一般的にWeb制作と呼ばれるものは、「Webサイトを作ること」となります。今見ているこのサイトもそうですね。
Webサイトを作るのは、個人サイトだったり、企業のサイトだったり、商品を紹介するWebページだったりと様々ですが、総称してWeb制作といいます。
コードを書いて、サイトを作ることを当サイトではWeb制作と定義しています。Webデザインを元にWebサイトをコードで表現、サイトとして使えるようにします。
そうして、Webサイトとして使えるコードをクライアントに納品することで、お金をいただけます。
コーダー、コーディングなどと呼ばれます。
その中で、どんなスキルが必要なのか、どんな働き方ができるのかを実体験を交えて紹介します。
Webサイト制作の流れ（デザイン→コーディング→公開）
Webサイトを作るには、大まかな流れとして、
デザイナーの方がWebサイトのデザインを作り、コーダーの方がコードを書いてWebサイトとして見た目を作りつつ、機能させます。
Web制作はどこ？と思われるかもしれませんが、コードを書く人のことを一般的に指します。
当サイトで紹介している学習内容も、コードを書くことが中心です。ですが、デザインも含めてWeb制作と言ったり、定義が曖昧なところがあります。
Webサイトを実際につくる人、と覚えるといいでしょう！
プロジェクトが大きくなると、人が増える
Web制作の規模が大きくなると、人が増えます。
人が増えてくるとWeb制作をしている人が依頼主(クライアント)と直接やり取りをすることが少なくなってきます。
大きな流れとしてイメージして置くと良いですね。
クライアントとのやり取りをする時間、労力が減る代わりに、コーダー(デザイナー)としての専門性を強く求められます。
デザイナーの方がディレクターを兼任する場合もありますが、基本的にはコーダーはデザインがないと動くことができません。
Web制作にはHTML,CSSを理解するスキルが必要
Web制作をするにあたり、HTML、CSSの理解は必須です。思うように扱ってWebサイトを作ることができるようになる必要があります。
他にも、javascriptの知識、WordPressサイトを作る知識などがあると、制作の幅が広がります。基礎的なjavascriptの知識は必須と言えるでしょう。
現在はノーコードツールと呼ばれる、HTML,CSSを直接書かなくてもサイトを作ることができるサービスがいくつもあります。そういったツールを使いこなすことでWeb制作を行うことができます。
ですが、ノーコードツールだとできることの幅が狭まってしまうため、基礎であるHTML,CSSの知識があると、トラブルに強く、カスタマイズもできるツヨツヨWeb制作者になれます！
Webサイトを作るのは楽しいけれど、コードを書くのがどうしても苦手…、という方はデザインや、ノーコードツールの利用も検討するといいでしょう！
時間、場所に縛られない働き方ができる
Web制作は、基本パソコンがあれば完結します。
ですので、ネットワークの環境とパソコンが使えれば事実上どこでもできることになります。
時間、場所を選ばず、相手との距離を選ばない働き方ができるので、非常に自由に活動することができます。
日中じゃないとだめな仕事、現場に行かなければいけない仕事も多々ありますが、本業が終わった後に自分のペースで行う、という仕事の進め方ができます。
実際、私の場合ですが、旅行中に修正依頼が来たときに道の駅で携帯のデザリングで修正、報告したことがあります。
これは極端な例だと思いますが、こんな事もできますよという一例です。
Web制作を始める前に知っておきたいこと
Web制作を始める前に、ちょっとした違いや、ゴールのことを考えておくと迷ったり、勉強代を無駄にすることなく進めることができます！
特にスクールに申し込んだ後「なんか違う」となると、なかなか辛いです💦Web制作関連のスクールは高額なものが多いですから。
少なくとも、Webデザインとコーディングの違い、独学とスクール、どっちが自分に合ってるかな？勉強した後、副業を続けるか、転職を目指すかの3点を知って、少しだけ時間を取って考えてみてください。
「Webデザイン」と「コーディング」の2つがある
Web制作では、デザインを作った後(Webデザイン)、コーディングをしてWebサイトを実際に機能させ、Web上にアップします。
デザインは設計図のようなものですね。
一言にWeb制作、HPを作る仕事というと、ごっちゃになってしまうかもしれません。
依頼をする方からしたら同じかもしれませんが、どちらも奥が深い世界です！それぞれの違いを簡単に出してみます。
| Webデザイン | コーディング |
|---|---|
| ・サイト全体をデザインする | ・コードを書く |
| ・クライアントの意見を組み込み、世界観を作る | ・デザイナーの方が作ったデザインどおりに仕上げる |
| ・ユーザーのことを考え、機能的なデザインを考える | ・Webサイトとしての機能をもたせる |
| ・機能や動きは提案ベース | ・機能や動きを実際にコードで表現する |
どちらがすごい、といったことはなくどちらも非常にたくさんの学習を必要とする特殊なスキルです。
ポップやチラシを作るのが好き、何かを表現するのが好きといった方はデザイン。
AをしたらBが動く、というプログラム的なモノが好きな方はコーディングに向いていると思います。
「コーディング」には「フロントエンド」「バックエンド」の2種類ある
Webデザインとコーディングは別物というはわかった。じゃあ、プログラミングとコーディングは一緒なの？と思いませんか？
同じコードを書くことには変わりないのですが、コードを書く人の中にも「フロントエンド」「バックエンド」と呼ばれる人で分かれます。
当記事で紹介しているコーディングは「フロントエンド」を指しています。
じゃあ、何が違うの？という話ですが、「フロントエンド」はユーザーから見える範囲、触れるの部分をコードで表現します。
「バックエンド」は内部的な部分、情報の処理やプログラムの処理を行う部分をコーディングします。
2つの違いは扱う言語の違いになります。
フロントエンドは主にHTML,CSSを扱い、バックエンドはRuby、Python、PHPなどの言語を扱います。
バックエンドの方が難度の高い言語やコードに触れることが多い分、得られる報酬も高くなる傾向にあります。
独学とスクール、初心者におすすめなのはスクール
0からのスタート、何をしたらいいかわからないな、という方はスクールの受講をおすすめします。
しかしスクールは高い、、、Web制作のスクールは最低でも10万~の世界です。
独学でも、本や動画教材など、世の中にはたくさんの優れた教材があります。十分に力をつけることができます。
しかし、独学で進めようと思うと次に何をしたらいいかわからない、どこまで学習したらいいかわからない、といった問題が出てきます。
独学で成果を出されている方も多数いますが、スクールを受講することをおすすめします。
私は、スクールを受講することで、次に何をしたらいいのか迷う時間。どこまでやったらいいのか悩む時間が減ったので良かったと感じています。
副業と転職、どちらを目指すかを決めよう
Web制作は副業、転職、どちらも需要のある仕事です。
働く時間や場所も自由に選べるため、副業として始めるにも最適な仕事の1つだと思っています。
また、転職のためのスキルとしても、非常に優秀なスキルです。
ただ、副業のためとなると、少々浅く、コードのこと、ドメイン、サーバーのこと、デザインのこと…、広く学ぶ必要があったり、転職のためだと1つの分野を深く学ぶ必要があったりとそれぞれ、少々学習内容が変わってきます。
副業通じて転職をすると決めている場合は、それに沿った学習方法を考える必要がありますね！
学習の前に準備しておくべきもの
学習の前にどうしても必要なものはあります。細かいツールや参考書は後から買えばいいのですが、パソコンはどうしても必要になります。
できればMacを用意できるといいです。Web制作をする上で、iPhoneやsafariというブラウザの対応は必須になりますが、safariがwindowsパソコンだと表示できないためです。
私も学習途中でそれに気づき、なんとかMacBookを購入しました。スペックはM2以上のメモリを搭載した新品のものを購入したら間違いないです。
私はwindowsパソコンからMacBookAir M2を買い替えて使用しています。
Macの操作に慣れたり、パソコンを変えたことによって学習途中のコードが消えてしまって何十時間分ものデータが消えることがあり、大変でした。
できるのであれば、最初からMacを用意しておくといいでしょう。
ただ、Windowsパソコンでも十分に活動できるので、無理に用意する必要はないですので、安心してください！
何から学べばいい？初心者におすすめの学習ステップ
Web制作では学ぶことがたくさんあります。その中で、初心者におすすめのステップは以下の通りです。
- まずは自分に合っているかを確かめる
- HTML,CSSの学習をやってみる
- 終わるまで続けられたら、javascriptを学習
Progateかドットインストールを無料プランで試して見てください。
やっていてそれほど嫌じゃないな、と感じたら有料プランを試してみて、最後までやってみるといいでしょう。
おすすめはドットインストールです。
その際はHTML,CSSを中心に始めるといいです。javascriptは後で考えましょう。
上記3つの言語に触れてから、WordPressの勉強をする、といった流れがいいですね。
無料プランを試して、どうにも合わないなと思ったら方向転換を考えましょう。合わないことを続けても辛いだけですから。
HTMLとCSSから始めよう（理由と順番）
HTMLとCSSはWeb制作では必須の知識になります。基本的なWebの仕組みを知ることもできるのでこの言語から触れていくのがいいでしょう。
多くのスクール、教材でもHTML、CSSから触れてスタートしていきます。私も毎日学習しているし、毎日触れています。
Webサイトの見た目に関わる言語ですので、サイトを作るにしても、アプリを作るにしてもHTML,CSSがないと作ることができません。
まず第一に目指すのは、HTML,CSSを使ってWebサイトを作り上げることになります。
そのために、コードを書いたらどのように変化することがあるのか、どんな事ができるのかを知るための学習から始めていきます。
HTML,CSSは書いたらそのまま反応があるといったコードのため、比較的わかりやすい言語です。
JavaScriptはHTM,CSSの後
javascritpを使うのはWebサイトに動きを作ることが主とした目的になります。
ボタンを押したら反応する。スクロールしたらサイト上で動きがある。サイト上でタイマーによるカウントダウンを行う。
などなど、プログラミング的な処理をするコードを書く必要が出くるため、HTML,CSSよりも難しいです。
まずはHTML,CSSでWebサイトを作ることができてから考えていきましょう！
javascriptは様々なプログラミングの基礎となる言語です。将来もっとプログラミングを学びたい、転職をしたい、収入を得たいと考えている方は重点的に学ぶといいとおもいます。
WordPressは学ぶべき
言語ではありませんが、Web制作を扱う上で外せないのは「WordPress」と呼ばれるCMS(コンテンツマネージメントシステム)の知識です。
HTML,CSS、javascriptの知識でWebサイトを作ることはできます。ですが、WordPressは世の中のWebサイトの40%近く、日本全体では80％以上のシェアを誇り、私が今まで受けた依頼もほとんどがWordPressでした。
一度、中国の方と仕事をしましたが、そちらもWordPressを利用していました。
Web制作で収益を得たいと考えた場合、HTML,CSSだけでは少しできる範囲が狭まってしまいます。
WordPressのサイト構築、カスタマイズは確実に需要のあるスキルです。スキルとして身につけることができると間違いなく収入源が増えます。
言語を学ぶ難しさとはまた違った学習内容になりますが、WordPressまで学習することをおすすめします。
そして、WordPressを構築、カスタマイズすることができたら一通りの事はできるはずなので、学習に集中する期間は一旦終わっていい頃合いになります。
おすすめの学習サイト・教材
Web制作を進めるうえで、おすすめの学習サイトはProgate、ドットインストールのどちらかになります。少々好みによるかもしれませんが、私としてはドットインストールの受講をおすすめします。
0から学ぶうえでProgateは非常に入りやすく、ゲーム間隔でプログラミングを学ぶことができます。専用アプリの操作感も気持ちよく、サクサク進めることができます。
ドットインストールはすべての教材が3分以内にまとまった動画で要点を一つ一つ丁寧に解説しています。
スキマ時間でも行いやすく、こちらもサクサク進めることができました。
意味をちゃんと解説しながら進めてくれるので、あとから困ることが少ないと思います。
初心者がつまずきやすいポイントと対処法
Web制作を進めるにあたり、どうしてもモチベーションが下がったり、躓いてしまうポイントがあります。
良いことばかり並べてきましたが、やっぱり学習は長期間になりますし、日々時間を取って頑張っていても家族に理解されなかったり、なかなか稼げないと焦ってしまうかもしれません。
私が学習を続ける中でモチベーションを保てたコツ、ポイントをご紹介します。
モチベーションを保つコツは、時間がかかるものと意識すること
モチベーションが下がるのは、どうしても他の優秀な人と比べたり、時間がかかりすぎてしまうこと、中々できない自分にがっかりしてしまうことが多いです。
というのも、私がそうなのですが…。
私は最初から1年は勉強期間と割り切って活動を始めました。スクールの期限も1年だったため、期限までにできなかったら諦めよう。とりあえず1年頑張ってみよう。という気持ちで始めました。
SNSなどでは目立つ話が多いですよね。3ヶ月で月収何十万、みたいな。じゃあ私も3ヶ月頑張ればできるかな？なんて考えて最初は打ちのめされました。1年頑張るって言ったものの、3ヶ月も頑張れば多少はなんかできるだろうと甘く考えていました…。
見事にできなかったときはちょっと落ち込みましたが、そこからマイペースに進めるようにしました。
仲間を見つける・コミュニティの活用
職場の周り、友人知人。意外と副業をしている、Web制作をしている、といった方を見かけたことがありません。
おそらく、始めようとしているあなたも一人で決心しているのではないでしょうか。
私自身、人と交流するのが苦手なタイプのため一人で完結するように頑張っていました。同じ職種を目指す人とつるんでもライバルになるだけじゃない？なんて考えていました。
ただ、一人で続ける学習は中々続きません。応援してくれる環境、人物がいて、自分も1年以上やる気が続いて…、という状況は非常に珍しいでしょう。
私は半年ほど一人で学習を続けていましたが、それでもSNS上でほそぼそと同じ課題をこなしている人をフォローしたり、情報を見たりしていました。自分と同じ苦労をしている人がいるというのは想像以上に励みになります。
ですので、Web制作を始めて、しんどいな。誰かに教えてもらいたい、交流したいと思ったらコミュニティを探してみてください。
私がおすすめするスクールのデイトラでは独自のコミュニティがありますし、ドットインストールにもあります。
他にも、スクール別にあったり、オンラインサロンでのコミュニティがあったりと、意外とあるものです。
まとめ｜はじめの一歩を踏み出すあなたへ
Web制作始めの一歩と題して、私が始める前に知りたかったことをまとめてきました。
- Web制作とは、Webサイトを作るお仕事
- Web制作の流れは、デザインをいただいて、コーディングをする。
- 一般的にWeb制作はコーディングのことを指す。
- まずはHTML,CSSを勉強する。
- 独学か、スクールかでいうと、スクールをおすすめする。
- できればMacを用意する
何から調べて良いのかわかなかったり、そもそも何がわからないのかがわかっていない状況がほとんどだと思います。
私はWeb制作をやってるコミュニティに入り、そこでいろいろな言葉や意味を教わりました。何を勉強したら良いかを学びました。
ですが、最初からそういったコミュニティに入るのは難しいと思います。入っても、中々恥ずかしかったり言いづらかったりして、質問することも難しいと思います。
当記事が少しでもWeb制作を始めるイメージになれば幸いです。最後まで御覧いただきありがとうございます！
