普段、WEBデザインWEB制作のご依頼を頂くことが多いのですが、初めて依頼される方は実際にどのようにして制作が進んでいくのか分からなくて不安に思われることが多いようです。

そこで今回は私が普段行なっているウェブサイトの工程をまとめてみようと思います。

1.打ち合わせ、ご要望確認

初回の打ち合わせでは以下を確認します。

A.ウェブサイトを制作する目的を確認する。

Webサイトを制作するという時には、まずなぜWEBサイトが必要なのか、理由を確認します。

会社の紹介資料としてのWebサイトを始め、商品を売るECサイト、サービスの紹介サイトなど、目的によってタイプがいくつかあります。

会社の紹介サイトであれ、ECサイトであれ、サイトのページを見てもらった後に問い合わせをして欲しいのか、商品を購入してほしいのか、ゴールを設定します。このサイトのゴールを「コンバージョン」と言います。この言葉は、サイトのアクセス状況を確認する時や、ウェブ広告の成果を評価する時の基準となる場合が多いです。

B.Webサイトによって見てもらいたいお客さん像を確認する。

サイトの目的の次は、サイトを見てほしい人=サイトからの申し込みや商品を購入して欲しい人の情報をまとめます。
通常、1人の人物像にまとめ上げて考える場合が多いです。これをマーケティング用語で「ペルソナ設定」と言います。

このペルソナ設定をすることで、デザインのテイストやビジュアル、コンテンツの見せ方などの方向性を決める際の基準とすることができます。

逆にこれを決めておかないと、サイトのデザイン、コンテンツの一貫性を欠いた、誰に見てほしいのか何を伝えたいのかよく分からないサイトになってしまうことがあります。

C.制作に必要となるロゴなどの素材、テーマカラーなどを確認する。

多くの場合、ロゴやロゴの基調となっている色は決まっているものです。
ロゴ、色はそのまま使うのか、ターゲットに合わせて変更するのかなど、話し合って決めていきます。
既にあるロゴが新しく世に広めていく時に、クオリティが低いと思われる場合は、新しく作ることも提案します。

D.現在使用しているサーバーがあるかどうかを確認する

これは納品の形式に関係してくるのですが、既に利用しているサーバーがある場合は、そのサーバーへ納品することが多いです。ほとんどはこの形式での納品となります。

無い場合は、新しくレンタルサーバーを借りてもらう場合もあります。
その時は申し込みの手順は教えることはありますが、基本的にクライアント側で申し込みをしてもらいます。

E.希望の納期を確認する。

いつまでにネット上に公開したいのか確認します。
通常、企業サイトで2ヶ月ほどの制作期間をいただきます。
この期間は制作するサイトの規模によって変わります。規模が小さければ早くなるし、大きければ長くなるといった具合です。

2.他社Webサイト調査

打ち合わせで持ち帰った内容を踏まえて、他社のサイトを調査します。
具体的には、Googleでサイトのメインとなる事業や商品のキーワードで検索した場合の上位サイト、Webデザインリンクサイトなどの教師で絞り込みをしたサイトです。
このようにしてアクセスしたサイトから、サイトを制作する上でのヒントやインスピレーションを得ます。

この段階では主にコンテンツの項目や、デザインのテイスト、サイトのゴールへ向けたサイト内での導線などを調査します。

こういう調査をしてわかるのは、検索上位のサイトやデザイン的によくまとまっているサイトは、行き当たりばったりで作るのではなく、しっかりその部分を設計しているということです。
これはただ真似をすれば良いというわけではなく、ウェブサイトを公開した後のアクセス解析や、コンバージョンに至る経緯などを見ていく上で徐々に改善していくものであると考えています。

3.サイトのコンセプト決定

ここまでクライアントとの打合せで伺った内容や、ロゴのデザインや色、他社サイトの調査結果などを踏まえて、サイト制作の根っことなるコンセプトをまとめていきます。
ここで一番に考えておくことは「サイトを見たお客様が、どのようなサイトで.どのような内容が載っていればゴールにたどり着いてくれるか」ということです。

見た目を整えることはもちろん大事なのですが、それだけではWebサイトが効果を生み出す=お客様を実際の申し込みやサービスの利用に結びつけることはできません。

そのサイトのコンセプトをデザイン、コンテンツの両方で考えていきます。

デザインにおいては、コンセプトをキーワードで表現します。
コンテンツにおいては、サイトのページ一覧である、「サイトマップ」と言う形に落とし込んでいきます。

また、サイトマップではお客様が見たいと想定するコンテンツの優先順位を決めていきます。
この優先順位があるメニューの位置やトップページでのページへのボタンの配置に影響します。

4.トップページワイヤー・デザイン作成

