タンデムワープ社のウェブ制作方針と進め方 · システムデザイン...

12
Tandemwarp, one stop! the creative agency 有限会社タンデムワープ社 東京都八王子市子安町 4-4-11 シティ子安 2F tel.042-628-7172 fax.042-628-7173 http://www.t-warp.co.jp/ タンデムワープ社のウェブ制作方針と進め方 1:ウェブ制作における“作業 " とは 1-1:パートナー選びのために〜ウェブサイト制作の作業範囲 …………………………………………………2 1-2:タンデムワープ社はどんなパートナーになれるのか? ……………………………………………………3 2:タンデムワープ社がご提供するサービス 2-1:制作の進め方ダイジェスト ……………………………………………………………………………………4 2-2:サイト企画 ………………………………………………………………………………………………………5 2-3:サイト企画 番外編 商圏キーワードと戦略キーワード ……………………………………………………6 2-4:サイト企画後の制作フロー 〜デザイン決定まで …………………………………………………………7 2-5:サイト企画後の制作フロー 〜完成まで ……………………………………………………………………8 2-6:サイト企画後の制作フロー 番外編 flash とウェブライティング…………………………………………9 3:タンデムワープ社について 3-1:こんなメンバーです ………………………………………………………………………………………… 10 3-2:会社概要と主な実績 ………………………………………………………………………………………… 11 3-3:制作実績ショーケース ……………………………………………………………………………………… 12

Upload: others

Post on 09-Jul-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

Tandemwarp, one stop! the creative agency

有限会社タンデムワープ社東京都八王子市子安町 4-4-11  シティ子安 2Ftel.042-628-7172  fax.042-628-7173http://www.t-warp.co.jp/

タンデムワープ社のウェブ制作方針と進め方

1:ウェブ制作における“作業 "とは 1-1:パートナー選びのために〜ウェブサイト制作の作業範囲 …………………………………………………2 1-2:タンデムワープ社はどんなパートナーになれるのか? ……………………………………………………3

2:タンデムワープ社がご提供するサービス 2-1:制作の進め方ダイジェスト ……………………………………………………………………………………4 2-2:サイト企画 ………………………………………………………………………………………………………5 2-3:サイト企画番外編 商圏キーワードと戦略キーワード……………………………………………………6 2-4:サイト企画後の制作フロー 〜デザイン決定まで …………………………………………………………7 2-5:サイト企画後の制作フロー 〜完成まで ……………………………………………………………………8 2-6:サイト企画後の制作フロー番外編 flash とウェブライティング…………………………………………9

3:タンデムワープ社について 3-1:こんなメンバーです ………………………………………………………………………………………… 10 3-2:会社概要と主な実績 ………………………………………………………………………………………… 11 3-3:制作実績ショーケース ……………………………………………………………………………………… 12

Page 2: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

2タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency1.ウェブ制作における“作業"とは

1-1:パートナー選びのために〜ウェブサイト制作の作業範囲

マーケティング

サイトプロモーション

戦略企画

コンテンツ企画

原稿作成

ページデザイン

システムデザイン

HTMLコーディング

システムプログラミング

運用

評価

修正・追加

店舗・チラシ・パンフレット・広報誌・受付窓口・サポート窓口……さまざまな性質を持ちうるためウェブサイト制作の作業範囲は多岐に渡る。

Page 3: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

3タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency

マーケティング

サイトプロモーション

戦略企画

コンテンツ企画

原稿作成

ページデザイン

システムデザイン

HTMLコーディング

システムプログラミング

運用

評価

修正・追加

1.ウェブ制作における“作業"とは

1-2:タンデムワープ社はどんなパートナーになれるのか?

多岐に渡るサービスを集約し、ディレクションするのはお客様の第三の部署であるべき。タンデムワープ社は「制作会社」+「第三の部署の一員」となります。

“第三の部署 "の作業範囲

いわゆる“制作会社 "の作業範囲

