すごい役立った！Web制作に特化した「提案書」に入れておきたいこと、知識

• 作成：2014/02/3
• 更新：2014/11/01
• ディレクション >

提案書に必ず書いておきたいことを順を追ってメモしました。イメージはブログ用なので簡易的なものとなっています。フローや内容は会社によって違うと思います。

エンジニア速報は Twitter の@commteで配信しています。

もくじ

サイトリニューアルの提案

• 自社分析によるサイトの問題点とその解決策
• 見やすさ、管理しやすさへの主な工夫
• サイトレイアウト案（トップページ）
• フロント画面＋管理画面 イメージ
• 保守＋運用
• セキュリティ面でのご提案
• バックアップと緊急時の対応
• サイトマップ案
• 強み、実績、事例
• スケジュール

サイトリニューアルの提案

企画提案書の流れをメモしておきます。実際に提案するときは、ポイントをおさえて簡潔に説明していきます。必要な部分だけピップアップして使います。

自社分析によるサイトの問題点とその解決策

表紙はクライアントの会社名（株式会社○○御中）、企画提案書の題名、年月（○○年○月○日）、自社名を記載します。

次にサイトリニューアルの場合は、ヒアリング内容をもとに現状分析と問題点を書き出し、それに対しどういった解決策を提案するのかを書き出します。具体的な数値を入れるといいですね。型は以下のサイトを参考に(Webデザインのタネさんのページは上部はリンク切れ、下部はリンクあり)。

どういったサイトにつくり上げるのか明確にわかりやすく記載していきます。例えば情報を探しやすいサイトなのか、デザイン（見やすさ　わかりやすさを重視したデザイン）、システム（専門的な知識を必要とせずに運用できるシステム）、保守（管理者に負担をかけない）など。

• “通る企画書”作りの基本／上司を説得できる企画資料の作り方講座 | Web担当者Forum
• [知識] プレゼンの上手い人がいつも意識している７つのルール - NAVER まとめ
• [知識] ｜伝わるデザイン
• [知識] プレゼンハック ～プレゼン改善のための10個の小技～ | IDEA*IDEA
• [テンプレート] 現状調査（競合他社とのサービス比較）｜【書式の王様】
• [テンプレート] 企画書　見本
• [テンプレート] ネットで見られる提案書のまとめ | Webデザインのタネ
• [統計] マーケティング・企画書に使える統計サイトまとめ - NAVER まとめ
• [統計] 競合他社のウェブサイトはどうなってるんだ？ を簡単に調べる無料ツール3選＋α
• [スライド] キレイな提案書を作るためのデザインの基礎知識

見やすさ、管理しやすさへの主な工夫

上の図はナビゲーションに対しどういった工夫をするか一例を書いてます。「誰に何をどのように」を伝えることができるのか考え整理します。画像とテキストで1ページ内におさめて書きます。ポイントはクライアントにとって、どういったメリットがあるのか、どう利益につながるのかを伝えることだと思います。一例だと以下のような感じです。

• グループ毎にまとめられた探しやすい情報ブロック（可読性・精読率を高め直帰率を下げる）
• サイトストラクチャに従ったページ遷移するためのナビゲーション（回遊率を高め平均PV数を上げる）
• 階層構造とは独立した機能を持つナビゲーション（目的の情報への到達速度を上げ、快適に使えるように）
• 効果的なレコメンドを展開できる情報ナビゲーション（ファーストビューで関連商品の認知率を上げる）
• キーワード候補を動的生成するダイナミックナビゲーション（ページ遷移なしで、カテゴリ一覧を見れる）
• 背景色＋色のコントラストやaltタグなどのアクセシビリティ
• サイト内絞込検索は使いやすいか、分かりやすいか
• スマホ表示では、限られたスペースで必要な情報と機能を配置するデザイン
• 会社概要はプリントアウト可能、常に最新情報

サイトレイアウト案（トップページ）

簡易的ですが上の図はトップページの案。実際はトップページ、詳細ページ、カテゴリページなどのレイアウト案を３パターンほど用意します。実際に作ったワイヤーフレームやデザインカンプを埋め込み、クライアントさんにサイトイメージを理解してもらうためのものです。企画をどのようにデザインに落とし込んだのか、クライアントへ伝えることが目的となります。

