この記事を書いた人
当ブログでは「時間と場所の自由」をコンセプトに副業のすすめを発信しています。
Web制作に興味があるけど、
・どうやって始めたらいいのかわからない。
・Web制作の流れってどんな感じなの？
・初心者でもできるの？
全くの初心者からすると、何が何だかさっぱりわからないですよね。
この記事では、Web制作の流れを初心者向けに分かりやすく解説します。
僕自身、かつては全くの初心者からスタートしました。
初めてWeb制作を手がけた時、
何をどの順番で進めればいいのかわからず、挫折したこともありました。
まるでも大丈夫！
そんな僕でも、結果を出せたので。
初心者の方でも、基本的な流れを理解できれば、始めることができます。
Web制作に興味のある方は、ぜひ参考にしてみてください。
web制作の学習を始めたい方は、下記の記事をチェック！
≫≫【2023年版】web制作学習ロードマップ｜独学でいけるのか？
Web制作の流れ
①計画：ウェブサイトの目的と目標の設定
②設計：ウェブサイトの見た目の設計
③開発：設計通りにコーディングし、ウェブサイトを形成
④テスト：機能の動作を確認
⑤公開：オンライン上でウェブサイトを公開
という基本的なフェーズが存在します。
適切に手順を追うことで、効果的なウェブサイトを作成することが可能です。
このフレームワークは、世界のウェブ開発業界に広く採用されています。
①計画
ペルソナを特定したり、必要な機能のリストアップ、サイトマップの作成などを計画する
※ペルソナとは、製品やサービスを使う可能性のある顧客を表す、架空のキャラクターのことです。
②設計
・ワイヤーフレームの作成
・UI/UXの設計
・プロトタイプ
※ワイヤーフレームとは、ウェブサイトやアプリを作る際の簡易的な設計図です。
※UI＝（ユーザーインターフェース）、UX＝（ユーザーエクスペリエンス）と言います。
ウェブサイトやアプリを使いやすく、見やすくするためのこと。
UIは見た目を整え、UXは使い心地を良くすること。
※プロトタイプとは、新しい製品の試作品のことをいいます。
③開発
・フロントエンドとバックエンドの開発
・CMSの設定
・モバイル対応
※フロントエンドとは、ユーザーが直接触れる部分。
バックエンドとは、データの管理やサーバーとの通信など、ユーザーが直接見ることのない部分。
※CMSとは（コンテンツ・マネジメント・システム）の略で、ウェブサイトの内容を簡単に更新したり管理したりできるツールのことです。
④テスト
・デバッグ
・ブラウザの互換性テスト
・レスポンシブテスト
※デバッグとは、プログラムに存在するエラーや不具合を見つけ、修正する作業のことです。
※ブラウザの互換性テストとは、ブラウザ（Google ChromeやFirefoxなど）を使っても、正しく表示・動作するかを確認する作業のこと。
※レスポンシブテストとは、デバイス（パソコン、タブレット、スマートフォンなど）各画面サイズで適切に表示され、正しく動作するかを確認する作業のこと
⑤公開
・サーバーへのアップロード
・SEOの最適化
・パフォーマンスのチェック
まるweb制作は、一貫したプロセスに従うことが成功の鍵となります。
以上の各ステップを互いに連携させ、
効果的で魅力的なウェブサイトを作り上げます。
Web制作とは
Web制作は、一般的には企業、組織や個人向けにWebサイトを作成することを指します。
Web制作は企業のビジネスの一部として、
また個人の活動の一環として広く行われています。
理由として、
Webサイトを通じて自社の情報を発信し、顧客との関係を築くことができるからです。
デジタル時代においてWebサイトは
・企業のブランドや商品、
・サービスを世界中に展示できるプラットフォーム
また、個人や小規模ビジネスにとっても、
自身の才能やスキルを世界に発信する手段
としてWebサイトが利用されます。
さらに、オンラインで商品やサービスを提供することで、物理的な店舗を持つことなくビジネスを行うことも可能です。
Web制作で必要なスキル
Web制作で必要なスキルは、大きく分けて以下の3つです。
①デザインスキル
Webサイトの見た目のデザインを決めるスキルです。
ユーザーの第一印象を大きく左右するため、非常に重要。
デザインスキルには
・色彩感覚
・レイアウトセンス
・タイポグラフィ
の知識などが必要となります。
②コーディングスキル
Webサイトの機能を実現するスキルです。
・HTML＆CSS
・JavaScript
などのプログラミング言語を使って作られています。
③コンテンツ制作スキル
Webサイトに掲載するコンテンツを作成するスキルです。
コンテンツ制作スキルには
・テキスト
・画像
・動画
・音声
などが必要になります。
これらのスキルを身につけることができれば、
Webサイトを制作することができます。
それぞれのスキルについて、より具体的な内容は以下の通り。
・デザインスキル
・色彩感覚
・レイアウトセンス
・タイポグラフィの知識
・ユーザー心理の理解
・トレンドを把握する力
・コーディングスキル
→HTML＆CSS、JavaScript、PHP、MySQL
・サーバサイドの知識
・コンテンツ制作スキル
→文章を書く力、画像編集のスキル、動画編集のスキル、音声編集のスキル
・ターゲットユーザーの理解
・検索エンジン最適化（SEO）の知識
上記のように、web制作には様々なスキルが求められます。
ポイントは、完璧を目指さないこと！
まるある程度流れを掴めたら、どれかのスキルに特化していくのもありです。
webサイトの仕組みを理解する
webサイトの仕組みは
・HTTPプロトコル
・ウェブブラウザの動作
・サーバーとクライアントの関係
・ウェブテクノロジーの基本的な知識
上記を理解する必要があります。
インターネットは、私たちの日常生活の一部となっており、
webサイトはその中核をなしています。
しかし、webサイトがどのように機能するのかを理解している人は少ないでしょう。
web制作を行う上で、ウェブサイトの仕組みを理解することは、
効率的なコードを書き、問題解決能力を向上させるために重要です。
例えば、自身のウェブサイトを立ち上げる際には、
クライアント（ユーザーのウェブブラウザ）が自身のサーバーに接続し、
HTTPリクエストを通じて、ウェブページを要求するというプロセスを理解する必要があります。
これらを理解するには、図解など視覚的にインプットすることをおすすめします。
下記の書籍では、制作会社で実際に実務をこなしている社員の方が書かれています。
まるこの一冊で「web制作の仕組み」が網羅できますよ。
【独学】 Web制作を始めるためのポイント
web制作を始めるために
があります。
順番に解説します。
必要なもの
web制作を始めるにために「必要なもの」として
・パソコン（Windows、MacどちらでもOK）
・インターネット接続
・テキストエディタ（VS Code、Atom、Sublime Textなど）
・ブラウザ（Google Chrome、Firefox、Safariなど）
・デザインツール（Photoshop、Illustrator、Canvaなど）
・コンテンツ制作ツール（WordPress、Wixなど）
・書籍
・オンライン学習サービス（progate、ドットインストールなど）
・動画教材（YouTube、Udemyなど）
上記が、独学でWeb制作を始めるために必要なものです。
目標の設定
目標の設定がなぜ必要か、結論からいうと
・モチベーションの低下を防ぐ
・効率的に学習を進めることができる
・自身の進歩を評価しやすい
目標の設定は、Web制作に必要な知識やスキルを効率的に身につけるために重要です。
目標があれば、
やるべきことや進捗状況がわかりやすくなり、
無駄な時間や労力を省くことができ、
モチベーションの維持に繋がります。
まるやるべきことや必要なリソースが明確になり、効率的に学習を進めることができる。
目標設定により、自身の進歩を評価しやすくなり、学習の成功体験を重ねることが可能になります。
例えば、目標設定のやり方で
「SMARTの法則」という基本原則があります。
・S＝Specific（具体的）
・M＝Measurable（測定可能）
・A＝Agreed-upon（合意された）
・R＝Realistic（現実的）
・T＝Time-bound（期限を定めた）
があります。
この法則に当てはめ「目標設定」してみましょう。
具体的で達成可能な目標を設定し、効率性を向上させましょう。
独学でWeb制作を身につけて稼ぐまでにかかる期間
独学でWeb制作を身につけて稼ぐまでにかかる期間は、
目標や学習方法によって異なりますが、
平均的には3ヶ月から1年程度 と言われています。
僕は学習期間に1年ほど費やしました。
・自分がWeb制作で何を成し遂げたいのか
・どれくらいの時間を学習に割くのか
・どのような方法で学習するのか
などによって変わってきます。
例えば
・個人でブログやwebサイトを作成する場合
→3ヶ月ほど
・副業やフリーランスで稼ぎたい場合
→1年ほど
まるweb制作で「どんな目標をたてていくか」で、稼ぐまでにかかる期間が決まると考えておきましょう。
もちろん、集中的に学習できれば、もっと早くスキルアップすることも可能です。
副業・フリーランスで稼ぐには
Web制作で、副業・フリーランスになるには、
①ポートフォリオを作成する
②クラウドソーシングサイトを活用
③エンジニア向けの求人サイトを活用
④スクールに通う
必要なスキルを身につけ、案件獲得を目指しましょう。
ポートフォリオを作成する
ポートフォリオとは、自分が制作したWebサイトなどの作品をまとめたものです。
ポートフォリオの作成の目的は、
自分のデザインスキルや企画力などをアピールすること。
作成する際は、以下の5つのポイントを押さえましょう。
①自分のスキルや経験を明確に伝える
②ターゲットとするクライアントを明確にする
③作品のデザインやレイアウトにこだわる
④作品の説明を簡潔に書く
⑤作品のURLを記載する
ポートフォリオの作成は、自身のスキルと経験を証明し、
自分自身の視点やアプローチを示す上で重要なステップです。
✅具体的なプロジェクトの詳細
✅使用した技術
✅達成した成果
✅解決した課題
についての説明を含めることで、
クライアントに対し、自身の能力を明確に示すことができます。
クラウドソーシングサイトを活用
クラウドソーシングサイトとは、インターネット上で、「仕事を受ける」「仕事を発注」することができるサービスです。
自分のスキルや時間に合わせて仕事を選べることや、多様な人材とつながれることがメリット。
活用のポイント
・目的やニーズに合わせる
・適切なサイトや案件を選ぶ
・自身のスキル、経験を活かす
ポイントを抑え、活用しましょう。
クラウドソーシングでは、さまざまな人材と仕事ができるため、新たな発見や学びも得られます。
例えば、僕の場合
「クラウドワークス」「ランサーズ」「ココナラ」を利用して、
仕事を受けています。
クラウドソーシングサイトの活用は、
✅自分のスキルを提供
✅市場から評価を受け
✅自身の技術力を向上させる
仕事を通じて新たな経験を得ることができ、成長に繋げることができるでしょう。
エンジニア向けの求人サイトを活用
エンジニア向けの求人サイトとは、
IT・Webエンジニアの転職やフリーランスの案件を掲載しているサービスです。
エンジニア向けの求人サイトを活用することで、以下のメリットがあります。
①自分のスキルや経験に合った仕事を見つけられる
②自分の希望する条件に合った仕事を見つけられる
③自分の希望する企業を見つけられる
④自分の希望する場所で仕事を見つけられる
エンジニア向けの求人サイトの活用は、
自分のスキルと市場のニーズを照らし合わせ、最適な職を見つけるための強力なツールです。
市場の動向を理解し、自分のスキルを適切に位置づけ、
キャリアの発展に対する視野を広げるのに役立ちます。
スクールに通う
web制作スキルを効率的に身につけるために、スクールに通うのも手段の一つです。
スクールに通うメリットととして
・短期間でスキル取得できる
・プロから直接指導を受けられる
・他の受講生と交流し、刺激し合える
・案件を受けられるスクールもある
Web制作のスクールに通うと、一貫したカリキュラムに沿ってスキルを習得できます。
これは独学では得られません。
また、プロからの直接的なフィードバックと指導は、学習者が技術を正しく理解し、
適切に応用できるようになります。
自分の目的や予算によりますが、
お金をかけただけの「価値」を得られる期待が高いです。
また、Web制作のスキルを習得するための効果的な方法でもあり、
これにより、最新のWeb制作のベストプラクティスを理解し、
市場で求められるスキルを習得することができるでしょう。
Web制作スキルを独学で身につけるロードマップ
① HTML/CSSを勉強する
②JavaScriptを勉強する
③ jQueryを勉強する
④アウトプットしてみる
⑤WordPressを学習する
詳しくは、こちらの記事を参考にしてください。
≫≫【2023年版】web制作学習ロードマップ｜独学でいけるのか？
Web制作の独学におすすめの本
web制作の独学におすすめな本を紹介します。
①イラスト図解式 この一冊で全部わかるWeb制作と運用の基本
②1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座
1冊目が「web制作の概念について」
2冊目が「webサイトの基本構造について」
書籍であれば、この2冊があれば問題なく学習を進めていけます。
まる2冊以上になると、情報が多くなりすぎて、逆に混乱してしまうこともあります。
まずは2冊を網羅してから、必要に応じて追加していくのがベスト！
イラスト図解式 この一冊で全部わかるWeb制作と運用の基本
この本のおすすめポイントは
「Web制作に必要な専門用語や仕組みが、イラストや図で視覚的にわかりやすいこと。」
この本があれば、「web制作の概念」が網羅できるので、
独学を始めたい初心者にとっては、必ず持っておきたい1冊ですね。
内容としては
・Web制作の基礎知識
・web制作に必要な言語
・SEO
・アクセス解析
・セキュリティ
・運用・保守
Web制作に必要な知識をすべて網羅しています。
イラストと図解が豊富に使われているので、Web制作の専門知識がなくても理解しやすいのが特徴。
僕の場合、Web制作の独学を始める際、この本を手に取りました。
まるプログラミング経験がなく、基本的な知識もなし。
だけど、この本に書かれているイラスト図解がわかりやすく、
基礎知識を得ることができました。
この本は、初心者から経験者まで、すべてのWeb制作者に対して、
Web制作の基本的な概念を理解するのにおすすめの書籍です。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
先ほど紹介した本は、「web制作の概念」についての本でしたが、
2冊目は、web制作に必要な言語についての本です。
この本は、「Webデザインの基本的な理論と、HTMLやCSSの具体的な実装技術を学ぶ」です。
内容としては
・HTML＆CSS
・Webデザインの基礎知識
・レスポンシブWebデザイン
・スマートフォン向けWebサイトの制作
基本的なコードから、具体的なデザイン要素の実装まで、Web制作の基本を網羅しています。
まるWebデザインの基本的な理論も説明されているため、
実践的なスキルだけでなく、デザインの考え方も学ぶことができます。
Webデザインの理論的な知識と、実践的な技術を組み合わせて学びたいなら、この本が最適な学習リソース。
「Web制作の知識」と「スキルを向上させる」有用なツールでおすすめです。
Web制作の独学が厳しいならスクールも検討しよう
独学では、自分で教材を探したり、モチベーションを保つのが大変です。
また、独学では、正しい知識が身についているか不安になったり。
・新しい技術
・最新のトレンド
など、学習しながら追っていくと、時間と労力がかかり疲弊する原因にもなりえます。
Web制作の独学が厳しい場合は、スクールに通うことも検討しましょう。
オンラインスクールでは、「デイトラ
」がおすすめ。
デイトラの運営者さんは、全員元フリーランスで
「フリーランス/副業を意識したハイレベルなカリキュラム」になっています。
まとめ｜web制作を効率よく学習しよう
今回の記事をまとめると
✅web制作の流れ
✅【独学】 Web制作を始めるためのポイント
✅副業・フリーランスで稼ぐには
✅Web制作の独学におすすめの本
Web制作の流れを知ることで、
・Webサイトを作るときに何をすべきか
・どんなスキルやツールが必要か
・どんな注意点があるか
がわかるようになります。
流れを掴み、「概念」「仕組み」を理解してから、効率的に学習を進めていきましょう。
今回は以上になります。
参考になれば嬉しいです。