Web制作

Web制作習得に必要な独学期間は?【Webデザイン・コーディングスキル】

「Web制作のスキルを独学で習得して稼げるようになるにはどれくらいかかる?」
「Web制作ができるようになるにはどんなことを学んだらいい?」

これからWeb制作について学ぶにあたって、「独学だとどのくらい時間がかかるか」「どのようなことを学ぶ必要があるか」など事前に詳しく知っておきたいですよね。

Web制作の仕事ができるようになるには、サイト設計の知識やコーディングスキルなど多くのことを学ぶ必要があります。

また、学び方は独学とプログラミングスクールの2種類あり、独学の場合だと早くて3ヶ月、遅くて半年〜1年かかると言われています。

挫折率の高いプログラミング学習を無事乗り越えるためには、流れを把握しておくことが重要であるため、今回は以下の内容について解説していきます。

  • Web制作を独学で習得するために必要な期間や学ぶべきこと
  • Web制作で稼ぐためのロードマップ
  • 独学で行き詰まった場合の対処法

Web制作について全く分からない方でも、本記事を読めばどのようなステップを踏んで学習を進め、仕事につなげていくのか、全体の流れがつかめるかと思います。

Web開発やプログラミングスクールを運営する弊社がWeb制作について詳しく解説しますので、ぜひ参考にしてみてください。

Web制作とは何か

Web制作とは、個人や法人のホームページやブログを作る仕事のことです。

Web制作の業務内容は企業や案件によって異なりますが、一般的には以下の流れで進めていきます。

Web制作の流れ
  1. コンサルティング:ページの内容やデザインについて綿密に計画を立てる
  2. 制作:実際にサイト制作を行う
  3. 運用:コンテンツの更新や保守を行う
  4. 評価:アクセス状況の解析などを行う

ホームページやブログは多くのユーザーが利用するため「分かりやすさ・使いやすさ・見やすさ」が重要となります。

「作り手が届けたいものはなにか」「伝わりやすくするためにはどのような設計やデザインにしたらよいか」などを考えて作るのがWeb制作の醍醐味です。

Web制作を独学で習得するために必要な期間

Web制作を独学で習得するためにかかる期間は、1日2時間学習の場合、3ヶ月程度が目安となります。

ただし、学習ペースや理解度は人それぞれであるため、遅い人だと半年〜1年かかることもあります。

「時間をかければ誰でもスキルを身につけられる」というのは間違いで、逆にモチベーションの低下などにより挫折する確率が高くなります。

よって、独学で進める場合は、以下のようなポイントで目標設定を行いましょう。

  • いつまでにWeb制作を行えるようになりたいか
  • どのレベルを目指すか
  • 一日に何時間勉強に費やせるか

「1年後までにスキルを習得できれば良い」というのであれば独学でも地道に行えば可能でしょう。

しかし、「半年以内にスキルを習得し仕事をこなせるようになりたい」というのであれば独学では難しいため、メンターをつけたり、プログラミングスクールを利用したりするのがおすすめです。

目指しているところが副業レベルなのか本業レベルなのかによっても勉強期間が変わるため、学習を始める前に目標をはっきりさせておきましょう。

独学でWeb制作を習得するために学ぶべきこと

独学でWeb制作を習得するために学ぶべきことは以下の6つです。

独学でWeb制作を習得するために学ぶべきこと
  1. Web サイトの構造
  2. HTML/CSS
  3. JavaScript/jQuery
  4. Web デザイン
  5. SEO
  6. WordPress

「ただプログラミングができれば良いんでしょ?」と思っていた人は情報不足であると言えるため、ここで学ぶべきことを把握しておきましょう。

Webサイトの構造

まずはWebサイトの構造を理解しましょう。

  • インターネットの仕組み
  • ページが表示される仕組み
  • 裏で行われている処理
  • サイトの構造

自分が作るものが、どのようにしてユーザーのもとへ届くのか、まずは仕組みを理解しておく必要があります。

Webサイトを構成する要素は以下の通りです。

Webサイトを構成する要素
  • サーバー
  • ドメイン
  • ファイル
  • ブラウザ

また、専門用語はエンジニア間で共通認識されるものであるため、全て覚える必要はありませんが全体的に目を通しておくと良いでしょう。

HTML/CSS

プログラミング言語としては、マークアップ言語のHTML・CSSがメインで使われます。

マークアップ言語とは?

Webサイトの見た目を作る言語のこと。

HTMLとCSSを使うと、以下のようなことが可能になります。