第三の部署とは?・ウェブ構築・運営の最終意志決定者(=お客様)・客観的にお客様・お客様の事業を見ることができる・ウェブサイトのデザイン・技術の流行を把握・デザインとシステムのバランスをとる

具体的な参加方法は?・メーリングリスト・原稿素材の管理・年間運用計画・定例会の実施・サーバ関連担当者との打ち合わせ同行・感情移入

制作会社である我々にとって、創作の動機は「お客様のご要望」と「お客様ご自身」の中にある

※サイトのプランニング〜運営に関わるほど弊社の強みは発揮されますが、単なる制作会社としても、弊社をご利用いただけます。

Page 4: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

4タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency

2-1:制作の進め方ダイジェスト

2:タンデムワープ社がご提供するサービス

第1段階

■ヒアリング〜サイト企画ウェブサイト構築によってお客様の求める「結果」をヒアリングします。お客様の業務、業種、会社の特長をプロモーションする立場から理解していきます。

■基本戦略設定「どうやってネットで結果を出すか」の戦略をご提案します。

●アクセス数をどうやって確保するのか?●どんなユーザーが見ることを想定するのか、 そのユーザーはどんな内容を求めているのか?●どんな形で効果を測定するのか?●ユーザーをどうやって再訪させるのか?●他社の成功事例研究●ネット広告の活用

■構成決定基本戦略に基づいて、ページ構成をご提案します。各ページの中身についてもゼロからご提案が可能です。ビジュアルデザインの方向性についても同時にご提案します。

■概算お見積この段階で、大まかなページ数を算出し、概算お見積を提出します。この金額を記載した「発注書」をいただいた段階で、制作を開始します。

第 2段階

■デザイン・制作デザイン・制作作業に入ります。

●ユーザビリティを重視したインターフェース設計●文章作成(コピーライティング、リライト)●写真撮影(プロカメラマンによる撮影可能)●デザインワーク● HTML コーディング・システムプログラミング取材・ライティング・撮影〜イラスト・動画制作まで、“コンテンツ制作 "ができること、ホームページ用の素材を印刷物にも展開でき、トータルでご提案できることが弊社の強みです。

また、SEO 専門会社のパートナーとしてデザイン・制作を行っているため、弊社が制作した HTML は標準で SEO を十分に配慮したものとなります。

第 3段階

■アフターフォロー「作りっぱなし」にせず、常に見直し・改良をご提案します。

●アクセスログ解析●サーチエンジン表示順監視●その他販促を随時提案

Page 5: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

�タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency

サイト成功におけるイコールパートナーとしてプランニングします。■「機械的」に作らない■お客さまの要望を聞き取り、ビジュアルとコピーライティングで表現する※オリエンテーションの時点で「希望する結果」「お客様の強み」があいまいな場合でも、ヒアリングを通して、お客様と一緒に「発見」「創作」していきます。

リサーチ、サイトプランニング→サイトプランご提案

業界・競合他社の動向、ターゲットユーザーの特性などを調査し、・サイトの仕様(必要なハードウエアの規模、データベースなどのシステム)・ページ構成(必要なページやコンテンツ企画)・サイトプロモーション(ユーザーを呼ぶ仕掛け)をご提案します。

貴社ウェブサイトリニューアルのご提案

TW中村元 2003.7.22 2

�ウェブサイトリニューアルのねらい

ターゲットユーザー

業務パートナーとして、貴社を検討中のビジネスユーザー(名刺、パンフレット等によりURLをあらかじめ知っている)

求める技術を提供してくれるパートナーを探すビジネスユーザー(サーチエンジンで検索)

求職中の新卒者(就職ポータルサイトのリンクを辿って来訪)

求職中の経験者(転職ポータルサイトのリンクを辿って来訪)

求職中の新卒者(サーチエンジンで検索)

求職中の経験者(サーチエンジンで検索)

ゴール

トップページ

高い技術力・技術革新人間本位活気・若さ ...

会社概要

着実な成長安定した経営企業姿勢 ...

業務紹介

業務分野保有技術 ...

開発事例

具体的な実績技術力技術キーワード ...

仕事内容

