kigoulab 「新しく会社を作った」「ウェブサイトが古くリニューアルしたい」「サイトをスマートフォンに対応させたい」などウェブサイトを作る理由はさまざまです。大体の流れはわかっているのですけど、詳細にはわからないというのが、web制作の流れ（ワークフロー）ではないでしょうか？ここでは、もう一度、おさらいしてみましょう。
大まかな流れは次の通りです。できるだけ初心者にもわかりやすい言葉を使ったつもりですが、ウェブサイトを作る上ではぜひ覚えておいて欲しい専門用語はあえて括弧書きで説明を加えています。業者によっては、若干異なる事があると思いますが、基本的な流れは以下の20のステップです。
- 競合サイトや参考サイトを調べる
- アクセスログを解析する
- 新しいサイトのペルソナを作る
- 新サイトの他社に対する差別点や強みをまとめる
- 新サイトが伝えたいメッセージを考える
- 新しいサイトのコンセプトをまとめる
- スマホへの対応、CMSの要否などを決める
- サイトの要望をRFP（提案要望書）にまとめる
- 発注する業者を選定する
- ハイレベルサイトマップ(大まかなサイト構成図)を作る
- コンテンツインベントリ（ページ一覧）を作る
- ワイヤーフレーム（画面設計図）を作る
- ビジュアルデザインを行う
- コンテンツを作る
- コーディングを行う
- サーバーの契約と、設定を行う
- CMSテンプレートをつくり、コンテンツを投入する
- 公開
- Googleのクローリング依頼やSNSでの拡散などを行う
- コンテンツの更新を行う（ここからが本番）
まずは現状把握から
1.競合サイトや参考サイトを調べる
同業他社のサイトや、デザインや機能面で参考になるサイトを調べて、新しいサイトのイメージを膨らませます。自社サイトにぜひ含めたい機能などがあれば、メモしておきます。
2.アクセスログを解析する
リニューアルの場合は、アクセスログを分析して、よく見られているページや、離脱が多いページなどを把握しておきましょう。その原因まで分析できればなお良しです。
新しいサイトのコンセプトをまとめる
3.新しいサイトのペルソナを作る
新しいサイトにぜひ訪問して欲しいユーザー像を、ペルソナとしてまとめます。ペルソナの作り方は、別の記事「ウェブサイトに訪れて欲しい人はどんな人？ ペルソナを考えよう」にまとめていますので、参考にしてください。つくったペルソナをつかってカスタマージャニーマップをつくってもいいですね。別の記事「カスタマージャニーマップを学んできた」が参考になります。
4.新サイトの他社に対する差別点や強みをまとめる
新サイトが、どの様なコンテンツを用意することで、他社と差別化し、選んでもらえるようになるのかそれを考えます。自社の強みや、お客様への訴求ポイントをまとめ、メインとなるコンテンツを考えます。
5.新サイトが伝えたいメッセージを考える
１番伝えたいこと、その次に伝えたいことを整理します。１番伝えたいことは、トップページでキャッチコピーとして表現されることが考えられますので、重要です。
6.新しいサイトのコンセプトをまとめる
いままで考えてきたことを整理して、新サイトのコンセプトをまとめます。
- サイトを制作・リニューアルする目的
- 現在のサイトの問題点
- 見て欲しい人（ペルソナ）
- 掲載するコンテンツ
- ウェブサイトへの誘導施策（SEO、オウンドメディア）
といたところでしょうか。後に述べるRFP※にその内容を記載します。
7.スマホへの対応、CMSの要否などを決める
業種によっては、スマホによる閲覧は必須です。またセミナー情報やキャンペーンなど頻繁に更新するのであれば、CMSの導入も検討が必要です。予算とあわせてこれらを機能要件にするかを考えます。そのほか旅館や美容院なら予約システムがほしいといったシステム要件もこの段階できめます。CMSを導入せずに、業者に都度更新を依頼する場合も、それを要件として提示します。
8.サイトの要望をRFP（提案要望書）にまとめる
コンセプトとともに、予算や、スケジュール、スマホサイトの要否や、CMSの要否といった機能要件もふくめて、業者選定ためのRFP(提案要望書)※を作り、オリエンテーションを開催して、参加した複数の業者に渡します。これに対し業者が提案書を作ってきて、それを参考に業者を選定するわけです。RFPの作り方はこのページが詳しいです。あわせて、事前にしらべておいた競合サイト、参考サイトの情報や、アクセスログの内容などもオリエンテーション時に提供できるとよいでしょう。すでに制作会社が紹介などで決まっている場合でもRFPのような資料があると情報が漏れなく伝わります。
9.発注する業者を選定する
RFPを元に上がってきた提案書を参考に、サイトの制作を依頼する業者を選定します。以降の作業は、業者と人三脚で行うことになります。
業者と二人三脚で制作を開始する
10.ハイレベルサイトマップ(大まかなサイト構成図)を作る
新しいサイトで伝えたいことのリストを参考に、大まかなサイト構造をフローチャートの形にまとめます。３階層目ぐらいまででよいでしょう。これでサイトの構成をざっくりとつかむことができます。
11.コンテンツインベントリ（ページ一覧）を作る
ハイレベルサイトマップが概要だとすれば、コンテンツインベントリは、全ページの一覧をエクセル等でまとめたモノです。これによって新サイトのボリュームが分かるようになります。新旧のURLやコンテンツの執筆担当者なども一緒に整理するとよりわかりやすいです。CMSを使う場合、CMSの設計段階で（どのコンテンツがどのブログかなど）も一緒に設計すると事もあります。「エクセルで作るサイト設計書２つのパターン」が参考になります。
12.ワイヤーフレーム（画面設計図）を作る
ワイヤーフレームとは、画面の要素がどのくらいの大きさでどこにレイアウトされるかを、モノクロで簡単に整理した、画面設計図です。これにより、画面に必要な要素が洗い出せます。ワイヤーフレームについては次の記事が詳しいです。「ワイヤーフレームは実寸で作るべし」
13.ビジュアルデザインを行う。
モノクロのワイヤーフレームを元に、色や立体感、写真やイラストなどを加えて、本番同様のデザインを作成してゆきます。これも全画面ではなく、主要画面のみ作成し、あとはパーツとして流用していく形になります。最初にトップページを提示して雰囲気やトーン＆マナーを確認してもらい、OKであれば下部階層のデザインを行うという流れで進めることが多いです。
14.コンテンツを作る
並行して、ウェブサイトに掲載する、文章や写真を制作します。内部で書く部分、外部のライターに依頼する部分などを手分けして制作します。商品写真や、社屋の写真なども、予算にあわせてプロに依頼するのか、自分達で撮影するのかを決め、依頼する場合はその撮影日を決めます。ライターの取材と合わせるとスムーズにすむでしょう。書き上がった文章は、SEOキーワードが含まれているか、表記のゆれがないかなど校正をしていったん業者にあずけます。
業者が専門技術をつかって制作する
15.コーディングを行う
ビジュアルデザインから、画像で表現するところを切り出し、HTML/CSSで実際の画面を制作していきます。あわせて、スライド表現（カルーセルやアコーディオン)といったJavaScriptで実装しないといけない個所もこの段階で開発します。またスマホ対応にレスポンシブウェブデザインを選択した場合もこの段階で実装します。SEOの内部施策もこの段階で対応させます。ブログ等でオウンドメディアを行うのであれば、そのためのコンテンツもためておきましょう。
16.サーバーの契約と、設定を行う
レンタルサーバーなら、サイト規模にあわせたサーバーを借ります。企業向けのCMSを導入する場合は、専用サーバーを借りる場合が多いので、借りたあと、CMSにあわせてサーバーの設定とCMSのインストールを行います。
17.CMSテンプレートをつくり、コンテンツを投入する
CMSの導入を決めた場合、コーディングのあとに、CMS用のタグを入れ込んでテンプレートを開発します。もちろん事前にCMSの基本設計とインストール、設定作業が終わっていることが前提です。完成したら、管理画面から本場用のコンテンツを投入します。また、管理画面からコンテンツを更新する方法を操作マニュアルやレクチャーで学びます。本番コンテンツ投稿の練習をかねてレクチャーで行うこともあります。
18.公開
一通り、新サーバーのデザインやコンテンツを確認して、問題がなければ、新サーバーのパスワードロックをはずす、またはDNSを切り替えて新サーバーを参照するようにすると言った方法で公開となります。
19.Googleの検索依頼やSNSでの拡散などを行う
GoogleのSearch Consoleで、sitemap.xmlの登録等を行い、クローリングされ検索インデックスに登録されるようにします。また会社のSNSの公式アカウントを作成し、FacebookやTwitterでサイトを公開したことを告知します。（事前に作成しておき、フォロアーを増やしておいた方が良いでしょう）名刺やチラシ、DMといった販促物での告知はもちろん、予算によってはリスティング広告（検索連動型広告）に出稿するのもよいでしょう。詳しくは「ウェブサイトに人を呼び込む10個の方法」を参考にして下さい。
20. コンテンツの更新を行う（ここからが本番）
コンテンツの更新を行います。セミナーやキャンペーンのお知らせだけにとどまらず、たとえば、オウンドメディアをつくって、積極的なコンテンツ発信をおこない、ファンの獲得を行っていきます。ウェブサイトは公開してからが本番です。
コンセプト作成までは、業者に依頼しない前提でまとめましたが、最初の段階から業者にはいってもらい、コンサルティングしてもらうという方法もあります。その場合、コンサルティングをしてもらった業者と、制作を担当する業者が同じである場合と、異なる場合が考えられます。どちらも一長一短なので、よく検討してみましょう。
※RFPとは、Request For Proposal（提案依頼書）の略で、発注企業がシステム開発を行う際に必要な要件をまとめ、発注先の開発会社に具体的な提案を依頼するための資料（Web担フォーラムより）
（担当：小山智久）