「顧客に選ばれる企業」には,顧客をおもてなしする場所(サイト)がある。SWD(Strategic Web Design)編集部が,最近Webサイトをリニューアルした企業に伺って,成功するサイトの運営秘話をインタビューする。

富士通

高橋宏祐 氏
高橋宏祐 氏

富士通 コーポレートブランド室
担当部長 高橋宏祐

 富士通グループのWebサイトは世界35の国と地域に存在する。使用言語も17言語に及ぶ大規模なネットワークだ。全世界をfujitsu.comのドメインで一括して管理しつつ、デザインの統一を図っている。

 2006年12月28日、Windows VistaとInternet Explorer 7の閲覧環境に最適化するためCSSの更新を実施した。さらに、2007年1月9日には、ユーザー調査で分かったサイトデザインの問題点に対応するため、トップページをリデザインした。


図●)
fujitsuのトップページ  [画像のクリックで拡大表示]

SWD リニューアルの主な目的は何でしょうか?

高橋 Windows Vista(以下Vista)およびInternet Explorer 7(以下IE7)への対応です。2006年12月28日に半年かけて作業が終了しました。当社はパソコン事業がありますから、Vista上で何か不具合でも発見されれば威信に関わる。対応作業は(1)日本語、(2)英語圏(ISO-8859)、(3)ハングル、簡体/繁体中文と、全体で3つの特性別グループに分けて作業を行いました。対応範囲は約20万ページ、実作業はCSSの更新のみです。さらに2007年1月9日には日本語ポータル(jp.fujitsu.com)のトップページデザインをリニュアルしました。

 これらの作業の前、2006年9月28日には、日本語ポータルの企業概要コンテンツを充実するリニューアルを実施しました。

 当社のサイトはIE7にレンダリングを最適化しています。IE6の場合、日本語も英語もMS Pゴシックで表示させるのが最もきれいです。しかしIE7ではMS Pゴシックで表示した英語と日本語の文字がフォントサイズの解釈の違いから、微妙にずれる現象を確認しました。Vistaではフォント環境が向上して表示が美しくなったぶん、行間などの解釈が若干変わった事が原因です。具体的には(2007年1月30日)といった日付の表示が乱れてしまいます。対策として英語はArial、日本語はMS Pゴシックと指定を分けました。逆にIE6で閲覧した場合はすべてMS Pゴシックで表示した方が美しいのでそのようにしています。

 また、拡大機能への最適化を実施しました。拡大機能にはIE7による拡大機能を使った場合と、JavaScriptで実装した拡大機能を使う場合の2種類があります。富士通の「WebUD」や日本IBMの「らくらくウェブ散策」のような支援ツールは、後者を使っています。しかし他社サイトのなかには、拡大しないページや、拡大した時にレイアウトが崩れるページなどもあるようです。当社では両方の手法にページを最適化しており、きちんと表示される事を検証しました。

図2●富士通のトップページ。英数字はArial、日本語がMS Pゴシックできれいに表示される
図2●富士通のトップページ。英数字はArial、日本語がMS Pゴシックできれいに表示される  [画像のクリックで拡大表示]

誰にでもできる拡大機能の検証方法

SWD 支援ツールを使う方法以外に、JavaScriptによる拡大を検証する方法はありますか?

高橋 JavaScriptで拡大した時のレイアウトを検証するには、WebUDのような外部ツールを使うしか方法はないわけではありません。実はブラウザのURL部分に直接JavaScriptを打ち込んで拡大機能を実行してみる検証方法が使えます。

 javascript:alert(document.body.style.zoom=3)

の通りに入力してください。対応しているサイトとそうでないサイトがわかって面白いですよ。

