はじめに
こんにちは。株式会社エヌ・エフ・ラボラトリーズ（以下 NFLabs.）のシステム開発チームで学生インターンをしている中辻です。詳しいプロフィールや業務内容は「システム開発インターンシップ業務内容紹介 (デザイナー編)」で紹介していますので、よろしければご覧ください。
インターンでは、セキュリティの学習・実践を支援するサービス「Purple Flair」のフロントエンド開発に携わっています。開発を進める中で、実装の小さな判断のひとつひとつにアクセシビリティへの考え方が関わってくることを実感しました。
この記事では、Purple Flairの開発を通じて意識的に行ったアクセシビリティへの取り組みや、ユーザーからの要望を受けて改善した点、まだ十分にできていない反省点も含めて共有します。「アクセシビリティって結局何をすればいいの？」と感じている方の参考になれば幸いです。
アクセシビリティについて
アクセシビリティとは、「すべての人が等しく情報やサービスにアクセスできる状態」を指します。Webの文脈では、視覚・聴覚・運動機能などに障害がある方はもちろん、高齢者・非母語話者・低速回線のユーザーなど、さまざまな環境や状況にある人々が問題なくサービスを利用できることを意味します。
国際的な標準として、W3Cが策定したWCAG（Web Content Accessibility Guidelines）が広く参照されており、日本ではJIS X 8341-3としてその内容が規格化されています。また、デジタル庁がウェブアクセシビリティ導入ガイドブックを公開しており、実践的な指針として広く参照されています。
私はインターン開始前からWebの勉強はある程度しているつもりでしたが、アクセシビリティについては言葉は知っているものの、具体的に何をすればよいかわからないという状態でした。
実際に意識が変わったのは、Purple Flairの開発に携わってからです。「誰でも直感的に使えるサービスを作る」という意識が、実装の判断ひとつひとつに直結していることを肌で感じました。
セキュリティを、もっと身近にしたい
Purple Flairは、セキュリティに関する知識を多角的な視点から学習し、実践を通じてスキルを身につけることを支援するサービスです。セキュリティというと「専門家のもの」「難しそう」というイメージを持たれがちですが、私たちは老若男女を問わず、より多くの人にセキュリティに親しんでもらいたいと考えています。
こうした思想の背景には、セキュリティをめぐる近年の社会的な変化が挙げられます。ランサムウェアや標的型攻撃、AIを悪用した新たな攻撃手法の登場など、脅威の多様化が加速しています。そのため、セキュリティ人材の需要はかつてなく高まっており、専門家だけでなく幅広い職種でセキュリティ知識が求められる時代になっています。
だからこそ、セキュリティに精通した人も、学び始めたばかりの人も、それぞれのペースで迷わず操作できるUIが必要です。「専門知識があるかどうかに関わらず、誰もが直感的に使える」という設計思想は、アクセシビリティへの取り組みと切り離せません。アクセシビリティ対応は単なるコンプライアンス対応ではなく、Purple Flairの根幹にある理念そのものだといえます。
実際に取り組んだ認知アクセシビリティへの配慮
あらゆる環境で集中できる画面設計
セキュリティの学習においては、ユーザーが集中できる環境を作ることが特に重要だと考えています。画面に余計な情報が多すぎると、ユーザーの認知負荷が高まり、メインとなるコンテンツへの集中が妨げられてしまいます。
特に、画面の半分にPurple Flairのコンテンツを開き、もう半分に演習環境を並べて取り組む使い方がよく想定されます。そのため、限られた画面幅でもUIが圧迫感を与えず、よりスマートに情報が整理されている必要があります。
また、PCの前だけでなく、通勤や通学の隙間時間にスマートフォンでコンテンツを読み進めるユーザーもいます。場所やデバイスを選ばず、いつでもどこでも「学びを止めない」体験を提供することも、大切にしたい視点の一つです。
これらの多様な利用シーンを踏まえ、Purple Flairでは取組中の操作を最小限に抑え、画面サイズに関わらずコンテンツに集中できる画面設計を心がけています。
そこで、この設計を突き詰めるためにデザインを変更したチャレンジ詳細画面を、想定される表示方式で以前のものと比較しながら紹介します。
改善前の画面例
改善前の画面では、画面上部に枠付きのボタンが横並びで配置されており、画面上のスペースを圧迫していました。また、チャットボタンも視覚的に目立ちすぎており、取組中に気が散る見た目となっていたうえ、吹き出しやボタンそのものの大きさもあり、これも画面を圧迫する要因となっていました。
現在の画面例
現在の画面では、ボタンの枠を思い切って廃止し、横並びだったボタンを縦並びに変更しました。チャットボタンのデザインも他のボタンとデザインを合わせたすっきりしたものに改善しました。これにより、視線が自然にコンテンツへと向かうようになり、以前よりもチャレンジに集中できる画面になったと思います。なお、本文の左側に目次が追加されていることについては、後ほど紹介します。
こうした工夫は、アクセシビリティの観点からも「認知負荷の低減」として重要とされており、ユーザーの滞在時間の向上やチャレンジの完了率の向上にもつながると考えています。
カーソルの工夫
ユーザーが「このボタンは押せるのか？」「この操作は今できるのか？」などを直感的に判断できるよう、カーソルの種類とボタンのデザインに気をつけています。
クリック可能な要素の例
操作ができない要素の例
具体的には、クリック可能な要素には cursor-pointer を、操作ができない状態の要素には cursor-not-allowed や、状態ごとのボタンのスタイルを適切に設定し、状況に応じたカーソルとボタンが表示されるように意識して実装しています。
インタラクションの工夫
ボタンやカードをホバーしたときに背景色が付与される、半透明になるなどのインタラクションフィードバックも積極的に活用しています。こういったインタラクションは、ユーザーの操作感を大きく左右するため、積極的に取り入れています。
インタラクションの例
さらに、補足説明が必要な箇所にはツールチップを表示するようにしています。アイコンのみで構成されたボタンや、テキストが省略されてしまうと意味が伝わりにくい要素に対して、ホバー時にツールチップを表示することで、ユーザーが操作の意味を直感的に把握できるようにしています。すべての要素にツールチップを付けるのではなく、ラベルがなければ意味が伝わらなくなるような箇所に絞って使用することで、情報過多にならないよう意識しています。
ユーザーフィードバックを活かした改善
実際にサービスを使ってくださっているユーザーからアクセシビリティに直結するフィードバックをいただき、それをもとにシステムの改善を行うことがあります。
ここでは3つの事例を紹介します。
1. 目次機能の実装
実装前
実装後
以前はチャレンジ詳細画面に目次機能がありませんでした。そのため、回答に他のミッションやタスクの情報を参照する必要があり、解説や問題文などのテキストが長いチャレンジでは、スクロールをして目的の箇所を見つける手間がありました。ユーザーからもこの点についてご指摘をいただいており、学習のテンポが損なわれてしまう状況でした。この点を改善するために、クリックで目的の箇所に移動でき、かつ各タスクの回答状況を確認できる目次機能を実装しています。これにより、回答中に他のミッションやタスクの情報を素早く参照できるようになり、学習のテンポが向上することができたと考えています。
2. 正解時の演出の改善
改善前の演出
改善後の演出
問題を完了/正解した際に、以前は達成感が得られるように色数も多く、表示時間の長い派手なエフェクトを表示していました。しかし、「テンポが悪くなり、チープな印象を受ける」といったユーザーからのフィードバックを受けたため、演出時間を短縮し、より控えめでスムーズなアニメーションへと調整しました。クリックによる演出のスキップにも対応しています。以前の演出と比較し、集中を削ぐことなく、心地よい操作感を実現できるようになったと思っています。
3. ライトテーマの実装
Purple Flairはこれまでダークテーマを主体として開発を進めていましたが、UIがある程度固まってきた上に、ユーザーからライトテーマを望む声も見られたため、ライトテーマの追加実装に踏み切りました。ライトテーマでは、ただ色を反転させるだけではない、見やすさと使いやすさを追求した色使いを心がけています。そこで、ライトテーマとダークテーマの比較を2例紹介します。
ホーム画面
ライトテーマ
ダークテーマ
チャレンジ詳細画面
ライトテーマ
ダークテーマ
ユーザーからのフィードバックは、開発時に気づけない問題や、より良いサービスを作るための新たな気付きを与えてくれます。こうしたフィードバックを受けて改善するサイクルを、今後も大切にしていきたいと考えています。
今後の課題
先ほど紹介したガイドラインを参考に、Purple Flairの現状を振り返ってみると、以下の重要な2点について、まだ十分に対応できていません。
キーボード操作への対応
「単一分野」にキーフォーカス
メニュー「チャレンジ一覧」にキーフォーカス
マウス操作だけでなく、キーボードでアプリケーションを操作するユーザーも一定数います。そのため、主要な操作はキーボードで行えるよう実装しており、Tabキーによる要素の切り替え、EnterキーやEscキーによるフォーム送信・モーダルの閉じる操作などに対応しています。一方で、フォーカスインジケーターのデザインやマウス操作と同等のフォーカス時のインタラクションなど、視覚的なフィードバックの作り込みはまだ十分ではなく、改善が必要だと感じています。
スクリーンリーダーの最適化
スクリーンリーダーとは、画面上の要素やテキストを、音声で読み上げたり点字で表示したりするソフトウェアです。目の不自由なユーザーを中心に利用されており、視覚情報に頼らないアクセス手段として重要な役割を担っています。
Purple Flairでは、画像への alt 属性の設定や意味のある要素への適切なHTMLタグの選択など、基本的な対応は行っています。しかし、アイコンボタンへの aria-label の付与や、状態変化をスクリーンリーダーに伝えるARIAロールの整備など、より細かい対応はまだ不十分な部分が残っています。また、開発を進める中で、適切なHTMLタグでの記述が徹底できていない箇所がある可能性も否定できないため、改善が必要だと感じています。
おわりに
アクセシビリティは、体が不自由な方への配慮という文脈で語られることも多いですが、その本質は「より多くの人がストレスなく使える設計」にあると思っています。だからこそ、Purple Flairのような学習サービスにおいて、使いづらさやアクセシビリティの不備が原因でユーザーのセキュリティを学ぶ機会が損なわれたり、学習の進行が妨げられてしまうことがあってはなりません。どんな環境や状況にある人にも等しく学習の門戸を開き、誰もが迷わずスムーズに学びを深められる状態を作ることこそが、私たちの目指すアクセシビリティの形です。
以前は言葉は知っているものの何をすればよいかわからなかったアクセシビリティですが、実務を通じてその重要性を強く感じました。まだ改善できていない点も多くありますが、ユーザーの声に耳を傾けながら、よりよいサービスを作り続けていきたいと思います。
最後までお読みいただきありがとうございました。
(代理投稿: hysnf)
