しゃべログ：ブログ読み上げブラウザの開発
嵯峨田良江† 渡辺昌洋† 浅野陽子†

Shabelog : Universally Designed Voice Browser
YOSHIE SAGATA†, MASAHIRO WATANABE† and YOKO ASANO†
1.

はじめに負担である．
一方，拡大鏡ソフトを利用している場合は，見える

高齢社会の進展により，情報のユニバーサルデザイン（UD）が重要になっており，様々な研究が行われている[1]．ウェブの UD とは，高齢者・障がい者を含む誰もが，ウェブの情報を扱えることである．ウェブの利用方法として，個人が容易に情報を発信出来るブログの利用が，近年，急激に増えている．しかし，ブロ領域が限られた状態でのマウス操作になる．従来のブログ画面の様に，最新のコメントやトラックバックといったブログメニューが画面の上下左右に散在して表示されると，マウスポインタの移動距離が長くなるため，記事本文にたどり着くのに時間がかかるという問題がある．

グは合成音声で文字を読み上げるスクリーンリーダや音声ブラウザ（以下，読み上げソフト）を利用する場
合に，情報提示がしづらいウェブサイトの一つである．
ブログの情報をうまく読み上げ伝える技術を確立できれば，他のウェブコンテンツの読み上げにも応用できると考え，ブログ読み上げブラウザ“しゃべログ”の開発を行っている[2]．本稿では，全盲や弱視の方に配慮した，しゃべログのインタフェースデザインについて報告する．
2.

ブログにおける読み上げソフト利用時の問題点
音声読み上げソフトを使用しているユーザには，文字を目で読むより，読み上げ音声を耳で聞く方が楽なため，弱視ユーザも多い．その際，弱視ユーザは読み上げ音声を聞きながら，どこが読み上げられているかを目で追うことも多い．そのため，音声提示方法以外に，表示方法も工夫することが必要である．全盲ユー
ザ，弱視ユーザが，従来の読み上げソフトを利用してブログを読み上げる場合，以下のような問題がある．
まず，ブログを読み上げソフトで読み上げると，ページの先頭から順に読み上げる．多くの場合，ブログさらに，画面が光って見えづらいのを避けるため，Windows ユーザ補助のハイコントラストモードを利用している弱視ユーザも多い．ハイコントラストモードとは，ソフトやブラウザの背景色や文字色を，ユーザの設定した色（背景色は黒，文字色は、白／黄／緑である場合が多い）に変更することを指す．しかし，アイコンの中のデザインなど画像データは，背景色と同じ領域は黒に切り替えられるが，背景以外のデザイン部分は、そのまま表示されてしまうため，見づらくなるという問題もある．
3.

しゃべログの概要
第 2 章で述べた問題点を解決するブログ読み上げブラウザとして，しゃべログを開発した．システム構成を図 1 に示す．効率よくブログ記事本文にアクセスするためには，ユーザの記事選択プロセスに対応した順に，選択に必要な情報だけを取得できることが望まし
い．本システムではまず，読み上げ解析エンジンで，ユーザの記事選択プロセスに対応させて，ブログのメニュー，ブログ記事タイトル，ブログ記事本文といったブログの要素を取得する ．次に，各要素を階層化し，のメニューやそのメニューに対応したタイトルリストが先に読まれ，なかなか記事本文までたどり着くことができない．さらに，どの情報がブログのメニューで，どれがブログ記事のリンクなのかなど，ブログ構造を把握するのが難しいという問題もある．
また，ブラウザの操作方法が分からなかった場合は，ブラウザとヘルプファイルを交互に読み上げながら操作するということになるが，ユーザにとっては大きな†

日本電信電話株式会社 サイバーソリューション研究所
Cyber Solutions Laboratories, Nippon Telegraph and Telephone
Corporation

図 1 しゃべログのシステム構成

上位階層の選択内容に応じてインタラクティブに変化

めに，各種操作アイコンおよび音声読み上げコントロさせて提示する．

ールを画面上部へ集中的に配置した．

しゃべログの画面構成を図 2 に示す．ブログ操作に

4.4

ハイコントラストモードへの対応

関する各種操作アイコンと読み上げコントロールが上

図 3 は，しゃべログの画面をハイコントラストモー部に配置され，メニューエリア（新着記事やアクセスドで表示した場合の画面例である．背景色と同じ色のランキングなど goo ブログで提供されているブログの領域の色が変更されても，各種操作アイコンが見づら

メニュー，および最新のコメントや最新のトラックバくなることが無いように，アイコンデザインやテキスックなどブログ記事閲覧メニュー），タイトルエリア

トの輪郭に白色で縁取りをつけた．この縁取りによっ（メニューエリアで選択したメニューに対応した下位て，アイコンやテキストをはっきり表示できる．

階層のブログ記事のタイトルリスト），および，コンテンツエリア（ブログ記事本文）が下部に表示される．

図 3 ハイコントラストモード使用時の画面例
5.
図2
4.

おわりにしゃべログの画面構成

しゃべログの特徴

本稿では，視覚障がい者でも効率よくブログを利用できることを目的として開発したブログ読み上げブラ

階層メニューを用いたブログ記事選択

ウザ“しゃべログ”について報告した．視覚障がい者

ブログの情報構造を理解しやすくするためには，情のブログ利用時の問題点を解決するために，階層メニ報を階層化して提示することが重要である．また，効ューを用いたブログ記事選択，音声による操作補助ガ

率よくブログ記事本文に誘導するためには，ユーザのイダンス，操作アイコンの集中配置，および，ハイコ記事選択プロセスに対応して，記事選択に必要な情報ントラストモードに対応した画面デザインという 4 つだけを順に提示し，読み上げることが重要である．しの特徴をしゃべログに持たせた．

4.1

ゃべログでは，ブログの要素を階層化して，図 2 で示

全盲ユーザ，弱視ユーザによる評価実験の結果，従したように表示する．上位階層であるメニューエリア

来の読み上げソフトと比較して，ブログ記事本文へのから一つの項目を選択すると，それに応じて下位階層アクセスが容易であることや，アイコンのデザインがのメニューエリアの項目が変更される．メニューエリ分かりやすいことなどが確認できた．視覚障がい者にアの項目，タイトルエリアの項目から順に選択してい優しい，しゃべログのインタフェースデザインは，高くだけで，コンテンツエリアにブログ記事本文を選択

齢者にも有用であると考えられる．今後は，高齢者にすることができる．

対する評価実験を行い，高齢者にとっても使いやすい

4.2

音声による操作補助ガイダンス

ブラウザを実現するための検討を行っていきたい．

ヘルプを参照しなくても操作できるように，各種操

参 考 文 献作 ア イ コン ，読 み 上 げコ ント ロ ー ルや 「フ ァ イ ル1) Vanderheiden, G.: Design for people with functional limitations.

（F）･･･」などのメニュー項目には，機能や操作説明

In Salvendy, G. (Ed.), Handbook of Human Factors andの音声ガイダンスを付加した．また，ある一定時間，Ergonomics, 3rd Edition., New York: John Wiley and Sons,

ユーザが無操作の場合には，該当するアイコンなどの内容や操作に関するガイダンスが流れる仕組みとした．
4.3

操作アイコンなどの集中配置

マウスポインタの移動距離が長くなるのを避けるた

pp.1387-1417(2006).
2) 嵯峨田, 岡野, 渡辺, 浅野：しゃべログ：視覚障がい者に優しい読み上げブラウザとは, HIS2006, pp.1029-1034 (2006).