はじめに

デザイン事業部の梶原です。
突然ですが皆さんは『8番出口』というゲームをご存知でしょうか？

このゲームの舞台は無限にループする駅の地下通路です。
一見変わりのない景色ですが、時折り通路の壁やポスターなどに「異変」が生じます。
プレイヤーは異変を見つけたら道を引き返し、異変が無ければそのまま進むことを繰り返します。
その判断が全て正しければゴールである「8番出口」に辿り着ける、という構成です。

非常にシンプルながらも中毒性があると話題を呼び、累計170万ダウンロードを超える世界的ヒットとなりました。

そしてこのゲームを象徴するものといえば何を思い浮かべますでしょうか。
ホラー要素や通行人の謎のおじさんも印象的ですが、私はこのゲームの象徴は、「サインシステム」 ではないかと考えました。

聞き慣れない言葉かもしれませんが、「サインシステム」とは、鉄道駅をはじめとした公共施設等に設置される案内標識のことを指します。
『8番出口』の黄色い案内表示もサインシステムの一つです。

サインシステムの事例

このサインシステムには、細部にまでデザインの工夫が行き届いています。
中でも駅は老若男女あらゆる人が利用する場所であるため、誰にとっても読みやすく理解しやすいデザインが求められます。

今回はゲーム『8番出口』の形式にならい、サインシステムを題材に「デザインの異変を探す」という形でクイズを作成してみました。
引き返さずに最後まで見ていただけますと嬉しいです。

【第1問】

まずは簡単なところですがこちら！どちらがより正しいデザインでしょうか。
またどんな「異変」があるのかも考えてみてください。

第1問の画像

並べてみると一目瞭然ですが、正しいデザインはAです。
Bに感じる異変は、カラーコントラスト比の低さです。

Bのように劣化している案内表示も、実際の駅で時折見かけますね。
しかし、遠くから看板を確認したいときや視力が弱くなりやすい高齢者の方にとって、コントラスト比が低いと情報が判別しにくく、利便性が大きく損なわれてしまいます。

国際的なコントラストの基準

WCAG（Web Content Accessibility Guidelines）という国際的なガイドラインでは、文字色と背景色のコントラスト比に関して以下のような基準が定められています。

  • AAA基準：7:1以上
    最も高いレベルの基準。より高い視認性が必要な場面で推奨
  • AA基準（テキストサイズが18pt未満）：4.5:1以上
    標準レベルの基準。多くのWebやアプリで最低限守るべき指標
  • AA基準（テキストサイズが18pt以上または太字の14pt以上）：3:1以上
    テキストサイズが大きい場合は、多少コントラストが低くても許容

単に見た目がいい配色にするだけでなく、誰にとっても読みやすく情報が正確に伝わることが、デザインにおいて非常に重要なポイントです。

コントラストチェックツール「Contrast Grid」

では実際にデザインを作成する上で、コントラスト比がWCAGの基準を満たしているかをどうやって確認すればよいのでしょうか？
そこで便利なのが、EightShapes社が提供する無料ツール「Contrast Grid」です。

カラーコードを入力するだけで、文字色と背景色の組み合わせごとのコントラスト比がグリッド形式で一覧表示されます。
基準を満たしているかが一目で分かるので、色の設計やUIデザインの確認作業に非常に役立ちます。

EightShapes社が提供するツール「Contrast Grid」

このツールで、問題で使用したサインシステムのコントラスト比もチェックしてみました。

正解のAのデザインは、最高基準であるAAAレベルを満たしており、とても読みやすいことが証明されています。
一方で不正解のBのデザインは、最低基準すらクリアしておらず、視認性の低いデザインになっていることが確認できました。

「Contrast Grid」の使用事例

このように、コントラスト比は視認性の高いデザインを作る上でとても大切な要素です。
「なんとなく見づらい」を感覚だけに任せず、ツールを使って数値で確認する習慣を持つことで、誰にとっても見やすいデザインに近づけることができます。

【第2問】

続いての問題はこちら！
どちらがより正しいデザインか、どんな「異変」があるか考えてみてください。

