Web制作フローが「完璧」にわかる資料や流れのまとめ

TwitterFacebookHatena
  • 公開：2014-1-20
  • 更新：2023-06-04
  • 文章量：7466
  • Design

TL;DR

受注前、制作フロー、安定収益源の保守方法まで「作って終わりにしない」Web 制作の一連の流れを記載しておきます。社内だけじゃなく、これから独立する人、フリーランスの方も必見です。

オリエンテーション／受注前

１．書類テンプレート一式

オリエンテーションにおけるヒアリングでは、後に作成する提案・見積書に必要となる質問を用意しておきます。自社の説明をする時は、せっかちなクライアントさんもいるので、だらだら話さず、ポイントを抑えてわかりやすく説明します。ヒアリングした後は、議事録にメモし社内共有。必要な書類（ヒアリングシート／企画書／提案書／業務委託書／見積書／契約書）など一式まとめてますので、書類系のテンプレートは以下で。

２．見積もりの目安と計算方法

例えば項目を作るとき１．項目／２．内容／３．設計(人日)／４．製造(人日)／５．テスト(人日)／６．金額といった感じで作成したりしますが、もっとシンプルに記述してもよいと思います。人日は決めておくと計算しやすいですね（例：5 人日*3.5=175,000 円）。他に、制作会社ではどれくらいの目安で見積もりを作るのか参考になりそうなサイトをピックアップしました。

サイト設計／受注後

委託契約書などの取り交わしが終わったら（受注が確定した後）、制作にとりかかります。ここから、実際にウェブサイトを構築するときの一連の流れ、制作フローになります。

３．ディレクトリマップ

ディレクトリマップは、サイト全てのページのタイトル・ファイル名・階層を Excel にまとめた一覧表です。どのページでもトップから３クリックで到達できるのが理想なので階層はできれば 3~4 階層までにおさえます。ディレクトリマップを作る前にサイトマップを作成しておくと、スムーズにリスト化することができます。

４．ワイヤーフレーム

次は骨組み（ワイヤーフレーム）の作成。ナビゲーション・コンテンツ・サイドバーなどの共通部分を設計し、トップページ・カテゴリページ・詳細ページを作成。レスポンシブであれば、スマートフォン向け、タブレット向け、PC 向けのパターン作成。その後クライアントやデザイナーに提出し、すり合わせをします。

５．ユーザビリティ／UX 設計

ユーザビリティ（使いやすさ）・UX（心地よさ）を設計。例えば快適にスクロールできるか・上部に戻れるか、ラジオボタンのクリック領域を広げたり、テキスト入力を補助したり「ユーザーの労力を減らし、快適に使えるか」を考えます。企業サイトのブランドイメージを高めたり、通販サイトの購買数を増やすことになり、後の保守に繋がるのでとても大切な設計となります。

デザイン基本設計

６．配色設定

デザイナーは提案内容に応じて、トーン＆マナー（世界観や雰囲気）を統一しつつ、配色・タイポグラフィ・アイコンなど詳細を決定していきます。静かで落ち着いた印象を与えたければ色相やトーンを揃え、大胆でインパクトを与えたければ明度や彩度が大きく離れた色を組み合わせたりと心理作用も考慮します。

色には年代・性別を感じさせることもできます。寒色は男性、暖色は女性、明るい色は子供、落ち着いた色は高齢者など。

７．フォント設計

サイトのコンセプトや製品イメージを訴求したり、精読率（最後まで読まれるか）を上げれるように、フォントサイズ・文字間・行間などをチェックします。またサブタイトル(h1/h2/h3)、文字と画像のベースラインが揃っているか、フォントは統一されているか、可読性を上げるような余白を使っているかなど、ユーザーが読みやすいように配慮し設計します。

８．※デザイニングインブラウザー

今までは、ディレクターがワイヤーフレームを完成させた後は、AD かデザイナーがカンプを作成するという流れが一般的でした。

しかし、レスポンシブ Web デザインでは、様々なスクリーンサイズがあるので、サイズに対応するデザインカンプを作成していては数が無限になり時間と手間がかかりすぎます。（参考：レスポンシブ Web デザインのウェブサイト案件を制作してみて思ったこと）

そこでデザインカンプを作成しない、HTML と CSS をコーディングしながらブラウザー上で直接デザインする方法「Designing in Browser（デザイニングインブラウザー）」という方法があります。以下、表示確認しながら作成し HTML, CSS をダウンロードできるレスポンシブ用モックアップツールとデザイニングインブラウザーのフローです。

９．デザインカンプ

とはいっても、まだまだデザインカンプを使うことが多いと思います。デザインカンプは「完成見本」のことで、企画をどのようにデザインに落とし込んだのか、クライアントへ伝えることが目的となります。

１０．画像パーツ作成

ボタンなどのパーツを画像で作成しなければならないとき、CSS3 を使わないときに見ておきたいサイト。

コーディング

１１．制作仕様書

