「視えない人」とグラフィックデザインのおつまみ。〜前編:耳で「聴く」グラフィックデザイン!? 2次元コードで「見えない壁」を突破せよ!〜

おつまみでざいん。

デザイン事業部「アトリエ∞(インフィニティー)」所属、グラフィックデザイナーのwachico.(わちこ)です。

今回の「おつD」はちょっと特別編。今回と次回、前後編2回に分けて、とあるテーマを取り上げます。

そのテーマとは……ずばり「目が見えない人」と「グラフィックデザイン」でございます!

より具体的に言うなら、「視覚が正常ではない人・視覚障がい者」と「グラフィックデザイン」と言えばいいでしょうかね。

<ChatGPT生成プロンプト>
アップロード画像を参考に、視覚障がい者が町を歩く画像を生成してください。明るく柔らかい雰囲気の、水彩スケッチ風タッチで描かれたイラストです。街路樹と低めのビル(商店街)の中央にある茶色い歩道を、視覚障がいのある若い男性が目を閉じたまま、前方に白杖をつきつつ手前方向に歩いてくる様子を描きます。白杖のデザインは1枚目の画像を参考にしてください。歩道には黄色い点字ブロックが敷かれており、男性はその上を歩いています。男性の服はチェックのネルシャツにベルトとチノパン、歩きやすそうなスニーカーです。カバンは斜めがけのボディバッグで、バッグには2枚目の画像のようなヘルプマークの札がついています。絵の構図は、カメラアングルが足元近くからのアオリ。男性を画面の左側に、白杖を含めて顎のあたりから足元あたりまで収まるよう描画します。
ChatGPTによる生成画像+画像編集

「えっ? 何も見えない人に、見えることが前提のデザインが何の役に立つの?」……って、普通はそう思いますよね?

視覚障がいを抱える人たちが、どのように「見える」前提のデザインを認識し、理解しているんだろう? ……って考えると、そのカラクリ、ちょっと気になってきませんか?

前編の今回は、主に「全く何も見えない」「ぼんやりとだけ見える」「視野の一部分だけ見える」……といったタイプの人へのアプローチに絞って考えていきます(勿論、それ以外のタイプの人にも役立つアプローチだと思います)。

何らかのハンディキャップ(障がい・言語の違いなど)があっても、みんなが同様に、またはなるべく不便を取り除き、みんなに近い形で生活ができるよう配慮する。こういった目的で施すデザインのことを「ユニバーサルデザイン(バリアフリーデザイン)」と呼びます。

目が見えない人に対する配慮、といえば「点字」や「点字ブロック」「白杖」などが思い浮かぶかと思います。ですがそれ以外にも、こんなデジタル社会だからこそ生まれた「視覚障がい者のためのアクセシビリティ技術」が沢山あるんです!

※アクセシビリティ(Accessibility)
 あらゆるハンディキャップの有無に関わらず、すべての人が機器・サービス・情報・Webサイトなどを円滑に利用できる「使いやすさ」「近づきやすさ」のことを指す言葉。

多くの人に知っておいて欲しい技術だな、と感じたので、今回はこれらの中からほんの一部についてだけにはなりますが、私なりにご紹介したいと思います。

現代の情報テクノロジーを最大限活用した、素晴らしいアイデアに注目です!



もくじ

【本題の前に:視覚障がいって何?】
【『Uni-Voice』:耳で「聴く」視覚情報】
【『NaviLens アクセシブルQRコード』:見えなくても「読み取りやすい」2次元コード】
【余談:点字 VS『Uni-Voice』〜点字学習の未来〜】
【まとめ】


【本題の前に:視覚障がいって何?】

「視覚障がい」とは、先天的・後天的な原因で視神経に異常が生じるなどして、光そのものが捉えられず何も見えない or 視野が酷くぼやける(全盲・弱視)・光を過敏に感じてしまう(光順応困難)・見える範囲が狭かったりまばらになる(視野狭窄)・健常者とは色の見え方が違う(色盲・色弱)……などなど、主として「目で見ること」に対し様々な障害特性(ハンディキャップ)が生じている状態を言います。ここで挙げた複数の障害特性が、複合的に生じている場合もあるのだそうです(例:健常者よりも視野が狭い&色が違って見える、など)。

