売上につながるWeb制作会社サイトの新規構築

2008年10月25日 Ver1.0スズキトモオ@t0805025

AgileDesign株式会社 御中

目次

2

１．与件整理

２．調査・分析２．１ 統計情報

２．２ 中小企業とWeb制作会社の関係性

２．３ Web制作会社に求められるもの

２．４ 競合サイトリサーチ

３．目的・目標

４．ターゲット

５．コンセプト５．１ Webビジネスに対するコンセプト

５．２ サイトコンセプト

５．３ 戦略

５．４ その他、サイトに掲載すべき事項

６．コンテンツコンセプト６．１ キラーコンテンツ

６．２ その他コンテンツの特徴

７．デザインコンセプト

８．サイトマップ９．ワイヤーフレーム１０．プロトデザイン１１．概算スケジュール１２．概算見積もり１３．仕様書

１．与件整理

新たにWebサイト制作ビジネスを始めるAgileDesign株式会社様のWebサイトを新規構築する。

AgileDesign様のWeb制作ビジネス参入の背景

・2005年にシステムの運用、受託開発会社として起業

（主な取引先は起業前の関係、関連会社）

・現在まで堅調に推移

・ビジネス拡大の柱として、Webサイト制作ビジネスに参入

3

２．調査・分析

２．１ 統計情報２．１．１ Web制作会社のクライアント

１．日本の中小企業(個人事業者+法人)数は、約469万

２．わが国企業の数に占める中小企業の割合は、99.7％

３．わが国企業の雇用に占める割合は、66.9％

（出典：中小企業税（平成17年度版）：中小企業庁）

→

２．１．２ 中小企業のホームページ開設状況（2007年）１．インターネット導入済み：94.6%２．ホームページ開設済み：71.8%（1999年は46.6%、2003年は70.3%）

（出典：中小企業のIT活用に関する調査：商工中金調査部）

→

4

クライアントのほとんどが中小企業！

増加傾向は停止している！

２．調査・分析

２．１ 統計情報２．１．３ Webサイトの予算有無

・予算をとっている企業は全体の45.3%・ここ数年変化なし

・大企業ほど高い

出典：インターネット白書2006

5

２．調査・分析

２．１ 統計情報

２．１．４ Webサイトの年間コスト

・50人～499人では「50万円未満」、500人以上では「100万未満」が主流

・（2005年と比較してコストは抑制されている）

出典：インターネット白書2006

6

２．調査・分析

２．１ 統計情報２．１．５ Webサイトに期待する効果

・トップは「宣伝・広告効果、ブランド認知」が67.5%・「売上に対する直接効果」が上昇

→さまざまな効果を広く期待するより、「売上」という明確な目標に

焦点を絞る企業が増えている。

出典：インターネット白書2006

7

２．調査・分析

２．１ 統計情報

２．１．６ 費用対効果を期待して今後取り組みたい技術やサービス

・「アクセス数向上・集客のための広告対策、ネット上の露出アップ」が58%・次いで「ユーザビリティやアクセシビリティ、ウェブデザインの向上」が46.7%・最も多く伸びたのは3位の「アクセス解析ツールの導入」

出典：インターネット白書2006

8

２．調査・分析

２．１ 統計情報２．１．７ 効果が高いと思うアクセス誘導対策

・「SEO」がトップで39.5%（伸び率も高い）

・検索連動型広告は伸びていないが14%を維持

→現状では、検索エンジン対策が有効と認識されている。9

出典：インターネット白書2006

２．調査・分析

２．１ 統計情報

２．１．８ ITの活用状況（Webに係る項目抜粋）

・HPは71.8%が開設済み（12%が検討中、16.2%が予定なし）

・「宣伝・広告効果」や、「売上に対する直接効果」に対する施策は進んでいない

10

出典：中小企業のIT活用に関する調査（2007年）：商工中金調査部

85.4

22.8

17.3

71.8

7.6

18

13.8

12

7.1

59.2

68.9

16.2

（参考：財務・会計）

HP上での販売・注文の受付

