Web制作の流れとは？13工程を基礎知識からわかりやすく解説！

Webサイトを依頼制作したいけど、「制作の流れや工程がわからなくて不安」と悩んでいる方も多いのではないでしょうか。

制作会社に丸投げすることも多いWebサイト制作。しかし自社で準備できることが、実はたくさんあります。具体的な流れを知れば、理想とするWebサイトの実現に近づけるでしょう。

そこで本記事ではWeb制作の流れについて、全13工程を基礎知識からわかりやすく解説していきます。

多くの実績を持ちWeb制作のプロであるTRASPが、Web制作会社を選ぶポイントについても解説していきますので、ぜひ最後までご覧ください！

Web制作の流れとは？3ステップで解説！

Web制作の流れは、主に3つのステップに分けられます。

まずは各ステップの内容から、全体的な流れを確認しましょう。

1.問い合わせ・発注

Webサイトの制作目的や、制作会社へ依頼する段階です。

特に重要な部分が、制作会社の選定といえるでしょう。
複数の制作会社から検討する場合は、相見積もりから判断する必要があります。発注してからの変更はできないため、実績や担当者とのコミュニケーションのしやすさなど、さまざまな観点から判断しましょう。

2.企画・設計

ここではWebサイトのアイデアを担当者とすり合わせていく段階です。

制作するうえで重要な要素となり、企画や設計に手を抜いてしまうと理想とするWebサイトは完成しません。
したがって考えている要望はしっかりと伝え、具体的な設計へと落とし込んでいきましょう。

3.制作・実装

ここでは実際に制作を行う段階です。

ほとんどの作業は制作会社が行うため、内容確認がメインとなります。完成した後に大幅な修正はできないため、確認できるときにサイトデザインから機能面までを細かくチェックしましょう。

Web制作の流れ1：問い合わせ・発注

Web制作の第1ステップでは、問い合わせや発注を行っていきます。

以下の手順ですすめていきましょう。

1.制作する目的の明確化

最初に行うべきことが、何のためのWebサイトを制作するのか、ゴールや目的を明確にすることです。

目的がはっきりしていないと制作会社にアバウトな要望しか伝えられず、効果の出るWebサイトを制作できません。

仮に制作会社への依頼内容が、

といった場合、店舗のターゲットや掲載する内容が不明な状態です。

新規客をターゲットに認知度を上げるホームページを目指すのか、お店でのコミュニケーションを大切にしSNS等を活用しリピーターを増やすのかによっても、Webサイトに必要な機能は異なるでしょう。

したがって制作会社へ依頼する前に、まずは自社内で制作目的をはっきりとさせることが重要です。

2.問い合わせ・ヒアリング

Webサイトを制作するにあたって、多くの会社が制作会社へ依頼することになるでしょう。しかし制作会社へ問い合わせしたからといって、すぐに発注となるわけではありません。

まずは制作会社と「どのようなWebサイトを制作していくのか」を共有するために、ヒアリングを行っていきます。

ヒアリングではWebサイトの方向性について話すのはもちろんのこと、制作会社を見極める重要な機会でもあります。

基本的に1,2回程度しか行われないため、以下のポイントを意識し見極めていきましょう。

特に「担当者とのコミュニケーション」は重要です。

Webサイトの制作では頻繁にやり取りを行うため、「言ってることがなかなか伝わらない…」などといったストレスを感じることがなく、信頼できる人柄であるかを判断しましょう。

3.見積り・提案　

制作会社とのヒアリング後は、見積もりや提案を受けます。

複数の制作会社を検討している場合は、同条件で見積もりを行ってもらう「相見積もり」という形で、提案内容を比較して判断していきましょう。

見積もりを行う際のポイントは以下のとおりです。

基本的に見積書は、作業項目が一覧で記載されています。

どうしても項目数が多くなってしまい、大変だと思いますが、具体的な作業内容も確認しましょう。なぜなら、なかには不必要な作業も含まれている可能性があるためです。

自社で対応可能な工程やなくても良い工程を省くことで、見積もりを低く抑えることができます。

見積もりについて詳しく知りたい方は、以下の記事もご覧ください。

