副業でWebサイト制作をしたい方へ向けて制作の流れを解説
独学でWeb制作を学んでいて、
制作会社ではどのような制作工程かを知りたい。
なにごとも、手順が重要ですよね。
料理を作るにしてもお菓子を作るにしてもレシピがあります。間違った手順で制作をしてしまうと、効率が悪く出来上がりの品質も低いものになってしまいます。
こんにちは、のざき寿（ひさし）といいます。元芸人です。
当サイトに来てくださり、ありがとうございます！ゆっくり見ていってくださいね！
この記事では、Web制作会社で行われている制作工程について解説していきます。
ぼくは、Web制作会社でエンジニア5年をしていました。携わったWebサイトは、約50サイトを超えます。
きちんとした制作工程を踏むことで、作業効率や生産性は上がります。
また副業でWebサイト制作をはじめようと思っている方はとくに、クライアントにしっかりとした制作工程を提示することで信頼感は増すでしょう。
副業でWebサイト制作がしやすくなった
実は、Webサイト制作は手軽に副業でできるほど簡単ではありません。
もともとWebサイト制作会社で経験があるならまだしも、
- 独学で勉強して副業にしたい
- または実務経験はないが副業にしたい
そんな簡単に仕事がもらえるほど、Webサイト制作は甘くないです。
クラウドソーシングなどで探すと案件はたくさんありますが、クライアントは実務経験のないWeb制作者に仕事を依頼するでしょうか。
Webサイト制作を難しくしている理由
Webサイトを作るには、以下の技術が必要になります。
- 情報設計・情報整理
- デザイン
- プログラミング（コーディング）
- サーバー管理
情報整理や情報設計は、特殊な技術は必要ないので方法を覚えれば問題なくできるでしょう。デザインは既存のホームページを真似する形、トレースすればなんとかできます。
しかし、プログラミングだけはどうしても特殊な技術で習得に時間がかかります。このプログラミングが、Webサイト制作を副業にすることの障壁だったように思います。
ノーコードツールを使えば副業でWebサイト制作が可能になる
しかし最近では、プログラミングをしなくてもWebサイト制作ができるノーコードツールが開発されました。
ノーコードツールは、インターネットでアクセスし管理画面から簡単な操作で、プログラミングをせずにWebサイトを構築できるツールです。
テキストと画像さえ用意できれば、ある程度のデザイン性も担保されているので、副業でも十分にWebサイト制作ができるようになりました。
素人目には違いがわからないWebサイト制作
ノーコードツールで作ったWebサイトは、素人目にはプロの制作者か独学副業の方がつくったのかわかりません。極端な話、成果を生むなら誰が作ろうが関係ないのです。
たとえばJimdo（ジンドゥー）というノーコードツールを紹介します。
こちらは、デザイン・プログラミングをほとんど必要しません。しかし、プロが作ったといってもおかしくない仕上がりになります。
副業だからこそプロの制作工程を学ぼう
そこで重要となってくるのが、どう作っていくかです。
クライアントに負担のかからないように制作工程をスマートにしておくべきです。副業にするあなたにとっても、Websサイト制作の工程を整理しておくことは、生産性を上げることや再現性を生むことにつながるのでとても重要です。
副業する方に真似して欲しいWebサイト制作の工程
さて、まずは制作工程の全体像から解説していきます。
Webサイトの制作は、大まかに次の工程に分かれています。
- 企画
- 設計
- 制作
- 公開
- 運用・保守
Webサイトは目的が大切です
Webサイトというと、デザインやプログラミングをイメージする方が多いかもしれませんが、それらは全体の3割くらいでしかありません。
ほとんどの時間は、企画・要件定義・設計に費やされます。
そして一番重要なことが、Webサイトの目的を決めることです。
集客のためですか？
採用のためですか？
認知のためですか？
目的を見失ったWebサイトほど、無駄なものはありません。むしろそのまま放置してしまうと、ユーザーにマイナスなイメージさえ与えてしまいます。
そして制作段階での目的・目標の変更は、制作作業全体に影響を及ぼし、各工程を見直すなどプロジェクトに多大な悪影響を及ぼしします。
クライアントも不安にさせてしまいます。
当然、無駄な時間と費用もかかってきます。
クライアントへのヒアリングは丁寧にしよう
クライアントの要望を引き出します。
クライアントとの合意形成を図るためにも使用します。
- ホームページに入れたいコンテンツ
- デザインの方向性
- ロゴ・写真などの素材
ヒアリングシートとして文書で残しておきましょう。
Webサイトの要件定義をしよう
要するWebサイトを制作する上で、必要な工程・素材を洗い出すことです。
- どんな技術を使うか
- どんな人たちへ向けたホームページなのか
- 制作期間・制作時期の決定
- Webサイトの流入経路
- 公開後の運用について
制作を始めるまえから要件を洗い出し・決めておきましょう。
契約をしよう
秘密保持契約（NDA）や著作権・情報管理の方法など、契約を書面で交わします。
こちらについては、副業や個人事業の形態によって必要でない場合もあるでしょう。しかし、クライアントの情報や顧客リストを流出しないように、管理体制を提示しておくことは、安心につながります。
Webサイトを制作する上で使った画像や素材の保管も契約内容に記載しておくといいでしょう。
副業では必要のない工程もあるかもしれません。ですがプロの制作工程を知っておくことが大切だと考えてもらえると嬉しいです。
Webサイトの設計
ここからはWebサイトの設計について解説をしていきます。まずは設計の全体像からみていきましょう。
- サイトマップの作成
- ワイヤーフレームの作成
- デザインの方向性を決める
- システムの確認
- ホームページの導線を考える
サイトマップの作成
サイトマップは、Webサイトのページ数や構成を整理するために作ります。
- どんなページが必要か
- 全体で何ページ必要か
- 各ページとの関連性の確認
通常エクセルなどで表にして管理していきます。
全体像がひと目で分かるように作っておくと、進捗管理にも使うことができます。
Webサイトの導線を考える
ユーザーがWebサイトに辿り着くまでの導線を検討します。
- 検索エンジンからの流入
- SNSからの流入
- リスティング広告からの流入
これらの流入経路を検討し、設計に落とし込んでいきます。
ワイヤーフレームの作成
サイトマップの情報をもとに、Webページの図面をつくる工程をワイヤーフレームといいます。
デザインをせず、レイアウトやコンテンツの配置を決めていきます。Webライティングなどの制作も同時進行ですすめ、テキストも配置していきます。
デザインの方向性を決める
ワイヤーフレームに加えるかたちで、Webデザインをしていきます。
デザインをしていく上で大切になってくる要素は次の要素です。
- テキスト
- 写真
- レイアウト・配置
- カラー
- 装飾
これらの要素を、コンセプトに合わせて一貫性をもって作り上げていきます。クライアントのデザインの提案をするために、以下の資料を用意することもあります。
- デザイン方針定義書の作成
- デザインテイストの決定
デザインとは何か。
デザインの基本的な知識を勉強したい方は、次の本がおすすめです。
Webシステムの確認
ホームページに使用するシステムの確認・決定をします。
- お問い合わせページの作成
- ブログ機能の作成
- アクセス解析の確認
- 使用するサーバーの決定
- WordPress導入
システム構築は、修正・追加が難しくなります。場合によっては要件定義からやり直す必要もでてくるため、しっかり確認しておきましょう。
副業するなら知っておきたいWebサイトの制作工程とは
ここからは制作の工程について解説していきます。
制作の工程は、大まかに3つに分かれます。
- Webデザイン
- Webコーディング
- Webシステムの導入
要するに、デザインとプログラミングに分かれます。
Webデザイン
Webデザインの制作は、次のような工程で進行していきます。
- グランドデザインの作成（主にトップページ）
- 主要ページのデザイン作成
- 下層ページのデザイン
- パーツ（コンポーネント）の作成
- 写真の選定
Webデザインはまず、トップページをつくります。トップページである程度、デザインの方向性を決めてしまうわけです。
その後、重要なページをいくつか作っていきます。このとき、使いまわすデザインなどはパーツごとに制作してきます。
下層ページなどのそれほどデザインが必要のないページに関しては、パーツを組み合わせるだけにしていくと、作業効率が上がるわけです。
Webコーディング
Webサイトとして機能させるためにプログラミングすることをコーディングといいます。コーディングにより、インターネット・ブラウザで閲覧できる形になるわけです。
Webコーディング主に、次のプログラミング言語が使われています。
- HTML
- CSS
- JavaScript
これらが、ホームページをつくる上で必要なプログラミング言語であることは覚えておきましょう。
Webシステム構築
Webサイトを運用していくためには、記事の更新システムが必要になります。
更新システムはサーバーやデータベースとのやり取りが発生し、より複雑なプログラミングが必要になります。
そこで、プログラミングの知識を必要としない、WordPress（ワードプレス）というシステムを導入します。
Webサイトの公開
デザイン・コーディングを経て制作したWebサイトは、サーバーにアップロードします。そうすることで、インターネット上で閲覧できるようになります。
事前に以下の契約を済ませておきましょう。
- ドメインの決定
- レンタルサーバーの契約
Webサイトの住所となるドメイン、ファイルなどを保管しておくサーバーです。
Webサイトのテスト・デバッグ
Webサイトを公開する前に、Webサイトに不備がないか検証するためのテスト・デバックを行うことが一般的です。
テストサーバーやテストドメインなどを用意しておき、ホームページの表示の確認・修正を行います。
- ブラウザでの表示確認
- お問い合わせ機能の検証
- ブログ機能の検証
- アクセス解析の動作確認
ホームページは軽微な修正であればいつでも直せることがメリットのひとつです。しかし、ユーザーは、正常に動作しないWebサイトを見ることになるため、信用・信頼を失いかねません。
クライアントの信用にも繋がりますので、テスト・デバックをしてからWebサイトを公開するようにしましょう。
バックアップの取得
Webサイトを構成しているファイルはすべて、必ずバックアップを取りましょう。
- プログラミングが書かれたファイル
- デザイン・画像のデータ
- サーバーに登録したデータベース
- ログインID・パスワードの情報
Webサイトの運用をしていて、間違ってファイルを削除してしまった。誤った修正をしてしまい修正前の状態にもどしたい。
バックアップを保存しておけば、安心して作業ができます。
公開・リリース
ここまでの作業をすべて確認してから、本番サーバーにファイルをアップロードし、公開・リリースとしましょう。
Webサイトを周知する
SNSなどで、Webサイトの公開を発信しましょう。知人や友人など、直接会うことのできる相手にも知らせて、拡散のお願いをしましょう。
検索エンジンへWebサイトをインデックスする
Webサイトは、検索エンジンに対して公開の通知を送らないと、検索結果に上がってきません。
具体的にはGoogleの検索エンジンに対して、サイトマップを送信する作業をしなくてはいけません。この作業を「インデックス」するといいます。googleサーチコンソールというツールを使って通知を送ることが一般的な方法です。
Webサイトの運用
Webサイトは継続的にメンテナンスする必要があります。ページを増やしたり、お知らせを投稿したりコンテンツを更新していく必要があります。
一般的な運用方法について紹介します。
Webサイトの運用と修正
Webサイトは長期的な視点で運用し、成果を上げていきます。
- ページの追加
- コンテンツの拡大・最新化
- ブログの更新
- 機能・使いやすさの改善
- 認知・拡大の戦略を考える
これらの作業を継続的に行うことが、Web運用では大切になってきます。
アクセス解析の設置・データ収集
Webサイトの利点は、アクセスのデータを収集できるところです。Webサイトにアクセス解析を導入することにより、以下のようなデータが収集できます。
- PV（ページビュー）
- どのくらいWebサイトに滞在したか
- どんなページが一番見られているか
これらはごく一部の指標ですが、Webサイトの修正やコンテンツの拡大のアイデアになります。通常、Googleが無料で提供している、Google Analytics（グーグルアナリティクス）を導入することが一般的です。
Webサイト制作で大切なこと
ここまでの作業を全てひとりでやることはありません。Web制作会社でも、営業・ディレクター・デザイナー・プログラマーと、作業を分担して行います。
フリーランスや個人事業・副業でWebサイト制作を請け負う場合、クライアントからここまで細かい要求はないかもしれません。しかし、制作工程を丁寧に説明できれば、クライアントから信頼感を得ることができるでしょう。
さいごに、一番大切なことは制作工程ではありません。
- 何のためにホームページをつくるのか・どんな成果を求めるのか
- ホームページを公開した後、どのような運用をするのか
これらのことを忘れてWebサイト制作を進めてしまうと、想定とは違った出来上がりになり大切な時間とお金を無駄にしてしまいます。
Webサイト制作の全体像を理解しておくことは、目的達成の手助けになるでしょう。
不要な工程は省略するなどして、ぜひあなたの制作にお役立てください。