インターネットへの広告出稿

HP

導入・開設済み

検討中

予定なし

２．調査・分析

２．１ 統計情報

２．１．９ 導入済のITの効果（Webに係る項目抜粋）

・他の項目（財務会計、受注販売管理等）に比べ、

Webサイトに係る項目は総じて「効果は高くはない」と認識されている。

11

出典：中小企業のIT活用に関する調査（2007年）：商工中金調査部

26.3 23.6 18.6

63.342.6 35.3 48.4

34.431.1 41 332.3

0%10%20%30%40%50%60%70%80%90%

100%

HP

HP上

での

販売

・

注文

の受

付

イン

ター

ネッ

トへ

の

広告

出稿

（参

考：財

務・会

計）

効果小

効果中

効果大

２．調査・分析

２．１ 統計情報

２．１．１０ IT化の障害や制約

・「費用対効果」、「投資費用」、「人材の不足」を挙げる企業が多い

12

出典：中小企業のIT活用に関する調査（2007年）：商工中金調査部

40.1

32.4 32.1 32.630.4

15.6

11.7

24.6

8.4 8.65.4

1.2

39.237.5 36.5

30

23.8

15.212.9

10.4 9.3 8.8 7.75.3

2.2

05

1015202530354045

費用

対効

果

投資

費用

人材

の不

足

社内

体制

が不

十分

セキ

ュリ

ティ

ー

効果

が不

明

技術

進歩

が速

すぎ

る

具体

的な

活用

方法

が不

明

情報

量が

多す

ぎる

経営

者の

ITへ

の理

解不

足

活用

方法

に互

換性

がな

く非

効率

資金

面の

確保

（調

達）

その

他

2003/82007/11

２．調査・分析

２．１ 統計情報２．１．１１ 統計情報まとめ

①クライアントのほとんどが中小企業

②ホームページ開設率70%③「宣伝、広告、ブランド認知」および「売上に対する直接効果」に期待

④今後は

「広告対策（SEO）」「ユーザビリティ、デザイン向上」「アクセス解析」

に力を入れたいが進んでいない

⑤進まない理由は

「費用対効果」「投資費用」「人材不足」

で、Webサイトの効果は大きくはないと認識されている

13

２．調査・分析

２．２ 中小企業とWeb制作会社の関係性

２．２．１ Web制作会社からみた中小企業

①単価が安い

②Web標準技術やWebアクセシビリティなどの最新動向への反応が薄い

③そもそもインターネットやインターネットマーケティングへの理解自体が低い

14

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

２．調査・分析

２．２ 中小企業とWeb制作会社の関係性

２．２．２ 中小企業からみたWeb制作会社

①依頼して制作したサイトからはさっぱり成果が上がらない。

②リニューアルを依頼したらさっぱり売れなくなった。

③事業の事情を知らない外部の業者に任せるわけにはいかない。

④高度なデザインや、プログラミングなど、複雑なことだけ部分的に

依頼したい。

⑤単純な連続作業だけ外部に委託したい。

15

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

２．調査・分析

２．２ 中小企業とWeb制作会社の関係性

２．２．３ 技術の進歩によるWebサイト制作事情 1/2CMS（Content Management System）を利用してサイト制作の大部分を自動化するツールが登場

（ドリコムCMS、Color Me Shop!pro、イーストアー・ショップサーブ）

16

２．調査・分析

２．２ 中小企業とWeb制作会社の関係性

２．２．３ 技術の進歩によるWebサイト制作事情 2/2セールスのシナリオ、商品、写真、コピーを用意すれば、デザインがなくても、HTMLが書けなくても、JavaScriptやCGIを知らなくても、何の問題もなく「成果の上がる」サイトを制作・運営することができる。

17

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

今後は会社の生き残りをかけて、上記ツールを活用する中小企業が主流になってくると考えられる。

２．調査・分析

２．２ 中小企業とWeb制作会社の関係性

２．２．４ 関係性まとめ

クライアントのほとんどが中小企業であるにも関わらず、関係性および需給関係は良好とはいえない。