ホームページ制作の見積もり相場を内訳10項目や計算方法から解説！

 ホームページ制作やリニューアルを検討しているなかで、 「見積もりという言葉が頻繁に出てくるけど意味がわからない...」「見積もりの内訳について知りたい...」 など、見積もりについて悩む方...

Web制作の流れ2：企画・設計

Web制作の第2ステップでは、企画や設計を行っていきます。

以下の手順ですすめていきましょう。

1.サイト設計

まずはサイト設計を行い、Webサイトのもととなるサイトのコンセプトや、掲載するコンテンツについて話し合いましょう。

Webサイトの大枠を決める部分であるため、具体的に指示を出すことが大切です。

サイト設計で重要なポイントはこちら。

「20代前半の女性が、インスタ映えする飲食店情報を手に入れられるWebサイト」まで明確化できると、Webサイト制作の成功に近づきます。

担当者と意見をすり合わせながら、理想とするサイト設計を行いましょう。

2.ディレクトリ構造設計

ディレクトリ構造設計では、Webサイト内の階層について決める段階です。

例えば一般的なコーポレートサイトの場合、

のように、各項目を深堀りする形で階層が作られます。

しかし以下のような階層であれば、いかがでしょうか。

サービス概要ページからしか会社概要ページを開けず、ユーザーは不便な状態となります。

Webサイトを管理する観点でも扱いづらいため、ディレクトリ構造はしっかりと考えたうえで設計しましょう。

3.サーバー・ドメインの取得

Webサイトを公開するうえで欠かせないことが、サーバーとドメインの取得です。

それぞれの利用目的はこちら。

サーバーやドメインは、制作会社に依頼するか自社で契約するかの2択です。

制作会社に依頼した場合は管理が簡単ですが、付き合いを解消する際は契約を変更する手間が発生します。そのため将来的な要素も踏まえて選択しましょう。

4.開発システム・CMSの導入確認

Web制作の企画・設計では、開発システムやCMSの導入を決めることも重要な項目となります。

CMSはコンテンツマネジメントシステムの略となり、HTMLやCSSを直接コーディングすることなくWebサイトを制作できるツールです。

一般的にはWordPressを活用することが多く、Webサイトを管理する面でも簡単な操作が魅力といえるでしょう。

そのためWebサイトに関する知識が少ない方であれば、CMSの導入がおすすめです。

またECサイトを制作する場合であれば、ショッピング機能や決済機能などのシステムが必要になります。現代ではさまざまなシステムが存在するため、担当者と必要なシステムを話し合い導入を判断しましょう。

Web制作の流れ3：制作・実装

Web制作の第3ステップでは、制作や実装を行っていきます。

以下の手順ですすめていきましょう。

1.素材の提供

Webサイトを制作するうえでは、制作会社に必要な素材を提供します。

制作会社が自社に詳しくなければ、濃い内容にはできません。そのため自社に関する情報は、できるだけ多く提供しましょう。

Webサイトの制作で必要な素材はこちら。

質の高いWebサイトを制作するためには、掲載する会社ロゴ以外にも、会社のパンフレットやサービスに関する資料が求められます。

また、ホームページで使用する写真については、制作会社に撮影も依頼できますが追加料金がかかるケースもあるため注意しましょう。

2.ワイヤーフレームの作成

制作の過程では、まずワイヤーフレームから作成していきます。
ワイヤーフレームとは、Webサイトのレイアウトを決めるための設計図です。

Webサイトを制作するうえでの大枠となり、各ページに何を配置するのかを確認することが目的となります。

ワイヤーフレームは制作会社が作成するため、事前のヒアリングやサイト設計の意向が組まれているかを確認しましょう。

この後のサイトデザイン作成やコーディングに入ると大幅な変更はできないため、ワイヤーフレームの段階で修正点を伝える必要があります。

3.サイトデザインの作成

ワイヤーフレームが決まり次第、Webサイトの制作をすすめていきます。大半の制作会社がサイトデザインの作成からはじまるため、テーマカラーなどの要望があれば事前に伝えておきましょう。

基本的には自社が提供した素材やワイヤーフレームをもとに制作会社が作成していくため、依頼者側が特別に行う作業はありません。

仮に作成する過程で新たな画像が必要な場合は、随時素材の提供をしましょう。

