KNOWLEDGE
KNOWLEDGE

事例で見る、アクセシビリティを考慮したWebタイポグラフィ

毎日アクセスする、ニュースアプリや気になるアーティストのWebサイト。今や私たちの日常とWebは切り離せない関係にあります。デジタルコンテンツが増え続ける昨今、常にユーザビリティの向上が求めらています。その一部が、Webタイポグラフィです。
今回はWebタイポグラフィの観点から事例を交えながら、アクセシビリティに考慮した、誰もが使いやすいWebの設計方法についての学びをシェアします。

アクセシビリティ向上のためのガイドライン

WCAG(Web Content Accessibility Guidelines)ではタイポグラフィについて基準が定められています。
中でも下記の基準はwebの設計時に最低限、押さえておきたいポイントです。

1.4.3 コントラスト (最低限) : テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。

  1. 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコントラスト比がある。
  2. 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブではないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
  3. ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。

1.4.8 視覚的提示: テキストブロックの視覚的提示において、次を実現するメカニズムが利用できる

  1. 利用者が、前景色と背景色を選択できる。
    ※前景色とは、デスクトップの画面上でフォントなど手前に表示される要素の色を指します。背景色は、フォントや図形などの背後に表示される色のことを指します。
  2. 幅が80字を越えない (全角文字の場合は、40字)。
  3. テキストが、均等割り付けされていない (両端揃えではない)。
  4. 段落中の行送りは、少なくとも1.5文字分ある。そして、段落の間隔は、その行送りの少なくとも1.5倍以上ある。
  5. テキストは、支援技術なしで200%までサイズ変更でき、利用者が全画面表示にしたウィンドウで1行のテキストを読むときに横スクロールする必要がない。

日々さまざまな方が訪れることを想定して設計されたWebサイトやWebサービスは、WCAG(Web Content Accessibility Guidelines)が設けたガイドラインを守っており、かつビジュアルも担保された高水準のものが多いです。
ここから先は、アクセシビリティが考慮されたWebサイト、Webサービスの事例を3つご紹介します。

VISUALIZE 60

日本デザインセンターが企画している展示会の特設サイト。

イラストとタイポグラフィがうまく合わさって一つのビジュアルを構成しており、ロゴを除く全ての文字が、Webフォントで実装されています。
和文は、”游ゴシック体 Pr6N”、欧文は”GT America”を用いていますが、それぞれのウェイトを調整し、異なるフォントでも印象の違いが発生しないようにコントロールされています。読みやすさ、ビジュアルともに高い水準が両立されたサイト。

JAL企業サイト

航空会社JALの企業サイト。

第8回Webグランプリアクセシビリティ賞で企業サイトの優秀賞を受賞しています。ページの印象を決定づけるキービジュアル部分においてもWebフォントを利用して、テキストデータの利便性を損なうことのない実装になっています。小学生〜50代までがメインターゲットとなる大衆向けのサイトとして、フォントサイズなども参考にできるでしょう。
また他言語に対応しており、言語が変わっても変化に耐えられるサイト設計がされています。

Netflix

NetflixはサービスのUIだけでなく、日本語字幕のタイポグラフィにも力を入れています。Netflixの公式ブログには、日本における配信サービス開始に伴って、日本語字幕の提供に取り組んだ内容が書かれています。

日本語字幕を設ける前に、市場調査、日本語言語およびメディア関連の専門家アドバイスを受けおり、そこから分かった5つの必須機能を技術によって実現させています。
例えば日本人が洋画を観る際、特に情報伝達に大きな影響を与えるタイポグラフィにおいて力を注いでおり、ルビ、傍点、縦書き、斜体、縦中横 (縦字幕の数字を横書きで表示) についての内容が詳しく書かれています。

おわりに

今回は、Webサイトやデジタルプロダクトを事例に、アクセシビリティが考慮されているWebタイポグラフィについて紹介しました。

デジタルと日常の結びつきが強くなる限り、今後も誰もが使いやすい設計が求められます。前半に紹介したWCAG(Web Content Accessibility Guidelines)のガイドラインをツールとしながら、より優れたタイポグラフィの実現を目指していきたいところです。

またタイポグラフィの他に、色のアクセシビリティについても下記の記事で紹介しています。
ぜひ、こちらもチェックしてみてください!

UIデザイナー
立教大学経営学部を卒業後、ミクシィにてtoC向けの美容マッチングサービスminimoのカスタマーサクセスを3年半担当。 その後SESでwebデザイン/DTPを経験し、2020年6月からUIデザイナーとしてセブンデックスに入社。スタートアップのアプリデザインや大手企業のUXUIデザインに携わっている。