前回説明したようなセルフ・プロデュース方法で,自分のイメージを確立できたら,いよいよWebサイトの制作だ。Webサイトという媒体を通して自分を売り出すのである。制作の際に注意する点は,次の三つである。

1) Webサイトは,3段階に分けて制作する。

 Webサイトを開設していくらか時が経つと,訪問者の層,アクセス数,アクセス時間帯などがわかってくる。そこで,自分のイメージと訪問者が抱いているイメージの差を縮めながら同時に,自分が発信したい情報(シーズ)と顧客が必要とする情報(ニーズ)をすり合わせながら,3回に分けてリフォームを重ね,ユーザーや顧客を獲得していくのである。その都度,個人色を消し,業務色を強めていくことがポイントだ。

2) 個人の趣味で作らない。

 特にビジュアル面において,個人の趣味と効果的なデザインは違うということを認識する。いくら洗練されたレイアウトでも,デザイナーにありがちな小さ過ぎる文字では,内容は伝わらないし,自分の好きな色の組み合わせが,宣伝効果を持つとも限らない。特に3段階目の業務宣伝用Webサイトは,内面を表現する芸術作品とは異なる。

3) 引き算でシンプルな構成にする。

 複数スタッフを要する小規模事業所では,リーダーだけがWebサイト制作におけるすべての決定権を持つようにしよう。多数の意見をまんべんなく取り入れると,焦点がぼけて効果が薄れてしまうからだ。ユーザー・インタフェースにしろレイアウトにしろ,あれもこれもといろいろな要素を盛り込み過ぎないことである。また,顧客が即座に目的の情報にたどりつけるように,シンプルな構成にしよう。内容も,散漫にならないように,注意しなければならない。

効果的な,3段階のWebサイト制作方法とは?

 3段階の制作方法では,第1段階でユーザーにWebサイトの存在を印象付け,第2段階で安定したユーザーを獲得し,第3段階で具体的な発注に結び付けることを目標にしよう。

 第1段階では,人から見られるイメージが大事だ。オリジナリティとインパクトを重視した作りで,ユーザーにWebサイトの存在を印象付ける。自らをエンタイティナーとして魅せるサイトを作ろう。

 第2段階では,人から評価されることが大事である。飽きが来る前に,イメージチェンジをはかり,ユーザーの足が遠のくのを防ごう。この段階では,どれだけユーザーを獲得できるかがポイントになる。社会背景の変化や方針転換が求められる場合は,大胆なイメージチェンジをはかってもよい。

 そして第3段階では,ユーザーにWebサイトの掲載内容を理解してもらうことが大事である。手堅い作りで業務色を強めよう。顧客にPRする制作技術と,自身のサイトの制作技術を合致させて,業務宣伝用のWebサイトとしての役割を果たさせるのである。

 では,それぞれの段階について,具体的に見ていこう(図1)。

図1●セルフ・プロデュースによる3段階のWebサイト制作

第1段階「独自性を打ち出して,印象付ける」

 第1段階でのポイントは「オリジナリティ」と「インパクト」である。

 何よりもまず,訪問したユーザーに,「もう一度見てみたい,友人知人にもURLを教えたい」と思わせるような,強い印象を残さなければならない。

 それには,アクセシビリティやユーザビリティを訴えるのでなければ,すべてのブラウザでの同じ表示や動作に神経を尖らすよりも,「オンリーワン」の技術を見せることに注力するほうがよい。

 もしFlash技術が得意ならば,閲覧に時間がかかろうがスキップできまいが,全編Flashコンテンツでもかまわない。携帯専用でもよいし,.NETでもPHPでも,とにかく自分がPRしたい制作技術を,前面に打ち出すことだ。

 筆者の元には,SOHO予備軍や開業直後の若い人たちがしばしば訪れるので,常に「オンリーワンを打ち出すこと」を助言している。例えば「ケータイ・アクセスのWebアプリケーションに関心がある」と言う技術者には,ケータイ用Webアプリを極めるように助言した。彼は今,ケータイ・アプリの大きな仕事を受注して前途洋洋だ。

 また,サイトの名称も重要だ。事業所の屋号は付けたほうがよい。また,複数のメンバーで結成しているユニットでは,記憶に残るユニット名を考えたいところだ。

 この段階では,独立開業直後のWebサイト開設となるケースが多い。そのため,独立前に制作したWebサイトへのリンクやロゴの使用などは,許可を得ていなければ著作権問題が発生することもあるので,注意しよう。

第2段階「イメージチェンジで,飽きを防ぐ」

 第1段階の,オリジナリティとインパクト重視のサイトで印象付けた後は,次の段階に入る。どんなにユニークなWebサイトでも,半年~1年も訪問すれば,ユーザーは飽きてしまう。第2段階では,飽きさせないように,イメージチェンジを図る必要がある。

 核となる制作技術だけはそのままに,イメージを変えてしまうのである。歌手のイメージチェンジや,役者の新しい役への挑戦などと同様にとらえればよい。

 ただし,Webサイトを見て気に入った顧客から,「同様のイメージのWebサイトを」と依頼された場合,必ずしも顧客サイトを同じイメージで作ってよいわけではない。顧客には,顧客のイメージと見せ方があるからだ。

