Blog

ブログ

ブログ

Web制作の流れと知っておきたい8個のポイント

起業をしたから、ホームページを作りたいけど、そもそも何からすればいいの??
という方や
自分のWebサイトを作りたいけど、どのくらいかかるんだろう。」など
サイトの制作をするときに気になることが多いのは、

  • どのくらいの費用・期間でできるのか?
  • そもそもWeb制作とは、どんなことをやっているのか?

ということではないでしょうか?

今までWeb制作に関わることのなかった方だと専門用語も多いですし、
Web制作会社に制作を依頼してから完成までにどのようなことが実際に行われているのかを一から調べることも時間がかかったりすると思います。

サイトいうとかなり大きくなってしまいますが、企業のホームページやメディアサイト、ショッピングサイト(ECサイト)も制作の段階では同じような制作の流れをします。

この記事では、そんな1つ1つの疑問点を実際弊社で行っている例を参考に解説して行きたいと思います。

Webサイト制作の流れは以下のとおりです。

  1. 打ち合わせ
  2. ヒアリング
  3. 情報設計
  4. ワイヤーフレーム作成
  5. デザイン制作
  6. コーディング
  7. テスト・検証
  8. 納品

期間は制作規模にもよりますが、大体1ヶ月~2ヶ月くらいのものが多いです。大規模開発になると2ヶ月以上~というものもあります。
それでは一つ一つ説明していきます。

1.打ち合わせ

Web制作を依頼

打ち合わせでは、お客様がどのようなWebサイトを希望しているかを一から聞きます。

ここでは具体的なお話というよりは、「どのようなWebサイトにして何をしたいのか」、目的などをお聞きする場になります。

Webサイトの制作では依頼者のほとんどが初めて伺う方が多いので、お互いの理解に相違を少なくする必要があります。

打ち合わせ終了後には、お話頂いた内容からお見積りを制作して、お客様のご希望に添えるような形になれば、ご契約後、制作が開始されます。

2.ヒアリング

ヒアリング

ヒアリングでは、打ち合わせ時にお客様からお伺いした内容をもとに更に詳しく内容を掘り下げていきます。

・どのような目的でどんな人に見てもらいたいか。
・どのような機能が必要か
・デザインはどのようなコンセプトで制作するか。

などを聞いたのち、お客様のビジネスモデルから想像し、利用者がどのように使用してもらえるのかを一緒に考えながら、最大限の利益をあげられるようなWebサイトにできるよう進めていきます。

3.情報設計

情報設計

情報設計とは、サイト内での情報をわかりやすく伝え、受け手が情報を探しやすくなるように設計することです。

この作業は地味ですが、Webサイトにおいて最も重要な基盤となる作業になり、後々、サイト制作に不備が出た際にはこの情報設計でミスをしていることが多いほどです。

建設業と同じで、設計図を作り家を建てるのと同様の作業を行っていきます。

特に重要なことはヒアリング時にお聞きするユーザー分析を情報設計に反映させユーザーの「性別」「年齢」「職業」「趣味」など独自で制作したユーザ例を参考に作り上げていきます。

そうすることで具体的な動線や、使い方など、イメージしやすくなり、設計の段階で、Webサイトの大まかな流れを作ることができます。

4.ワイヤーフレーム作成

ワイヤーフレーム作成

ワイヤーフレームは構造設計で作った設計図を簡単な枠組みを使い、形に起こすことです。

形に起こすことにより、より可視化できるので、改善点などはこちらで見つかることも多いです。

ほぼラフデザインみたいな形なので、ここまで来るとホームページの形がイメージできると思います。

このワイヤーフレームを見ていただきWebサイトのレイアウトに問題点などがなければデザインに進みます。

5.デザイン制作

デザイン制作

デザインではワイヤーフレームをもとに実際に写真やテキストの挿入を行い、Web制作が完成した際のイメージを作り上げます。

この段階まで行くと、ほぼWebサイトのイメージが出来上がってくるので、この段階でイメージしているデザインになっているか打ち合わせをします。

お客様のご納得が行くデザインになるまで、打ち合わせを続けていきます。

6.コーディング

コーディング

デザインが終了したら、コーディングという作業に入ります。

コーディングとは作ったデザインを参考にHTMLやCSSと呼ばれるプログラミング言語で記述していく作業です。

プログラミング言語はHTMLやCSSというソースコードと呼ばれるものを組み込んでいき、Webサイトを作っていきます。

コーディングをしていく段階で、やっとWebサイト上から確認することができるようになります。

動きやリンクで次のページに行くような流れを付けていくのもこのコーディングのなかに含まれています。

7.テスト・検証

テスト検証

テスト運用では、Google ChromeやSafari, Fire Fox, Microsoft Edgeなどで実際に反映されているか。パソコン、タブレット、モバイルで正常に作動することができるのかを確認してきます。

不具合などが発見されれば随時修正し、修正後再度確認の繰り返しで不具合を残らず消していきます。

8.納品

業務提携について

不具合の修正が終わり、お客様に納品をします。

納品時にはお客様に今後使用していただくWebサイトと運用に必要な情報をお渡しします。

その後使用用途に応じて編集の仕方などをお伝えし、運用までサポートして行きます。

最後に

上記のWeb制作の流れはあくまでも当社の例を参考にした制作の流れを記入しています。

他の制作会社ではまた違った流れになるので、制作会社ごとに確認をしてみると良いと思います。

制作の流れを参考にしていただき、なるべく早い段階でWeb制作を依頼することで、十分な打ち合わせとお互いの認識の共有ができ、より良いWebサイトが作れるのではないかと思います。

一覧に戻る