図3●JavaScriptを実行して3倍に拡大表示した富士通のトップページ。Flashのメインビジュアルも拡大に反応している
図3●JavaScriptを実行して3倍に拡大表示した富士通のトップページ。Flashのメインビジュアルも拡大に反応している
[画像のクリックで拡大表示]

 あとメインビジュアルとして作ったFlashが拡大しないという落とし穴もありますね。それは固定幅で作っているせいです。また、文字サイズを絶対値で指定しているページも文字のみ拡大できませんから注意が必要です。2種類の拡大機能にすべて対応しているサイトは当社しかないのではと自信を持っています。

 本来ならここまで細かい部分の最適化作業にはかなりの時間を要する所ですが、VistaとIE7対応の作業は2006年7月より調査と検証を開始し、12月末には完了しています。 デザインのリニューアルやVistaとIE7への対応作業はデザイン担当者が3名とそのほか私を含めて2名の合計5名で手がけています。リニューアル対象の20万ページすべてが参照しているCSSの再編集で済みますので、この人数でできるわけです。これほど短期間で作業が完了するのも、当社のサイトが2005年の1月5日にはXHTML1.0 Strict+CSSのWeb標準への準拠を完了しているからでしょう。特にIE7がWeb標準準拠ブラウザーとなったので良かったですね。

定期的なユーザー調査を実施

SWD サイトリニューアルの必要性はどのように探っていますか?

高橋 ユーザー調査を定期的に行って現状分析をしています。 ユーザーインタビューは3カ月に1度の頻度で開催していますし、アンケートはより頻繁に実施しています。また年に1回、満足度調査をします。デザイン面というより、サイトを使う事で満足が得られたか、本当に顧客の利益になっているかを調べます。次は半年に一回の頻度でWebサイトイメージ調査を実施しています。Webのビジュアル的な要素などは最終的に主観に基づいてできるものなので、トップページの印象を客観視するとどういう印象が生まれるのか、などをこれで調査します。その他、特定の情報がサイト内で見つけやすいかといったことも調べますからもう調査ばかりしている感じです。課題が見えてくればリニューアルをします。よく、リニューアルのために調査するという流れがあると聞きますが、当社の場合は逆ですね。

サイトデザインがブランドイメージに反していた

SWD どういった問題点が浮かび上がったのでしょう。

高橋 過去のホームのデザインについて、非常にショッキングな結果が上がってきました。富士通というとそれなりに大きな会社だというブランドイメージを作ってきたつもりなのですが、一方でサイトに関しては希望するブランドイメージにそぐわない意見が出ました。実際の事業は社会インフラの整備まで幅広く手がけているにも関わらず、サイトデザインは「安いパソコンを売る会社」あるいは「携帯電話の会社」という印象を受けたユーザーがいました。

 この商品はいくらという価格情報ばかりが目立っていたのかもしれません。しかも女性ユーザーに至ってはさらに厳しい。もう正直「ダサイね」と言われてしまいます。普段は富士通に良いイメージを持っていた人が、サイトにアクセスしたとたんにそれとは逆の印象を持ってしまう。たいした会社ではないように思われてしまう。このブランドイメージとのギャップは大きな問題です。アクセシビリティ、ユーザビリティも大事ですが、イメージが良くないとサイトに入ってきてもらえないでしょう。また、コンテンツに使用している文章中の言い回しなどが専門的すぎて一般的でないという意見もありました。特に女性ユーザーでわかりにくいと感じた人は多かったようです。アンケート調査で700人から800人程度、インタビュー人数は30人から40人程度の声を集めた結果です。厳しいご意見は初めてサイトを見た人、女性、経営者、若い人の属性に多く、逆にSIer(エスアイヤー)のような専門家はあまり違和感を感じなかったようです。

 アクセシビリティ的に優れていると考えて、あえて画像を多用せず構成した画面なのに、ユーザーにとってはそっけなく地味だと取られる。また、テキスト中心の画面が、文字が多くごちゃごちゃした印象を与えたようです。作る側のシンプルなデザインという評価は逆に堅い印象になっていました。堅いというイメージは堅実というプラスの意味もあるのでまだ許容できますが、無機質というのはいけない。地道な努力を重ねて技術開発を進める企業姿勢と合いません。

