フローティングバナー
web制作 初心者

【初心者必見】Web制作の学習方法と案件獲得までの流れを徹底解説

この記事の監修者
5789
橋本 琢王
CIRANUI株式会社代表取締役 2015年にエンジニアとしてのキャリアをスタートし、制作会社のWEBディレクター、ヘルスケアスタートアップのWEBエンジニア、事業会社のプロジェクトマネージャー・プロダクトマネージャーなど様々なプロジェクトに参画。 プロジェクトマネージャー、WEBディレクター、WEBエンジニアとしてのキャリアを築く。 プロジェクトに参画しながら、2016年にフリーランスチーム「FIREWORKS」を立ち上げ、フリーランスで活躍するエンジニアやデザイナーと共に、WEBブランディング、WEB開発を行う。 2021年に個人事業主から法人化をしてCIRANUI株式会社代表取締役に就任。

近年、Webに関する副業が注目を集めています。

スマホやパソコンを普段から使い慣れている人であれば、パソコン1台でどこでも仕事ができて、本業との両立がしやすいというのも理由の1つでしょう。

Web制作に興味があるけど、「どんな風に学習を進めたらいいのかな?」「実際に案件を獲得するにはどんな流れで進めたらいいの?」など、最初は分からないことが多いのではないでしょうか。

ひと口にWeb制作といっても、Webの世界は幅広く、仕事としてWeb制作をおこなうとなると様々な職種の人と一緒に1つのサイトを作り上げていくことが一般的です。

ここでは、以下の点について詳しく解説していきます。

  • Web制作初心者が身につけるべき6つの知識とスキル
  • Web制作初心者におすすめの独学方法
  • Web制作初心者が独学中に意識するべきポイント
  • Web制作初心者が案件を獲得するまでの流れ

それでは、順番にみていきましょう。

Web制作初心者が身につけるべき6つの知識とスキル

web制作 初心者

Web制作を学ぶ上で、最初に身につけるべき知識とスキルについては、以下の6つが挙げられます。

  • Webサイトの仕組み
  • HTML・CSS
  • JaveScript
  • Webデザイン
  • WordPress
  • SEO

1つ1つの用語について今は詳しく説明できなくても、どこかでこれらの用語を見たり聞いたりしたことがあるのではないでしょうか。

どれもWeb制作をする上では欠かせない知識とスキルになります。

裏を返せば、これらの基礎的な知識とスキルが抜けていると、致命的ともいえるでしょう。

まずは、1つ1つ丁寧に学習を進めていくことが重要です。

Webサイトの仕組み

最初にWebサイトがどんな仕組みになっているのか、俯瞰できると良いでしょう。

仕組みが理解できると、普段何気なく見ているWebサイトがどんなシステムを使って動いているのか?自分が今学んでいるのはWebサイト上のどこの部分なのか?習得すると何ができるのか?などのことをイメージしやすくなります。

たとえ100%理解できなくても全体図を把握しておけば学習に支障はありませんし、モチベーション維持にも繋がるでしょう。

以下、Webサイトの仕組みについて初学者にも分かりやすく解説したページを載せておきますので、参考にしてください。

参考:国民のためのサイバーセキュリティサイト (soumu.go.jp)

HTML・CSS

HTMLとCSSについても簡単に触れておきましょう。

HTMLとは「Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)」の略で、Webページを作成するために作られた言語です。

CSSは「Cascading Style Sheets(カスケーディング・スタイル・シート)」の略で、Webサイトのレイアウトやデザインを整えるための言語です。

Web制作では、このHTMLとCSSを組み合わせて使用するため、どちらの言語も必ず習得しなければなりません。

JaveScript

JaveScriptはWebサイトに動きを付けたり、ボタンの動作を制御したり、ポップアップウィンドウの表示処理をしたり、動的なコンテンツを作成するために欠かせないプログラミング言語の1つです。

とても人気のあるプログラミング言語で、普段私たちがスマホやパソコンでみているWebサイトの多くが、このJaveScriptを使って作られています。

また、JaveScriptは汎用性が高く、HTMLやCSSと組み合わせて使用することでブラウザ上でアニメーションなどの動きもつけられます。

Webデザイン

Webデザインとは、スマホ・パソコン・タブレットなどに表示されるWebサイトのデザインのことを指します。

このWebデザインが良くないと見た目が悪いだけでなく、ユーザビリティの低下にも繋がり、優れたWebサイトを構築することができません。

Webデザインの力を伸ばすためには、実際のサイトを模写するのがおすすめです。

地道な作業かもしれませんが、Webデザインの力を磨いていくためにはこの方法が最も近道でしょう。

WordPress

WordPressとはホームページやブログなどのWebサイトのコンテンツを一元管理できるCMSの1つです。

ちなみに、CMSとは「Contents Management System(コンテンツ・マネジメント・システム)」の略で、簡単に言えばWebサイト作成・運営を簡略化するためのツールのこと。

Webサイトのうち約40%がWordPressで作られているとも言われ、近年多くの企業や個人サイトでも導入されています。