<ChatGPT生成プロンプト>
このイラストのタッチと、男性のデザインを維持して、違うシーンを描きます。ロケーションは都会の雑踏の中で、イラストの構図は奥行き感のある真横からの描写で、カメラは被写界深度の深いミドルレンジ。男性の股下から上が絵の中に入るよう描きます。前後、中央に立ち尽くす男性の周りには、通勤時間帯なのか多くの人影が行き交っています。男性は黄色い点字ブロックが敷かれた歩道を、点字ブロックを頼りに進んでいたものの、慣れない場所だったので道が分からなくなってしまっています。そのため、白杖を使う人が周囲に助けを求めるポーズ(杖を両手で持ち、自分の正面に真っ直ぐ縦にして掲げる)をしています。しかしながら彼に声をかける人はおらず、男性は少し困った表情を浮かべています。
ChatGPTによる生成画像(白杖SOSシグナルのイメージ図)

ちなみに視覚障害のある人が外出する際には、白または黄色の杖を持つことが道路交通法で義務付けられているんだとか。ごめんなさい、まさか道交法で義務化されてたなんて私知らなかったです……!

と、いうことはです。この「目が見えない」という身体的ハンデは、それほどまでに生活する上で重大なハンデであり、社会全体で保護し注意をはらうべきものだということの証明に他なりません。

もし、そんな視覚障がいを持つ人へ……、例えばクライアント(依頼主)からそういった方へ向けた商品やサービスをデザインして欲しい、と依頼を受けたら? Webサイトや印刷物を見たユーザー(顧客)がもし、全く目が見えなかったとしたら? 果たしてグラフィックデザイナーとして、どんなアプローチが取れるだろう……?

そう、ふと考えさせられてしまった……、そしてこうやってブログにしてまとめておこうと思ったキッカケが、次にご紹介する『Uni-Voice(ユニボイス)』という不思議な2次元コードとの出会いだったんです。

↑もくじに戻る↑


【『Uni-Voice』:耳で「聴く」視覚情報】

Uni-Voiceユニボイスとは、NPO法人『日本視覚障がい情報普及支援協会(JAVIS)』が提供している、Wordで作成した約800文字の情報が格納可能な、特殊な2次元コードのこと。普段目にする機会が多いだろう、同じく2次元コードの仲間である「QRコード」とは、まったく別の役割を担います。

NPO法人日本視覚障がい情報普及支援協会(JAVIS) 公式サイト トップページのスクリーンショット
NPO法人日本視覚障がい情報普及支援協会(JAVIS) 公式サイト

まず手始めに、文字情報を格納した『Uni-Voiceコード』を作ります。コードの「作成」には別途申請・及びWordのアドインソフト導入など準備が必要ですのでご注意をば。こうして作成したコードを例えば印刷物に貼付すれば、専用スマホアプリを使って印刷物の内容が読み取れる、ってわけです。

音声コードは基本的に印刷物の右下(裏面なら左下)に印刷し、その用紙の表面に対して右下端、コードの近くに半円の切り欠きを1つ(両面印刷なら2つ)つけておかなければなりません。視覚障がい者が指で触れて音声コードの有無を確認でき、読み取りを促すために必要です。

音声コードの印刷されたチラシ・フライヤーの実物見本。音声コード『Uni-Voiceコード』と切り欠き部分の拡大図。
チラシ・フライヤーの切り欠きと音声コード

実際の印刷物は、こんな感じでちゃんと切り欠きがついています。

引用:プリントパック 公式Webサイト
引用:プリントパック 公式Webサイト

軽くではありますが調べてみたところ、安価で注文できる印刷所の中にも、専用の切り欠きオプションに対応している所が見つかりました。


それでは、この音声コードを専用の無料スマホアプリ (『Uni-Voice』または『Uni-Voice Blind』) を使い、カメラで読み取るとどうなるでしょう?

実際にやってみたので、こちらの動画をご覧ください。

■今回読み取ったチラシ:気づいてくださいヘルプのサイン(神戸市) ※PDFファイル

ご覧の通り、たったこれだけで印刷物の内容を説明する音声の読み上げ・テキスト表示・おまけに履歴の保存まで簡単にできちゃうんです! 印刷物には記載していない補足・付随的な文字情報を伝えたり、他にも音声コードが印刷されている場合、その印刷位置を文字(読み上げ)で直接伝えることもできます。

工夫次第で「ビジュアルを超えた要素」をも伝えられ、運用方法も対象に印刷したりWebサイトに掲載すればいい、それだけ。とても便利な2次元コードですね!

↑もくじに戻る↑


【『NaviLens アクセシブルQRコード』:見えなくても「読み取りやすい」2次元コード】

『Uni-Voice』以外にも2次元コードには様々な種類があるのですが、ここではその中からもう1つ、その名もNaviLensナビレンス アクセシブルQRコード』についてご紹介しましょう!

