中嶋悟
名前：中嶋 悟（なかじま さとる） ニックネーム：サトルン 年齢：28歳 性別：男性 職業：会社員（IT系メーカー・マーケティング部門） 通勤場所：東京都千代田区・本社オフィス 通勤時間：片道約45分（電車＋徒歩） 居住地：東京都杉並区・阿佐ヶ谷の1LDKマンション 出身地：神奈川県横浜市 身長：175cm 血液型：A型 誕生日：1997年5月12日 趣味：比較記事を書くこと、カメラ散歩、ガジェット収集、カフェ巡り、映画鑑賞（特に洋画）、料理（最近はスパイスカレー作りにハマり中） 性格：分析好き・好奇心旺盛・マイペース・几帳面だけど時々おおざっぱ・物事をとことん調べたくなるタイプ 1日（平日）のタイムスケジュール 6:30 起床。まずはコーヒーを淹れながらニュースとSNSチェック 7:00 朝食（自作のオートミールorトースト）、ブログの下書きや記事ネタ整理 8:00 出勤準備 8:30 電車で通勤（この間にポッドキャストやオーディオブックでインプット） 9:15 出社。午前は資料作成やメール返信 12:00 ランチはオフィス近くの定食屋かカフェ 13:00 午後は会議やマーケティング企画立案、データ分析 18:00 退社 19:00 帰宅途中にスーパー寄って買い物 19:30 夕食＆YouTubeやNetflixでリラックスタイム 21:00 ブログ執筆や写真編集、次の記事の構成作成 23:00 読書（比較記事のネタ探しも兼ねる） 23:45 就寝準備 24:00 就寝
focusとfocus-visibleの違いを徹底解説：クリックで理解を深める実務ガイド
この章は、Webページを作るときに欠かせない「フォーカス」の話を、初心者にもわかりやすく整理するものです。まずは基本の定義から始め、次に見た目の違い、そして実務での使い分けと注意点を順番に解説します。フォーカスとは、タブキーやクリック、ピクチャーへと進む際に要素が取りうる「現在の焦点」を表す状態のことです。キーボード操作の基本となる仕組みであり、多くの人が見落としがちな点でもあります。視覚的な手掛かりがないと、誰がどの要素を操作しているのかを理解しにくくなります。そのため、適切なフォーカス表示はアクセシビリティの要となります。
本稿ではまずフォーカスの原理を分解し、そのうえでフォーカスの見た目を決める「フォーカス可視性」という考え方へと話を進めます。後半では実務での実装例と注意点、よくある誤解を取り上げ、すぐに使えるヒントをまとめます。
ここで知っておきたいのは、視覚的なフォーカスの有無だけでなく、操作方法によって表示の有無が変わるという点です。マウスでのクリックとキーボード操作では表示が異なることがあり、それを正しく扱うことがウェブの使いやすさにつながります。次の章から、内容を具体的に見ていきましょう。
focusとは何かを丁寧に解説
フォーカスは要素が現在の操作対象として選ばれている状態を表します。キーボードで移動できる順序を決める要素であり、ほかの要素と比べてクリックされたり選択されたときにだけ起動する性質を持ちます。HTMLの世界では通常、入力欄やボタン、リンクなどに自動的にフォーカスが移動します。
この状態はCSSの:pseudo-classで理解できます。例えば focus は :focus という特殊な状態を指し、要素がフォーカスを受けている間だけ適用されるスタイルを設定します。これにより、現在選択中の要素を視覚的に強調できます。さらに、フォーカスはアクセシビリティの基本であり、スクリーンリーダーを使う人にも操作の方向性を伝える役割を果たします。デザインの世界では、見た目の一貫性と操作性の両立が求められます。ここで重要なのは、フォーカスの発生源がマウスかキーボードかを問わず、ユーザーが直感的に目的の要素へ到達できることです。
focus-visibleとは何かを掘り下げる
focus-visible はフォーカスが「視覚的に表示されるべき場合」を自動的に判別する仕組みです。マウス操作のみのときには多くの場合、フォーカスの輪を表示しなくてよいと判断され、視認性が落ちることを避ける工夫がされています。反対にキーボード操作や支援技術を使う場面では、明確なフォーカス表示が必要になるため表示されます。
この挙動はユーザーエージェントやブラウザの実装により異なることがありますが、現代の多くのブラウザはこの概念をサポートしています。実務でのポイントは、 :focus-visible を安全に用い、 :focus だけに頼らないことです。なぜなら CSS だけで細かい表示を切り替えられるからです。具体的には、マウスとキーボードの操作を見分けて、キーボード時のみ明瞭な輪郭を表示することで、視認性を高めながら画面のノイズを減らせます。ここからは実装例と注意点を見ていきましょう。
実務での使い分けと実例
実務ではフォーカスの表示を「全ての人にわかる状態」にすることが大切です。まず、キーボード操作を主に使うユーザーに対しては :focus を使って適切に強調します。次に、マウス中心の操作が多いサイトでは focus-visible の活用を検討 します。これにより、不要な視覚的ノイズを減らし、操作性を保ちつつ美しいデザインを保てます。実装のコツとしては CSS の変数と分離されたスタイルを使い、フォーカス時と focus-visible 時のスタイルを別々に管理することです。例えば、デフォルトの outline をやや控えめにし、キーボード時には鮮やかな輪郭を表示します。表形式で違いを整理すると理解が深まります。以下の表は実務での使い分けの目安です。
この章の要点は、フォーカスの「出し方」を状況に合わせて切り替える技術を身につけることです。何より大切なのは、アクセシビリティを高めることを目的としてデザインと実装を統合することです。
この表の目的は、実務で迷ったときの判断材料を提供することです。表を参考に、実際のサイトでの動作を模倣することが安全でわかりやすい実装につながります。今後のアップデートでも、多くのブラウザがフォーカスとフォーカス可視性の両方をサポートするように変化していくため、最新のブラウザ挙動の確認を習慣化してください。また、実務での導入前には、チーム内で共有用のガイドラインを作成し、デザイナーと開発者が同じ理解を持つことが重要です。
友達とカフェで雑談しているとき、focus-visible の話題が出た。僕はマウスでクリックしてもフォーカスの輪が表示されない場面は、視覚情報を減らす工夫だと思う。けれどキーボード操作を使う人にとっては、フォーカスが見えないとどこを操作しているのか分からなくなる。そこで focus と focus-visible の組み合わせが大事だと友達に伝えた。focus は必須の視認手掛りであり、focus-visible は状況に応じて表示を調整する余地を与える。実務では両方を適切に使い分けることで、デザインの美しさと使いやすさを両立できる。
ITの人気記事