目標として、WordPressで独自のテーマを作れるレベルまで到達できることが理想です。

PHPを習得できればWordPressを使いこなせる

先ほど触れたWordPressは、実はPHPというプログラミング言語で作られています。

PHPを習得できればWebサイト作成の自由度が増し、ECサイトや予約・お問い合わせフォームの実装なども可能となります。

以下の記事では、PHPについてより詳しくご紹介しています。

今後、WordPressやPHOに関わっていきたいのであれば必見の内容ですので、ぜひ参考にしてください。

関連記事

初心者でも学びやすく、人気が高いプログラミング言語の一つである「PHP」。 しかし、「どうしてPHPが人気なのか分からない」と考えているプログラミング未経験者も多いのではないでしょうか? そこで本記事では「PHPはどんな言語なの[…]

関連記事:PHPはどんなプログラミング言語?未経験者おすすめの書籍と学習サイトを一挙公開

SEO

SEOとは、「Search Engine Optimization」の略で「検索エンジンの最適化」を意味しています。

SEOを意識してWebサイトを作成すれば、ユーザーが求める真に有益なコンテンツの提供をしたり、検索エンジンからの流入数アップが狙えたりします。

たとえWeb制作者であっても、クライアントの依頼に貢献できるようSEOの知識は必要不可欠です。

また、SEOに関するアルゴリズムは日々変化しているため、書籍ではなくブログやSNSで最新情報を取得するようにしましょう。

初心者が知っておくべきWeb制作の流れ

web制作 流れ

一般的なWeb制作の流れについては以下の通り。

企画→サーバー契約→ドメイン取得→サイト設計→デザイン制作→実装→公開

まずは企画段階でWebサイトのコンセプトやデザインを練っていきます。

Webサイトを公開するためにはサーバー契約が必須ですし、ドメインも取得することでWebサイトの場所を指定しなければなりません。

その後、サイト設計をおこない、Webサイト訪問者の導線を意識しながらデザイン制作の作業を進めていきましょう。

きちんとWebサイトが機能する実装段階まで来たら、公開という流れになります。

Web制作初心者におすすめの独学方法

web制作 独学

Web制作に関する勉強方法は様々ありますが、最初のうちはあまりお金をかける必要はありません。

特に、Web制作初心者におすすめの独学方法として「学習サイトを利用する」、「書籍で学習」のいずれかの方法が挙げられます。

今はネット上に有益な情報が山ほどありますし、本屋さんに行けばWeb制作のコーナーもとても充実しています。

ですが、これだけ情報が溢れていると、どの学習サイトや書籍を選んで良いか分からないという人も多いでしょう。

そこで、次におすすめの学習サイトや書籍をご紹介したいと思います。

学習サイトを利用

まずは初心者でも取り組みやすい学習サイト、progateをご紹介します。

progateはブラウザ上で学習が進められるため、最初に動作環境を整えるなどの余計な手間が掛かりません。

もう1つの学習サイトは、ドットインストールです。

こちらの学習サイトは1レッスンあたり3分の動画で学習できるため、気軽にレッスンを始められます。

2023年6月11日現在、499 レッスンを 7,559 本の動画として公開しています。

書籍で学習

1冊目はこれだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本です。

2冊目は1冊ですべて身につくHTML & CSSとWebデザイン入門講座です。

どちらの書籍も、とても分かりやすく作られていておすすめです。

Web制作初心者が独学中に意識するべきポイント

web制作 初心者

Web制作初学者にとって、最初はいずれのパートもハードルが高く感じるかもしれませんが、そこは割り切って学習することが重要です。

頭で考えるよりも実際に手を動かしてみることで、仕組みが理解できるということもあります。

また、行き詰まったら人に聞いてみるという姿勢も大事でしょう。

Web制作の学習は独学でも進めることはできますが、自分で何日も解決法を模索していたことが、人に聞いたら数分で解決したというのもよくある話です。

できるだけ柔軟な姿勢で学習を進めていくことがポイントとなります。

最初はできなくて当たり前として自覚して取り組む

学習を始めた最初のころは思うようなペースで進められず、モチベーションが下がってしまうかもしれません。

ですが、最初はできないことが当たり前であるということをしっかりと認識しておいた方が良いでしょう。

失敗しても完璧に理解できなくても、今はそれが当たり前だと思って前に進むことが重要です。

3歩進んで2歩戻って、また3歩進んで2歩戻れば、1歩ずつ着実に進んでいますので自信を持ってください。

どうしてもモチベーションが上がらない時は、歯磨きのように行動を習慣化してしまうのも1つの手です。

毎日の通勤のための移動時間などを活用して、学習するための時間を確保しましょう。

完璧でなくても、それ以外のできた部分に注目して昨日より前進している自分を褒めて学習を継続していくことが大切です。

とにかく手を動かしてWebサイトを作成してみる

学習サイトや書籍の内容をどんなに読み込んで理解していたとしても、実際にWeb制作をしようとするとそこで手が止まってしまう、というのはよく聞く話です。