HTMLでできること
  • 文章の記述
  • 文章の一部を強調
  • 見出し設定
CSSでできること
  • 文字色の変更
  • 背景の変更
  • ホームページの横幅を広げる
  • アニメーションの作成

Webサイトを開いた際に目に入る文字などは全てHTMLとCSSによるものなので、Web制作を行うなら必須で覚えるべき言語です。

初心者の方は、オンライン教材として有名なドットインストールやProgateを使用すると感覚がつかめるでしょう。

JavaScript/jQuery

HTMLとCSSが理解できたらJavaScriptやjQueryについても学びましょう。

JavaScriptはページに動きをつける言語で、jQueryはそれをさらに簡単に実施するためのJavaScriptのライブラリです。

JavaScriptやjQueryでできること
  • ボタンに動きをつける
  • メニューの作成
  • チャットボットの設置
  • スプレッドシートとの連携
  • ポップアップウィンドウの表示
  • フォーム制御
  • Ajax・非同期通信
  • シミュレーションの計算

HTMLやCSSでは文字の表示や装飾しかできませんが、JavaScriptやjQueryを使用することで動きのあるページ作成が可能となります。

例えば、送信ボタンを押した際に確認メッセージが表示されたり、入力欄がすべて埋まっているかチェックしたりなど、サイトらしい機能がつけられます。

ただ閲覧するだけのページというのはあまり見たことがないと思いますので、本格的にWebサイト制作を行うとなると、JavaScriptやjQueryで必要な機能を付与していくことが必要です。

Webデザイン

プログラミング言語の学習が進んだら、Webデザインについても学んでいくと良いでしょう。

会社やブランドのイメージにあったWebサイトを作るには、Webデザインは必須になってきます。

Webデザインのスキルが身につくと以下のようなことが可能です。

Webデザインでできること
  • ホームページのレイアウト決め
  • ホームページの色の選定
  • 写真の加工
  • 文字のデザイン

Web制作は、作業範囲によって担当する職種が異なります。

本格的なWebデザインはWebデザイナーが担当するケースが多いですが、Webデザインのスキルもあると仕事の範囲が広がるため、重宝される人材になれるでしょう。

SEO

Web制作を行う上で重要なのがSEOの知識です。

SEOとは?

SEOとはSearch Engine Optimizationの略で、日本語で「検索エンジン最適化」を意味します。一般的には、GoogleなどでWebサイトを上位表示させる施策のことをSEOと呼びます。

どんなに良いWebサイトを作っても、検索エンジンで上位表示されなければユーザーがページを見ることは少ないですし、反対にWebサイトの質が低ければ、そもそも見ようとも思われません。

そのため、検索エンジンとユーザーに評価されるように、SEO対策を行いつつコンテンツを充実させ、Webサイトの質を上げることが重要です。

具体的なSEO対策
  • 分かりやすいサイト設計にする
  • キーワード選定を行う
  • 適正なタイトル設定
  • ディスクリプションの記載
  • ページ数を増やす
  • ホームページの表示速度を早くする
  • 更新頻度を増やす
  • 質の高いコンテンツづくり

一つひとつの対策が内容の濃いものであるため詳しく学習する必要がありますが、端的に言うと「ユーザーが使いやすい・分かりやすい」と思うようなサイト設計にすることが重要です。

検索エンジンは、「多くの人に見られるサイト=価値のあるサイト」として認識するため、いかに悩みを解決できるWebサイトにできるかがポイントとなります。

コーディングスキルも大切ですが、書く前に内容が重要ということを忘れないようにしましょう。

WordPress

Web制作を行うならWordPressの学習も必ず行いましょう。

その理由は以下の通りです。

WordPressを学習すべき理由
  • 世界のWebサイトの4割以上がWordPressで作られている
  • 日本でも多くのサイトでWordPressが使用されている
WordPressとは?

サイト作成の知識がなくても、簡単にWebサイトやブログが作れる無料ツールのこと。

WordPressはCMS(コンテンツ・マネジメント・システム)の一種ですが、日本で使用されたCMSのうち約8割がWordPressとなります。

これからWeb制作について学んで仕事をしていこうというのに、WordPressの案件を逃していてはもったいないです。

少しでも案件をこなしてスキルアップを図るという点でもWordPressの知識は必要となるため、必ず学んでおきましょう。

Web制作で稼ぐためのロードマップ

ここでは、Web制作で稼ぐためのロードマップについて解説します。