またモバイル対応のページを作成する際は、パソコン版ページとレイアウトが異なります。したがってサイトコンセプトやバランスのズレに関する確認が重要です。

4.コーディング

サイトデザインの作成後は、HTMLやCSSをはじめとしたプログラミング言語を用いてコーディング作業を行います。

基本的な大枠はHTMLやCSSを。Webサイトに動きを加える場合はJavaScriptなど、多種多様なプログラミング言語を活用すると認識しておきましょう。

またコーディング段階で、システムやCMSの導入も行います。

ここでも依頼者側が特別に行う作業はありませんが、状況に応じて制作会社から確認が入ることがありますので協力しましょう。

5.テスト確認

コーディング作業が終わると、公開前の最終調整としてテスト確認を行います。

基本的にはテストアップと呼ばれる、限定したユーザーしか閲覧できない状態でテスト公開する流れです。

テスト公開ではWebサイトのデザインやテキスト部分だけでなく、システム面にも問題がないかを必ず確認しましょう。
多くのリンクを設置しているWebサイトの場合は、すべてのリンクが正常に動作するのかをチェックする必要があります。

このテスト確認や修正期間もスケジュールに組み込んでおきましょう。

また、使用するブラウザや環境によってデザインが崩れていることもあるため、さまざまな状況を想定して確認することが重要です。この後は公開作業となるため、最終調整として修正点がない状態にしましょう。

6.公開

無事にインターネット上で公開できれば、制作終了となります。

しかしインターネットに公開したからといって、Webサイトを運用しなければ認知されることは少なく閲覧数は増えません。

したがってここからは、多くのユーザーに閲覧してもらうための対策が重要となります。

Webサイトを改善していくためにも、以下のような対策を行いましょう。

Webサイトによって具体的な方法は異なりますが、最初に決めた「Webサイト制作の目的」を達成するためにも継続して取り組んでいきましょう。

Web制作会社を選ぶ際のポイント

Webサイトの制作会社を選ぶ際は提案内容だけでなく、制作会社の強みや、制作費用の内訳をしっかり理解することが重要です。完成するまで仕上がりがわからないからこそ、イメージ共有の要素も重要視しましょう。

ここでは、Web制作会社を選ぶ際のポイントについて詳しく解説していきます。

制作会社の選び方について詳しく知りたい方は、以下の記事もご覧ください。

ホームページ制作会社はどう選ぶ？成功するための4つのポイント

 インターネットが広く普及した現代で、ホームページは「企業の顔」として欠かせない存在となりました。しかし、ホームページを作りたいとネットで検索しても「業者が多すぎてどれを選べば良いか分からない…...

1.制作会社の強みを理解する

Webサイトの制作会社と一口にいっても、全国には数え切れないほどの会社数があります。

制作会社によっても強みや特徴が異なるため、Web制作の目的と合致する会社選びが重要です。

たとえば、

など、制作会社の特徴と自社の目的がマッチすることで、質の高いWebサイトを制作できるでしょう。

そのためにはヒアリングの時間を活用し、制作会社の強みを理解することが大切です。

2.制作費用の内訳を理解する

制作会社を選ぶ際は、総合的な値段だけで判断せず、制作費用の内訳を理解することが重要です。

Webサイト制作は高額な費用がかかるため、少しでも安く発注したいと考えている方も多いのではないでしょうか。しかし見積もりの金額だけで、制作会社を判断しないように注意しましょう。

なぜなら制作費用が異常に安いと、Webサイトの質が低いことや、想像したものとかけ離れているケースがあります。

なかには多額の追加費用が発生することもあるでしょう。

したがって提案内容や作業内容など具体的な項目を確認し、制作会社の良し悪しを見極めていきましょう。

まとめ

本記事ではWeb制作の流れの13工程をご紹介し、基礎知識からわかりやすく解説してきました。

Webサイトは「問い合わせ・発注」→「企画・設計」→「制作・実装」の3ステップで制作していきます。

ステップごとに重要な項目が異なるため、制作前には本記事でポイントを押さえてから依頼しましょう。

TRASPはこれまでに多くのWebサイトを制作した実績があります。なかでもWebマーケティングの支援から集客サイトに自信がありますので、アクセスが集まるWebサイトを持ちたいと考えている方は、お気軽にご相談ください。