会社案内資料
UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供するN's Creates (エヌズクリエイツ) 株式会社の高橋です!
最近の案件で、キーボード操作時のフォーカス表示について改めて検討する機会がありました。画面デザインでは「ホバー」や「タップ」に意識が向きがちで、フォーカスは見落としがちだったと思います。この記事では、フォーカスが何か、どんな場面で検討に値するかご紹介します。
Focus（フォーカス）とは
フォーカスは、キーボードなどで操作しているとき、「今どの要素を操作しているか」を示す状態です。Tabキーでボタンやリンクを移動するとき、マウスでクリックしたときと同様に「今ここだ」という目印が必要になります。
枠線・背景の変化・入力欄のハイライトなどで、画面の「今どこにいるか」を伝えます。
なぜ今Focus（フォーカス）に目が向けられているか
2024年4月から、障害者差別解消法が改正され、民間企業にも合理的配慮をすることが求められるようになりました。Webやアプリの利用においても、「誰もが情報やサービスにアクセスできる環境を整える」という視点が、以前より具体的に議論されるようになっています。
いつ意識するか
フォーカスは、特定の障害のある方だけのための話ではありません。Webサイトや業務システムをこれからつくる・改修する際、次のような利用者が想定される場合は、要件の段階から一度話し合ってみる価値があると思います。
- キーボードだけで素早く操作したい方（入力の多い業務画面など）
- マウスが使いにくい・一時的に使えない方
- 画面を拡大して使っていて、周辺の情報が見えにくい方
フォーカスが弱いと、「今どこを操作しているか分からない」「次に何を押せばいいか迷う」というストレスにつながります。プロジェクトの規模や優先度によって、取り組む深さは変わってきますし、毎画面でこだわり抜く必要があるわけではありませんが、こうした利用者像があるサービスでは、フォーカスもデザインの検討項目に入れておく必要があるかもしれません。
おわりに
フォーカスは、特別むずかしい話というより、「今どこを操作しているか」を見えるようにするデザインのひとつだと思います。キーボードで使う人がいる画面や、操作の多い業務システムでは、ホバーと同じくらい意識しておくとよさそうだな、と感じています。
UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。
興味のある方は、カジュアル面談しますので気軽にお問い合わせください！