Web制作で稼ぐためのロードマップ
  1. Web制作に必要な最低限の学習を行う
  2. オリジナルサイトを制作
  3. Web制作案件をこなす
  4. スキルを増やす
  5. Web開発案件も受注できるようにする

「学ぶべきことは分かったけど、手順が分からない」という人は、これから解説する流れに沿って進めると、効率よくスキルアップできます。

Web制作に必要な最低限の学習を行う

まずは、Web制作に必要な最低限の学習を行いましょう。

らんてくん
らんてくん

なぜ最低限の学習でいいの?

それは、オンライン教材や書籍を使った独学でWeb制作のスキルを完璧に習得するのは不可能だからです。

どんなに長く勉強しても実践的スキルや応用力は身につかないため、いち早く現場を経験することが重要です。

そのために、独学では最低限の学習ができていればOKです。

  • Webサイトの構造
  • HTML/CSS
  • JavaScript/jQuery
  • Webデザイン
  • SEO
  • WordPress

前項「独学でWeb 制作を習得するために学ぶべきこと」で解説した通り、まずは上記項目の基礎学習を進めましょう。

Web制作で案件を獲得するまでの独学ロードマップは以下の記事で詳しくまとめました。詳細を知りたい方は以下の記事からご覧ください。

Web制作ロードマップ
Web制作を独学で習得する為のロードマップ!フリーランスや副業で稼ぐ方法も紹介Web制作を学んで副業やフリーランスになりたい方も多いでしょう。Web制作から副業やフリーランスになるための勉強の手順をまとめました。ぜひこちらの記事を参考に学習をしてみてください。...

オリジナルサイトを制作

基礎学習を終えたら、これまで培ってきた知識やスキルを使って「オリジナルサイト」を作ってみましょう。

「いきなりオリジナルサイトを作るなんて無理だよ!」

このように思うかもしれませんが、実際にサイトづくりを行うことで、より理解が深まります。

初心者の方は、以下のような手順を踏むとスムーズに作ることができるでしょう。

オリジナルサイト制作の手順
  1. 無料のテンプレートをアレンジ
  2. 公開されているサイトの模写
  3. オリジナルサイトの制作

オリジナルで作ったサイトはポートフォリオにもなります。

ポートフォリオとは?

自分の作品をまとめたものであり、就活の際にアピールポイントとしても使えるもの。

ポートフォリオは、あなたのスキルを映し出したようなものなので、しっかり作り込むことが重要です。

とはいえ、最初から質の高いものを作れる人はいないため、徐々にアレンジを加え、最終的に思い通りのサイト制作ができるレベルになると良いでしょう。

Web制作案件をこなす

オリジナルサイトを作れるほどのスキルが身についたら、Web制作案件をこなしましょう。

ここから先は、「学習から仕事に移行するフェーズ」となります。

案件の獲得方法は以下の通りです。

案件の獲得方法
  • クラウドソーシングの利用
  • SNSの募集へ応募
  • 知人や友人の紹介

多くの方がクラウドソーシングを利用することになると思いますので、有名なクラウドワークスやランサーズに登録しておくと良いでしょう。

募集案件が多いため、とくに初心者の方におすすめです。

らんてくん
らんてくん

どれくらい案件をこなせばいいの?

Web制作案件をこなしていくうちに、「慣れ」というものを感じてきます。 

  • 自分のなかでサイト設計のパターンが確立してくる
  • どこに力を入れればよいか分かる
  • 同じように使い回せるパターンが身につく

上記のように、自分の引き出しが増えることで色々なジャンルに対応したWebサイト制作が可能となります。

扱えるジャンルが増えれば仕事の幅も広がるため、Web制作で稼ぎやすくなれるでしょう。

スキルを増やす

クラウドソーシングなどでWeb制作案件をこなすのに慣れてきた人は、スキルを増やすことに専念しましょう。

どのような仕事でも、稼げるようになるには「技術の習得→仕事→スキルアップ→さらに上の仕事」という流れをたどる必要があります。

スキルを増やすことで、同じようにWeb制作の仕事をしている周りの人よりも一歩リードすることが可能ですし、確実に仕事の幅が広がります。

らんてくん
らんてくん

どのようなスキルを増やすべきかな?

人によって異なりますが、CMSでWordPressしか使ったことがない人はShopifyやferret Oneなど他のCMSを扱ってみるのが良いでしょう。

また、Adobeソフトでクオリティの高い素材を作れるようになると、Webデザインのスキルが増えるので単価アップにも繋がりやすくなります。

