Web制作

Web制作とは?仕事内容から稼げる年収まで分かりやすく解説【初心者向け】

Web制作に興味がある方へ

こんにちは、あきはる(@akiharu_0309)です。

悩む人
Web制作ってなに?Web制作の仕事内容や、稼げる年収など教えて!

こんなお悩みを解決します。

『Web制作』という言葉を知っていても、「Web制作ってなんなの?」という状態の人はかなり多いと思います。

そこで今回は、まったくの初心者に向けてWeb制作の仕事内容や稼げる年収、学習方法など分かりやすく解説します。

本記事の内容

  • Web制作とは?
  • Web制作の仕事内容
  • Web制作者の働き方
  • Web制作の学習方法

この記事を書いている私の実績は下記です。

本記事の信憑性

ココナラ あきはる

  • Web制作歴1年以上
  • 50件以上の案件対応実績
  • 未経験からフリーランス独立

今回の記事を読んでいただくことで、Web制作の仕事内容や働き方、学習方法がわかります。

ちなみに、Twitterでも発信しています。

Twitter→あきはる(5,000名超え)

それでは、始めていきます。

Web制作とは?【結論:Webサイトを作ること】

Web制作とは?【結論:Webサイトを作ること】

Web制作とは、ひとことで言うと『Webサイトを作ること』です。

『Webサイト』と言っても、たくさん種類があります。

例えば、以下のことを指します。

Webサイトの例

  • コーポレートサイト
  • ランディングページ
  • ECサイト
  • リクルートサイト

現時点でよくわからなければ、『Webサイト = ホームページ』と思っておけばOK。

つまり、Web制作とはホームページの新規作成や、リニューアル、内容の編集や追加を行う仕事のことをいいます。

次は、Web制作の仕事の役割を解説しますね。
あきはる

Web制作の仕事内容【役割は大きく3つ】

Web制作の仕事内容【役割は大きく3つ】

Web制作の仕事の役割は、大きく分けて3つあります。

Web制作の仕事の役割3つ

  1. Webデザイン
  2. コーディング
  3. WordPress構築

補足として、今回は一般的な企業のホームページを作ることを想定してます。

まずは基本として、この3つを押さえておけばOK。
あきはる

こちら順番に解説していきます。

①Webデザイン

①Webデザイン

まず、1つ目は『Webデザイン』です。

Webデザイナーがお客さんにヒアリングを行い、そのヒアリング内容をもとに企画し『Webサイトのデザイン』を行います。

デザイナーといえば、デザインだけをしてるイメージかもしれませんが、お客さんへのヒアリング、Webサイトの構成や設計なども企画したりと仕事の幅は実は広い、、。

ですが、最初の認識は『デザイナー = デザインをしてる』でOKですよ。
あきはる

Webデザインで主に使われるツールは以下です。

Webデザインで主に使われるソフト

  • Figma(フィグマ)
  • Adobe XD(エックスディー)
  • Adobe Photoshop(フォトショップ)
  • Adobe Illustrator(イラストレーター)

Webデザインのメインは『Figma』『Adobe XD』が使われます。

また、部分的な画像やイラストのデザインで『Photoshop』『Illustrator』が使われる認識で良いかと思います。

とはいえ、デザイナーによってどのツールを使うのかは異なります。

以上が、Webデザインに関するざっくりとした解説です。

②コーディング

②コーディング

Web制作の役割の2つ目は、『コーディング』です。

コーディングとは、Webデザインのデータをもとにプログラミングコードを書いて、Webページ上にデザインを表示させることをいいます。

コーディングを行う人のことを、『コーダー』や『Webエンジニア』、『フロントエンドエンジニア』と呼んだりします。

Webページのコーディングで使用されるプログラミング言語は以下です。

プログラミング言語

  • HTML:Webページにテキストや画像を記述する言語
  • CSS:HTMLで記述されたテキストや画像に装飾を加える言語
  • JavaScript:HTML/CSSではできない、Webページの対象物に『動き』を与える言語
ざっくりと、上記の認識でOKです。
あきはる

補足として、正確には『HTML』と『CSS』はマークアップ言語といいます。

まとめると、『コーディング』により、WebデザインをWebページに表示させるという感じです。

③WordPress構築

③WordPress構築

Web制作の役割の3つ目は、『WordPress構築』です。

WordPressとは?・・・簡単に言うと『ブログ機能を作るシステム』です。

WordPressは『CMS(コンテンツマネジメントシステム)』というもので、構築すると、ブログ記事やニュースなどのコンテンツをマネジメントできるようになります。

WordPress構築には、『PHP』というプログラミング言語を使います。
あきはる

つまり、コーダーによって、Webページ上に表示されたサイトにPHPを利用してWordPressの構築を行い、様々な機能を加えていく作業です。

WordPressの構築を行ったり、Webサイトの裏で動くシステムを構築する人を『バックエンドエンジニア』や『サーバーサイドエンジニア』と呼んだりもします。