技術の進歩により、Web制作会社に頼らなくてもWebサイトの制作・運用が可能になってきた。

18

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

考えを改め、新たな戦略であたる必要がある。

２．調査・分析

２．３ Web制作会社に求められるもの

２．３．１ “誰”に“何”を期待されているのか 1/3誰に？

→中小企業（２．１統計情報より）

何を？

→Web標準技術？・・・×

→Webアクセシビリティ？・・・×

→実装技術？・・・×

→デザイン？・・・△

→作れるものを作っても売れない！

19

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

２．調査・分析

２．３ Web制作会社に求められるもの

２．３．１ “誰”に“何”を期待されているのか 2/3

中小企業が求めていることは

→

→

20

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

売上を上げ、利益を確保し、生き残ること

Web制作会社は、それに貢献できるだけのサービスを費用対効果に見合うレベルで提供することが必要

２．調査・分析２．３ Web制作会社に求められるもの

２．３．１ “誰”に“何”を期待されているのか 3/3

たとえば・・・

■自分たちでやるには技術的に難しい部分をアウトソースしたい

（プログラムやデザインやマークアップ）

■自分たちでやるには手間がかかりすぎる作業を安く早く

（データ入力やスキャニング）

■Webを使った展開は将来段階的に導入するので、

今は適当にかっこいいサイトを制作してほしい

■教育やサポートサイトの制作や運営でつまづいたときにサポートしてほしい

■相談役やコンサルティング従来のビジネスモデルをWeb向けに再構築する際に相談にのってほしい

定期的にミーティングに参加してほしい（新しいアイディアをもとめて）

アイディアをWebで形にしていくための企画・進行を手伝ってほしい

21

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

スキルの部分的活用

手間をかけずおまかせで

人的資源のサポート

２．調査・分析

２．３ Web制作会社に求められるもの２．３．２ “求められるもの”まとめ

“誰”に“何”を期待されているのか？

22

参考：住太陽（スミモトハル）（フリーのWebプロデューサー）ブログ

中小企業

実際に顧客たる人々の生の声を聞き、ニーズを受け止めそれに対応すること。

ケースバイケースであるが、要は・・・

２．調査・分析

２．４ 競合サイトリサーチサイト名：ホームページ制作プロ

URL：http://www.tarrows.jp/

コンテンツ内容評価

□悩みの解決をうたい文句に

□サービス一覧

ホームページ制作

・制作パック

・オプション（一部分の提供）

※制作の流れ、期間、金額が分かりやすい

システム開発

コンサルティング

□制作実績

□事例紹介（成功事例、インタビュー）

□コラム（啓蒙、ブランディングの強化）

デザイン評価

落ち着いた深みのある青系を中心とした配色

洗練された、そつのないイメージ

グレイッシュなコンビネーションによりシンプルな表現

23

２．調査・分析

２．４ 競合サイトリサーチサイト名：ティファナ・ドットコム

URL:：http://www.tifana.com/

コンテンツ内容評価

□売上UPをうたい文句に

□課題に対する解決策（ソリューション）を提案し、お問合わせに

誘導

□制作実績

□成功事例（リニューアル前、目標・戦略、成果をアピール）

□採用情報がフルFlash（採用情報に力を入れている印象）

デザイン評価

各ページの背景に空、海、植物、大地を使用

上記イメージで彩度を抑えた緑と青、茶色、赤、および無彩色

を使用している（広範囲の色相を使用）

→全方位網羅？･･･統一感を失っている印象。 CIが分かりにくい。

24

３．目的・目標

AgileDesign様のWebサイト新規構築の目的と目標

３．１ 目的クライアントのニーズをキャッチし、売上につながるWebサイトを構築すること

３．２ 目標2年目の年間売上２１６０万円

（1年目は地道なブランド認知活動）

根拠：社員3名。1人月＝60万円として、月間売り上げ180万円

180万円／月×12か月＝2160万円

25

４．ターゲット中小企業の社長である、２名のペルソナを想定する。

