いつも記事を読んでいただきありがとうございます！
モブエンジニア（@mob-engineer)です！
今回は2025.03.28（金）に開催したクラスメソッドとLINEヤフーが語るLINEミニアプリのアクセシビリティへ参加しましたので、アウトプットとしてイベントレポートを執筆しました。
初見の方でもサクッと読めるように平易な表現で執筆しておりますので、お気軽に読んでいただければ幸いです。
誤字脱字、わかりづらい表現に関しては極力なくすように心がけていますが、リアルタイムで執筆しているため誤字脱字があるかもしれません。
イベントページ
目次
- ウェブアクセシビリティとは
- スクリーンリーダーでLINEギフトを使ってみる
- LINEギフトのLINEミニアプリ アクセシビリティ改善事例
- LINEミニアプリのアクセシビリティ向上ノウハウ
- 今日から意識できるアクセシビリティ
- まとめ
ウェブアクセシビリティとは
登壇資料
- 自己紹介
- LINEヤフー所属のエンジニアの方
- 主業務としてLINEプロダクトのUI・UX改善・政府関連のアクセシビリティスペシャリスト
- LINEミニアプリ
- アプリ内ブラウザで機能するアプリケーション
- LINEメッセンジャー機能で搭載されているものが利用できる
- アクセシビリティとは
- 施設・サービス等の利用の容易さ
- 製品が特定目的に沿って利用できるか
- あらゆる人が利用できるようにしている
- 日本語が母国語でない方・ハンディキャップがある方
- 恒常的でなく一時的な障害を持っている方も
- アクセシビリティとユーザビリティは重複する部分
- やるかやらないといった論点ではない
- 点字ブロック・手話対応なども含んでいる
- なぜ、アクセシビリティが大切なのか
- ウェブコンテンツを幅広く利用してもらうようにする
- 支援技術（強制カラーモード・スイッチなどもある）
- まとめ
- 今後アクセシビリティの重要性は高くなっていく
スクリーンリーダーでLINEギフトを使ってみる
- 自己紹介
- 先天性の視覚障害を抱えている方
- 最近髪の色を赤く染めている
- 現在LINEミニアプリの開発を行っている
- 業務ではスクリーンリーダーを用いて開発を行っている
- ハンディキャップ当事者としてLINEミニアプリを利用してみて
- （個人的考察）当事者の視点がプロダクトに反映されるのはめちゃくちゃ面白いですね
- 最初の段階で決済ができるのかを知れればよりよかった
LINEギフトのLINEミニアプリ アクセシビリティ改善事例
- 自己紹介
- LINEヤフー所属のWebエンジニアの方
- 兼務でWebアクセシビリティ担当を行っている
- LINEギフト
- ざっくり言えば**LINE内部にある一つのアプリ（ミニアプリ）**といった建付け
- ミニアプリ間でも一貫性を持たせる必要がある
- （個人的考察）開発チームが違うとコミュニケーションが難しいですよね
- アクセシビリティ改善事例
- タブバーの視認性向上：非アクティブなタブ表現がわかりづらい
- アクティブなタブは目立つようにする
- アクセシビリティ改善に関してはエンジニア・デザイナー・企画・QAといった一丸で進めていった
- 代替テキストのサポート拡大
- 当初は代替テキストが50文字しか埋められなかったため1000文字まで拡張した
- 障害当事者の方にも確認してもらう取り組み
- （個人的考察）このあたりの話は加藤さんの知覚過敏研究所でも通じますね
- ミニアプリの外でも改善活動を行っている
- タブバーの視認性向上：非アクティブなタブ表現がわかりづらい
- まとめ
- ユーザ視点ではWebっぽくないかもしれないが、サービス提供者支店ではWebっぽいもの
- 当事者の声をヒアリングしプロダクトへ反映していくことが大切
LINEミニアプリのアクセシビリティ向上ノウハウ
参考サイト
- 自己紹介
- クラスメソッド所属のWebアプリ開発担当
- アクセシビリティに対して課題感を感じている
- 書籍・雑誌連載などを行っている
- （個人的考察）すごいお方ですね！！
- 複数のLINEミニアプリ開発に携わって
- アクセシビリティ関連に関しては民間より公共のほうが高く求められる
- 今後、公共だけでなく金融などの民間にも求めらえるのでは
- LINEミニアプリのアクセシビリティ
- WEBアプリケーションと同等のレベルでアクセシビリティが果たされていればいい
- 実際はLINE特有の考えを理解する必要がある
- 3つの観点に基づいて開発を進めていく必要がある
- 3つの観点
- システム設計時
- アクセシビリティもしストレフトの考えが必要
- 設計段階でセキュリティ・可用性などの要素を交えてアクセシビリティを考えることがいい
- （個人的考察）手戻り防止につながりますからね
- 代替手段を設ける（QRコード以外の手段）こともアクセシビリティの一種
- 外部ブラウザへ遷移する前に知らせる
- この操作を行うと別ブラウザが開くといったポップアップを表示させる
- （個人的考察）Web開発時に意識が向かないから確かにと思ってしまう
- 複数のアクセス経路を確保する
- リッチメニューが唯一のアクセス経路であれば複数設けるようにする
- （個人的考察）画面設計段階から考える要素が多数あるということですね
- （個人的考察）開発メンバーへアクセシビリティの重要性をどうやって伝えられるのかしら
- タブ部分の大きさを考える必要がある（切り替わり時は特に）
- 色でどのような機能なのかを伝えるのは避ける
- （個人的考察）色覚障害の方だとなおさらですね
- システム設計時
- 開発の進め方
- アクセシビリティ条件を完全に反映したアプリケーション開発は難しい
- とはいえ、視覚的な変化・状態変化といった要素はフォローしておくとよい
- （個人的考察）アクセシビリティを考えたアプリ開発は考えさせられますね
- （個人的考察）状態変化を可視化させるのは本当に大切だと思いますね
- まとめ
- WCAGに基づいて開発を行っていくことが大切
- モバイル特有の要件が特定の感覚器に依存している場合は代替手段を設けておく
- LINEミニアプリの制約条件を理解したうえで対策できるところを対策する
今日から意識できるアクセシビリティ
参考サイト
- 自己紹介
- クラスメソッド所属のデザイナーの方
- 全社向けイベントジャケット制作・ブログバナー開発も
- 直近では旭化成ファーマ様の事例対応でLINEミニアプリを利用した
- 課題感
- 今までは紙媒体で個人情報を送っていたため情報流出のリスクがある
- LINEミニアプリを利用することでアプリのみで情報登録できる
- 服薬指導に関して継続的に行えているかわからない
- アプリ画面から進捗状況について確認できる
- 今までは紙媒体で個人情報を送っていたため情報流出のリスクがある
- 高齢者向けのアプリケーション開発
- ペルソナ分析を行ってみると白内障の症状、2つ以上の慢性疾患を持っている
- 白みがかった文字だと見えづらい
- 手が震えて操作が難しい
- そもそも操作する元気がない
- 高齢者向けアプリ開発を行う上でらくらくスマートフォンなどで試してみる
- （個人的考察）この考えはWebアプリ開発全般で言えますね
- コントラスト（明暗差）に関しても4:5:1の比率があること
- （個人的考察）白黒画面でも理解できるデザインが最良と言われているのでその考えに近いのかしら
- メンタルモデルをうまく活用する
- （個人的考察）ピクトグラムのイメージですね～
- 右が赤・左が青といった補聴器特有のメンタルモデルもあったりする
- 設問・入力項目が多いとわからなくなる
- 一問一答方式にすることでユーザ負荷を下げることができる
- （個人的考察）開発を行っていると分かりみが深い話ですね
- ボタンに対して陰影をつけることで導線を自然に作ることができる
- ペルソナ分析を行ってみると白内障の症状、2つ以上の慢性疾患を持っている
- まとめ
- 一次情報を整理して対象となるユーザ状況を考える
- ユーザに合った環境を考えてみる
- 文字サイズ・コントラストなどはWCAGを参考にしてみる
- ユーザに合った画面構成を考えて設計⇒実装してみる
まとめ
アクセシビリティに関して個人的に興味関心があるため、本セッションを通じてしっかりとキャッチアップすることができました。
そのうえで、今回得たアクセシビリティの考えについて携わっているプロダクト開発・今後行っていく個人開発にどうやって反映させていくかがポイントだと思いました。
最後まで記事を読んでいただきありがとうございました！！