



誰でも理解できるグラフィカルなガイドラインをベースに、WebSuitesによる定期チェックでオフィシャルサイトの品質向上を実現。
三菱電機株式会社
宣伝部 デジタルメディアグループ
粕谷俊彦さん・原田茂男さん
日本を代表する総合電機メーカーである三菱電機様のWebデザインガイドライン全面改訂プロジェクト支援のためのコンサルティングサービスをご提供。さらに「WebSuites」をご利用いただくことで、そのガイドラインが遵守されているかを自動チェックし、サイトの品質向上をサポートしています。

粕谷三菱電機の国内向けコーポレートサイトになります。宣伝部の活動方針として「商談機会の創出」、「企業価値の向上」を掲げています。この2つの目標に向かいマス広告やイベント、カタログなど各種メディアを活用する中で、現在ではWebサイトが重要視されつつあり、今後さらに注力していこうとしている状況です。ターゲットを大きく分ければ個人、法人と言えますが、事業が非常に多岐にわたるため、性別や年齢、職種などは限定できないほど幅広いものになっています。
粕谷我々デジタルメディアグループでは、Webサイトに必要な機能として3つの項目を挙げています。コーポレートサイトなので、まず製品や会社の情報を伝える「企業ニュースを提供する」ことです。また、その情報をいかにスムーズに提供するかがあります。検索機能を強化することや目が不自由などハンデのある方にも使いやすい「ユーザビリティ/アクセシビリティを高くする」ことが2つ目です。そして3つ目が、最新のWebテクノロジーを恒常的に取り入れ、「先進性をアピールする」ことがあります。これは、先進的な製品を開発しているメーカーであれば欠かせません。この3つの項目を踏まえ、ヒューマンセンタードデザインを発想の根底として常に改善することを心がけており、2001年から5回の大きなリニューアルを行ってきました。
粕谷2006年、バーチャルコミュニケーションズさんからWebチェックツールの提案を受けた際、サイトの制作からガイドラインの策定までを手がけていると聞いたのがきっかけです。その話の中で、非常にビジブルで使いやすいデザインガイドラインをご提供いただけるということに興味をもち、具体的な内容を伺いました。弊社では、法人向けサイト、個人向けサイトなどの違いにより、遵守すべき項目も違ってきます。バーチャルコミュニケーションズさんが提供するガイドラインは、対象者や目的別に守るべきことが明確に分類され、 アイコンを使用してインデックス化するなど、非常に分かりやく使い勝手の良いものでした。また、Altなどを守るための指示がビジブルで的確であったことなども選んだ大きなポイントです。さらに、そのガイドラインは世界中の多くの言語に対応し、世界的にイメージを統一できると感じられるものでした。実際、VIやCIに敏感で、コーポレートガバナンスの厳格な外資系企業へサービスを提供し、グローバルな展開をされており、その実績を評価したというのが導入を決定したもうひとつのポイントです。
粕谷以前の弊社のデザインガイドラインは、文字ベースでまず分かり難いということがありました。サービス導入後には、画面のキャプチャーを利用したり、コントラストについての具体例が提示されていたり、Altのパターンなども絵解きされているなど、非常にグラフィカルで分かりやすいガイドラインが策定できました。誰が見ても直感的に理解できるものになったと思っています。その一例を挙げれば、2007年末の大幅なリニューアル時にヘッダー・フッターの改訂、ノンフレームのセンターレイアウトに変更しました。その際、私が事業部、広告代理店や制作会社など多くの関係会社へ変更作業に関するガイダンスを度々行ったのですが、ガイドラインが分かりやすいことはもちろん、遵守することのメリットが明確に提示されていたことでスムーズにご理解いただけました。それは、ガイドラインを守ることがSEO/LPOに繋がり、ユーザビリティ/アクセシビリティを高めると明示できたからです。その成果が、2008年末での個人向け製品サイトと会社情報サイトで100%、法人向け製品サイトで90%以上がガイドラインに遵守している状況へ繋がったと思っています。