猪俣 進（イノマタ ススム）社長既に自社Webサイトを内製・運用している。

社員数１００名（Webサイトの運用・管理費：50万～100万円）

試行錯誤しながら事業の一部としてWebでの展開に活路を見出そうと取り組んでいる。

働き盛りの４５歳

Webに係るスキルは独学であるがそこそこもっている。

堅手 実（カタイデ ミノル）社長自社Webサイトを持っていない。

オフラインでの事業を堅調に維持している。

Webを使った展開は将来段階的に導入したい。

適当にかっこいいサイトを作ってほしい。

腕一本でここまできました５５歳

インターネットリテラシーは低い

26

５．コンセプト５．１ Webビジネスに対するコンセプト

実際に顧客たる人々の生の声を聞き、ニーズを受け止め、それに対応する。

５．２ サイトコンセプト中小企業の売上UPに貢献するWebアプローチに関するブレーンです。

御社の 売上増進部 Webソリューション課 です。

LET’S SURVIVE５．３ 戦略

①明確なターゲティング・Webリテラシーは高いが、Webサイトを活用した売上UPに苦労している中小企業の社長

・Webリテラシーは低い（無い）が、堅調に事業を維持している中小企業の社長

②明確なカンパニーブランディング・ターゲット（見込み客）が必要なものを提供できるというイメージを伝える。

→コンテンツをわかりやすく展開

・ターゲット（見込み客）に対し、パートナーシップを結べる誠実・有能な会社であるというイメージを伝える。

→象徴的なビジュアル（オフィスの雰囲気、過去の実績、時計（時間の正確さ）、社長・社員）と、色彩の心理効果を利用し、ターゲット（見込み客）の心を動かす。

27

５．コンセプト５．４ その他、サイトに掲載すべき事項

５．４．１ Webサイト制作マニフェスト

■価格と品質の妥当性をお約束します。

（費用対効果に照らしてそのサイトに最適な技術とデザインで実装します。）

■やりたいことにピタリとはまります。（スキルの切り売り可能です。）

■誠実に対応します。（まずはお悩みお聞かせ下さい。）

■返品に応じます。

５．４．２ Webサイト制作手法

■アジャイル開発の思想をWebデザインに取り込む。

■良いものを素早く無駄なく作る。

□プロセスやツールより人と人同士の相互作用を重視します。

□包括的なドキュメントより目の前に表示されるWebサイトを重視します。

□契約上の交渉よりも顧客との協調を重視します。

□計画に従うことよりも変化に対応することを重視します。

５．４．３ 返却に応じます

■納品後、一定の効果測定期間をおいて、目的を達成することができなかった場合、協議のうえ、返却に応じる施策（ビジネスフロー）を実施する。（詳細はリリースまでに調整のうえ実施）

28

６．コンテンツコンセプト

29

６．１ キラーコンテンツ

タイトル：

コンテンツ内容：以下のフロー参照

データベース

既存のWebサイトを整理・分類

登録・管理用のフォーム作成

「こんなサイトを作りたい」／【①データ検索】と【②イメージ検索】

次ページへつづく

６．コンテンツコンセプト

30

データベース検索

カラーは・・・コンテンツ内容は・・・テイストは･･･

【こんなサイトを作りたい／①データ検索】

○○○○□□□□

○○○○□□□□

検索条件を入力して検索

検索結果を表示

お問合わせ

お問合わせフォーム

問合せ

次ページへつづく

６．コンテンツコンセプト

31

データベース

【こんなサイトを作りたい／②イメージ検索】

○○○○□□□□

お問合わせ

お問合わせフォーム

問合せ

似たWebデザイン

イメージマップ

オンマウスで拡大表示

X軸：彩度、Y軸：明度（仮）

データに基づきマッピング

６．コンテンツコンセプト

32

６．２ その他の特徴および留意点

①コンテンツをわかりやすく、シンプルに展開する