以上の3つ、『Webデザイン』『コーディング』『WordPress構築』によって、ホームページが作られるというわけです。

とはいえ、Web制作は幅広い

とはいえ、Web制作は幅が広いので、仕事の範囲や使用する言語も様々で、各会社によっても捉え方は異なります。

デザイナーやコーダーがWordPressの構築まで行うことも多々あります。
あきはる

ですので、取り急ぎこの記事では3つの役割でWeb制作ができるとご理解ください。

補足として、実はWordPress作成は、プログラミングをしなくてもできます。以下の記事では簡単にWordPressサイトを作る方法を解説してます。

ノーコードでのWeb制作も可能【NoCode】

ノーコードでのWeb制作も可能【NoCode】

Web制作の中でも、ノーコード(NoCode)と言われるツールを利用して、プログラミングコードを書かなくてもWebサイトを作ることもできます。

ノーコードでWebサイトを作るイメージは、お絵描きソフトやパワーポイントで図形や線をいじって資料を作ったりするのと似ている感じですかね、、。

ノーコードツールの例は以下です。

【NoCode】ノーコードツールの例

  • ペライチ:最も簡単にサイトが作れるノーコード
  • Wix:自由度が高くおしゃれなサイトが作れる
  • Webflow:かなりの人気を誇るノーコード
  • STUDIO:操作がしやすくおしゃれなサイトが作れる
  • BASE:ネットショップが簡単に作れる

ノーコードだとWebサイト作成のコストが低いので、低価格で作りたい事業者からの需要が増えてきています。

ノーコードはかなり主流になりつつありますよね。
あきはる

最初は簡単なペライチからやってみて、慣れてきたらSTUDIOなど、他のノーコードをやってみると良いかと思います。

あと、BASEなどのECショップ作成も需要はありますね。

ペライチの作成方法や稼ぎ方は、以下の記事でも解説しています。

Web制作者の働き方【年収の具体例あり】

Web制作者の働き方【年収の具体例あり】

次に、Web制作を仕事にする場合の『働き方』について解説します。

Web制作での働き方は、以下の2パターンです。

Web制作者の働き方2パターン

  1. Web制作会社に就職・転職
  2. フリーランスとして独立

稼げる年収と絡めて、簡単に解説します。

パターン①:Web制作会社に就職・転職【年収:約450万円】

Web制作を専門とする、Web制作会社が世の中にはたくさんあります。

シンプルに、レバテックキャリアなどの転職エージェントにから、Web制作会社への就職を目指すと良いかと思います。

また、Web制作会社に就職した際の、平均的な年収は約450万円ほどと言われてます。

年収に関して詳しくは、以下の記事にて解説済みです。

パターン②:フリーランスとして独立【年収:自分次第】

Web制作フリーランスとして自力で稼ぐことも可能です。

フリーランスの年収は自分次第です。
あきはる

年収で1,000万円を超える凄腕から、全く稼げずに再就職してしまう人も多くいる業界です。

ぶっちゃけ、フリーランスとしてやっていく上、最も苦労するのが『案件獲得』です、、。

案件獲得の方法については、以下の記事で詳しく解説しています。

Web制作のスキルを身につける方法

Web制作のスキルを身につける方法

最後に、『Web制作のスキルを身につける方法』をご紹介します。

Web制作スキルを身につける方法は以下です。

Web制作スキルを身につける方法2つ

  1. 教材を利用して独学
  2. Web制作のスクール

簡単に解説します。

その①:教材を利用して独学

Web制作はそこまで難しいスキルではないので、教材を利用し独学でもOKです。

ドットインストール』や『Progate』を利用して、安価に学習することもできます。

また、 ノーコードを利用したりと、早めの収益化に特化するようであれば以下の学習ロードマップを参考にしてみてください。

その②:Web制作のスクール

独学が難しい方は、Web制作のスクールにいくのもありです。

以下が、Web制作に特化しているおすすめのスクールです。

Web制作のおすすめスクール

また、フリーランスエンジニアを目指すのであれば、『侍エンジニア塾|無料体験あり』で無料体験を受けてみてください。

以下の記事も参考にどうぞ。

まとめ:やりたいことからやってみよう!

まとめ:やりたいことからやってみよう!

今回は『Web制作の仕事内容や稼ぎ方』を中心に解説しました。

最初はよくわからないかもしれませんが、自分がやりたいことからやってみると良いです。

ぜひ、頑張ってみてください。

以下の記事も参考になると思います。

関連記事:こちらの記事も読まれています。

Twitterでも発信をしているので、ぜひチェックしてください。

Twitterはこちら→あきはる

最後のまで読んでいただき、ありがとうございました。

良ければ、シェアしてくれると嬉しいです!!

  • この記事を書いた人

あきはる

『完全未経験から月20万円稼げるフリーランスを増やす!』をテーマに発信しています。大学卒業→営業職→未経験からWebフリーランス→Twitterフォロワー7,000人以上|ブログ月間1.2万PV。『フリーランス教室』の編集長です。

-Web制作