制作仕様書はサイト制作における技術的要件やルールを記載した資料です。クオリティを一定以上に保つためにも必要です。コーディング・デザインガイドラインなどの規約一覧。制作前に一度目を通します。以下、規約やルール一覧。

１２．コーディング補助

効率的にコーディングを進めるためのツールや知識をおさらい。

CMS 組み込み

１３．WordPress テーマ化

会社にもよりますが、実装方法は WordPress や EC-CUBE が多くなると思います。特徴としては、WordPress はコンテンツ管理・多言語・スマホサイト構築が容易、EC-CUBE は商品登録・カート・決済・顧客管理・paypal ですね。

１４．EC-CUBE 　組み込み

筆者の会社は通販サイトなら EC-CUBE をカスタマイズしています。レスポンシブテーマなども出ているので、デザイン面の工数を減らすこともできます。

動作検証・試験

１５．ブラウザチェック

想定利用デバイス（PC・スマートフォンなど）を決めます。ブラウザごとの CSS3・JavaScript・HTML5 の対応状況と解像度を確認できる一覧です。

＋システム（通販サイト、Web サービスなどの場合）

１６．動的コンテンツ、DB

MySQL のインストールや設定等の初心者向けの説明。公開前に抑えておきたい Apache セキュリティ対策+PHP の基本設定。簡易的な防衛策の一つとして。

１７．サーバー・ドメイン設定

データ量が多いサイトなら、自社サーバーか専用サーバー、VPS になると思います。クライアントさんにはバックアップをどうするか、データセンター管理、監視サービスが利用可能か明確にします。

１８．決済システム導入

EC サイト構築はオンライン決済の手段を選定し決済システムを導入しなければいけません。決済方法の違いや導入方法はクライアントさんに説明し、質問にも答えれるようにしておくべきです。以下は EC-CUBE のオーナーズストアで簡単に利用できる決済サービス比較表とイプシロン設定。もうひとつは開発者の利便性を向上させた決済サービスである WebPay。

１９．SSL 導入

SSL はサーバーとユーザー間の通信を暗号化する機能です。会員制サイト、資料請求などクレジットカード情報の入力を伴う場合に利用します。ヒアリング時にクライアントさんから、どれが良いのか、価格は？と聞かれることもあります。

安く抑えるならRapid-SSL、国産ならグローバルサイン、携帯全機種対応なら日本ベリサイン。有効期限の終了１ヶ月前に契約更新のご案内を送りましょう。

納品

２０．IP 制限・公開

本番環境とは別にテスト環境を用意します。テスト環境に不特定多数の人がアクセスしなければならない場合、IP アドレスやベーシック認証でアクセス制限をかけて安全性を高めます。

２１．運用マニュアル作成

僕が基本的に心がけていることは「画像や管理画面キャプチャ」を多く使い、文字を少なくすることです。理解しやすくすることで、問い合わせを減らします。印刷して読む人もいるので、アドレスに直接打ち込みやすいよう参考 URL は短いものを記載。運用マニュアルはログイン方法、記事作成方法、写真登録、商品登録方法、アナリティクスの用語解説、メールクライアントの設定方法は書いておきたいですね。

保守

毎月の安定した収益源を確保するなら、ここからが重要となります。製作時、UX や IA に気を使うのは保守につなげてクライアントさんの利益も考えるため。保守レポートは現状を報告するのではなく「対策立案」することで価値が出ます。

２２．解析レポート送付

アナリティクスをそのまま PDF にして送付しても、クライアントさんは保守継続してくれません。例えば時間帯 PV を見て 12 時が下降しているなら「前回は 11 時にアクセスが多くなり、12 時に下降しているので主婦層の特徴だと想定しました。主婦向けに告知をしましたが、変化はありませんでした。次回は勤務をしているユーザーを対象にオフィス向けの告知を提案します」など「行動につながる」対策立案を加えます。

２３．SEO 保守

順位を上げるのが難しいようであれば、「先月は何をやったのか」を伝えることがポイントになります。何をやるのか思いつかなければ、ウェブマスターをチェックして、重複タイトル・ディスクリプションの修正をしたり、低品質ページの改善提案をしたり、ソースコードの修正などウェブ屋さんにしかできないことを見つけていくべきでしょう。

２４．広告出稿代行

ヤフーリスティングとグーグルアドワーズをクライアントさんに提案します。見積書にはクライアントさんの広告予算と運用管理費を記載。広告出稿代行の場合は、月ごとに Web 広告レポートを送付します。レポートには「どのキーワードで、どれくらの CV 数があったのか、費用対効果はどれくらいなのか」を明確に記載します。ここでも、来月の施策や立案を書き出します。

２５．サーバー保守

正しいメンテナンス画面の出し方、Apache の設定など。もう一つはサーバエンジニアの運用保守業務をイラストで可愛く解説してあります。

Next.js での制作を依頼する

Web制作フローが「完璧」にわかる資料や流れのまとめ