②「HTML(CSS）」と「Flash」のいいところをとる（ハイブリッド）わかりやすさ ・・・ 従来のカチッとHTML ＞ Flashサイト

細部のクオリティ・小憎らしさ ・・・ 従来のカチッとHTML ＜ Flashサイト

→両方のいいところをとる！

③常に“全数” と“現在地” が分かるようにする

④全ページのフッターにサイトマップを表示する

⑤ページ数を増やさない（やたらとページ遷移させない）

７．デザインコンセプト

33

トーン＆マナー、雰囲気、象徴的なイメージ

象徴的なビジュアル

サバイブモチーフ（キャラクター）、サバイブを連想させる写真・イラスト、等

奥行きのある写真・イラストを使用する

白ベースで、グレイ、オレンジ（赤）をサイトカラーとする

心理効果：「温かみ」「仲間意識」「自信」をイメージ

半透明、グラデーションを意識光、鼓動を使用する

統一トーンでアイコンをデザインする

８．サイトマップ

34

TOPページ サービス紹介

制作実績

会社概要

お問合わせ

価格表

９．ワイヤーフレーム

35

９．１ TOPページ ロゴ お問合わせ

グローバルナビ

イメージ

コンテンツ抜粋１

コンテンツ抜粋２

コンテンツ抜粋３

フッター（含サイトマップ）

ローカルナビ

９．ワイヤーフレーム

36

９．２ データ検索／

検索結果画面

ロゴ お問合わせ

グローバルナビ

フッター（含サイトマップ）

ローカルナビ

検索結果 ○件中 ○～○件目を表示

表示順変更 [新着順] [参照数順]

検索結果

<< < 1 2 3 > >>・・・

パン屑リスト＞○○＞検索結果

サムネイル

・URL：http://～～

・登録日

・このサイトに似たサイト

・参照数：○

検索結果 検索結果

検索結果 検索結果 検索結果

■データ検索／検索結果画面

LightBox的に表示

■このイメージで問い合わせ

９．ワイヤーフレーム

37

９．３ イメージ検索／

検索結果画面

ロゴ お問合わせ

グローバルナビ

フッター（含サイトマップ）

ローカルナビ

<< < 1 2 3 > >>

パン屑リスト＞○○＞検索結果

■イメージ検索／検索結果画面

選択イメージ

・URL：http://～～

・登録日

・参照数：○

・コメント

・プロパティ

LightBox的に表示

■このイメージで問い合わせ

１０．プロトデザイン

38

デザインの特徴

コンテンツとキービジュアルの一致

（ギャラリーを兼ねたキービジュアル）

（キービジュアルからコンテンツへ誘導）

明確な（わかりやすい）ゾーンニング

色相の統一

強い（明確な）メッセージ

ユーモアのエッセンス

（ユーザーへの心遣い）

１１．概算スケジュール

39

2008年

10月

要件定義

納品

調査・分析

要件定義

素材収集

基本デザイン デザイン

HTMLコーディ

ング

Flash制作

基本設計

11月 12月

DB／PG設計

コピー

オリエン10/11

企画発表10/25

個別ﾁｪｯｸ11/15

個別ﾁｪｯｸ12/6

作品提出12/13

発表会12/20

PG制作

PGテスト／修正

技術仕様実現性検討※

※FlashとPHP（フレームワーク）とDBのデータ連携

テスト／修正

１２．概算見積

40

別紙ご参照

１３．仕様書

41

１３．１ 対応環境対象OS・ブラウザ：Windows XP IE6、IE7およびFireｆox3対象解像度：XGA（1024x768px）対象接続環境：ADSL1.5M

１３．２ 文書仕様準拠するHTMLのバージョンとDoctype：XHTML 1.0 Transitional文字コード：UTF-8

１３．３ 表示仕様レイアウト方法：HTML（CSS）ベースで、必要に応じFLASHを配置文字のサイズとその制御：基準文字サイズ12pxページ幅と配置：＜幅＞950px, ＜配置＞センター寄せフッタの位置：（コンテンツ下辺に追随）ファーストビュー：700px使用カラー： （#ffffff, #c2c2c2, #ff7815, #e60012）

１３．仕様書

42

１３．４ ポリシーSEOポリシー：Web標準を意識した制作を行う。

アクセシビリティーポリシー：Web標準を意識した文書構造による制作を行う。

１３．５ システム関係ActionScriptのバージョン：ActionScript2.0

PHPのバージョン：PHP5.2.6

PHPのフレームワーク：Ethna 2.5.0 preview2

DBMS：MySQL 4.0.27

１３．５ その他パス：相対パス指定とする

Flashバージョン：Flashプレーヤーのバージョンは9を対象とする

印刷：特に考慮しない

概算見積書 見積書発行日：2008年10月25日見積No.：000XXXXXX

○○株式会社　御中

CODE： 株式会社○○タイトル： Web制作会社サイトの新規制作 Ｗｅｂ事業部

納期： 2008年12月13日 〒181-XXXX見積有効期間： 当見積提出後30日 東京都三鷹市○○1-2-3

支払条件： 別途ご相談 TEL：XXXX-XX-XXXX／E-MAIL：XXXX@XXXX.XX担当／鈴木

合計金額（税込み） ¥1,567,000

■業務範囲・Web制作会社サイト新規制作■業務内容・調査・分析、企画立案・要件定義、基本設計・デザイン開発・プログラム開発・プロジェクト管理・納品（納品後の運用および検証は含まず）

1 サイト制作1-1 調査・分析／企画立案 数量 単位 単価 金額 備考

1-1-1 プロデューサー 1.0 人日 ¥45,000 ¥45,0001-1-2 ディレクター 2.0 人日 ¥45,000 ¥90,000

小計 ¥135,0001-2 要件定義／基本設計 数量 単位 単価 金額 備考

1-2-1 ディレクター 1.5 人日 ¥45,000 ¥67,5001-2-2 インフォメーションアーキテクト 1.5 人日 ¥45,000 ¥67,5001-2-3 ＳＥ 1.5 人日 ¥45,000 ¥67,500

小計 ¥202,5001-3 デザイン開発 数量 単位 単価 金額 備考

1-3-1 アートディレクター 3.0 人日 ¥45,000 ¥135,0001-3-2 デザイナー 5.0 人日 ¥30,000 ¥150,0001-3-3 ダHTMLコーダー 2.0 人日 ¥30,000 ¥60,0001-3-4 フラッシャー 5.0 人日 ¥30,000 ¥150,000

小計 ¥495,0001-4 プログラム開発 数量 単位 単価 金額 備考

1-4-1 ＳＥ 3.0 人日 ¥45,000 ¥135,0001-4-2 ＤＢエンジニア 2.0 人日 ¥30,000 ¥60,000 DB(MySQL)テーブル設計、構築1-4-3 プログラマー 8.0 人日 ¥30,000 ¥240,000 PHP,ActionScript

小計 ¥435,0001-5 テスト・デバッグ・納品 数量 単位 単価 金額 備考

1-5-1 ディレクター 1.0 人日 ¥30,000 ¥30,0001-5-2 ＳＥ 2.0 人日 ¥30,000 ¥60,000

小計 ¥90,000合計 ¥1,357,500

備考・ 詳細仕様が決まりましたら、再度御見積もりいたします。 開発費合計 ¥1,357,500・ 元原稿は、貴社よりご入稿いただくことを前提としております。 特別割引 ¥790・ 写真撮影、イラスト制作費、原稿作成料は含まれておりません。 営業管理費（10%） ¥135,671・ アカウントおよびホスティングは、現在貴社にてご使用中のものを利用する 小計 ¥1,492,381・ 前提です。 消費税（5%） ¥74,619納品物については、下記を想定しております。 合計 ¥1,567,000

・ □ ドキュメント・ 企画書（含サイトマップ、ワイヤーフレーム）、仕様書

□ データ・ データ一式（psdファイル、aiファイル、flaファイルを除く）

・ 詳細設計書、ガイドラインが必要な場合は別途お見積りいたします。

作業期間： 2008/10/11～2008/12/14