職種内容説明工程人材管理 ...採用情報

求人内容

先輩からのメッセージ

等身大のカトム社員親しみ若さ、楽しさ、やりがい

研修内容

人材育成(=技術力)人間本位技術革新 ...

エンジニアの道

職種内容やりがい企業姿勢 ...

「経営も安定しているし、技術力、実績も申し分ない、しかも元気で楽しそうな社風だ、ぜひパートナーに考えよう ...」

「探していた技術を確実に提供してくれそうだし、経営基盤も社風、社員のも感じが良い、問合せてみよう ...」

「あまり知らない業務内容だったが、プロフェッショナルの集団のようだ。きちんと育ててくれ、しっかりした会社だから応募してみよう ...」「仕事内容を見ると自分の経験を生かせそうだ。知らない分野についても研修してくれる。会社の将来性にも安心できるから応募してみよう ...」

「仕事内容のイメージもつかめたし、入って楽しそうだ。ちゃんと研修してスキルが身につくし待遇が良い、応募してみよう ...」「まさに自分のスキルが生きる業務内容だ。評価基準も明確だし、新しいことにもチャレンジできる。思いきって応募してみよう ...」

ユーザー導線ユーザーをタイプ別に想定し、どのような経路でホームページに入り、出て行くかを分析し、求める結果(購入、問い合わせ)へ誘導します。

2:タンデムワープ社がご提供するサービス

2-2:サイト企画

提案日: 2007.11.29 作成者: TW中村 元 5山野美容専門学校様 ウエブサイト+モバイルサイト リニューアルのご提案

1:リニューアル試案 step1

1-2:ブランドとペルソナ

美容業界においてトップクラスの学校であることをアピール10代の若者に「入学したい」と思わせる

●なぜトップクラスなのか?どういった点がトップクラスなのか?を伝える●どんな10代の若者なのか?彼らに共感されるポイントは何か?を探し出す

●歴史と規模、卒業生の実績、講師の質、授業の質、マスコミへのさまざまな露出「美道」スペシャルサイト

授業+講師コンテンツの充実

パブリシティBLOG

●ペルソナの作成瀧上誠くん18才栃木県在住・祖父、金物店経営の父と、弁当屋でパートをしている母、中学 2年生の妹の5人家族。県立普通高校 3年(2008 年 4月現在)サッカー部(FCバルセロナファン、ポジションはボランチで去年からレギュラー)遠征のときにGReeeeN を聴いていて、仲間と音楽では話題が合わないと感じた。一度上京したいが、卒業後は地元に戻って自営で出来る仕事をやりたい

大野美咲さん17才東京都在住・建材商社勤務の父と、化粧品販売の母、妹 2人の 5人家族。都立工芸高校 2年(2008 年 4月現在)部活はしていない。ドーナツ店でアルバイトをしている。手先が器用で、店内のちょっとしたPOPを作って重宝がられたりする。将来は美容に関する仕事をしたいと思っており、できればフリーで一生続けたいと思っている。しかし、実際にはそんなに甘くないだろうと不安がある。

自分が何を知りたいのかわからない

もっと実用的な情報を出してほしい

ユーザー分析から必要なコンテンツを提案どのようなコンテンツが必要なのか、ユーザーが求めるであろうコンテンツを想定してご提案します。

提案日: 2007.11.29 作成者: TW中村 元 9山野美容専門学校様 ウエブサイト+モバイルサイト リニューアルのご提案

2:リニューアル試案 step2

2-1:刺激的・斬新なビジュアルとは

技術的なトレンド…CGM的にユーザーが参加し、flashに反映される

●サイト閲覧はそれほど頻繁でなく、また自己所有率は社会人ほど 高くないため、適切でない

第 1回子ども生活実態基本調査報告書(Benesse 教育研究開発センター 2004 年)

デザイン的なトレンド…flashを全面使用し、「動きの質感」を重視

●スゴいflashでもストーリーが無いと感受性が高い子供には退屈? →タンデムワープ社の制作事例 →スゴいで終わらないおもしろさがあるサイト  ※サンスター株式会社「ハブラシ」http://www.haburashi.com/index.html

