【完全ガイド】Webサイト(ホームページ)制作の工程とスケジュールを徹底解説! - クラップクリエイト
Blog

【完全ガイド】Webサイト(ホームページ)制作の工程とスケジュールを徹底解説!

クラップクリエイトの伊藤です。

Webサイト制作を依頼するにあたって、
「どんな工程でどのように進んでいくのかわからない。」
「急いで作ってほしいけれど、そもそも通常どれくらいでできるのか教えてほしい。」
といった不安や疑問を抱えていらっしゃる方が多いかと思います。
(私も、以前家をリフォームした際に、工程とスケジュール感が最後までよくわからず不安でした・・・)

今回は、初めてWebサイトを依頼する方に向けて、工程とスケジュールを徹底解説します。

  • Webサイト制作の工程が知りたい
  • スケジュール感が知りたい
  • 依頼しようとしている会社の言っていることがよくわからない

そんな課題を抱えている方は、ぜひご覧ください。

Webサイト制作の全体像

Webサイトは以下の流れで制作されるケースが大半かと思います。
(ご予算に合わせて省く工程もありますが、クラップクリエイトでは以下のような流れで進行します。)

1:ヒアリング・企画立案

まずは、「どんな目的でどのようなWebサイトを作りたい」のかお話を伺います。
一通りお話をお伺いした後で、Webサイトの方向性や大まかな内容、作成方法等についてご説明します。
また、規模が大きなサイトは必要に応じて企画書をお出しします。

Webサイトの中身についてはもちろんですが、サーバやドメインについても希望を伺います。
クラップクリエイトでは、サーバやドメインは特に希望がなければお客様でご用意いただく形をお勧めしています。

サーバやドメインについて、もっと知りたい方はこちらの記事をご覧ください。

中には、Webサイト制作以外で効率的に目的を達成する方法が他にもあるかもしれません。
そういった場合は、お話を伺った上で、Webサイト以外のご提案をする場合もあります。

2:要件定義・スケジュール・サイトマップ・お見積書ご提示

[要件定義]

システム要件や、どのデバイスサイズを基準にするか、サーバやドメインは誰が管理するか等、必要事項をまとめた要件定義書を作成します。
少し難しい内容に感じるかもしれないのですが、必要な項目については一つずつ丁寧に解説しますのでご安心ください。

要件定義について、もっと知りたい方はこちらの記事をご覧ください。(現在準備中です)

[スケジュール]

具体的な日程を入れた制作スケジュールをお出しします。
各工程でお客様にご判断いただきたい事や、ご協力いただきたい事もありますので、その期限も記載しています。

[サイトマップ]

サイトの構成案を簡単に示した書類です。
ページ数の他に、どんなページがあるのか、どんな階層でできているのかがわかるようになっています。

[お見積]

以上の内容を元にしたお見積書を提出します。
ご予算に合わない場合は、制作工程を削ったり、制作内容を見直すことでご希望に近づけることもできます。

3:ご契約

1、2の内容で概ね合意が取れればご契約です。
ここから先の工程は費用が発生します。

4:ワイヤーフレーム作成(必要に応じて取材)

Webサイトの内容がわかる設計図のような資料、ワイヤーフレームを作成します。
1ページずつ、どんな内容でどこにボタンがあるか等、細かく決定していきます。

原稿を作成するにあたり、必要に応じて取材をご提案する場合もあります。
また原稿の作成をお願いすることで、ご予算の削減も可能です。

5:デザイン作成(必要に応じて撮影・イラスト作成)

Topページから順番にデザイン案を作成いたします。
デザイン案はPCで見た場合とスマホで見た場合の両方を作成します。
画面幅に合わせて最適な見た目になるように作成するためです。

必要に応じて写真や動画撮影・オリジナルイラストの描き起こしをご提案する場合もあります。
ご予算が限られている場合、クラップクリエイトではPIXTAの素材を使用してデザインを作成していますので、ご安心ください。

この時点では、1ページにつき1枚のJPEG画像でのご確認です。
そのため、当然まだボタンなどは動かない状態です。

6:コーディング

5の画像をWebサイトの形にします。コーディングが完了したら、テスト環境にアップして、テストサイトをご確認いただきます。
この時点では、システム部分以外は本番環境と同じ形でご確認いただけます。

7:システム開発

お問い合わせフォームやお知らせ更新システム、その他システム部分の開発を行い、6のデータに組み込んで調整します。
例えば、お客様がご自身でで更新したいページが多ければ多いほど、システム開発箇所が増えるイメージです。
また、ECサイト(ショッピングサイト)の場合は、作り方や決済システムの導入によって、かなりご予算と工数が変わります。
この辺りは機能も含め、2の要件定義で細かく確認し、齟齬のないように進めます。

8:デバック

基準のデバイスで問題がないか細かくチェックします。
リンクは正しく設置されているか、見た目は崩れていないか等、目視で確認します。

9:公開

公開作業を行います。
また、このタイミングで
・Googleアナリティクス(無料のアクセス解析ツール)
・サーチコンソール(無料のアクセス分析ツール)
・ファビコン(ブックマークしたときのアイコン)
・OGP画像(リンクを送ったときに表示されるアイコン)
も設置します。

合わせて、Google側にWebサイトを公開したことをお知らせするために、サイトマップの提出も行います。

公開方法は、条件によって異なります。

[新規サーバ・新規ドメインでの公開]

テストサイトをそのまま、ドメイン変更して公開するので、即時公開が可能です。

[サーバ変更・ドメイン移管して公開]

ドメインを新しいサーバに移す必要があります。
また、ドメインを旧サーバから新サーバに切り替える(DNSを切り替える)ため、浸透までに時間がかかります。
(難しいのですが、新しいサイトがすぐに見れる人もいれば、見れるまでに時間がかかる人もいる感じです)

この辺りの解説は以下の記事をご覧ください。(現在準備中です)

10:瑕疵対応

公開から2週間、瑕疵が見つかった場合は修正対応いたします。

11:2週間以降の修正対応

明らかな瑕疵については、期限を問わず対応いたします。
それ以外の修正は、保守契約を交わす場合もあれば、スポットでのご依頼をいただく場合もあります。

保守契約については、以下の記事をご覧ください。(現在準備中です)

以上がWebサイト制作の大まかな流れです。

スケジュールについて

ランディングページの場合
通常、最短で1ヶ月程度かかります。

コーポレートサイトの場合(5ページ程度・お問い合わせフォーム・お知らせ更新システム)
通常、最短で2ヶ月程度かかります。

中規模・大規模サイトについては一度ご希望の納期をご相談ください。

Webサイト制作は、専門用語が多く、わかりにくい部分もあるかと思います。
当サイトでは、専門用語解説記事をアップし、なるべく安心してご発注いただけるよう努めてまいります。
また、お問い合わせいただいた際は、わかりやすくお話するように心がけています。
わかりにくいことがありましたら、ぜひご意見ください!

この記事を書いた人
伊藤友美 Tomomi ito

1992年生まれ、愛知県出身のグラフィックデザイナー。 名古屋芸術大学デザイン学部デザイン学科を卒業後、印刷会社に6年勤務。 内2年間グラフィックデザイナー、4年間Webディレクター・プランナーを経験しました。 その後食品メーカーのインハウスデザイナーを経て独立開業。 プライベートでは一児の母として慣れない育児に日々奮闘中。

Back
お問い合わせ
Contact
お問い合わせ

開業したけれど「まだ何も決まってない・・・」「何をどう依頼していいかわからない」という状態でも構いません。
守秘義務契約の関係上、公開していない案件が多数ございますのでぜひお気軽にお問い合わせください。

Contact