粕谷ガイドライン自体の課題ではなく、Webサイトを制作していく上でのことです。我々デジタルメディアグループが統括するページやCMSで制作するページ以外では、ガイドラインを完全に遵守してもらうのは難しいとも思っています。それは、弊社の製品ページが各事業部や製作所の管轄であるため、外注先などの制作現場までは我々が直接的に指示できないからです。そのようなガイドラインが遵守されていない部分を自動的に洗い出してくれる有効なツール、それが「WebSuites」でした。
原田私が2008年末にデジタルメディアグループに転任してきた際の最初のミッションが手作業、いわゆる目視でWebサイトの検証をすることでした。また、弊社の製品デザインを担当する部門である「デザイン研究所」には製品やシステムのユーザビリティを評価するための部署があり、定期的に弊社Webサイトのユーザビリティ/アクセシビリティの検証を依頼しております。ただ、視点が違うとは言え同じ手作業であるためシステマティックな形での評価が必要と考え、3本目の柱として「WebSuites」を導入することになりました。
粕谷HTMLはプログラム的要素もあるので、ガイドラインのルールを守ってくれているかは画面を見ただけではわかりません。そこで、原田が着任した当初は、主要ページのソースを目で見てチェックし、サイトの担当者と個別に会って修正を依頼していました。しかしながら、目視だけではチェック漏れがあると考え、定期的でシステマティックなチェックの必要性を感じました。それを解決するのが「WebSuites」だったわけです。「WebSuites」導入により、さらに高い精度で、Webサイトという常に変化するものを自動的、定点的にチェックし、改善していくことが可能になりました。
原田定期的に「WebSuites」による検査を実施し、調査結果をレポート化したものをいただくのですが、制作スタッフが見逃していた部分がいくつも見つかります。客観的に不具合を指摘でき、それを改善することで確実にクオリティが上がるため、修正作業はスムーズに進行しています。弊社のデザインガイドラインやWeb標準に準拠できる仕様に改善されることも大きいと思います。現在までに総合トップページとそこからリンクしている数十ページを重点的に検証して改善してきました。その結果、keywordやdescription、タイトルタグの記入漏れが撲滅されています。また、目視での検証と「WebSuites」との組み合わせにより、文字のコントラストなども大幅に改善されました。
粕谷ガイドラインもOSやブラウザなどの利用環境の変化に対応し、常にアップデートしていくことが重要です。次の課題としているのが、グループ会社向けに配布したデザインガイドラインの普及です。現状ガイドラインが遵守されているグループ会社は2割程度なのですが、これを5割超にすることを当面の目標にしています。グループ会社は規模の違いなどで、社内や地元制作会社によるページ制作、予算などにより制作環境が大きく違っています。特に社員自身が制作する場合を考えて、Webページ作成ソフトでページを作れるデザインガイドラインを制作し、雛形となるサンプルページを配布しました。グループ会社にガイドラインを浸透させ遵守してもらうためには、各社の状況を踏まえ、画一的ではない柔軟な対応とフォローが重要だと考えています。また、バーチャルコミュニケーションズさんのサポートも欠かせません。
原田数ヶ月にわたるPDCAの実行で、現在検査対象としている総合トップページおよびその周辺ページでの問題点はほぼ改善できました。今後は製品ページなどへ検査対象を広げていきたいと考えています。また、改善後の再検証やチェック内容のより一層の改善も必要との認識があります。バーチャルコミュニケーションズさんには、その辺りもサポートしていただければと思っています。
粕谷企業サイトを訪れる方のほとんどは、製品情報の入手が目的だと考えています。そこでは洗練されたコピーやデザインも大切ですが、我々デジタルメディアグループが担っているのは、いかに目的の情報にスムーズに誘導するかです。そのため、サイトの「ユーザビリティ/アクセシビリティを高める」ことが重要となってきます。そこで、ヒューマンセンタードデザインをベースとしたサイトづくりに加えて新しい技術を積極的に取り入れています。バーチャルコミュニケーションズさんは、“システム構築そのものやWebデザインそのものだけではなく、ユーザビリティ/アクセシビリティを理解した上で、新しい技術やサービスを提供できる稀有な会社”。これが我々の認識です。他にはない新たなサービスや誰も試したことのない実験的なツールなど、どんどんご提案してくれることを期待しています。