●サイトのディテールにAjax などの動きを取り入れていく →タンデムワープ社の制作事例

ユーザー分析から効果的なウェブ技術を提案やみくもに flash や Ajax を使うのではなく、ユーザーの特性を考慮して必要なウェブ技術をご提案します。

提案日: 2007.11.29 作成者: TW中村 元 10山野美容専門学校様 ウエブサイト+モバイルサイト リニューアルのご提案

2:リニューアル試案 step2

2-2:コンテンツ構成

学苑紹介

スペシャルサイト

基本サイト

パブリシティ

キャンパスニュース

進学ガイダンススケジュール

オープンキャンパススケジュール

オープンキャンパスレポート

BLOG(CMS)

カリキュラム

スクールライフ

就職サポート

PCサイト

モバイルサイト

ミュージアム

美容のしごと。

入学ガイド サイト内プロモーション

基本スペック

規模、歴史…ブランド

中期的な視点で有益な情報…トップ

分かりやすいサイト構成図を作成詳細なサイトマップ(ページ一覧表)の前に、ブロック単位で視覚的に全体像を捉えやすいサイト構成図を作成します。

作成日: 2006.9.20 作成者: TW中村 元 11ランドジャパン株式会社様 ECサイト構築・展開のご提案

2-3 SP:集客する

●サイトへの訪問ルートを整理。●PDCA(plan=計画/ do=実行/ check =評価/ act =改善) を回すために月次で訪問者数、会員獲得数を想定。

集客ルートのイメージ

会員数

ネット

リアル

■懸賞サイト

2007.2 月 3月 4月 5月 6月 7月 8月 9月 10月 11月 12月 2008.1 月 2月

■PPC広告□商品・サービス検索

■バナー広告□ポイントキャンペーン□その他キャンペーン

■ SEO□商品・サービス検索

■プレスリリース□他ネット媒体に記事掲載

3,000

(単位=人)

3,000 3,000 3,000 3,000 3,000 3,000 3,000 3,000 3,000 3,000 3,000

20,000 20,000 20,000 20,000 20,000 20,000 20,000 20,000 20,000 20,000 20,000

毎月3,000人の会員獲得

10%の購入者=毎月2,000人の会員獲得

2,750 2,750 2,750 2,750 2,750 2,750 2,750 2,750 2,750 2,750 2,750

KAKAKU.comで55万回露出した場合の想定訪問者2,750人のうち10%:275人を会員獲得

100,000 100,000 100,000 200,000 200,000 200,000 300,000 300,000 300,000 400,000 400,000 400,000

商品点数が立ち上げ時5万点、以後三ヶ月ごとに5万点ずつ追加登録した場合。0.5%の購入者=毎月500~2,000人の会員獲得

30,000 30,000 30,000 30,000

50~200程度の媒体にプレスリリースし、取材→掲載による訪問者を30,000人と想定。年4回程度実施

■店頭□会員獲得イベント

500 500 500 500 500 500 500 500 500 500 500 500

毎月500人の会員獲得

■チラシ□チラシ連動

2,500 2,500 2,500 2,500 2,500 2,500 2,500 2,500 2,500 2,500 2,500 2,500

50万部配布(新潟)中、0.5%が訪問、10%の購入者=毎月250人の会員獲得

9,135 15,660 21,985 29,010 36,035 43,060 53,195 60,720 68,245 76,270 84,295 92,320

■会員□来店→購入人数

913 1,566 2,198 2,901 3,603 4,306 5,319 6,072 6,824 7,627 8,429 9,232

20,000

2,750

■DM□既存会員向け

8,700 8,700

435,000人の既存会員に送付。2%が訪問、30%の会員申し込み率=2,610人の会員獲得

EC サイトの集客〜売上シミュレーションSEO やクリック広告などのサイトプロモーションによる集客と売上をシミュレーションし、適切な投資金額を割り出します。