第3段階「手堅い作りで,業務色を強める」

 第3段階では,それまでの個人色のあるWebサイトとは打って変わって,業務色を強める必要がある。仕事と同じ手法で,業務用サイトのイメージを固めよう。重要になってくるのは,顧客にPRする制作技術と,自身のサイトの制作技術を合致させることだ。

 顧客がサイトのソースコードまで見ることは,まずない。だが,受注した案件をSOHO仲間に依頼したい場合やコラボレーション相手を探す場合は,ソースコードはチェックされるだろう。また,プロジェクトに参加する場合も審査されることがあるだろう。

 Web標準をうたいながら,不必要な表組みレイアウトを多用して,構造と表現が分離できていなかったり,XHTMLをウリにしながら,属性値の多くをダブルクォートで囲んでいないのであれば,それは制作技術のPRに成功しているWebではない。

 もし,標準準拠をウリにするなら,標準準拠を「語るだけではなく」,そのサイトを「自分の手で作る」姿勢が大事である。作成したソースコードをチェックしたい場合は,XMLチェック機能を持つテキスト・エディタや,W3Cの検証サービス(http://validator.w3.org/)を使えばよい。

 もし,同じ体裁で内容の異なるページを多数作成するのであれば,最初のフォーマットを検証しておくとよいだろう。XHTMLのページを大量に作って掲載データを入力した後で検証を行い,開始タグと終了タグの不一致に気づくと,同じ体裁のページすべてに修正が生じるからだ。

 全方向のブラウザへの対応,つまり,誰でも閲覧できるWebをPRするなら,Internet Explorer(IE),FireFox,Mozilla,Netscape,Amaya,Opera,Mac OS 9 のIEや,OS 10のIE*1とSafariで閲覧してチェックする必要があるだろう。

*1 Mac版IEは2005年にサポートが終了し,2006年1月31日付で,IE5.1.7およびIE5.2.3の提供も終了している。http://www.microsoft.com/japan/mac/products/ie/default.mspx

 なお,もし事業者個人の趣味が人脈の広がりに有効な場合は,あえて業務用サイトと個人サイトを分けて作る必要はない。業務用サイトの中に個人の趣味のコーナを設ければよい。前回書いたように,企業や店舗といった「法人」意識にがんじがらめになるのではなく,法人と個人のゆるやかな接続による宣伝方法も有効だからだ。

 以上のような,セルフ・プロデュースの経験を,顧客サイトに反映するには,同じ手順を踏めばよい。

 小規模事業者の「制作技術」とは,顧客がエンドユーザーに訴えたいもの(商品やサービス等)である。つまり第1段階では,顧客の商品やサービス等をインパクトある表現で打ち出し,閲覧者に印象付ける。第2段階では,顧客とユーザーの間の差異を縮めるようイメージチェンジをはかり,訪問者を獲得する。第3段階では安定運用に入る,といった具合だ。

3段階制作方法の具体例―――筆者たちの場合

 3段階での制作方法といっても,具体例がなければわかりにくいだろうから,筆者たちのWebサイトを例にとって,説明を補足しておく(図2)。

図2●筆者たちのWebサイトのイメージの変遷
[画像のクリックで拡大表示]

第1段階―――新しいものと古いものの対比による印象付け

 ユニットのWebサイト開設にあたり,筆者たちは,「Microsoft系の新しいWeb表現技術なら,この二人」という切り口で売り出したかったので,当時最新技術だったDynamic HTMLやDirect Animationによる処理を,全ページに渡って使うことにした。ビジュアル・イメージは,次のように考えた。

 Webクリエーターには,都会的でクールなイメージのサイトを持っている人が多数いるから,同じイメージで対抗しても印象は薄い。キュートでポップなイメージで弾ければ,嘘偽りになる。かといって,高年齢を逆手にとって家庭的な暖かいイメージをかもし出すと,一歩間違えれば生活感が漂い過ぎてしまう。

 そこで,地域性と年齢を表に出しても生活臭のないイメージを模索した。現実の生活に根付いた地域性をうたうと垢抜けないが,現実から遊離した民話のようなイメージなら深みが出る。Webは海外からの技術輸入だが,コンテンツ発信なら日本は負けない。最新技術で東洋的なイメージを引き出したコンテンツを掲載すれば,土着で古いものと,新しいものとの対比と融合を生み出せるのではないか。

 ただし,新技術を使えば海外の技術者も見に来るかもしれない。そのためサイトのテーマは,全世界共通の感情を表す言語にする必要がある。そこでサイトのテーマは「Nostalgia」とした。そして,緩やかで穏やかな動きの東洋的なイメージのコンテンツを掲載したのである。

 ユニット名については,当初,ActiveXユーザー同士として知り合ったために,「プロジェクト X」にする予定だった。だが,面識のない二人がメールのやりとりだけで制作するという,オンライン・コラボレーション方式であったことから,手紙の「X」=(〆)を示す「キス」という音に,イニシアルをあてて「PROJECT KySS」と命名した。

 このような考えで,筆者たちは,第1段階のWebサイトを制作し,「Microsoft系の新しいWeb表現技術なら,PROJECT KySS」という切り口で,自分たちの存在を宣伝していったのである。

第2段階―――親近感のあるデザインにイメージチェンジ

 第1段階のサイトでは,新技術と,古めかしいビジュアルを融合したので,第2段階のサイトでは,新技術と親近感の融合をテーマに,イメージチェンジをはかった。

 このとき筆者たちは,「XML」という新機軸を打ち出したいと考えていた。

 そこで,ビジュアル・イメージは,土着の民話の世界から一転して,明るく親しみやすいものに変更した。当時,トップダウン方式でXMLを広めようとしている技術者たちは多数いた。だが,筆者たちはWeb制作者だ。それなら,現場からボトムアップ方式でXMLを広めたい。それには,日本全国どの地域の人も,見るだけで頬が緩むような共通の感情を引き起こすデザインにしようと考えたのだ。

 トップページは,紅白の市松模様の背景の上に,大きな「餅」のイラストという「おめでたい」イメージ。メニューページでは,その「餅」が走るアニメーションを,Dynamic HTMLで実装した。

 掲載内容も,「XMLのWebページの制作」という提案を行いながらも,サンプルデータには,うどんの絵や価格情報,高齢者の介護情報といった,生活に根ざした身近なデータを使った。

 このWebサイトは,XMLのWebページ制作に関する情報を発信する定番サイトとして驚異的なアクセス数を誇り,筆者たちは「親しみやすい庶民派のXML技術者」という,Webサイトのイメージ通りの評価を確立したのである。

第3段階―――宣伝したい制作技術を使い,業務色を強める

 第3段階では業務色を強める必要があるため,紅白の市松模様や柴餅のイラストといった,業務色の感じられないイメージは改め,四角形で割った平凡なレイアウトを採用した。

 筆者たちの場合,メインの制作技術は .NET+XMLなので,当然その技術を使ってWebサイトを制作している。「XML」をPRするため,XMLデータをXSLTスタイルシートでHTML変換することにより,表示させているページも多い。掲載内容も,XMLに関するサンプルや解説がメインである。

 閲覧環境はWindows版IEがメインだが,もちろん顧客からの要請があった場合は,他のブラウザにも対応しており,自分たちのサイトとは全くタイプの異なる,顧客サイトの目的に合ったWebデザインを手がけている。

エンドユーザーの一歩先を心がけよう

 実は筆者たちは,前述の第1段階と第2段階の間に,マイナーチェンジとはいえないような大胆なリフォームを2回行っている。しかしすぐに中止し,元の状態に戻している。

 最初のリフォームを行ったのは,FutureSplashがFlashとなり,流行の兆しを見せ始めたころ,Dynamic HTMLとVBScriptでもFlashと同等のダイナミックに動くページが制作できることをPRしようと思ったからだ。第1段階のWebサイトは緩やかで穏やかな動きで魅せたが,今度はシャープでキレのよい素早い動きを実現した。

 ところが当時,多くのユーザーは,Dynamic HTMLとVBScriptつまりHTMLファイル中に書いたコードだけでFlashのように速くオブジェクトを動かせるなどとは思っていなかった。なぜならそういうサイトがなかったからだ。そのために誤解を受け,「Flashはかっこいいですね!」などというメールをいただく始末。また,表データの表示にはデータバインドを使ったが,単なる表組みだとしか思われず,データベースの意義に気づく人は,ごく少数だった。これではDynamic HTMLという制作技術の宣伝にはならない。というわけで,すぐに元の状態に戻してしまった。

 その次に行ったのは,構造と表現の分離である。表組みと画像を一切使わず,HTMLとCSSだけのページを作成した。ところが,静的なページは,第1段階の動きのあるコンテンツとはギャップがあり過ぎた。面白みに欠ける堅苦しいイメージに,アクセス数が伸び悩んだ。IE4.Xの時代には,構造と表現の分離の重要性に気づいている人は少なかったからだ。これも,すぐに元の状態に戻してしまった。

 これら二つの経験からわかったのは,あまりにも早すぎる技術提案は誤解を招くか,功を奏しない場合があるいうことだ。新しい技術を発信したり採用するのであれば,ユーザーの一歩先を行くぐらいがちょうどよい。

 なお,前述のような3段階のWebサイトのリフォームの間に,ちょっとしたトップページの画像の変更や,メニューの追加といったマイナーチェンジを行うことは,飽きさせない工夫として有効である。常に,「待ち」ではなく「攻め」の姿勢で,Webサイトを作っていこう。

 さて,読者の皆さんは,自分のWebサイトは,HTML,XHTML,XMLのどれで制作していますか? あるいはサーバーサイド処理で書き出していますか? いろいろな方法があると思いますが,ぜひ「コメント」ボタンから,ご意見をお寄せください。