marrish（マリッシュ）にインクルーシブデザインフォント（IDフォント）を導入しました

自己紹介

こんにちは、デザイン戦略部のemuです。
恋活・婚活マッチングサービスや、フリーランス管理システムのUIデザインを担当しています。
他には社内へのアクセシビリティの啓蒙活動や、フロントエンドの勉強の真っ只中です。
今回はインクルーシブデザインフォントをマッチングアプリ「marrish（マリッシュ）」に導入したお話を紹介します。

インクルーシブデザインフォント（IDフォント）とは？

インクルーシブデザインとは、高齢者、障がい者、外国人など、多様な声をデザインプロセスに取り入れる手法です。

そして、インクルーシブデザインフォント（IDフォント） は、実際に高齢者や視覚障がい者の意見を取り入れ「可読性」「判読性」を高めたフォントです。
ユニバーサルデザインフォント（UDフォント）をベースに、より実践的な改良が行われています。

判別性向上のためのデザイン変更

引用：高齢者・視覚障がい者（弱視）向けフォント 『インクルーシブデザインフォント（IDフォント）』開発・提供開始のご案内

導入のきっかけ

NewbeesではSlackにアクセシビリティの情報チャンネルが存在します。
そこでインクルーシブデザインフォントの情報を共有したところ、CEOのkazuさんから「marrish（マリッシュ）のWeb版に導入してもらえるか、ビジネスパートナー（以降BP）に提案してみようか？」と反応をいただきました。

kazuさんからのメッセージ

kazuさんのフットワークの軽さに驚きつつ、marrish（マリッシュ）において、BPやエンドユーザーにとって、インクルーシブデザインフォントの恩恵は大きいのではないか？とトントン拍子に話が進んでいきました。

導入の流れ

資料請求

インクルーシブデザインフォントは、他のフォントとは少し購入方法が異なります。
UXディレクターであるsugiさんに、フォントワークス社とのやりとりを担当してもらい、資料請求や契約周りを対応をいただきました。

フォントワークス社からは資料請求の際に、インクルーシブデザインフォントが生まれた経緯を説明していただきました。「高齢者や視覚障がい者（弱視）に最適なフォントデザインにすることは、すべての方に最適なフォントを届けられるのではないか」という考えに共感し、年齢層が高めなユーザーが多いmarrish（マリッシュ）にフィットすると思いました。

Webやアプリの導入事例が少ないとのことで不安もありましたが、逆にマッチングアプリ第1号になれるという点で、ブランディングのメリットを感じました。

社内への共有・認知

marrish（マリッシュ）は、Newbeesのなかでも特に関わる人数が多いプロジェクトです。
社内でインクルーシブデザインフォントの説明を行い、認知を広げました。この1年、Slackにてアクセシビリティの啓蒙活動を行なっていたので、比較的スムーズに受け入れてもらえたのではないかと思います。
sugiさんには、社内への認知からロードマップ作成、部署間のスケジュール調整などもおこなっていただけたので、非常に助かりました。

ステージングへ仮実装

フォントサンプルをいただいた後は、実装の可否や、見た目の印象などを確かめるため、いくつかの画面を選定してステージング環境で実装を試みました。

インクルーシブデザインフォントはウェイトが1種類のみなので、太字すべてに適用すると違和感がありました。そこで複数のウェイトがあるユニバーサルデザインフォントをベースに、見出しやボタンなどの重要な太字にインクルーシブデザインフォントを組み合わせて使うことにしました。

フォントの比較

通常のフォントとユニバーサルデザインフォント＋インクルーシブデザインフォントの比較です。
同じフォントサイズでも、ユニバーサルデザインフォント＋インクルーシブデザインフォントはひとまわり大きく見え、小さな文字の可読性も向上します。

視覚障害ゴーグルでの比較

以前、花王のデザインウェビナーで「高齢者体験ワークショップ」の存在を知りました。
視覚障害ゴーグルやイヤーマフ、重りなどを半日間身につけて、高齢者に近しい体験をすることで、製品改善をおこなうといった内容です。
そのなかの視覚障害ゴーグルは比較的簡単に試すことができます。インクルーシブデザインフォントの検証にも使えるため、こちらもkazuさんの即決で1セット購入しました。

視覚障害ゴーグル

白いシートをつければ白内障の再現ができます。シートは複数枚あり、重ねるとより重度な白内障を再現できます。
僕は普段はリモートワークなのですが、東京出張時にデザイナーでゴーグルをつけてフォントの可読性を確かめました。

視覚障害ゴーグルでの見え方

視覚障害ゴーグルを通して見た白内障の見え方を再現したイメージ

視覚障害ゴーグルでフォントを比較した印象をまとめておきます。

• インクルーシブデザインフォントはウェイトの太さもあってか、かなり見やすい。

• 特にひらがな・カタカナ・数字は文字がつぶれにくいようにゆったり作られている。

• 濁点があることがわかりやすい。

• ヒラギノ角ゴW7と比較したとき、ひらがな・カタカナはW7のほうが明らかに太いが、インクルーシブデザインフォントも同等くらいはっきりと見える。

kazuさんからのメッセージ

検証

アプリは画面ごとに実装する方針のため、検証において問題はなかったのですが、Web版はCSSで一気に全体に導入できるため、「検証をどうするのか？」という問題が起こりました。

marrish（マリッシュ）の画面数は300近く存在しており、リリース優先で進めるとQAチームの検証にかなり時間がかかってしまいます。逆に、スケジュール優先で進めると、検証期間の確保はおこなえますが、リリースがどんどん先送りになってしまい、この活動自体が頓挫してしまうのではという空気が漂いました。

しかし、話し合いの結果、フォント変更は機能や操作に大きく影響しないため、デザイナーがステージングでチェックを行い、問題があれば対応することにしました。臨機応変に対応できる形となり、リリースの目処も立ったので安心しました。

感想

近年、他社サービスでもアクセシビリティの取り組みは増えてきており、数年前に比べると、アクセシビリティ対応はあたりまえになりつつあります。

そんななかで、Newbeesでもアクセシビリティ改善の1つとしてインクルーシブデザインフォントを導入できたことは、背中を押してもらえたような感じで嬉しく思います。
Newbeesの社内だけでなくBPの協力・理解もとても大きく感じました。

これからの取り組みについて

現在、marrish（マリッシュ）のWeb版はインクルーシブデザインフォントが全体に反映されましたが、アプリ版は画面単位で実装するため、随時対応していく予定です。

しかし、インクルーシブデザインフォント、ユニバーサルデザインフォントがすべてを解決するわけではありません。文字サイズ、行間、余白などデザインの基本を忘れてはいけないことはもちろん、コントラスト比やマークアップなどアクセシビリティの課題は他にもたくさんあります。

Newbeesでは現在進行形でアクセシビリティのチェックリストを作成し、WCAG（Web Contets Accessibility Guideline）のシングルAの達成を目指せるように取り組みを行っています。

その他にもUX施策でユーザーインタビューやデータ分析、プロトタイプによるユーザーテストも行っています。ますますアップデートされていくmarrish（マリッシュ）にぜひご期待ください！

フォントワークスの社名、フォントワークス、Fontworks、フォントの名称は、フォントワークス株式会社の商標または登録商標です。

Newbeesでは一緒に働く仲間を募集しています

Newbeesはフルリモート＆フレックス勤務を導入し、場所にとらわれない自由な仕事のやり方が可能です。詳細は以下をご覧ください。

株式会社Newbees（ニュービーズ）