※ご紹介している書類は、これまでに弊社がご提案の中で作成したものです。ご要望や予算によって作成する書類は異なります。

提案書類の一例

Page 6: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

6タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency2:タンデムワープ社がご提供するサービス

2-3:サイト企画 番外編〜商圏キーワードと戦略キーワード

お客様の事業から必然的に決まる「商圏キーワード」、より効果を高めるための「戦略キーワード」「SEO」「検索キーワード」と言った言葉に振り回されないための、弊社が提案する概念です。

某ホームセンター様の場合…1. キーワードを挙げてみる。「ホームセンター」「スーパーセンター」「DIY」「日用品」「工具」「園芸」・・・・・

2. キーワードの検索数を調べる

3. キーワードをカテゴリ分けする

■業態:「スーパーセンター」「ホームセンター」■業種(取り扱い品目):「DIY」「日用品」「生活雑貨」「園芸」「工具」・・・・・■サービス:「宅配」「販売」「通信販売」■地域:「東京」「神奈川」「千葉」「埼玉」「関東」・・・・・

4.2 の検索数に基づいて優先順位や言葉遣い(「園芸」なのか「ガーデニング」なのか)を決め、マッピングする。

「ホームセンター」…………………………… 106,187「スーパーセンター」……………………………… 1,791「DIY」……………………………………………… 78,351「日用品」…………………………………………… 1,308「工具」…………………………………………… 29,549「園芸」…………………………………………… 24,011

宅配

通販

ホームセンター DIY交差した箇所のキーワードが「商圏」

商圏キーワードの例

「料理 レシピ」……………………………… 451,890「胡蝶蘭 植え替え」……………………………… 1,362

戦略キーワードの例

■一ヶ月間に各キーワードが検索された回数

商圏キーワードのマッピング例ガーデニング 生活雑貨

縦軸にサービス関連のキーワードを並べていく

横軸に取り扱い品目関連のキーワードを並べていく

Page 7: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

7タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency

1.サイト仕様・構成サイト企画を叩き台としてサイト構成案を決定します。

2.ページ設計構成にもとづき、1ページずつ写真、イラスト、チャート、コピーを書き込んだ設計図を作成します。

3.デザイン実際に表示されるページと同じ体裁でデザイン案を作成します。

〈その他の主な書類成果物〉・アクセシビリティ方針・サイト仕様(対応ブラウザなど)・用語ルール

トップページ:デザインコンセプト 2007.4.17

A案:税理士を見せる。

・相続SOSのトップページ

・オーソドックスな構成

・情報一覧性(シンプルな目次)

B案:OAGを強調しつつサービス紹介。

・相続SOSとZへ振り分け

・広告的・エディトリアルな構成

・誘導強調

C案:税理士を見せる+サービスを見せる

・相続SOSのトップページ

・オーソドックスな構成

・情報一覧性(情報に満ちた目次)

D案:OAG+税理士を見せる。

・相続SOSのトップページ

・アプリケーションソフト的・エディ

トリアルな構成

・雑誌に近い目次

2:タンデムワープ社がご提供するサービス

2-4:サイト企画後の制作フロー 〜デザイン決定まで

※ご紹介している書類は、これまでに弊社がご提案の中で作成したものです。ご要望や予算によって作成する書類は異なります。

サイト構成案サイトの構成案は、求める結果に応じて複数のパターンをご提案することもあります。

サイトマップ制作する全ページの一覧です。ファイル名や所属するディレクトリも定義します。

ワイヤーフレームページ設計の成果物として、ワイヤーフレームを作成します(基本的に全てのページ分作成)。エクセルで作成し、お客様とファイルをやりとりして内容を確定していきます。また、写真原稿や文字原稿も定義していきます。

デザインワイヤーフレームご要望によっては、仕上がりと同様の体裁でワイヤーフレームを作成します。

デザイン案デザインカンプを作成します。サイト仕様・構成に強調する要素やテイストを変えて、1〜 3案作成します。ウェブはプリントアウトしたものとブラウザで見るものでは印象が大きく異なるため、ブラウザで見られる形式にしてご覧いただきます。