ただし、やみくもにスキルを増やせばいいというわけではないため、以下の手順で進めましょう。

スキルを増やす手順
  1. どの案件を獲得したいか考える
  2. 案件に必要なスキルを増やす
  3. 新たに案件獲得を目指す

非効率な学習を避けるためには、目標設定が必要です。

使いもしないCMSのスキルを身につけても意味がないため、何のスキルが必要となるか考えてから学習しましょう。

Web開発のエンジニアへの転職も考える

Web制作を独学し、稼げるようになったとしても、収入の頭打ちはかなり早いです。

Web制作は3ヶ月ほどで仕事ができる一方で、誰でも3ヶ月である程度のことができるようになってしまいます。よって経験を積んでもなかなか単価が上がりづらいです

Web制作は参入障壁が低く人材があまっているため、単価も低いのが現状です。
そのため、Web制作だけでなくWeb開発も可能になるようスキルアップすべきと言えます。

具体的に必要となるスキルは以下の通りです。

Web開発に必要なスキル
  • 対人スキル
  • レスポンシブデザインの知識
  • テストやデバッグのスキル
  • バックエンドの基礎知識
  • HTTPのようなWeb技術の知識
  • データベースの知識
  • バックエンド開発のプログラミング言語(PHP、Java、Ruby、Python)
  • バックエンド開発のフレームワーク(Ruby on Rails、Laravel)

Web開発の方がWeb制作より学習することが多いです。一方で学習することが多いことが参入障壁になります。

Webエンジニアは供給が足りないので、どんどん単価が上がりやすいです。

将来的にも安定して稼ぎたい人や、手に職をつけて稼ぎたい人はWeb制作よりもWeb開発の方がおすすめです

Web制作とWeb開発の違いを知りたい方は、こちらにまとめてありますので参考にしてみてください。

Web制作とWeb開発どちらを選ぶべき?
【 Web開発会社が語る】Web制作かWeb開発どっちを選ぶべきか徹底解説Web制作とWeb開発って同じような仕事の仕方をします。ですので、Web制作とWeb開発の区別がついていない人も多いのではないかと思います。本記事ではWeb制作とWeb開発の違いを解説しつつ、どちらがおすすめなのかを年収、将来性、なりやすさなどを踏まえて解説していきます。...

独学で行き詰った場合の対処法

独学で行き詰まった際は、プログラミングスクールの利用がおすすめです。

らんてくん
らんてくん

他に対処法はないの?

他におすすめできる対処法はありません。

学生時代に塾に通っていた人も多いかと思いますが、自己学習に限界を感じたら先生や先輩に聞くのが一番早いですよね。

プログラミング学習も同様で、スクールを利用することで格段に成長でき、Web開発まで学ぶことで単価や将来性も大きく変わります。

  • 自分の実力がどの程度か分からない
  • 実践に踏み切れない
  • オリジナルサイトは作れるけど仕事の獲得ができない

このような方は、独学を続けることで返って挫折する可能性を高めてしまいます。

せっかく学んだ知識やスキルを無駄にしないために、プロのもとでさらなる成長を遂げることをおすすめします。

まとめ

今回の記事では、独学でWeb制作を習得するためにかかる期間や学習内容について解説しました。

今回の記事のまとめ
  • Web制作はホームページやブログを作る仕事だが、独学で1日2時間学習した場合、習得まで約3ヶ月かかる
  • 独学でWeb制作を習得するために学ぶべきこととして「Webサイトの構造理解・HTML/CSS/JavaScript/jQuery・Webデザイン・SEO・WordPress」が挙げられる
  • Web制作で稼ぐためには案件をこなす必要があるが、限界を感じたらプログラミングスクールを活用してWeb開発案件の獲得も目指すべきである

Web制作に必要なスキルは習得がそれほど難しくないため、独学で目指すことも可能です。
順調にいけば3ヶ月ほどで習得することができるでしょう。

しかし、参入障壁の低さから人材が余っているため、案件獲得の競争率も高くなっているのが現状です。

さらにステップアップしてWeb開発を行えるようになると、周りと差別化できWeb制作よりも稼げるようになるので上を目指したい人はWeb開発がおすすめです。

今回の記事を読んでみて、エンジニアに挑戦してみたいと思った方や、Web制作ではなくWeb開発に挑戦してみたいと思う方は、RUNTEQの無料なキャリア相談会にぜひお越し下さい。

この記事を読んだ方にオススメ