伝わる形にデザインする

目の見えない人や見えにくい人には、画面の文字を声で読み上げるソフト(スクリーンリーダー)を使う人がいます。多くのスマートフォンにも、この機能が備わっています。デザイナーは、目で見る人だけでなく、耳で聞く人にも伝わる画面を考えます。

デジタル庁のガイドブックは、意外な落とし穴を挙げています。見た目をそろえるために「日 時」と文字の間に空白を入れると、読み上げで「ひ、とき」と読まれることがあります。配置は空白で調整せず、レイアウトの設定で整えるのが基本です。

写真やグラフには、内容を言葉で説明する代替テキストを付けます。ガイドブックは、長さを 80 字ほどにする目安を示しています。見出しを正しく付けると、読み上げソフトで見出しだけをたどり、読みたい所へ飛べます。情報 I の構造化が、耳で聞く人の道しるべになります。

情報 I では、画面の色を、赤・緑・青の明るさを 0〜255 の数で表すしくみとして学びます。デザインの仕事では、この数を 16 進数 2 けたずつで書いた色コードを使います。赤 255・緑 0・青 0 の真っ赤は「#FF0000」、3 色とも 118 の灰色は「#767676」です。

文字の見やすさも、数で確かめます。文字と背景の明るさの比を、コントラスト比といいます。デジタル庁のガイドブックは、ふつうの文字で 4.5:1 以上、大きな文字で 3:1 以上を求めています。多くの Web サイトが参照する規格、JIS X 8341-3:2016 に沿った基準です。

比は、白と黒の組み合わせで最大の 21:1 になります。白い背景に灰色の文字を置く場合、#767676 なら約 4.54:1 で基準を満たします。ところが、1 段階だけ明るい #777777 では約 4.48:1 で、基準に届きません。真っ赤な #FF0000 の文字も、白い背景では約 4.0:1 で、ふつうの大きさの文字には足りません。

ここでは、市役所の手続きができるアプリをつくる会社で働く、UI デザイナーの 1 日の例を紹介します。使う人は、若い人から高齢の人まで幅広いのが特徴です。

午前中は、新しい申し込み画面の案をつくります。情報 I で学ぶペルソナの考え方を使い、「老眼鏡をかけて手続きをする 70 代の人」のような利用者を思い描きます。そのうえで、文字の大きさやボタンの位置を決めます。色を決めたら、コントラスト比を計算して確かめます。

午後は、エンジニアと画面の動きを相談したり、試作の画面を使ってもらった結果を見て直したりします。文字を大きく表示したときに、ボタンの文字がはみ出さないかも確かめます。デジタル庁のガイドブックは、文字を 200% まで大きくしても読み取れるようにすることを求めています。

高校のうちは、情報 I の情報デザインとデジタル化の単元を大切にしてください。美術の授業で学ぶ色や構図も、そのまま生きます。情報 II を選べるなら、ユーザインタフェースやアクセシビリティを考えながらコンテンツをつくり、人に使ってもらって評価する流れを学べます。

大学は、情報系の学部でメディアやヒューマンインタフェースを学ぶ道と、芸術・デザイン系の学部で視覚のデザインを学ぶ道があります。どちらから入っても、もう一方を学び足すと強みになります。学べる内容は大学によって異なります。

資格がないと就けない仕事ではありません。国家検定の「ウェブデザイン技能検定」は、3 級ならウェブの仕事に就こうとしている人も受検できます。経験を積むと、サービス全体の使いやすさを決めるリーダーや、アクセシビリティの専門家へ進む道があります。