この工程はほぼ同時進行と

なります。

ブランディング重視

サービス内容重視

知識取得重視→リスペクト系・SEO

トップページ:デザインコンセプト 2007.4.17

A:OAGの相続・贈与に関するスペシャルコンテンツ

B:相続SOSのトップページであり、Project Zはサブコンテンツ

検討ポイント1:トップページの位置づけ

相続SOSのトップページであり、Project Zはサブコンテンツ

A:すでに相続に直面しているユーザー →「相続SOS」B:あらかじめ相続準備をしたいユーザー →「Project Z」

の振り分け

情報の一覧性(1ページ内の情報が多いこと)を好む

「ProjectZ」のトップページ

「ProjectZ」のトップページ

検討ポイント3:要素の見せ方

A:ネットで情報を探すことに慣れている。

C:知識を得たい(できればサポート無しですませたい)

(ネットを見慣れているため)オーソドックスな構成を好む

誘導されることを好む

雑誌などエディトリアルに近い構成の方が見慣れている

■(ユーザーの)ネット習熟度の想定

B:慣れていない。

■(ユーザーの)目的の想定

A:税理士を探している

B:何らかのサポートを探している

OAGの法人規模、実績(事例),税理士の紹介

OAGのメリット、他との比較

サービス内容、価格、実績(事例)

Q&A

「相続SOS」のトップページ

検討ポイント2:訪問頻度

A:■1~2回の訪問・目的が明確(税理士・税務サービスを探す)・目的が達成されたらネットでなくリアルに移動する

B:■3回以上リピート訪問・目的が絞られていない、または知識を収集するのが目的・ゴールが明確で無いので使い勝手が良いと判断されたら、辞書敵なツールとして複数回訪問する

「広告」的な印象が重要雑誌表4、ポスター、電車中吊り…ある程度読みこむボリューム感のある広告

「読み物」「検索性の高いツール」という印象、機能が重要

※新聞を読むときに目次を意識することはほとんど無い。しかし、目的の情報に素早くたどり着くことができる。扱いの大小や題材種別により読者が自分なりに情報を検索するルールを持っている。

一方、号ごとに構成が変わる雑誌などは目次が重要な役割を果たす。

デザインコンセプト「好き嫌い」だけで決定することを避けるため、各デザイン案について、戦略的な図解を作成する場合もあります。

Page 8: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

8タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency2:タンデムワープ社がご提供するサービス

2-5:サイト企画後の制作フロー 〜完成まで

4.原稿作成・原稿依頼2のワイヤーフレームをベースに、さらにコピーライティングのブラッシュアップを行います。また、お客さまに作成していただく原稿などをリストアップして依頼します。

5.ワイヤーフレーム校正原稿を反映した上でワイヤーフレーム上の校正を行います。HTML コーディング後の変更は手戻りが大きいため、レイアウトや基本構成はここで確定となります。TWによる内校と、お客さまによる校正となります。

6.サーバセットアップ・テスト環境作成サーバの手配や設定を行います。以降の作業で必要となるテスト環境(作成中の TML の動作確認・内容確認を行うサーバやディレクトリ)を作成します。

コンテンツ開発した例お客様の事業に関連するタレントのインタビュー記事を作成。

オプション:取材・写真撮影・イラスト制作・ライターによるインタビューや取材・カメラマンやスタイリストの手配、撮影当日のディレクション・イラストのテイスト提案、イラストレーターの選定、発注

7.HTMLコーディング/flashオーサリングHTML で各ページを制作します。弊社では、HTML オーサリングソフト(ドリームウィーバー等)は使用せず、全て手打ちで作成しています。

8.ウェブ校正作成した HTML をブラウザで確認しながら校正を行います。

オプション:校正用チェックシート、ユーザーテスト複数で校正を行う場合の分担やチェック箇所を記入したチェックシートや、ユーザーのロールプレイ(実際の訪問者としてサイトを使ってみること)を行うシナリオを作成します。