とはいえ『NaviLens アクセシブルQRコード』について説明する前に、その元となるNaviLensコード』についても軽く説明しておきましょうか。

NaviLens 公式サイト トップページのスクリーンショット
NaviLens 公式サイト
引用:https://youtu.be/xcCGxnqAqcw

『NaviLensコード』は視覚障がいのある方はもちろん、日本語が読めない・喋れない外国人旅行客など、すべての人が環境内の情報を簡単に取得できるように設計された、2次元コード×スマホアプリのアクセシビリティ技術です。

最初はスペインにある『アリカンテ大学』と共に、技術スタートアップ中だった『Neosistecネオシステック社』によって共同開発され、その後Neosistec社がNaviLens技術の知的財産権・ライセンス権を保有し運営、現在に至ります。

NaviLensコードの例(NaviLens公式サイトより引用)
NaviLensコードの例(NaviLens公式サイトより引用)

通常の『NaviLensコード』はアクセシブルな情報提供のみならず、設置される空間認識に基づき、方向などの情報を提供することができます。音声案内で 距離・方向・内容をわかりやすくガイダンスでき、例えば「トイレ」「出口」「バス停」などの位置情報や、交通機関の時刻・乗り場情報なども案内できます。特筆すべきは、QRコードや一般的なバーコードに比べて、約12倍離れた場所からでも即座に読み取れるというぶっ飛び性能。どこでも素早く読み取り可能、というのは大きなメリットです。

それなのに『Uni-Voice』と同様、専用の無料アプリをダウンロードすれば、分け隔てなく誰でも簡単に使えてしまうという大盤振る舞い。気になる方はアプリを使って、実際に↑のコードを読み取ってみては?


そしてここからが本題の『NaviLens アクセシブルQRコード(以下「NaviLens QRコード」と表記)』のお話です。

NaviLens アクセシブルQRコードの例
(本サイトトップページに飛びます)
NaviLens アクセシブルQRコードの例
(本サイトトップページに飛びます)
NaviLens アクセシブルQRコードは、簡単な登録だけで無料で作れる(10個まで)。読み上げテキストの追加もできる。
NaviLens アクセシブルQRコードは、簡単な登録だけで無料で作れる(10個まで)。読み上げテキストの追加もできる。

見慣れたQRコードの周囲に、『NaviLensコード』を思わせるようなタイル状のパターンがついていますよね? このコードは、どんなユーザーでも「QRコードにアクセスしやすくする」目的で設計されています。単純にアクセシブルな情報を提供するための機能を付与する、つまり『NaviLensコード』の技術を応用した「新しいQRコード」ってわけですね。


NaviLens アクセシブルQRコード 公式サイト トップページのスクリーンショット
NaviLens アクセシブルQRコード 公式サイト
引用:https://youtu.be/Pp1a1yEGGpk

NaviLens QRコードなら、専用アプリを使えば読み取りの際に動きを止めずに(端末を保持・固定せずに)、最大160度の広角な角度からでも読み取ることができちゃいます。

2次元コードを読み取る時、私たちは当たり前に意識し行為に反映させますが、障がい者は苦手とする「スマートフォンの画面上でフォーカス(ピント合わせ)する」「一定のフレーム内におさめ続ける」ことを、そもそも必要としないのです。ちなみに、専用アプリを介さなくても一般的なQRコードとして機能します。

他の特徴としては、まず一般的なQRコードに比べてはるかに遠くからでも読み取れる点が挙げられます。その有効距離、何と5cmサイズのコードで最大2m離れた位置から検出可能! ……とかいう、こちらも中々のぶっ飛び加減。コードを翳した時の読み取りスピードも、もちろん超高速。例えば歩きながら片手でサッ、と読み取るなども可能なくらいです。

「知りたい」時を逃さずすぐ伝えられる、スムーズな情報伝達ができる……といった特徴を持つため、ユーザーは2次元コードがどこにあるか「正確に」知る必要がなく、目が不自由な人でも使いやすくなっているんですね。

↑もくじに戻る↑


【余談:点字 VS『Uni-Voice』〜点字学習の未来〜】

ところで皆さんは、目の見えない人が点字を習得するまでにかかる期間って、大まかにどれくらいだと思いますか?

引用元:PhotoAC

正解は、基礎を学ぶだけでも最低数ヶ月。その上で読み書きをスムーズに行うには、何と1〜2年以上もの継続的な練習が必要! 通信講座では1年間程度のプログラムが組まれる場合も。

中途失明者(病気や事故などにより、後から「目が見えない人」になった人)は、書きは比較的容易でも触読しょくどく(指で触って読みとること)に時間がかかる傾向があり、とにかく点字を使いこなすには、専門的な訓練と長期にわたる反復練習が不可欠ということです。