サイトマップで決めた刑事の優先順位に沿ってページへのリンクやバナーなど、ページへの導線となる要素を配置していきます。
基本的に、Webページのクリックされやすい箇所というのはレイアウト的に決まっているいるので、その位置に優先順位の高いページのバナーやボタンを配置していきます。
そのようにして作ったのが「ワイヤー」になります。これはデザインに入る前段階の骨組みの段階です。
クライアント担当者があるデザインに詳しい方である場合はここで一度ご確認いただく場合もあります。

ワイヤーを作成して中身を検討した後、問題内容であればデザイン案の作成に入っていきます。

5.ウェブサイト提案、トップページデザイン案提出

Webサイトのコンセプトをまとめた提案資料、トップページのデザイン案を合わせてウェブサイトの内容を提案します。
ここで、クライアントの求めるサイトの目的と、サイトのコンセプト・デザインが噛み合っているのかをご確認いただきます。

6.ご発注

先の提案内容がよければ発注となります。

7.サイト制作に必要な素材のご提供依頼

サイトのキャッチコピーなどはサイトの企画費用に含む部分がありますが、事業内容やサービス内容に関しては、原稿をご用意いただく場合があります。
コピーライターに原稿を依頼する場合はコピーライティング費用が追加となります。

また、画像素材に関しては無料の画像素材などを使うことで費用を抑えることはできますが、他のサイトで同じ画像が使用されていた、なんてこともありますので、できればカメラマンに依頼してオリジナルの画像を撮影して使用する方が、よりオリジナリティを持たせることができます。

8.下層ページデザインを作成、適宜提出

トップページのデザイン案のテイストをベースに、下層ページのデザイン案を作成していきます。

9.提出した下層ページデザイン案に対し修正指示をいただく、適宜修正対応

この項目に関しては、見出しそのままの動きをします。
いただいた修正内容に関して、サイトのコンセプトや伝えたい内容に合っている場合はそのまま対応しますが、方向性にズレが発生しそうな場合は指摘させていただくことがあります。

10.トップページのコーディング

デザイン案の状態では、インターネット上のWebサイトとして公開することはできません。
デザイン案をウェブブラウザで表示させるための形式でデータを作成していく必要があります。
この段階では、HTMLとCSSなどの形式にします。

11.TOPページコーディングの確認、修正

コーディングが完了したページをブラウザでご確認いただきます。
ブラウザ上での表示におかしなところがないか、ボタンやメニュー部分などのアニメーションの動作などで異常がないか確認します。

12.TOPページコーディングの確定

修正の要望がある場合は修正に対応後、問題がなければ確定とさせていただきます。
下層ページのコーディングに関してはこの工程で確定したデータを基に作業を進めていくことになります。

13.デザインが確定した下層ページのコーディング

9.の工程でクライアントご確認後、デザインが確定したページに関しては、トップページと同じくコーディングを進めていきます。

14.適宜下層ページのコーディングチェック

下層ページのコーディング後のページをブラウザでご確認いただきます。
8、9、13、14の工程は適宜進めていきます。

15.CMSの組み込み

ここ何年間か企業のWebサイトを制作する時にスタンダードになっているのがCMS(Contents Management System)の導入です。
サイトの新着情報の更新やコンテンツページの変更がブラウザ上でできる仕組みです。
一番メジャーなCMSは無料で使えるWordPress(ワードプレス)ではないかと思います。
このWordPressにコーディングしたデータを基にサイトを構築していきます。

16.ページのデザインを反映したCMSのテストアップ

上記CMSで構築したサイトをテストサーバーにアップロードした状態でご確認いただきます。

17.お問い合わせフォーム等動作チェック

サイトのゴールであるお問い合わせフォームの送信チェック、ECサイトであれば商品の購入チェックを行います。

18.最終確認

これまでの工程でテストアップしたサイトの確認は進めていますが、公開前の最終確認の段階になります。

19.ウェブサイトの公開

テストアップしていたサイトのデータを本番のサーバー環境に移設して公開作業を進めます。

20.公開したウェブサイトのチェック

念のため、公開後のサイトをチェックしていただきます。

21.納品完了

公開したサイトに問題がなければ納品完了となります。
納品完了後に、それまでに気づいていなかった修正箇所が見つかることがあります。
そういった場合は半年間など、こちらのミスで修正が必要な箇所に関しては修正対応を行います。

以上がWebサイトの制作工程です。
こうして見てみると工程の数が多いなと思いましたが、こういった工程を一つずつ完了していくことが重要だったりします。
納期を焦るあまり、確認のプロセスなどを省いてしまうと、思わぬところで問題が勃発することもあります。
面倒でもちゃんと工程を守る、ということは制作者、クライアント双方に大事なことです。

おすすめの記事