9.運用マニュアル制作お客様で更新する場合、運用マニュアルを制作します。

10/16

入力欄のホームページへの反映トップページ更新情報

タイトル※必須入力日付を入力します。例)2008/10/20

■オプション欄■基本欄

本文※必須入力

リンク先URL※任意で入力本文入力欄に入力したテキストにリンクを設定する場合、リンク先のアドレスを入力します。

更新マニュアルCMS(コンテンツマネージメントシステム)を導入した場合のマニュアル例です。

10.運用・評価●更新レクチャーオンサイトでお客様に更新方法や、更新のための PC 環境などのレクチャーを行います。

●保守コンテンツ保守:都度発生する更新作業を行います。SEO 保守:キーワード別検索順位の監視、アクセスログ解析の監視、定例会の開催・レポートの提出等を行います。

※保守契約にせず、都度、更新作業を請けることもあります。

Page 9: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

�タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency2:タンデムワープ社がご提供するサービス

2-6:サイト企画後の制作フロー 番外編 flash とウェブライティング

● flash はこうして作ります。ストーリー性のある flash の場合はコンテを制作します。

トップページ flash 案リマインド様 ヴィスタヴィラ秦野・南が丘 桜街区スペシャルサイト 

2006.12.21 2

画面サイズ :760px × 420px 60 秒~ 120 秒(ループ)丸蔵

全戸両面道路の南が丘分譲地内

極上の立地。

そこは風が吹き抜ける丘の上。

1

2

グリーンのライン(小田急線)を軸に他の要素がカットイン

2

2

2

3

2

4

3

2

地図をパン(カメラを振ること)して、ぐるっと迂回しながら桜ヶ丘分譲地へ

2

6

ズームアップしながら、キャッチコピーカットイン

さらにズームアップ、キャッチコピーカットイン

2

7

3

3

3

4

3

5

3

5

3

6

3-1 ~ 3-5 まで(パパパッと)5カットカットイン

画面白地オーバーラップしながら、ふたたび最初のキャッチコピーフェードイン不動産物件のメインイメージ flash のコンテカットごとの長さやアングルなども、コンテの段階でわかりやすく説明します。

ver.4家電機器の使い方説明 flash のコンテキャラクターを使用し、アニメーションのようにストーリー性を重視した flash。使い方など、校正が相当回数必要なため、手書きで作成しました。

●ウェブは紙媒体と違うライティングが必要です。■直線的に並べられ、綴じられたページではなく、「ページ群」■「私たちは」ではなく「私たち●●●は」

〈各ページ〉

1 ページ1テーマ

〈各ページ〉

1 ページ1テーマ

〈各ページ〉

1 ページ1テーマ

〈各ディレクトリ〉1 ディレクトリ1テーマ

〈各ページ〉

1 ページ1テーマ

〈各ページ〉

1 ページ1テーマ

〈各ページ〉

1 ページ1テーマ

〈各ディレクトリ〉1 ディレクトリ1テーマ〈サイト〉

<title> タイトル </title>

<h1> 大見出し </h1>

<h2> 中見出し </h2>

<p> 本文 </p>

<h3> 小見出し </h3>

<p> 本文 </p>

<ul><li> 項目 </li></ul>

重要なポイントは最初に書く

複数のテーマを欲張らない

Page 10: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

10タンデムワープ社のウェブ制作方針と進め方

Tandemwarp, one stop! the creative agency3:タンデムワープ社について

3-1:こんなメンバーです

斧田正彦代表取締役

SPプランナー

中村達也

ディレクターデザイナー

中丸雅仁

SP営業

中村元

ディレクターデザイナー

小嶋広佳

デザイナー

佐々木慶介

デザイナー

販促視点での企画プランニング、コピーライティング

伸縮自在のデザイン、イラストも

誠実に走り続ける営業。寄り添う営業

クールなデザイン、flash も得意

ブログ構築得意。携帯サイト構築も

考えることが大好き。やや悲観的

Page 11: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

タンデムワープ社のデザイン例。

ECサイト(食品)

ECサイト(家電)

