こんにちは。LINEヤフーでウェブを中心にアクセシビリティの啓発と向上を行っている中野 信です。
今回は、2025年3月28日（金）に行われた、クラスメソッド株式会社とLINEヤフー株式会社の共催勉強会「LINEミニアプリ アクセシビリティ勉強会」の様子をレポートします。
背景
LINEヤフーが提供しているプラットフォームのひとつにLINEミニアプリがあります。これは、LINE上で動くウェブアプリで、飲食店の公式アカウントから予約ができたり美容院の会員証の代わりになった りと、身近で便利な機能を提供できるものです。
LINEミニアプリはプラットフォームとして公開しているため、LINEヤフーに限らず、多くの事業者や開発会社がアプリを開発することができます。多くの開発者がいて、日常のさまざまな場面で使われるため、より多くの状況や人々が使えるように、アプリのアクセシビリティが重要になってきます。
そこで、今回は、LINEミニアプリを多数開発しているクラスメソッドとLINEヤフーの共催でLINEミニアプリをテーマにアクセシビリティの勉強会を行いました。
会場はクラスメソッドの日比谷オフィスを提供していただき、YouTubeによる配信も行うハイブリッド形式で行いました。クラスメソッドのオフィスは壁一面の窓から東京タワーが見える、とても見晴らしのよいすてきなオフィスでした。勉強会はイベントを行えるスペースで行い、会場ではLOVOTのぴーたんが出迎えてくれました。
今回の勉強会では、15分ほどの発表が5つと質疑応答がありました。それぞれをご紹介します。
ウェブアクセシビリティとは
- 発表者: LINEヤフー 中野 信（@makojo）
- 資料: ウェブアクセシビリティとは - Speaker Deck
私はウェブアクセシビリティについての基礎的な内容を説明しました。そして、LINEミニアプリの概要と、ミニアプリがウェブアプリのためウェブアクセシビリティの方法を取り入れやすいという説明をしました。
アクセシビリティとは「すべての人の使いやすさ」を指し、ウェブアクセシビリティは情報アクセシビリティの一部であると説明しました。国連の条約やISO（国際標準化機構）から言葉を引用して説明したうえで、ユーザーの多様なニーズや特徴を考慮することと、障害者に限らず多様な状況や人々にとって大事なことであることを説明しました。また、アクセシビリティとユーザビリティの違いについても触れ、アクセシビリティは「使えない」から「使える」状態にすることで、ユーザビリティは「使える」から「使いやすい」状態にすることを指すと説明しました。
さらに、ウェブアクセシビリティの特徴として「支援技術」という概念があることに触れ、ウェブアクセシビリティを向上させるということは支援技術に必要な情報を過不足なく提供することが重要であると説明しました。具体的な改善策として、アクセシビリティチェックツールを 使うことと、開発を発注する時の要件にアクセシビリティの向上を組み込むことを推奨しました。そうすることで部分的な対応や段階的な対応から進められるようにすることを強調しました。
スクリーンリーダーでLINEギフトを使ってみる
- 発表者: Cocktailz 伊敷 政英（@cocktailzjp）
- 資料なし
Cocktailz 伊敷さんは、視覚障害の経験を交えつつ、スクリーンリーダーを用いたLINEギフトの使用感について話しました。
視覚障害があって長年弱視として過ごしてきたが、視力が低下して現在は全盲であることを説明しました。普段はiPhone標準のスクリーンリーダー「VoiceOver」を活用していて、LINEを日常的に使用し、家族とのやりとりやオープンチャットでの情報交換に活用していると話しました。
次に、事前に録画したiPhoneでVoiceOverを使った操作の様子を投影しました。
LINEギフトを初めて使用した際の感想として、思ったよりスムーズに操作できたものの、商品選択や決済方法の選択におけるUIの改善点を指摘しました。商品カテゴリーの選択がボタンやチェックボックスとして機能していなかったことや、決済方法の選択肢にフォーカスが適切に当たらず、操作が難しかった点を挙げました。これらの経験を通じて、アクセシビリティの改善がユーザーエクスペリエンスの向上に直結することを再認識したと述べました。
LINEギフトのLINEミニアプリ アクセシビリティ改善事例
- 発表者: LINEヤフー 慶島 亜門（@pittanko_pta）
- 資料: LINEギフトのLINEミニアプリアクセシビリティ改善事例 - Speaker Deck
LINEギフトのアクセシビリティ改善事例について発表しました。
LINEギフトがLINEを通じて友人とギフトを贈り合うコミュニケーションサービスであることを説明しました。利用者層は20代から30代が中心であるものの、母の日や父の日を契機に50代の利用者も増えていると述べました。
アクセシビリティ改善の取り組みとして、タブバーの視認性向上を例に挙げ、改善前はコントラストが弱かったが、改善後はアクティブなタブを塗りつぶしで表現することで、視覚的にわかりやすくなったと説明しました。また、代替テキストの改善に向けた取り組みとして、社内システムでの入稿プロセスを改善し、AIを活用して代替テキストを自動生成する試みを紹介しました。
さらに、障害当事者に実際にサービスを使用してもらってフィードバックを得るプロセスを導入することで、実際の使用感に基づいた具体的な改善点を洗い出し、チーム全体で共有することで、継続的なアクセシビリティの向上を図っていると説明しました。
LINEミニアプリのアクセシビリティ向上ノウハウ
- 発表者: クラスメソッド 持田 徹
- 資料: LINEミニアプリの アクセシビリティ向上 ノウハウ #CM_LY_a11y | DevelopersIO
LINEミニアプリのアクセシビリティ向上に関するノウハウを詳細に共有しまし た。
アクセシビリティを考慮したシステム設計の重要性を強調し、設計段階からアクセシビリティを考慮する「シフトレフト」のアプローチを紹介しました。具体的な例として、QRコードを利用する際に視覚に依存しない代替手段を提供することや、外部ブラウザに遷移する際にユーザーに事前に知らせることの重要性を説明しました。また、LINEミニアプリへのアクセス経路を複数確保し、それぞれをアクセシブルにすることの必要性を強調しました。特に、リッチメニューだけでなく、あいさつメッセージやホーム画面ショートカットなどを活用してアクセス経路を多様化することが推奨されました。
最後に、LINEミニアプリ自身のUI設計において、コンテキスト情報を明確に伝えることや、視覚的な変化をテキストでも通知することの重要性を述べ、具体的な改善策として、スクリーンリーダーユーザーへの配慮を強化する方法を提案しました。
今日から意識できるアクセシビリティ
- 発表者: クラスメソッド ふみ子
- 資料:
LINEミニアプリやネイティブアプリにおけるアクセシビリティの意識向上について、具体的な事例を交えて解説しました。
高齢者向けのUI設計の事例として、旭化成ファーマの服薬支援アプリを紹介し、LINEミニアプリ化による個人情報登録の壁を取り払う 利点や、治療継続のサポートが可能になることを強調しました。情報整理の段階では、高齢者の視覚や運動能力の変化を考慮し、具体的なUI設計に生かす方法を示しました。特に、テキストの大きさやコントラスト、メンタルモデルの活用、入力方法の工夫など、実践的な設計手法を紹介しました。また、ユーザーのメンタルモデルを意識したデザインや、入力の負担を軽減する一問一答形式の採用、押しやすいボタンデザインの工夫など、ユーザーの負担を軽減するための具体的な方法を提案しました。
これらの取り組みを通じて、アクセシビリティの改善がユーザーの生活の質を向上させることを目指していることを説明しました。
質疑応答
オンライン配信が終わった後に、会場からは多数の質問がありました。
- UIが進化する中で、どのようにアクセシビリティに関する情報を入手しているのか？ おすすめのイベントやニュースソースがあれば教えてほしい
- （ふみ子さん）主にYouTubeで介護の様子をリアルに紹介する動画を視聴し、情報を得ている。また、ABEMA Primeを通じて世論やコメンテーターの意見を聞くことも情報収集の一環としている。
- スクリーンリーダーで商品ページを閲覧する際、商品名やタイトルをどのように読み上げるのが最適か？
- （伊敷さん）商品名やタイトルが見出しとして設定されていると、スクリーンリーダーの見出しジャンプ機能を使って効率よく情報を得られるため、非常に助かる。見出しレベルはページ内で一貫性を保つことが重要である。
- ウェブア クセシビリティをプロダクトに実装する際の開発スピードとのバランスの取り方について
- （中野）プロジェクトにアクセシビリティスペシャリストを随伴させることで、チェックの目線やタイミングを増やし、改善を図るとよい。また、手軽に導入できるツールを活用し、現実的な範囲での対応を勧める。
- （持田さん）アクセシビリティをセキュリティと同様に非機能要件として捉え、プロジェクトマネージャーが主体的にチェックを行うことで、徐々に改善を進めることができる。ユーザーテストの提案や、予算が取れた場合の組み込みなど、段階的な取り組みを行っている。
- AIを使った代替テキスト生成ツールについて教えてほしい
- （慶島さん）社内で開発したツールを使っている。OpenAIのGPT-4oを活用している。ツールはバナーかメインビジュアルかを指定することで、適切な代替テキストを生成するように設計されており、80点程度の精度で出力されている。
- 視覚障害者が物件検索をどのように利用しているか？
- （伊敷さん）弱視だった頃に物件検索サイトを利用していた経験や、全盲の友人たちもサイトで調べた後に不動産屋を訪れることが多いことを共有した。視覚障害者にとって情報の整理と伝え方が重要であり、デザインやエンジニアリングの工夫が求められる。
- 代替テキストが長い場合はどうすればよいか？ 記号や句読点は読み上げ時に邪魔にならないか？
- （伊敷さん）代替テキストが長い場合でも、iPhoneのVoiceOver機能を使って単語単位で読み上げること ができる。句読点は特に邪魔とは感じないが、顔文字の読み上げが困惑することがある。
また、勉強会が終わったあとに、アンケートで質問をいただきました。
- スクリーンリーダーでLINEのベータ版を使っているが、フィードバックをどこに送ったよいか？
- 「LINEラボ」の機能と思われます。設定からLINEラボを開くとそれぞれの機能ごとにフィードバックフォームがありますので、そちらからフィードバックをお願いします。
おわりに
今回は「アプリの中のアプリ」という、限られた状況におけるアクセシビリティについての勉強会でしたが、参加者からは具体的な質問が多くあり、必要性や重要性を感じている人が多い勉強会でした。
LINEヤフーでは、今後も継続的にウェブを含むアクセシビリティの改善に努めていきます。また機会があればこのような勉強会やイベントで発表をしますので、引き続きサービスをご利用いただければと思います。