参考サイト:社会福祉法人 日本点字図書館

実は先述の『Uni-Voice』には、「約9割の視覚障がい者は点字を読むことができない」という問題を解決するために開発された……、という経緯があります。その理由はまさにこういった「点字学習には時間がかかる・難しい」という根本的な問題が関わっているのは間違いないでしょう。

<ChatGPT生成プロンプト>
このイラストのタッチを維持して、違うキャラクター(主役)・違うシーンを描きます。ロケーションは大きな市立図書館の中のテーブルとソファーの席で、イラストの構図はキャラクターの正面より少し右斜め前から、キャラクターに焦点を合わせたアイレベル。主役のキャラクターは、目の見えない(ほぼ全盲)の小学校中学年〜高学年くらいの女の子です。髪色は黒く、前髪は片方に流したボブカット、桜のモチーフがついたヘアピンを1つ付けています。赤い縁のメガネをしており、襟付きの薄い色のチェックシャツに、チャコールグレーのVネックのニットベストを着ています。ニットベストの片胸には、ビンテージ風デザインのスクールワッペンが付いています。少女は図書館で、自主的に点字を学んでいるところです。点訳された文字を一生懸命に読み取ろうと、指で点訳された本の点字をなぞっています。点訳された本の横には、点字学習のために必要な本や教材が並べて置いてあります。少女の右側のソファーにはヘルプマークの札がついた桜色のランドセルが置かれ、そこに白杖が立てかけられています。少女の表情からは苦戦が見て取れますが、それを上回る楽しさを感じているのが、その口元にあらわれています。
ChatGPTによる生成画像

とはいえ、これらの技術が「点字なんかオワコン(時代遅れ)だから要らんやろ!」……って流れで生まれたもの、という訳なのかと言うと、決してそうではないでしょう。

だって今でも街中や公共施設などの案内表示としては、点字が広く一般的に使われていますから。印刷所では、注文した名刺などの印刷物に、点字で名前や電話番号をつけてくれるサービスを請け負っているところも見かけます。

昨今流行りのAI技術を使えば、点字学習に特化したAIアシスタントやAI教材が作れたり……いや、実はもうそういうの、できちゃってるかも!?(←ちゃんと調べてから来なさい)


【まとめ】

……さて。目が見えない人のためのグラフィックデザイン、どうでしたか?

既に社会生活に根付いている「点字」と、新たなテクノロジーで革新を促す「アクセシビリティ技術」。両方を上手く使い分け、時には併用しながら、より伝わりやすいユニバーサルデザインを生み出していけるといいですよね。

<ChatGPT生成プロンプト>
では追加で、同一人物で「声をかけられた後」のカットを描いてもらえますか? 声をかける人は黒髪をきちんと束ね、グレーストライプのパンツスーツを着た女性で、その身なりから出勤途中のOLらしき人物、とします。女性には、ある程度視覚障がい者に対する支援方法の知識があるように見えます。柔らかい微笑みを浮かべて、男性の隣で優しく声をかけている様子にしたいです。
ChatGPTによる生成画像

今回紹介した2次元コードの技術は、「見えなくても伝えられる」世界にしたい……、そんな途方も無い努力を諦めなかった人たちが、必死に積み上げ、丹精込めて作り上げてきたものです。この機会に、ハンディキャップがある人たちに対して、自分たちだったら何ができるか? どんな工夫ができるのか? ……少し考えてみるのもいいかもしれません。

さて、次回の後編では「色が(正常に)見えない」人たち……「色盲(色弱)」とグラフィックデザインについて考えていきます。

色盲の方の見え方を実際にシミュレーションしてみる、そんなユニークな試みの動画も掲載「予定」なので、えっと、ほどほどに…お楽しみにです〜(……間に合わせろ、明日の自分。)!



ここまでお読み頂きありがとうございました。

それでは、次回をお楽しみに!

↑もくじに戻る↑


※当記事中の一部画像には、商用利用可能な生成AI技術を用いて加工を加えています。詳しくはAdobeの生成AIについてをご覧下さい。

※当記事の一部画像にはChatGPT(DALL-E)によってAI画像生成した物が含まれます。なお該当画像のALTテキストには、可能な限り生成時のプロンプトを併記します。

※当記事の一部画像には、無断転載や不正なAI学習を抑制するため「Glaze」による特殊な画像加工を施しています。詳細については以下をご覧下さい(英文表記)。

↑もくじに戻る↑


2026.01.19

Follow me!

コメント

PAGE TOP