第2問の画像

この場合、正しいデザインはAです。
Bに感じる異変は、デザイン4大原則の「近接」と「強弱」を守れていないことです。

第2問の解説

デザイン4大原則とは？

デザイン4大原則は、情報を整理し視覚的にわかりやすく伝えるための基本ルールです。

1.近接
関連する情報を近づけて配置することで、グループとして認識しやすくする
2.強弱
サイズや色の違いをはっきりつけることで、情報の優先順位が明確になる
3.整列
要素を揃えて配置することで、視覚的なつながりと統一感が出る
4.反復
フォントや色などの要素を繰り返し使うことで、一貫性とリズムが生まる

近接について

不正解のBのデザインでは、左方向の目的地と右方向の目的地の間の余白が均等になっており、どちらの方向に何があるのかが一目で判断しづらくなっています。

正解のAのデザインは、「左方向の目的地」「右方向の目的地」をそれぞれグループとしてまとめられており、視線の流れに従って自然に情報が読み取れるようになっています。
「近接」の原則がしっかりと守られているのが分かりますね。

強弱について

また不正解のBのデザインでは、日本語と英語のフォントサイズが同じになっていて一目で目的地を確認しにくい状態になっています。
日本の駅のサインシステムでは、日本語は視覚的に大きく太く、一方で英語は小さく細く表示されることが一般的です。この設計は、デザイン原則「強弱」の考え方に基づくものです。

日本のサインシステムでは、当然利用者の多くが日本語話者であることから、日本語の案内がもっとも目立つようにデザインされています。
一方英語話者は全体の中で少数であり、視認性の優先度は相対的に低いため、補助的な役割として弱く配置するのが適切です。

このように日本語と英語で表記の強弱を明確にすることで、駅のような情報量が多く視線が散りやすい環境でも、利用者が迷わず目的の情報にたどり着けるよう設計することができます。

残りの原則である「整列」と「反復」のルールが守れていないパターンも作成してみました。

整列、反復が守られていない例

整列について

この例では、目的地の項目が揃っておらず、それぞれ微妙にずれています。
一見些細なズレに見えるかもしれませんが、これが視認性や読みやすさに大きな影響を及ぼします。

案内表示のように、瞬時の判断が求められるデザインではこの「整列」の原則が特に重要です。
整列が乱れていると、視線があちこちに移動してしまいどこを見ればよいのか迷いやすくなるため、案内の役割を果たしづらくなってしまいます。

正解のAのデザインのように視覚的に左右へ振り分けてそれぞれ整列させることで、情報を一括でスッと読み取ることができ、見る人のストレスを減らすことができます。

反復について

反復の原則は、「視覚要素を一貫して繰り返すことで、デザインにリズムと一体感をもたせる」という考え方に基づいています。

この例では、下2つの項目だけアイコンが丸い枠になっていたり、英語が上・日本語が下になっているものと、その逆のものが混在していたりと、表現のルールが統一されていません。
こうした一貫性の欠如は、サイン全体の印象をちぐはぐなものにしてしまい、ユーザーに混乱や違和感を与える原因になります。

一方で、見慣れたパターンや配置が繰り返されていると、利用者は「これは前と同じ種類の情報だ」とすばやく認識でき、判断のスピードも上がります。
逆に反復が守られていないと、「これは別の情報かも？」と無駄に考えさせてしまい、判断を遅らせる要因にもなってしまいます。

このように普段何気なく見ている案内表示の中にも、デザインの基本的な原則がしっかりと組み込まれていることで、私たちはスムーズに情報を受け取ることができています。

【第3問】

最後の問題はこちらです。
中目黒駅構内にある案内看板をもとに作成しました。

第3問の画像

正しいデザインはBです。
Aに感じる異変は、適切でないフォントと行間の狭さです。

JRが選んだ読みやすいフォント

パッと見て線が太く目立つ看板はAの方ですが、ここでは視認性が重要なポイントです。
Bのデザイン同様、JR東日本のサインシステムではフォントに「新ゴシック」が使われています。

