Webサイトを製作するときの全体の流れと,それぞれやるべきことなどの概要をメモする.
企画:特に目的の明確化
Webサイトの企画をする.
特に「このWebサイト何を目的にするか」をしっかり明確化する.それが決まっていないと,やるべきことを明確化できない.
Webサイトの目的の例
- 自社の企業情報を発信したい
- 自社の製品情報を発信したい
- 自社の商品を購入してもらいたい
- お役立ち情報をこつこつ発信したい
公開したい情報の明確化
目的を達成するために必要な情報は何か,を明確化する.
必要な情報の例
- 企業トップページ:企業/社長メッセージ,最新情報,各種ページへのリンク等
- 企業情報・企業理念
- 業務内容紹介
- 製品紹介
- 施設紹介
- お知らせ・ブログ
- 問い合わせフォーム
- 商品購入ページ
- アクセス
- 求人情報
また,登録しているお客様限定の情報発信が必要な場合には,会員制サイトの構築が必要.
ラフなWebサイト構成の作成
目的や載せる情報をだいたい洗い出せたら,Webサイトの全体構成やWebページの構成を作成する.
- Webサイト全体で必要となるページを列挙する.ページに上下の階層構造がある場合は,それがわかるように記述する(サイトマップの作成).
- Webページそれぞれの概要構成を検討する.「F型」や「Z型」の見せ方がある.えんぴつ書きやホワイトボードのようなアナログツールを活用して,関係メンバーで集まり,構成を検討する.枠書き&その中身のコンテンツ,のようなラフな構成で検討を進める.
- この段階から「Webデザイナー」さんに参加してもらえると効果的.
- 「キャッチ―なメッセージ(キャッチコピー)」が必要な場合には,「ライター」さんに依頼することも検討する
詳細なデザインの作成
それぞれのWebページの詳細なデザイン作成を進める.「ぱっと見てWebページ」とわかるレベルのデザインを「デザインカンプ」と呼ぶ.
- デザイン性を高くするならWebデザイナーさんにデザインを依頼する.
- デザイン性を重視しない場合はデザイナーさんなしで「コーダー」さんに直接依頼も可能.ただし,「このような感じのサイト」という目星のサイトがあると進めやすい.
ページ遷移,アニメーション,その他デザインカンプ(静止画)では明確化できない動作に関しては,別途「アクション定義書」を作成して,「ここの部分をクリックするとこうなる」ようなアクションを明記する.
開発
デザインカンプができたらコーダーさんに開発を依頼する.
デザインが凝っている場合や,アクションが凝っている場合は,開発期間が長くなり,費用は上昇する.
テスト
開発が完了したら,発注者側でテストを実施し,希望どおり動作しているか確認する.
- あらかじめ,デザインカンプ+アクション定義を作成した際に,テスト項目は定義しておくのが望ましい.後出しじゃんけんはNG.テストはコーダーさんも実施するため,テスト内容は事前に握っておくのがベスト.テスト内容を握っていない場合は,発注者責任となるので注意.
- 「テスト環境」はあらかじめ誰が準備するか確認しておく.テスト環境の準備にも費用がかかるため.
- テストの正確性を上げる必要がある場合には,さまざまなOS(Windows/Mac/iPhone/iPad/Android),さまざまなブラウザ(Chrome/Firefox/Safari),さまざまな画面サイズ(例:iPhone Pro Max ~ iPhone SE)に対して,網羅的にテストを実施する.正確性を上げると,時間と費用を要するが,不具合の少ないWebサイトにつながる.
- テストを実施して問題があれば,コーダーさんに修正を依頼する.場合によっては,デザインの修正が必要になることがある.
サーバーとドメインの契約
Webサイトを公開するためには通常,「Webサーバー」と「ドメイン」の準備が必要.
- Webサーバーとして「レンタルサーバー」の契約が必要であり,同時に「ドメイン」の取得・契約が必要.
- レンタルサーバーの概算費用:年間数千円~数万円.大規模サイトになれば,数十万~数百万の強力なサーバーが必要になることもある.
- ドメインの取得:年間数千円
- よくわからない場合は,契約を業者に委託するとよい.XServerがおすすめ.
Webサイトの公開
できあがったWebサイトを一般公開する.コーダーさんのお仕事の場合が多い.
Google検索に表示されるようにしたい場合は,Googleに「クロールリクエスト」を出す.
保守運用
Webサイトは公開後も継続的にメンテナンスをしていく必要がある.また,乗っ取りなどの不正行為や脆弱性発見などへの対策も適宜実施していくことが重要.
- 業者に保守運用を委託する場合は,依頼したいことを明確化して契約する.ページの追加・修正・削除をやるのか,アップデートパッチの適用をやるのか,脆弱性監視をするのか,乗っ取りなどの緊急時に24時間体制で対応するのか,など.やることが増えれば費用も増す.
- 体制図の作成:責任者,担当者,外注業者など,それぞれの役割や連絡先を書き出した体制図を作成する.特に緊急時にはどうするか,を明記しておく.
- 定常時の作業内容:担当者が日々実施する作業.外注業者に依頼する作業も含まれる.作業内容と手順を記載しておく.
- よくある作業:記事の作成・公開・修正・削除,アップデートパッチ適用,バックアップ
- 緊急時の対応手順:深刻な脆弱性情報が公開される,Webサイトが乗っ取られるなどの緊急時に,どのように対応するかを明記しておく.重要性の高いWebサイトの場合には,365日24時間の監視体制を外部に委託することがある.
注意点
- 発注後に発注者側から「追加要望」「修正要望」をするのはルール違反.追加要望の場合は費用がかかることを想定する.修正要望の場合は,費用がかからないこともあるが,通常は費用がかかるものと想定する.
- 一方,製作者側はWeb技術に長けているので,Webで一般的に扱われている技術に関しては,発注者側から要望がなくても盛り込むことを想定する必要がある.要否については事前に発注者側に確認して記録しておく(事後のもめごと防止).たとえば,セキュリティ設定や検索順位対応(SEO)などはよくある話.
マーケティングなどでの効果測定
広告の効果を計測するなど,マーケティング戦略をたてる場合は,「マーケター」の協力を要請することがある.Google広告をうってその結果Webサイトにどれくらいの流入があったのか,どれくらい問い合わせにつながったのか,購入行動につながったのか.このような解析をする.
解析結果を踏まえ,あらたな戦略をうちだし,再度効果測定を行うのが通常.