どんなに素晴らしい理論を学んでいたとしても、実践を通じてWebサイトを作成してみないことには自分の実力をはかることはできません。

そのためには、まずは手を動かしてWeb制作の作業に慣れることが重要です。

ひたすらWeb制作に関する情報収集をしていても、コードが書けるようになったり、Webサイトを作れるようになる訳ではありません。

ひたすら作業をおこなって、脳と身体に感覚を染み込ませていく必要があります。

最初の目標として、まずは自力でサイトを立ち上げられるようになりましょう。

わからないことは質問できる環境に身を置く

Web制作の学習は学習サイトや書籍があれば、ひとりで黙々と作業を続けることもできますが、学習の途中で行き詰まることが多々あります。

すぐに問題が解決すれば良いですが、何日かけて調べてもどうしても分からない箇所があったり、正確に辿りつくまでに長い時間を要することもあります。

あまりにもそのようなことが続くとモチベーションの低下にも繋がりますし、やっていて楽しくなくなってしまうかもしれません。

そこで、作業をしながら分からないことを質問できる人を見つけておくことが重要です。

もし周りにWeb制作経験者がいない場合は、SNSやネットで情報収集できる交流場所を作っておくのも方法の1つです。

自分ひとりで作業をしていると必ずつまずく瞬間が訪れます。

ぜひ、普段からすぐに質問できる環境に身を置くことを心掛けましょう。

Web制作初心者が案件を獲得するまでの流れ

web制作 初心者

最後に、Web制作初心者が案件を獲得するまでの流れについてご紹介します。

概要は以下の通り。

  1. 自力でWebサイトを作成できるレベルになる
  2. ポートフォリオを作成する
  3. クラウドソーシングで案件を獲得する

基本的には、この順番に沿っておこなえば案件の獲得に至るまで、迷うことは無いでしょう。

せっかくスキルを磨いても、そのスキルを発揮できる場所を見つけなければ宝の持ち腐れになってしまいます。

ここでは、Web制作初学者がスムーズに案件を獲得できるよう、それぞれの流れについて詳しく見ていきます。

自力でWebサイトを作成できるレベルになる

最低限求められるスキルとしては、これまでに紹介した内容を実践して自力でWebサイトを作成できるレベルになることを目指してください。

具体的には、WordPressで実際にサイトを立ち上げてみると良いでしょう。

学習した内容をアウトプットする手段としては、この方法はかなり効果的です。

WordPressを使ってサイトを仕上げることで、成果物として形になるという実感が得られますし、自分に対する自信も積みあがります。

一方で、ただ単に自力でWebサイトを作れれば良いという訳ではありません。

一度完成させたら、少しずつアップデートを重ねてWebサイトを洗練させていく必要があります。

ここでのポイントはただ単にサイトを立ち上げるだけでなく、誰に見られても恥ずかしくないようポートフォリオに記載できるレベルまで仕上げることです。

ポートフォリオを作成する

次に、ポートフォリオの作成について解説します。

ポートフォリオとは自分が積み上げてきたものや成果物をまとめて、スキルや実績を相手に提示するための履歴書のようなものです。

そのため、ポートフォリオでは自分がどのような人物でどんなことができるのかなど、プロフィールを充実させておくと良いでしょう。

ポートフォリオの作品を見れば、その人がどれくらいのレベルの案件をこなせるのか、情報を整理してまとめる力はどれくらいあるのか、デザインや色彩感覚はどの程度あるのか、など様々な部分が垣間見えます。

多くのクライアントがポートフォリオを見て、その人に仕事を依頼するかどうかを判断しますので、相手に見せることを想定してクオリティの高いポートフォリオを作成することを意識してください。

クラウドソーシングで案件を獲得する

自力でWebサイト作成できるレベルまで学習をおこない、ポートフォリオの作成が終わったら、いよいよ案件を獲得する段階となります。

Web制作初学者が案件を獲得する手段として、クラウドソーシングによる受注はかなりおすすめ

というのも、仕事として初心者でも受注できる案件が豊富に掲載されているからです。

以下、代表的なクラウドソーシングについて記載しておきます。

初心者でも学習すればWeb制作は可能

web制作 初心者

初学者でも、しっかりと基礎から学習すればWeb制作が可能であるというイメージが描けたのではないでしょうか。

最初は、初めて見る専門用語やWebの仕組みの理解に苦戦するかもしれません。

ですが、学習を進めていくうちに徐々にそれらの用語やWebの仕組みついても、スムーズに理解できるようになるでしょう。

まずは、色々と頭で考えるよりも実際に手を動かしてみてWeb制作の作業に慣れることが大切です。

時には挫折しそうになる時もあるかもしれませんが、身近な友人・知人、SNSでの交流をしながらモチベーションを維持していきましょう。

Web制作の学習は黙々と作業を続けることが多くなるため、ともすれば孤独になりがちです。

ぜひ、同じ志を持つ仲間と共に学習を続け、最初の案件獲得を目指しましょう!