Japanese Society for the Science of Design
NII-Electronic Library Service Japanese Sooiety for the Soienoe of Design
ウ
ェブ
サ イ ト
デザ
イ
ン
と
標準
化
The
Standardization
ofWebsite
Design
酒 井正
幸
SAKAI
Masayuki
大 矢冨保
三菱電 機 Mitsubishi Electric c。rp。rati。n
OHYA
T
。miyasu澤
田久美
子SAWADA
Kumiko
1
．
は じめ に わ が国のインター
ネット人口 は約6900
万人に達し［注1
コ、
いまやユー
ザー
はPC
や携 帯 電 話を通じて 日常 的 にインター
ネット上のさまざまなウェ ブ サ イ トにア クセス している。
その 目 的 も単な る情報検 索だ けでな く、
ショ ッ ピング、預 貯金、株式投 資、チ ケット予約な ど日常生活 のあらゆ る分野 に 広 が りつ つ ある。
見方を変える と、PC
や携帯 電 話の小 さな 画 面が、
商店の店 先であ り、銀 行 の受 付窓口や 駅の発券 窓口 であっ た りするわ けであ る。 これ はヒュー
マ ンインタフ ェー
スデ ザ イン の視点 か ら 見ても大きな変 革である。
リア ルな 商 店で の買い物、
駅の窓口で の指 定 席 券 の購入 手続きなど は 長 年 培 わ れ た独特の 作法 が あ り、
ユー
ザー
のメンタル モ デル として既に 定着してい ると言 え よう。 これ を ウェ ブ 上の画 面 とい う制 約 され た 空 間で 再現 することはそう簡 単で はない。
し か しながら、
訪 問 するサイ トが それ ぞれ独 自のイン タフェー
ス デ ザインを採用したならユー
ザー
は大混 乱 に陥るであ ろ う。
細部はともかく基本的な インタフェー
ス デ ザインにつ い ては最 低限の 標準化が不 可 欠であ る。
一
方 メー
カー
サ イ トの 重 要 性 も 増 してい る。
こ こは メー
カー
と顧 客との 直接 的 な インタフェー
スであ り、
メー
カー
のポ リシー
や 最 新 情 報な ど が リア ルタイムで発信 さ れ、
同時に 顧客 情 報を収 集し、
ニー
ズを探る受信サ イ ト でもあ る。
最近で は購買行 動の 前段階として複 数のメー
カー
サ イ トを 訪 れ、
そこで 比 較 検 討 した うえ で購入製品 を 決 定 す るユー
ザー
も 少 な くない。す な わ ち メー
カー
サ イ ト のできの 良し悪しが売り上 げに直 接的に影 響 する時代 に 既 に 入っ ている とい っ ても過 言では ない。
だ が、
メー
カー
サ イ トの企画・
制 作・
運 用部門 は、
製 品情報 につ いては機種 毎 に 異 なっ ていた り、
環 境情報 は環境 推 進 部門、
採用情報 は 人事 部門等コ ンテンツ に応じ て担 当 部 門 が 異 なる ケー
ス が 少 なくない。
すな わ ち、
メー
カー
サ イ トひとつ 取 り上 げて み ても基 本 的 な インタフェー
スデ ザ イン の標 準 化を社内に徹 底しない と、
ユー
ザー
に そっ ぽ を向かれ る恐れが多分 に あ る。
本論 文は 上記 背 景 を
踏
ま え、
当 社の公 式 サ イトを 事 例 に ウェ ブ サ イ トデ ザイン の社 内 標 準 化 活 動につ い て 述べ る。
2 ．
標 準化 （ガイドライン策定）の 狙 い メー
カー
サ イ トの 主 目 的 は より多くの 顧 客に訪 問して もらい、
製品 や サー
ビ スにつ い ての認 知 度 を 上 げる こと に ある。
しかしな が らワンクリックで別のサ イ トに簡 単に乗 り換え られ るウェ ブにおい て これは容 易 なことではない。
ヤコブニー
ル センは ウェ ブ サ イ トの リピー
タ確 保の 条 件として 次の4項 目 を あげている ［参考文 献3
］ 1）質の高いコ ンテン ツ2
）頻繁なアップ デー
ト3
）短いア ク セス時 間4
）使いや す さ 当社で は メー
カー
サ イ トの 改善を 目的に 下 記2項 目 につ い ての ガイ ドラインを策 定し た。
またこれ とは 別 に ネットワー
ク関連の運 用 規定の整備 も図っ た。
1
）デ ザインイメー
ジの 統一
2
）ユー
ザビリテ ィの統一
デ ザ イン イ メー
ジの統一
の目的は、
家 電 製 品から産 業 機器 まで さまざまな分 野の製品・
システムを抱える 当 社の顔 を揃えることで あ り、
顧 客 を はじ めとす るステー
ク ホル ダー
に 当社を よりよく認知してもらうた めの 必 須条 件である。
ま たユー
ザビリティ の統一
は 、ペー
ジ ご との使い勝 手の 違い によるユー
ザー
の 混乱を防止する ことにっ な がる。
い わは メー
カー
サ イトは メー
カー
の顔であり、
そ こ の ユー
ザビリティを 通 じて取 扱い 製 品 自 体の使い 勝手 を 判 断 され か ね ない 。メー
カー
サ イ トのユー
ザビリテ ィ の影 響 は 単 に その サ イトだ け に 留 ま らず、 その企業の ブランドイ メー
ジ に まで 及ぶ可 能 性があ る。24
時間 多くの ユー
ザー
の 目 にさらされ 続 け るる公式26 sPEclAL IssuEoF JssD vol
．
11 No．
4 2eo4 デ ザ イ ン学研究特集号Japanese Society for the Science of Design
NII-Electronic Library Service Japanese Sooiety for the Soienoe of Design
サイ トのユ
ー
ザビリテ ィ の向 上は個々 の製
品の そ れ 以 上 に極めて 重要な課 題 とい えよう。
3 ．
ユー
ザ ビリティ評 価 とガイドライン策 定図
1
にガ イ ドライン策定の プロセスを 示 す。 ウェ ブデ ザイン案は 正 式に アップロー
ドする前にまずテストサ イ トでユー
ザビリティテストを実 施 する。
ユー
ザ ビ リテ ィ テ ス トの結果 を踏
ま え て 改善 指 針を作 成し、
この一
部は 共通のガ イ ドラ インとして社内関 連 部 門へ の普及 を 図っ てゆく。 ま た ウェ ブ サ イ トの インタフェー
ス は、
ユー
ザー
の使 用 す るパ ソコ ン、携帯 電 話の 種 類 に よっ てペー
ジの 見 え方が 異 なっ てくるた め、
多様なハー
ドウエ アとブ ラウジ ングソフトへ の対応 を要求 され る。
ガ イドラインもこの 点 を配慮し、
きめ細かく記 載 する必要がある。
さらに、
ガ イ ドライン の 普及 に あ たっ て は 制作側の負 担を軽 減 する た めの標準テンプレー
トの整 備・
提 供 も欠か せない。
三 菱 電 機で は本 社宣伝 部に自社公式ウェ ブ サ イ トを 統 括・
運 営 す る部 門 を置き、
2001 年 にデ ザイン研 究 所 と共 同でウェ ブ サ イ トの大幅な リニ ュー
ア ルを 行っ た。
現 行 ウェ ブ サイトおよび リニ ュー
ア ルサ イ トのプロトタイ プのユー
ザビリテ ィ評 価を繰り返し実 施し、
評 価 結果 を踏
ま え、
より使いや すい ウェ ブ サ イ ト構築の た めの イン タフェー
ス提案、
お よび ウェ ブ サ イ トデ ザイン の た めの ガ イ ドライン策 定 を行っ た。3 ．1．
ユー
ザ ビ リティ評 価 結 果 を踏ま え た サ イ トリニ ュー
アル （1
）ユー
ザ ビ リテ ィテ ス ト ガ イドライン策 定に先立 ち現行の公式ウェ ブサイ ト（以 下 旧サ イトと略 す ）のユー
ザビリティテストを実 施した。
評価対象として当 社サ イ トの ほ か 同業 他 社 数 社の サ イトも取り上 げ た。
被験 者 は20
代か ら40
代の 男 女10名 で、
それ ぞ れBtoC
（コン シュー
マ 向けビジ ネス）、BtoB
（企業 向 けビジネス）の2
チー
ムに分 けて実 施した。 被験者に行わ せ た タス ク は次の とお りである。
OBtoC
； タスク1
：デ ジ タルテレビの 仕様 を調べ る。 タスク2
；エ アコン の修理の依頼 方 法につ い て調べ る。
タスク3
：面 白 そ うな ところを自由 にブラウジングする。
OBtoB
： タス ク1
：ビジネス ユー
ス の パ ソコ ン の 仕 様お よ び購 入方 法につ いて調べ る。
タスク2：喫 煙 用 集 塵・
脱 臭 機の 仕 様およ び購入方 法 につ い て調べ る 。 タス ク3
：オフ ィス用エ アコ ン設 置の依 頼方法につ い て調べ る。
ユー
ザビリティテス トの 結果、
当社旧サ イトにつ い て、
BtoC お よび BtoB にほぼ共 通で次のような 問 題点 が抽出 され た。
○エ アコ ンや喫煙用集塵・
脱臭 機の含まれて いるカ テゴリー
名が分か りにくい 。 ○仕 様に関 する情 報がスクロー
ル しない と出てこな い ことに気づきにくい。
○ 仕様 書の 用 語が専門的 す ぎる。
○ トップペー
ジへ の戻 り方 が分か りに くい 。 ○問い合わ せ先が分か りに くい。 ○ その他 上 記ユー
ザビ リテ ィ評 価 結果に基づ き旧 サ イ トの リ ニ ュー
アル を行っ た。
特に 旧 サ イ トは トップペー
ジの 情報 量 が多 す ぎ、
／
ウエブデザ
イン 社 内へ の 普 及 活 動 ぐ一
ガイドラ イン・
イントラネット上 で の・
デ ザインガ イ ドラ イン公開
・
ペー
ジの テ ンプレー
ト ＜一
匯 蘯コ
＼
＼
プロトタイプ （テ ス トサイ ト）〆
ユー
ザ ビリティ評 価 図1 ガ イ ドライン策 定プロセスデ サ イ ン学 研究特 集 号 SPECIAL ISSUE OF JSSD Vol
．
11 No．
4 2004 27Japanese Society for the Science of Design
NII-Electronic Library Service Japanese Sooiety for the Soienoe of Design
検索し づらいもの であっ たが、 画 面の 情 報量 を 整 理 し
、
多 様 なユー
一
ザー
の使 用 環境下でも影 響され に くい 表 示 サ イズに統一
、
スクロー
ル は最 小 限に し、
一
覧性 を確保した。
以 下主 な 改 善点につ いて述べ る。
（2
）トップペー
ジの 改善
ユー
ザー
はトップペー
ジで迷 うとほとんどすぐ に閲 覧 をやめ て し まう。
入 口で迷わない ように、
利 用 目的に応 じた 入口 （個人、
法人 別）を 設 け、
最も利 用 頻度の 高い と思 わ れ る製品情 報 検 索を しや すい よう工夫した。
ま たユー
ザー
が最 後に訪 れ たペー
ジ が次回からの トップペー
ジとなる仕 組み を設 け た。
さらに 画 面 表 示 サ イズの統一
に よ り様々 な 通信 環境 に対応できるよう配 慮した。 （3
）サ イ ト共通のナ ビゲー
ション ルー
ル 共 通ナ ビゲー
ション バー
（ヘ ッダ）及 びフッタや共 通 のナビゲー
ション ルー
ル を設 け、
同時に メニ ュー一・
サ ブ メニ ュー
等の表 示 方 法 を 統一
した。具 体 的 に は・
共通ナビゲー
ションメニ ュー
を設ける・
「トップへ 戻る 」等の基 本 的 なナビゲー
ション ルー
ル を統一
する・
同一
サ イ ト内の アイコ ンやボ タン のデ ザインを統一
す る・
リンクの有無 が わ か りや すい デ ザ インとす る （4
）分かりやすい用語 社内 固有の 製品 分 類 や名 称の 使用は避け、
ユー
ザー
にわか りや すい一
般 的な用 語、
分 類 を用い た。
3．
2．
ウエブデ ザインガ イドラインの策 定まずは じ め に 「わ かりや すい
・
見てもらえ る・
使いやす い 」デ ザインを ガ イ ドライン の 考え 方の基 本 とし、
ウェ ブ サ イトのユー
ザインタフェー
ス指針 を示した。
「わ かりや すい 」とはサイ トの全 体 像を把 握しや す い、
個々 の 文字や 図 が 見 や すい、
表 現 が 理解しや す い な ど を全て満 足 す ることを 指 す。 「使いや すい 」とは、
操 作手順が 少 な く、
簡 単で迷 う ことが ない。
また親 切な ナビゲー
ションと確 実 なフ ィー
ド バ ックがあることなどを言 う。
「見 て も らえ る 」とはユ
ー
ザー
が 期 待 す る情 報が あ る か どうか が分りや す く、
ほ し い情 報が素早く確 実に表示 されることである。
また、
ユ ニ バー
サル デ ザイン視 点か ら の ア ク セシ ビリティ（誰にでも使える）の 確 保 も重 要 なポ イントであ る。
（1）ウェブサ イ トデ ザインガイドラ インの構成 こ こ で、 実際に策定 した ウェ ブ サ イ トデ ザ インガ イドラ ン の構 成を紹 介 する。 【1
】ペー
ジレイ アウトデ ザインに関 するルー
ル 1−
L 画面表示サイズの基 準 1−2．
基本的画 面レイア ウト【
2】
ナビゲー
ションに関す るルー
ル2−1．
メニ ュー
システム2−2．
タ イ トル の付 け方2 − 3 ，
ア イコ ン丶ナ ビゲー
ションボタン等の デ ザインと 使い 方一
… 、
驫…
馨
撫
覊
羅
ra翻 越 雛
v
蠢靉
論
鴇
、
総瀞
築
胤 灘 攤 黜 購 環騨
・
1．
旧ウェ ブ サ イ トのユー
ザ ビ リ 2．
ガ イドライン策 定 テ ィ テ スト（他 社比較 ）輳
舞罐嚇
3．
リニ ュー
ア ル テストサイト 4．
リニ ュー
アルサ イトのアッ のユー
ザビリティテスト プロー
ド 図2 ユー
ザ ビ リテ ィテ ス トとサ イトのリニュー
アル28 SPECIAL ISSUE OF JSSD Vol
．
11 No．
4 2004 デ ザ イ ン学研究 特 集号Japanese Society for the Science of Design
NII-Electronic Library Service Japanese Sooiety for the Soienoe of Design
2−4．
リンク表 示2−
5検 索シ ステ ム 【3
】コ ンテンツデ ザインに 関するルー
ル3−
1．
ユー
ザー
の使用 環境へ
の 対応 3−
2．
ユー
ザー
訴 求の た めの デザイン3−3．
文字／ 文 章3−4．
画 像 ／サウンドデー
タ等3−5．
その他HTML
の 問題【
4】
ユ ニバー
サル デ ザイン視点 か らの アクセ シ ビリティ に関 するルー
ル4−1．
聞 く、
見るため の手段の提 供4−2．
色の設定 4−
3．
時 間に よっ て自動的に 更新され るオブジェ クトや へ一
ソ4−4．
新しい技 術のサ ポー
ト 4−5．
様々な入力 装 置へ の対応 【5
】グロー
バ ル対応表示基準に関するルー
ル5−
1．
日時の 表 記の基 準5−2
通 貨、
尺度の 単位 5−
3．
言 語の選 択【
6】
プ ライバ シー
ポ リシー
／免責 表示関 するルー
ル 6−1．
免 責 事 項の表示6−2
個 人情 報の保 護に関する記 述 速いス ピー
ドで革 新が続 くことが予想される。
こ の 中に は動画 を含め た表現の 多 様 性 や 自 由度を飛 躍的に高 め る技 術も当 然含まれ るで あ ろ う。
そ うい う意 味か らも、
今回策 定した ガ イドラインは絶対的な もの で は な く、
今 後の 技術動向、ユー
ザー
ニー
ズの変 化を敏 感に感じ取 り、
ガイドライ ン の改定 とユー
ザビ リテ ィ評 価に よ る検証、
社 内へ の普 及 活 動 を一
層 活 発 化し てい く予定である。
尚、
本 ガイ ドライン策 定に あ た り、
貴重 な ご 助 言 をいた だいた東 京工科大学 若 林 尚樹 助 教授に厚 く御 礼 申し上 げる。 注1
） 平 成14
年通 信利用 動 向調査：総 務省 参 考 文 献1
） 若 松正晴、
沢 田 久 美 子：インタフェー
ス評価技 術、 三菱 電 機 技報 VoL76 、 p．
50−
53 、2002 2） 三菱 電 機 （株 ）デ ザイン研 究所 編：こ んな デ ザイン が 使いや す さを生 む、
工業 調査会、2001
3
）Jakob
Nielsen
著、
篠 原 稔 和 監 修、
グエ ル 訳：ウェ ブ・
ユー
ザビリテ ィ、
エ ムディエ ヌコー
ポレー
ション、
2000 尚、
これ 以外にサ イ トの 登録・
管理や運用に 関する 項目、
及び具 体 的 なデ ザインテンプレー
ト等 は 本 社 宣 伝 部の ウェ ブ サ イ ト事 務局 で 作成し、
ガ イドラインと共 に 社 内イントラネット上 で公 開 してい る。 4．
お わ りに 以上、
当社公 式ウェ ブサイ トデ ザイン の標 準化 につ い て述べ てきた。
リニュー
アル 前 （2000
年 末 ）と比 較 し、
ペー
ジビュー
（1ヶ月 あ た りの 累 積 閲覧ペー
ジ数 ）が そ の後の3年 間で約4 倍に 急増した。 もち ろんこの 間のイ ンタネット環境 整備の急 速 な 進 展 も影 響し て い る と考え られ る が、
標 準 化に よ るウェ ブ サ イ トデ ザ イン の質 的 向 上 が寄与したことは疑い の無い事 実である。
た だし、
インター
ネット関 連 技 術 やイン フラ は今後 もデ ザ イ ン学 研 究特集号 SPECIAL
