こんにちは！プロダクトデザイナーの先輩として、今日は君にとてもエキサイティングな話をしよう。
近年のWebやアプリ開発において、「アクセシビリティ（誰一人取り残さないデザイン）」の重要性は、もはや「あれば嬉しいオプション」ではなく、法規的にも社会的にも「絶対的な必須要件」になっているよね。
でも、デザイナーの君はこんな壁にぶつかったことはないかい？
- 「キーボードだけで操作するユーザーのために、フォーカス状態（フォーカスリング）をデザインしたいけれど、どうプロトタイプに組み込めばいいかわからない」
- 「タブ順序（Tab Index）の意図がエンジニアに伝わらず、実装されたらフォーカスが変なところを飛び回る……」
これを解決するのが、今回解説する「Sketchを使ったアクセシビリティ・プロトタイピング」だ。
実はSketchの強力なコンポーネント機能とシンボルオーバライドを組み合わせることで、マウスだけでなく「キーボードナビゲーションを完全再現した未来のプロトタイプ」が作れるんだ。
これをマスターすれば、デザイナーとエンジニアの共通言語が生まれ、手戻りが劇的に減るよ。さあ、一緒にその扉を開けよう！
—
1. そもそもSketchとは？：プロトタイピングにおけるその真価
今やデザインツールは群雄割拠の時代だけど、Sketchが持つ「コンポーネント指向の美しさ」と「軽快な動作」は、依然としてプロの現場で絶大な信頼を得ている。
特にSketchのプロトタイプ機能は、画面遷移をカチカチと繋ぐだけのものじゃない。「アートボードの切り替え」「オーバーレイ」「スマートなアニメーション」を駆使すれば、コードを書く前の段階で、本番さながらのインタラクションを検証できる。
今回は、このSketchを使って「 Tabキーを押すたびに、フォーカスリングが美しく移動していくアクセシブルな状態」を視覚化する手法をゼロから学んでいこう。
—
2. 導入と基礎セットアップ：まずは環境を整えよう
まずはSketchをインストールし、アクセシビリティ検証のための「土台」を作る。
1. Sketchのインストール
公式サイトから最新版をダウンロードし、ライセンスを有効化する（無料トライアルでもOKだ）。
2. グリッドとレイアウトの基本設定
Web・アプリ問わず、アクセシビリティデザインの基本は「8ptグリッド（または4ptグリッド）」だ。
- `View > Canvas > Show Layout` を開き、余白や要素間の距離がアクセシブルなサイズ（最小タップターゲット44x44ptなど）を意識できるように設定する。
—
3. 最速の「Hello World」：フォーカス状態を持つボタンコンポーネントを作る
百聞は一見にしかず。実際に「キーボードでフォーカスされたときに光るボタン」のマスターコンポーネントを作ってみよう。これが今回のプロトタイピングの心臓部になる。
ステップ1：ボタンのベースを作る
1. `T`キーを押して「ボタン」とテキストを入力。
2. そのテキストを選択し、`⌘ + G` でグループ化、さらに `U` キーを押して「Symbol（シンボル）」に変換する。名前は `Component / Button` としよう。
3. シンボル編集画面に入り、背景の長方形（Rectangle）とテキストを配置。Auto Layout（Smart Layout）を設定して、文字数に合わせてボタンが伸縮するようにしておく。
ステップ2：フォーカスリング（状態）を追加する
アクセシビリティにおいて、キーボードフォーカスは視覚的に一目でわからなければならない。
1. ボタンの外側に、少し大きめの角丸長方形（例：2px太さの鮮やかなブルーの枠線）を配置する。これがフォーカスリングだ。
2. このフォーカスリングのレイヤーに「Focus Ring」と名前をつけ、初期状態では不透明度（Opacity）を `0%` にしておく。
ステップ3：オーバーライドで状態をコントロールする
Sketchの素晴らしいところは、シンボルの「非表示/表示」をインスタンスごとに切り替えられることだ。
- これで、「通常状態（Focus Ring非表示）」と「フォーカス状態（Focus Ring表示）」を切り替えられるマスターコンポーネントが完成した！
—
4. 応用編：キーボードナビゲーションをプロトタイプで完全再現する
ここからが本番だ。ユーザーが「Tabキー」を押して、画面上のリンクやボタンを順番に移動していくフローをSketchのプロトタイプ機能で再現する。
アートボードの複製による「状態のステート管理」
Webやアプリの画面をそのまま複製し、フォーカスが当たっている場所だけを次々に変化させていく。
1. 画面A（初期状態）：すべてのインタラクティブ要素が通常状態。
2. 画面B（Tab 1回目）：ナビゲーションの最初のリンク（例：「ホーム」）に、先ほど作ったフォーカスリングを表示させる。
3. 画面C（Tab 2回目）：フォーカスが次の要素（例：「サービス紹介」）に移る。
プロトタイプリンクの結び方
1. 画面Aを選択し、プロトタイプモード（`P`キー）に入る。
2. 「次へ進むトリガー」として、画面内の任意の場所（あるいはキーボードのビジュアルガイドなど）から、画面Bへ「Hotspot（ホットスポット）」またはボタン全体でリンクを繋ぐ。
3. インタラクション設定：
- Trigger: `Key / Mouse Up`（※将来的なキーボード対応を想定し、分かりやすく「タップ」や「特定のキー」に擬似的に設定するか、一般的なクリックで画面が遷移するように組む）
- Animation: `Instant`（一瞬で切り替わるのが、キーボードフォーカスのリアルな挙動だ）
これを画面Bから画面Cへと連鎖させることで、「Tabキーを押すごとにフォーカスが移動するアニメーション・プロトタイプ」が完成する。
—
5. エンジニアへ正確に仕様を伝えるための極意
デザイナーがここまで作り込む最大の理由は、エンジニアへの「究極のラブレター（仕様書）」にするためだ。
実装するエンジニアは、このプロトタイプを見て以下の情報を一目で読み取れる。
- タブ順序（Tab Order）のフロー：どの要素からどの要素へフォーカスが移動すべきか（DOMの構造順序や `tabindex` の設計）。
- フォーカスリングのデザイン仕様：色（`#0066FF`など）、太さ（`2px`）、オフセット（ボタンからの距離）。
スペックの書き出しとヒント
Sketchのインスペクター（右ペイン）や、Zeplinなどの連携ツールを活用し、フォーカス時のCSSプロパティ（例: `outline: 2px solid #0066FF; outline-offset: 2px;`）をコメントとして添えてあげよう。
「このプロトタイプ通りにフォーカスが移動するように実装してください」と一言添えるだけで、コミュニケーションのコストは劇的にゼロに近づく。
—
まとめ：アクセシビリティをデザインの「スタンダード」に
今回は、Sketchのシンボル機能とプロトタイプを駆使して、キーボードナビゲーションとフォーカス状態を視覚化する手法を解説した。
これをマスターすれば、あなたの作るデザインは単に「見た目が美しい」だけでなく、「誰もが迷わず操作できる、構造的に正しいプロダクト」へと進化する。
毎日のルーティンワークが、エンジニアとの心地よい共創の時間に変わるはずだ。
さあ、次のプロジェクトを開いて、最初のフォーカスリングを配置してみよう！