このフォントは、

  • 線が比較的均一でシンプルな字形
  • 特に濁点や交差する線がクリアで、小さな文字サイズでもつぶれにくい
  • 堅苦しすぎないけれど信頼できる雰囲気が、公共交通機関に求められるイメージ（安心・安全・清潔感）に合っている

などの特徴があるため、サインシステムにはぴったりのフォントですね。

商品の宣伝やポスターなどパッと目を引くことが大切な場合には、ポップで太めのフォントは効果的です。
一方でサインシステムにおいては、誰にとっても読みやすく情報がスッと頭に入るようなデザインが重視されます。
そのため、新ゴシックのような視認性に優れたフォントが選ばれることが多いようです。

このように、「目立たせたいのか」「読みやすく伝えたいのか」といった目的に応じて、フォントを適切に使い分けることが、情報を正しく届けるためのデザインには欠かせません。

読みやすい行間

またAの英文は、行間は文字サイズと同じ高さ(＝100%)ですが、これだと文字が詰まって見えてしまいます。
一般的には、文字サイズの1.5倍から2倍(150%～200%)の行間があると、スラスラ読めると言われています。
以下のように行間にゆとりがあると、見た目も軽やかになって内容も頭に入りやすくなりますね。

読みやすい行間＝文字サイズの150%〜200%

アクセシビリティを高めるデザイン

デザインを作成するときにぜひ心に留めておいてほしいのが「アクセシビリティ」という言葉です。
アクセシビリティとは、年齢やからだの状態、使っている環境などに関わらず、誰でも同じように情報やサービスを使いやすくしましょう、という考え方を指します。

これまで挙げたコントラスト比やデザイン4大原則、適切なフォントや行間を設定することも、最終的にはこのアクセシビリティを高めるためのものと言えます。

またアクセシビリティは障害のある方や高齢者だけに関係する話ではありません。
たとえば少し視力が悪い人の視界だと、先ほどの問題はこんなふうに見えます。

視力が弱い人の視界から見る第3問の画像

Aのデザインの「東横線」などの画数が多い漢字や小さく表示されている英文は、文字が潰れて何が書いてあるかも分からなくなってしまっていますね。
一方でBのデザインは多少読みづらくはあるものの、余白があることでシルエットから何となく読み取ることができます。

実は私も目が悪いので、メガネやコンタクトがないと遠くの看板の字や小さい字はなかなか読めません。
もし災害が起きた時など、裸眼のまま避難しなければならない…なんてことになったら、こうした大事な情報が書かれた文字が読めないのは、やはり少し不安に感じてしまいます。

「アクセシビリティ」という言葉自体は聞き慣れないかもしれませんが、目が疲れていたり、暗い場所だったり、年齢を重ねて少しずつ見え方が変わってきたりなど、生活する上で不自由を感じることは少なからずあるかと思います。

アクセシビリティという考え方は、そういった日常で経験する利用上の障壁や不便さを低減させ、より多くの人が情報やサービスを容易に利用できるようにするためのものです。
デザインする際にはぜひこのことを念頭においてみてください。

まとめ

記事のまとめ

ご紹介したこれらのポイントは、情報を正確に、そして分かりやすく伝えるために欠かせない要素であり、そのすべてが「アクセシビリティ」という大切な考え方に繋がっています。

この記事が、鉄道サインシステムをはじめとした日常で触れるさまざまなデザインを見る目を変え、新たな発見をもたらすきっかけとなれば幸いです。
最後までお読みいただき、ありがとうございました！

アイレットでは、ウェブアクセシビリティ対応を検討されるお客様に対し、経験豊富なデザインチームが最適なサポートを提供いたします。
サービスに関するご質問・お見積もりなど、下記URLのお問い合わせフォームよりお気軽にご相談ください。
アクセシビリティ対応のウェブサイト制作｜クラウドの活⽤ならcloudpack

https://platform.twitter.com/widgets.js

他にもiret.mediaではアクセシビリティに関する記事を多数投稿しております。
こちらからぜひご確認ください！
「アクセシビリティ」の記事一覧