「クラスメソッドとLINEヤフーが語るLINEミニアプリのアクセシビリティ」に参加してきました

• 2025/3/28
• https://classmethod.connpass.com/event/345409/

ウェブアクセシビリティとは

LINEヤフー 中野 信さん
https://speakerdeck.com/lycorptech_jp/20250328-miniapp-a11y

• LINEミニアプリ
  • アプリ内ブラウザで動くWebアプリ
  • LINEメッセンジャー固有の機能を使える
  • メッセンジャーの1機能なのでメッセージが起点で立ち上がる
• ウェブアクセシビリティ
  • インターネット上に公開された情報のアクセシビリティ
  • アクセシビリティ - 情報アクセシビリティ - ウェブアクセシビリティ
  • ウェブを支援技術を通じて使うことがある
  • ユーザーエージェントに正しく情報を伝えて支援技術に伝わるようにしないといけない

スクリーンリーダーでLINEギフトを使ってみる

Cocktailz 伊敷 政英さん

• スマホの使い方
  • スクリーンリーダーを常にonに
  • LINEを使ってる
    • オープンチャットでコミュニティがある
• LINEギフトをはじめて使ってみた
  • スムーズに購入までいけた
  • 商品の選択で押せるけど読み上げ的には分からなかった
  • 決済方法の選択で閉じるからスタートして戻っていかないと選択肢を見れなかった

LINEギフトのLINEミニアプリ アクセシビリティ改善事例

LINEヤフー 慶島亜門さん
https://speakerdeck.com/lycorptech_jp/20250328-miniapp-linegift-a11y

• LINEギフト
  • ミニアプリとしてLIFFで作られてる
  • メッセージやリッチメニューや機能一覧のメニューなどから開くことができる
  • メッセージからの流れで開かれることがあるのでトンマナの一貫性は保つ必要がある
• 改善事例
  • タブメニューで非アクティブな項目が分かりづらかった
    • コントラスト比を改善
    • 色だけに頼らないように改善
  • 代替テキストの拡充
    • 社内の入稿システムから入れられたバナー画像
      • バナー画像の文字情報の量が多すぎる
      • システム上50字までしか入れられなかった
    • AI活用で代替テキストを入れる仕組み

LINEミニアプリのアクセシビリティ向上ノウハウ

クラスメソッド 持田徹さん

• LINEミニアプリのアクセシビリティ
  • LINE上で動くけどWebアプリケーション
  • LINEプラットフォーム固有な考慮点がある
• 設計時
  • アクセシビリティもシフトレフトしてより前段のフェーズで考える必要がある
  • QRコードを利用する場合は代替手段を設ける
  • 外部ブラウザに遷移する前に知らせた方がいい
    • LIFFブラウザ/LINE内ブラウザ/外部ブラウザ
• アクセス経路
  • 複数のアクセス経路を確保する
  • リッチメニューが唯一の経路にならないように
    • あいさつメッセージとか応答の内容など
  • リッチメニューを使うなら
    • 十分なサイズを確保
    • 色のみで伝えない
    • 十分なコントラスト比
• ミニアプリ自身のUI
  • 構造の深さの難しさ
    • LINEアプリの中のミニアプリの中という構造

今日から意識できるアクセシビリティ

クラスメソッド ふみ子さん

• 服薬支援のアプリ化
  • 紙媒体での郵送でやっていた
    • 住所などの個人情報が不要になる
  • 継続的なデータを参照できる
• 高齢者向けのアプリ
  • 2つ以上の慢性疾患を持った人が40%
  • らくらくスマートフォンでの操作感の違い
• UIの設計
  • 十分な文字の大きさ
  • コントラスト比の確保
  • メンタルモデルに沿ったUI