報告13

ロービジョン者向けオンライン地図の開発
Development of an Online Map Application forPeople with Low Vision
成田岳人（新潟大学大学院渡辺哲也（新潟大学自然科学研究科）

工学部）

Gakuto NARITA (Graduate School of Science and Technology，Niigata University)
Tetsuya WATANABE (Faculty of Engineering, Niigata University）

要旨：
ロービジョン者の見やすさを考慮して、背景を黒、道路や鉄道を白、地図内の文字を黄色で表示した
オンライン地図 Web アプリケーションを開発した。本アプリケーションには、地図内の文字、道路、鉄道の表示 / 非表示、配色、文字サイズをユーザ自身が変更できる機能がある。この地図をロービジョン者に試用してもらったところ、配色が見やすいと評価された。

キーワード：ロービジョン、オンライン地図、Web アプリケーション、配色、文字サイズ

地図内の文字を黄色で配色し地図内のオブジェ

１．はじめにクト間のコントラストを高める。二つ目として、近年、スマートフォンやタブレット端末など地図内の文字の大きさを大きめに設定する。三を通してインターネット上のオンライン地図がつ目として、地図内のオブジェクトの表示 / 非広く用いられている。代表的なオンライン地図

表示の切り替えや、文字の大きさの変更をユーには Google マップや Yahoo! 地図、Bing Maps、ザ自身が行えるようにする。

iOS マップなどがある。これらの地図は共通し

2．地図アプリケーションの開発て地図内のオブジェクトの色に淡色、パステルカラーが多く使用されていて、地図全体が明るオンライン地図 Web アプリケーションの開発

く、かつ背景に対する道路・文字のコントラスに は HTML 5、JavaScript、CSS 3 を 用 い た。

トが低い。さらに、地図内の文字が小さい。こ

地図の概観を図１に示す。のため、ロービジョン者にとって使いにくいと2.1. 地図の基本設計考えられる。

デジタル地図の開発プラットフォームである
mapbox（Mapbox, 2021）を用いて、地図の基そこで、既存のオンライン地図の問題点を解本的外観を設計した。

決したロービジョン者向けのオンライン地図

2.1.1.

Web アプリケーションを提案する。解決策の一つ目として、背景の土地を黒、道路や鉄道を白、配色：中野ら（1991）、Legge et al（1985a, 1985b）はロービジョン者の読書課題

連絡先：gakuto5111@gmail.com 受稿：2022/2/15

14において黒文字 / 白背景よりも白文字 / 黒背景ニューをタップする。パソコン版とスマートフォの方がパフォーマンスが高いことを示した。実ン版それぞれのトップページを図 2、図 3 に示す。

際、この配色は日本網膜色素変性症協会のホー試作段階（2021 年１月と７月）のオンライン地ムページでも用いられている。同ページでは、図のパソコン版をロービジョン者数名に見てい文字色には白のほかに黄色も使われている。以

ただいたところ、地図が見やすいとの評価をい上を参考に、本オンライン地図でも背景の土地ただいた。

を黒、道路や鉄道路線などを白、地図内の文字を黄色とし、地図全体のコントラストを上げるとともにまぶしさの軽減を図った。
2.1.2.

文字フォント：石田・天野（2009）は、ロービジョンの学生にとって、明朝系のフォントよりもゴシック系のフォントの方が読みやすいことを示した。そこで、地図内の文字のフォントはデフォルトで設定されている英文フォン
トの DIN Pro からゴシック体の和文フォントである Rounded Mplus 1c に変更した。
2.1.3.

図2

文字サイズ：拡大読書器を用いる

パソコン版のトップページ

ロ ー ビ ジ ョ ン の 学 生 の 約 7 割 が 14pt ま た は18pt を希望したという調査結果（石田・天野 ,2009）を参考に、地図内の文字の大きさを 14～ 18pt で収まるように初期設定した。

図3
図 1 ロービジョン者向けオンライン地図の外観

2.2. 使用機器に応じたページレイアウトの変更
Web ページが表示される際、CSS のメディ

スマートフォン版のトップページ

2.3. 設定機能
以下の設定は、いずれも設定メニュー内で行う。
2.3.1.

道路、鉄道の表示 / 非表示：地図内

アクエリを用いて使用者の端末がパソコンかスの道路、鉄道の表示 / 非表示を任意に切り替え

マートフォンかを判定し、表示内容を変更する。

られる。切り替えるには、地図の項目ごとに用

具体的には、パソコンは画面が広いので、設定意したスイッチを操作する（図 2 の右上）
。初期

メニューをはじめから表示する。一方、スマー

設定では全て「表示」としている。

トフォンは画面が狭いので、設定メニューを表

2.3.2.

文字の表示 / 非表示：地図内の建物、示せず、画面全体に地図のみを表示する。設定

山、水域の名前などの文字の表示 / 非表示を任メ ニ ュ ー を 表 示するには、右上のドロワーメ意に切り替えられる。切り替えには、道路、鉄成田・渡辺

視覚リハ研究道の表示 / 非表示と同様にスイッチを用いる（図2.3.5.

11（1）

15

経路案内：地図内の 2 地点間の経路2 の右中程）。と所要時間を求めることができる。経路案内メ

2.3.3.

ニューを図 6 に示す。経路取得方法は以下の二文字の大きさの調整：地図内の文字の大きさを任意に設定できる。文字の大きさがつである。

変更可能な地図内のオブジェクトは、国名、県名、Ａ）経 路案内のテキストボックスに出発地と目

市町村名、建物や橋、山、水域、道路や交差点、その他道路や歩道、バスや鉄道などの交通機関である。プルダウンメニューをクリック、また的地を入力する
Ｂ）出 発地と目的地を順に地図内でクリックする

はタッチすると、大きさを変更できるオブジェ

出発地と目的地を設定すると、地図内に二つクトが一覧で表示される。ここでオブジェクトのアイコンが出現し、2 地点間の経路を表示する。

を選択してから、スライダーバーの丸印を左右

経路案内で優先する移動手段は公共交通、自家にドラッグすることで 8 ～ 30 px の範囲で文字用車、徒歩、自転車の 4 種類があり、それぞれの大きさを変更できる（図４）。の移動手段に対応した経路と所要時間を表示する。指示文章をクリックすると、地図内でその付近が拡大して表示される。なお、本機能はスマートフォン版のドロワーメニューに収まらなかったため、スマートフォン版には実装しておらず、パソコン版のみで利用可能である。

図 4 文字の大きさ変更のメニューとスライダーバー
2.3.4.

オブジェクトの色の変更：地図内のオブジェクトの色を任意に設定できる。変更可能 な 色 は、 赤、青、黄色、オレンジ、緑、紫、明るいピンク、明るい黄緑、明るい水色、黒、グレー、白の 12 色である。これらの色は、カラーユニバーサルデザイン推奨配色セット ガイドブック（カラーユニバーサルデザイン機構 ,2018）を参考に選定した。色を変更するには、まずプルダウンメニューを開いて、色を変更したいオブジェクトを選択する。次に、変更したい色をクリックまたはタップする（図 5）。

図6
図5

カラーパレット

2.3.6.

経路案内

その他の機能：一般のオンライン地図と同様に、地図画像の右下に地図の拡大 / 縮

16
小ボタンと方位記号ボタンを設置した。
また、設定メニュー内に検索ボックスを設け、そのテキストボックスに地名、住所などを入力
すると、地図上のその地点にアイコンが表示さ毎日」記者）、及び本アプリケーションを試用してくださったロービジョンの皆様に深く感謝いたします。

れ、その地点が中心となった地図画像が表示さ文献れる。

NPO 法 人 カ ラ ー ユ ニ バ ー サ ル デ ザ イ ン 機 構

３．おわりに一般的なオンライン地図の配色から背景を黒、道路や鉄道を白、地図内の文字を黄色に変更し、ユーザ自身で地図内の表示を変更可能なオンライン地図アプリケーションを開発した。地図は以下の URL からアクセスできる。
今後は本アプリケーションで作成した地図を実際にロービジョン者に使っていただき、地図の見やすさ、組み込んだ機能の便利さを検証する必要がある。本アプリケーションへの意見、要望があれば、できる限りそれらに対応していきたい。
この原稿は、電子情報通信学会福祉情報工学研究会で発表した技術研究報告をもとに（成田・渡辺，2021）、『視覚リハビリテーション研究』用に全面的に書き改めたものである。
ロービジョン者向けオンライン地図
https://ngo-5111-master-niigata.github.io/CCMforLV/

謝辞
本アプリケーションの記事を掲載してくださった佐木理人様（毎日新聞論説委員兼「点字（2018）カラーユニバーサルデザイン推奨配色
セット ガイドブック 第 2 版 .
https://jfly.uni-koeln.de/colorset/CUD_color_
set_GuideBook_2018.pdf, (2021/10/21).
石田久之・天野和彦（2009）視覚障害学生の読みやすい文字について . 筑波技術大学テクノレポー
ト , 17(1), 6-9.
Legge, E. G., Pelli, G, D., Rubis, S.G., & Schleske,M. M. (1985a) Psychophysics of Reading- Ⅰ .
Normal Vision. Vision Research , 25(2), 239252.
Legge, E. G., Pelli, G, D., Rubis, S.G., & Schleske,M. M. (1985b) Psychophysics of Reading- Ⅱ .
Low Vision. Vision Research , 25(2), 253-266.
Maps, geocoding, and navigation APIs &SDKs Mapbox, https://www.mapbox.com/,(2021/12/14).
中野泰志・千田耕基・大城英名・木塚弘・小田浩
一（1991）視力に及ぼす白黒反転の効果－白黒反転の好みと視力検査の結果の比較－．日本特殊教育学会第 29 回大会発表論文集，24-25．
成田岳人・渡辺哲也（2021）弱視者向けオンライ
ン地図の開発とその評価．電子情報通信学会技術研究報告，121(287)，34-39．
公益社団法人日本網膜色素変性症協会 JapaneseRetinitis Pigmentosa Society, https://jrps.org/,（2021/10/21）．