ビジュアルと文字表現に工夫

SWD 問題の打開策を教えてください

高橋 デザインリニューアルの課題として、「堅い・地味・無機質なイメージの改善」をまず掲げました。改善策には、必要最低限の画像テキストを採用する事を盛り込んでいます。視認性に配慮しつつ、音声読み上げ機能に配慮した実装を行いながら、項目タイトル、ボタンなどを画像化しました。フォントは洗練された印象が強い、細字のゴシックフォントを採用しています。

 画像テキスト化と合わせてラベルも変更しました。サイトに訪問してきたユーザーが能動的に振る舞えるような表現にしています。例えば「製品&サービス」から「製品とサービスを探す」に、「ショッピング」から「オンラインで購入する」という具合です。無機質、そっけない印象からわかりやすく、親しみを感じられるような印象アップを目指しました。

図4●ラベルの文言を変えて、ユーザーが能動的に振る舞えるよう工夫した
図4●ラベルの文言を変えて、ユーザーが能動的に振る舞えるよう工夫した
[画像のクリックで拡大表示]

 次に「企業イメージと合う」「信頼できる」「親しみを感じる」といった印象度のアップを目指してビジュアル面の改善を多数試みています。まずはメインビジュアル面積の拡張です。ダウンロードに負荷がかかるのでは?と個人的には考えましたが、ビジュアル要素は大きいほど印象は向上する傾向にあるようですね。ブロードバンドも普及している時代ですからこの決断もありだと踏み切りました。

 メインビジュアルには画像切り替え効果実現のためにFlashを使っています。運用上はJPEG素材を制作する形で、それをXMLの読み込みでFlashにはめ込むのです。あとは5枚、6枚と自動的に画面が切り替わるようになっています。管理がしやすいという利点がありますね。あと、Flashにはアクセシビリティ上の課題があると言われがちですが、Flashとは別に独自のスクリプトで読み上げ機能には対応しています。また、XHTML上でnoscriptの要素を工夫し、JavaScriptが無効になっているユーザーでも表示を最適化しています。

 メインビジュアル部分にはCIデザインの印象を生かして曲線的なモチーフを使いました。また、トップページのキーカラーは以前、抑えめな彩度の配色になっていましたが、今回はより一層FUJITSUレッドに近い明るめの配色に変えています。

PDCAプロセスでマネジメント

SWD 常に検証を行って改善を続ける富士通のサイトですが、マネジメントのポイントは?

高橋 マネジメントは決まった基本プロセスに乗っ取って行います。ユーザー調査を中心に改善策を練るPDCAというプロセスで、サイトデザインの正当性を考察するのです。この方法は個人の主観や組織論理で判断せず、お客様の声を判断基準とするやり方です。ユーザー調査で発見したサイトの問題点などの課題は仮説としてまずまとめます。すぐ修正作業に入る事はなく、仮説をユーザーインタビューで検証してから修正に生かしています。どうしても組織の場合、利益を得ることが行動の目的になりがちです。内部事情を優先すれば、トップページという狭い面積の中に社員17万人の意見がひしめき合う事になってしまう。これではマネジメントができませんから、PDCAのようなスキームを使っています。

 当社サイトのマネジメントポリシーは、客観的基準に基づく、公明正大な判断と行動です。Webのように形が無く、誰でも内容に意見しやすい媒体で作業スキーム(型)は欠かせません。常に判断基準はお客様にあると考えながら、コスト、品質、スケジュールなどの用件事項を満たすマネジメントを心がけています

 よく企業活動はマーケティングから始まると言いますが、今の時代ITのインフラがなければ企業活動自体が成り立ちません。マーケティング活動さえその上に乗っている。ですから、Webのマネジメントは責任が大きい。あくまで現場が困らないようにするのがモットーです。

図5●PDCAのプロセス。作業実施まで複数の手続きを取る
図5●PDCAのプロセス。作業実施まで複数の手続きを取る
[画像のクリックで拡大表示]