• [ツール] ワイヤーフレームを作成するときに役立つツール・素材まとめ - W3Q
• 私がwebサイトのラフデザインを制作する時の流れ │ Design Spice

フロント画面＋管理画面 イメージ

クライアントさんが実際に使う場合、どういったCMSなのか、ログイン画面や管理画面のイメージ図を盛り込みます。管理のしやすさや使い方も気にしている人がいるからです。

集客で悩んでいるようであれば、SEO対策の施策を追加します。ヒアリングで聞いた内容をもとに改善させたいキーワード例、メタの改善例、どれだけ情報を追加することが可能かを明記します。また保守内容、無料サポート期間の内容を記載します。

• [CMS] サイトの更新が便利なCMSまとめ15選 | 株式会社LIG
• [PDF] SEO対策 ご提案資料
• [スライド] SEOで参考になるSlideShareまとめ | nanapi [ナナピ]

保守＋運用

クライアントさんは、納品後に制作会社がどこまでサポートしてくれるのか、月間保守はどのような内容なのか気になってます。無料サポートが切れて、保守を頼まれるクライアントさんもいます。サーバー保守、解析レポート、広告出稿、SEOレポートなど自社で可能なことを書きだし、毎月どういった立案をしていくのか、対策方針を立てれるのか、PDCA運営をサポートできることをアピールします。

クライアントさんは、サイトリニューアルした後にどれだけ利益が出ているのか、効果的な集客等を考えるので、ここに一番力をいれます。

• [リスティング] 広告の売上げをあげるために絶対に読むべき記事 | アドリス
• [リスティング] 成功する広告の書き方 – 21の法則 | グーグル アドワーズ ラボ
• [サーバ] エンジニアが「開発力」を持つ意味 - Gosuke Miyashita
• [アナリティクス] 得する設定と使い方まとめ３１
• [アクセス解析] を使ってサイトの課題を発見する12のステップ - リアルアクセス解析

セキュリティ面でのご提案

実現可能であれば絶対に記載しておきたい部分です。暗号化通信処理（https）の利用、個人情報の取り扱い、ベリサイン証明書、ガンプラー対策、DoS攻撃対策、アップデートなどが可能であることを記載します。

問い合わせフォームや管理画面にhttpsを利用するのか、ウィルス対策でFTPによるサーバーアクセス禁止にするのか、脆弱性への早期対策が可能であるなど具体的に明記します。

• SSL暗号化通信を必ず導入しよう｜ネットでお仕事.com
• プライバシーマーク制度
• EV SSL証明書とは - ベリサイン
• これだけはやっておきたいGumblar(ガンブラー)対策
• DDoS攻撃の軽減対策

バックアップと緊急時の対応

ページ＋DBバックアップ先と方法、サイクル、保存期間。データ復旧方法、HP稼働確認の実施など、データ復旧に対する問い合わせは日中いつでも対応できる体制だと明記します。

• バックアップとリカバリ―「もしも」に備え，転んでも泣かない子になる技術評論社
• データベースのバックアップ - WordPress Codex 日本語版
• EC-CUBEのバックアップ機能とリストア - [EC-CUBE/PHP] ぺんたん info

サイトマップ案

新規サイトの場合は通常のサイトマップ、リニューアルの場合は現行と新サイトマップを比較できるような提案内容に。

• [テンプレート] WEBサイトマップ01（Orange）｜テンプレート

強み、実績、事例

強み、実績（例：様々なCMS、EC-CUBE、XOOPS、OpenPNEなどの開発実績、他社が行えない保守）どれだけ構築事例があるのか。

構築事例はURLとサイトキャプチャを使い見せ、使用CMS、CVの成果などを書き足します。

スケジュール

制作の一連の流れ（例：ご提案、企画、画面構成作成、UIデザイン作成、コーディング、画像作成、アップ、ご確認、サイト公開）と制作期間をエクセルにまとます。

最後のページでは会社概要や問い合わせ先とロゴを入れたら完成です。

• WEBディレクターの為のEXCEL術（1）作業スケジュール｜designaholic -Creative Column-
• 進捗管理が苦手な人におすすめしたい厳選フリーソフト・ツール - NAVER まとめ