ECサイト(家電修理)

私たちタンデムワープ社は、東京都八王子市を拠点に、さまざまな業種、目的の企業ホームページを制作しています。

ここではその中の一部をご紹介します。

http

://ya

man

ashi

.cal

bra.

net/

自社運営ECサイト

[カルブラ] 

[セキド] 

http

://co

nsen

t.jp/

オールアバウトおすすめサイト

[サイバーコンセント] 

ネットマガジン

宿泊(旅館)

生活(税務相続)

http

://w

ww.

calb

.jp/

自社運営サイト

[カルブ] 

http

://w

ww.

koge

tu.c

om/

Web Creators、WEB FLASH掲載

[秀峰閣湖月] 

http

://w

ww.

sohz

oku.

jp/

GOOD DESIGN AWARD 参加

[OAGチーム相続] 

生活(不動産)

芸術・芸能(劇団)

ECサイト(化粧品)

http

://w

ww.

juta

kuko

uei.c

o.jp

/[センチュリー21住宅工営販売] 

http

://w

ww.

yam

anot

e-j.o

rg/

Web年鑑2003、Web年鑑2007、

Web Creators、WEB FLASH掲載

[山の手事情社] 

http

://w

ww.

luna

stor

e.jp

/

Web年鑑2007掲載

[ルナキュア] 

Page 12: タンデムワープ社のウェブ制作方針と進め方 · システムデザイン htmlコーディング システムプログラミング 運用 評価 修正・追加 1.ウェブ制作における“作業"とは

on

e s

top

! th

e c

rea

tiv

e a

ge

nc

y

fie

lds

co

rpo

rate

pro

file

社名有限会社 タンデムワープ社

設立1996年4月

資本金

400万円

代表者

代表取締役社長 斧田 正彦

社員数

7名

[事業内容]

●ウエブサイト構築

ウエブサイト戦略コンサルティング/サイトプロモーション企画・運営/コンテンツプランニング・

開発(取材、ライティング、撮影等)/ビジュアルデザイン・制作/システムプランニング・開発

〈制作実績の一部〉(順不同・敬称略)

中部電力株式会社

OAG税理士法人

株式会社ミスターコンセント

株式会社セキド

劇団山の手事情社

財団法人 東京市町村自治調査会

(実績のある業種)

電気機器製造業

日用品(生活雑貨)製造業

ソフトウエア開発業

ファイル共有・公開会員制サービス

飲食・冠婚葬祭業

運輸業

観光業

不動産業

建築・建設・内装業

官公庁・地方自治体

専門学校・公立学校

●セールスプロモーション企画・運営

販売促進プランニング・運営/SPツール(会社案内、カタログ、パンフレット、チラシ、ポスター、

各種インプロ)企画・デザイン・制作/イベント企画・運営

〈制作実績の一部〉(順不同・敬称略)

ダイエー専門店会(年間販促計画立案・実施)

株式会社オリンピック(年間販促計画立案・実施)

株式会社アイワールド(新聞折り込みチラシ)

●グラフィック・エディトリアルデザイン

雑誌媒体(商用誌・企業PR誌・記念誌・書籍)/企業VI/電子機器端末インターフェース

〈制作実績の一部〉(順不同・敬称略)

オーストラリア ビクトリア州政府観光局(ニュースレター・ブローシャー)

株式会社リイド社(雑誌・単行本)

株式会社トラベルジャーナル(雑誌)

社会福祉法人 松楓会(記念誌・パンフレット)

株式会社カトム(遊技機器画面端末)

〒192-0904

東京都八王子市子安町4-4-11

シティ子安2F

代表電話番号

042 628 7172

ファクシミリ番号

042 628 7173

代表電子メールアドレス

[email protected]

ウエブサイト

http://www.t-warp.co.jp/

八王子税務署

JR東日本

セブンイレブン

税務署前

JR中央線

capsule review

JR八王子駅南口より徒歩5分

2009年6月1日現在

access

丸正

JR 八王子

野猿街道

南大通り

R20

R16

至高尾

至新宿