P-1ページの目的は「目当ての操作を最短で見つけ、手元のどこを押すかまで一目でわかる」こと
- 思惑
- すべての判断の基準を1つに絞る。見つけるまでの手数と、見つけてから実際に押すまでの迷いを、両方減らす。
- このページでは
- トラックパッドが壊れた人が、Mac をキーボードだけで動かせるようにする。
0前提
個々のルールより上にある考え方です。ルールに迷ったとき、ルール同士がぶつかったときは、ここに戻って判断します。
P-2直感的とは「利用者が他のアプリで最も見慣れているデザインと振る舞い」のこと
- 思惑
- 新しい作法を覚えさせない。初めて開いた人が、知っている動きで迷わず使える。
- このページでは
- 手本は Mac 標準。選択の色は Finder、すき間で区切る分類はシステム設定のサイドバー、割り当てキーはメニューの右端表示、2択の切り替えはタブの ←→ を手本にしている。
P-3ルールは思惑から判断し、例外は必ず明文化する
- 思惑
- ルールの文面に縛られて目的を損なうのを防ぐ。例外を書き残し、統一が崩れたのか、意図した例外なのかを区別できるようにする。
- このページでは
- 「2択は濃い青」というルールに対し、「設定だけは灰色」を例外として明記している（R5-3）。
1コンテンツの整理
何をどの分類に入れ、どう書くか。探す人の頭の中に合わせることが基本です。
R1-1分類はモノ・コトで分ける。目当てのモノを一段抽象化して分類に、さらに一段上げて大分類にする
- 思惑
- 探す人の頭に最初に浮かぶのは、目当てのモノ（音量、ウインドウ、タブ）。分類名をその言葉に近づけ、目次を見た瞬間に「ここだ」とわかるようにする。
- このページでは
- 音量 → 「音」 → 「Mac 本体」。フォルダ → 「ファイル・フォルダ」 → 「ファイル」。考え方は事業部制（自動車事業部、PC 事業部）と同じ。
R1-2動作で分類するのは、「モノを問わず何にでも効く」と「それだけで1分類になる量がある」の両方を満たすときだけ
- 思惑
- 「コピーしたい」のように、何をより先に動作が頭に浮かぶ操作は、動作でまとめたほうが探しやすい。ただし特定のモノに効く操作まで混ぜると、箱の意味が崩れる。組織でいえば経理部のような機能別の部署にあたる。
- このページでは
- 動作で作った分類は、編集（選択・コピー・ペースト・取り消し）、検索、選ぶ・押す の3つだけ。⌘S（保存）は書類、⌘Q（終了）はアプリ・ウインドウという決まったモノに効くので、動作の分類ではなく、モノの分類（「書類」「ウインドウ操作」）に入れる。以前の「汎用操作」は、この区別をせずに ⌘C と ⌘S・⌘Q を同じ分類に混ぜていて破綻した。
なお、大分類「汎用的な操作」には、この3つのほかに「ウインドウ操作」「書類」「文字・カーソル」「日本語入力」も入っている。これらはモノの分類だが、どのアプリでも同じキーで効くので、R1-13 に従ってこの大分類に置いている。つまり大分類「汎用的な操作」の基準は「どのアプリでも同じキーで効く」で、その中の分類は、動作で分けたもの（このルール）とモノで分けたもの（R1-1）の両方がある。
R1-3手段・画面上の場所・使い方の特徴では分類しない
- 思惑
- 探す人が思い浮かべない切り口は、目次の手がかりにならない。手段で切ると、全項目が当てはまって区別にならないこともある。
- このページでは
- 「キーボードだけで操作」（すべてのショートカットが当てはまる）、「メニューバー右側」（場所）は解体し、モノの分類へ移した。
R1-4大分類の名前は、中の分類すべてを例外なく言い表し、かつ探す人が思い浮かべる言葉にする。両方を満たせないなら、名前より先に分け方を見直す
- 思惑
- 大分類の名前はほとんど読まれないが、中身とずれていると「ここではない」と読み飛ばされ、正しい分類にたどり着けなくなる。
- このページでは
- 「画面」に音量を入れた案、「調整」という名前の案は、どちらもこの条件を満たさず不採用にした。
R1-5一時的な調整と、恒常的な設定は分ける
- 思惑
- 使う頻度も効き方（その場だけか、ずっと続くか）も違う。利用者が見慣れた Mac も、コントロールセンターとシステム設定を分けている。
- このページでは
- 音量・明るさは「Mac 本体」の「音」「画面表示」へ入れる。キーボードナビゲーションを有効にする操作などは「設定」へ入れる。
R1-6同じ操作を複数の分類に載せてよい。ただし同じ分類の中には重ねない
- 思惑
- 人によって探し方は違う。正解の箱を1つに決めて押し込むより、入口を増やしたほうが見つかる。
- このページでは
- ⌘Space（Spotlight）は「まず覚える操作」と「検索」の両方にある。組み直しで同じ分類に並んだ重複は消した。
R1-7初めての人向けの入口（はじめに）だけは、分類ルールの例外として先頭に置く
- 思惑
- 何から覚えればよいかわからない人に、最小限のセットを最初に見せる。
- このページでは
- 「まず覚える操作」に、Spotlight、メニュー、アプリ切り替え、Tab・Space・⏎・esc など9項目を置いている。
R1-8項目名は「できること」を目的として書き、実際に起こる以上のことを書かない
- 思惑
- 押して期待と違うことが起きると、ページ全体が信用されなくなる。
- このページでは
- 「¥キーで\を入力できるようにする」は、実際には設定画面を開くところまでしかできない。そこで項目名は目的として書き、最後の手順は自由記述（ウインドウ内の操作）で示すようにした。
R1-9前提となる条件は必ず書き、「項目全体の条件」「その手順だけの条件」「分類全体の条件」を区別する
- 思惑
- 前提を見落として「押しても効かない」と感じさせない。条件がどこまで効くのかも誤解させない。
- このページでは
- 分類全体の条件は見出しの横に置く（例：Finder で）。項目全体の条件は操作の上に置き、縦線ですべての手順を囲む。手順だけの条件は、その手順の位置に置く。
R1-10「または（パターン）」「次に（手順）」「別々の操作」を記法で区別し、画面では描き分ける
- 思惑
- 「どちらか一方を押す」と「続けて押す」の取り違えは、そのまま操作の失敗になる。データの段階で区別しておけば、表示が自動で正しく描き分けられる。
- このページでは
- データの記法は次のとおり。
|パターン、>手順、//別々の操作、~文章、@手順の条件、#ウインドウ内の自由記述。キーごとの説明（バッジ）はbに書く。画面では、パターンは切り替えスイッチ、手順は●─●の進行表示で描く。
R1-11キーの表記・配置は利用者の手元の実物に合わせ、省略しない
- 思惑
- 画面の表記と手元の刻印を、そのまま照らし合わせられるようにする。
- このページでは
- esc は刻印どおり「esc」と書く（⎋ は使わない）。fn が必要な F キーの操作には、必ず fn を含める。配列は利用者の JIS キーボードを基準にし、caps lock を ⌘ に変えている設定にも対応した。
R1-12操作と補足を分けて書く
- 思惑
- ざっと見るときは項目名だけを読み、必要なときだけ補足を読めるようにする。
- このページでは
- 一覧は「操作｜できること」の2列で、補足は項目名の下に小さく添える。
R1-13アプリは具体的なアプリ名で分類し、どのアプリでも同じ操作は「汎用」として外に出す
- 思惑
- ユーザーはまず「Chrome で」「Gmail で」と具体的なアプリを思い浮かべ、次に「全部閉じたい」「このタブだけ閉じたい」とやりたいことを考える。「アプリ」と「ウインドウ」の区別は作り手の分け方で、ユーザーの認知ではない。
- このページでは
- 大分類「各種アプリ」に Chrome・Safari、Gmail、プレビューなどを置く。閉じる（⌘W・⌘Q）、切り替える、全画面にする、といった操作は、どのアプリでも同じキーなので「ウインドウ操作」にまとめ、「汎用的な操作」に入れる。以前は「アプリ」と「ウインドウ」を別の分類にしていた。
R1-14ユーザーがアプリとして意識しないものは、アプリ名ではなく目当てのモノで分類する
- 思惑
- ファイルを扱う人の頭にあるのは「ファイル」で、「Finder」というアプリ名ではないことが多い。また、同じファイル操作は Finder 以外（開く・保存ダイアログ）でも起きる。
- このページでは
- 大分類「ファイル」に「ファイル・フォルダ（Finder）」と「開く・保存ダイアログ」を置く。アプリ名で探す人のために、名前は括弧で残している。
R1-15載せるアプリは「多くの人が使う」と「見ただけではわからない操作がある」の両方で選ぶ。使用率は調べてから判断する
- 思惑
- 公開して多くの人に使ってもらうページなので、作り手個人の好みではなく利用者全体に合わせる。キーボードを見れば打てる操作しかないアプリは、載せても役に立たない。
- このページでは
- メールは、国内で最も使われている Gmail を載せ、Mac 純正のメールアプリは外した（調査で Mail.app が多いと言える根拠がなかった）。カレンダー・写真などは、ほとんどが汎用的な操作で足りるので見送った。計算機は数字を打てるので、クリアやモード切り替えだけを載せる。
R1-16操作の量が多いアプリは別ページに分け、このページには基本の操作だけを載せてつなぐ
- 思惑
- 1つのアプリで項目が膨らむと、ページ全体が探しにくくなる。よく使う操作はすぐ見つかり、詳しく知りたい人は先へ進める、という2段構えにする。
- このページでは
- Excel、PowerPoint、Google スプレッドシート、Google スライド、Slack、Zoom は、同じ作りの別ページにする予定。Chrome・Safari と Gmail は、詳しい操作を別ページに分ける予定。
R1-17前もって必要な設定があるときは、その分類の先頭に置く
- 思惑
- 設定をしないと効かない操作を先に読ませると、試して効かずに諦めさせてしまう。最初に1回だけ必要なことは、最初に見せる。
- このページでは
- Gmail の分類は「1文字のショートカットを使えるようにする」から始まる。設定なしでも使える ⌘⏎（送信）には、その旨を補足で添えている。
R1-18操作が効く範囲が見た目と違うときは、補足に書く
- 思惑
- あるアプリの分類に載っていても、実際にはもっと広く効く操作がある。それを知っていれば、別の場面でも迷わず使える。
- このページでは
- ターミナルの分類で、シェルが受け取る操作の補足に「zsh（シェル）の操作。」と書いている。iTerm など、ほかのターミナルアプリでも同じように効く。
2言葉
表記と用語のルールです。どれも、利用者が画面の言葉で迷わないためのものです。
R2-1一語一義。1つの言葉には1つの意味だけを持たせる
- 思惑
- 同じ言葉が場所によって違う意味を持つと、読む人は誤解する。
- このページでは
- 次の4語を使い分ける。
「ここを選んで」（入力欄にカーソルを置く）は「選ぶ」の別の意味になるので使わない。
言葉 意味 選ぶ 項目やキーを選ぶ（「選択」とは書かない） 入力 手元のキーボードでキーを打つ 押す ショートカットとして実際に押すキー（「押すキーが光る」） 表示中 キーボードの図に今出ているもの
R2-2題材側の公式名称に合わせる
- 思惑
- 実際の画面やヘルプと同じ言葉なら、そのまま照らし合わせたり検索したりできる。
- このページでは
- 「電源ボタン」「システム設定」「ウインドウ」（Apple の表記。「ウィンドウ」とは書かない）と書く。「選択したものをコピー」のような Mac 自身の操作名は、R2-1 の例外としてそのまま使う。
R2-3括弧を使い分ける。［ ］は画面に表示される名前、「 」は入力する文字
- 思惑
- クリックや選択で操作する対象なのか、自分で打つ文字なのかを、一目で区別できるようにする。
- このページでは
- ［システム設定］［続ける］と、「キーボード」と入力。
R2-4言葉の範囲を決めておく。「画面」はディスプレイ全体だけを指す
- 思惑
- ディスプレイ全体とウインドウの中身を、同じ「画面」で呼ぶ混乱をなくす。
- このページでは
- ウインドウの中での手順は「ウインドウ内の操作」と呼び、小さなウインドウの絵で示す。
R2-5修飾キーは、題材側の正式な並び順で書く
- 思惑
- メニューの表示と同じ順にすることで、見比べるときに迷わせない。
- このページでは
- Apple のメニューと同じ 🌐 ⌃ ⌥ ⇧ ⌘ の順にする。
R2-6見出しや説明は利用者側の言葉で書き、「探す人の頭に浮かぶか」で確かめる
- 思惑
- 作り手の分類用語では、探す人の目に引っかからない。
- このページでは
- 「調整」「作業」は、音量を探す人の頭に浮かばない言葉なので不採用にした。
R2-7操作を案内する文と、状態を知らせる文を混ぜない
- 思惑
- 操作だけが書いてあるはずの場所に状態が混ざると、「該当なし」という操作があるかのように読めてしまう。
- このページでは
- 案内文には操作だけを書く。「該当なし」のような状態は、一覧の側で示す。
R2-8公式の名前と、利用者がふだん呼ぶ名前が違うときは併記する
- 思惑
- 公式名だけでは、ふだんの呼び名で探す人の目に止まらない。呼び名だけでは、Spotlight で開くときなど公式名が必要な場面で困る。
- このページでは
- 「計算機（電卓）」。開く操作では、公式名の「計算機」と入力するよう書いている。
R2-9つなぎの記号は1つの意味だけに使う。「→」はキー操作の手順（次に）、「›」は画面の項目を順にたどる道筋
- 思惑
- 同じ記号が「次のキーを押す」と「次の項目を選ぶ」の両方に使われると、どちらの意味かを毎回考えさせてしまう。表記が揺れると、違う意味があるのかと勘ぐらせる。
- このページでは
- 手順の行頭の矢印は「→」。ウインドウ内の操作は［入力ソース］ › ［編集…］のように「›」でつなぐ（Apple のヘルプと同じ書き方）。以前は「›」と「→」が混在していたので、「›」にそろえた。
R2-10並び順や位置で指し示さない（「以降の項目」「上の操作」など）
- 思惑
- 検索で絞り込んだり、項目を1つだけ選んだりすると、並びは見えなくなる。どこからどこまでかも、読む人には伝わらない。
- このページでは
- ターミナルの説明にあった「⌃C 以降の操作は…」をやめた。各項目に［コマンドの実行中に］［コマンドの入力中に］の条件を付けて、項目ごとに読めばわかるようにした。
3画面の構成
R3-1領域の並びを、探す → 選ぶ → 確かめる の流れに合わせる
- 思惑
- 視線と操作が、迷わず一方向に流れるようにする。
- このページでは
- 左に探す道具（順引き／逆引き、検索、目次、凡例）、中央に一覧、下にキーボードの表示（表示中のカードとキーボードの図）を置く。
R3-2手元の装置の図は、実物に忠実に描く
- 思惑
- 図と手元を見比べて、押す場所をすぐ見つけられるようにする。形が違うと、照らし合わせるたびに迷う。
- このページでは
- 描き方の細かいルールは、次の4章「手元の装置の図」にまとめている。
R3-3選んだものを表示する領域は、大きさを固定する
- 思惑
- 選ぶたびに図の位置が動くと、目で追えなくなる。
- このページでは
- カードの高さは、全項目の中で最も高いものに合わせて固定している。項目名は3行までにする。
R3-4見出しは画面上端に留め、内容がその下に潜り込んでいる間だけ影を付ける
- 思惑
- スクロールしても、今どこを見ているかを見失わない。影の出し方は Mac のツールバーにならう。
- このページでは
- 上から、案内文 → 分類の見出し → 列の見出し の順に留める。高さは実際に測って重ね、すき間を作らない。
R3-5文字は切らない、はみ出させない。幅を広げる代わりに、意味の切れ目で改行する
- 思惑
- 切れた文字は誤読を生む。たとえば欄に収まらず「、」で切れた文は、誤植に見えた。
- このページでは
- 「または」と「→」の前で改行する。検索欄の例文は、幅を実際に測って収まる長さにした。
R3-6狭い画面では、左の欄を上に移す。上に留まる要素同士が重ならない位置に置く
- 思惑
- どの画面幅でも、同じ流れで使えるようにする。
- このページでは
- 広い画面では、案内文をタイトルの上に置く。狭い画面では、留まる検索欄のすぐ下に置く。
R3-7補助の領域はしまえるようにし、しまっても呼び出す手がかりを残す
- 思惑
- 一覧を広く使いたい人の邪魔をしない。ただし、領域の存在そのものは見失わせない。
- このページでは
- キーボードの表示は、書類のインデックスのようなつまみで出し入れする。K でも出し入れできる。
4手元の装置の図
このページの核は、押すキーが手元のどこにあるかを一目で示す図です。図と手元を見比べたとき、「同じものだ」と感じられるほど似ていることを目指します。
R4-1図の寸法は、利用者の実物から測る。一般的な配列図や記憶で描かない
- 思惑
- 同じ「JIS 配列」でも、機種によってキーの幅や段のずれが違う。実物と違う形の図は、見比べるたびに「どのキーのことか」と迷わせる。
- このページでは
- 利用者の MacBook Air の写真から、段ごとに各キーの左端と右端を測った。最初は一般的な形で描いて「全然違う」と指摘され、測り直した。
R4-2写真のゆがみは補正し、実物の比率に戻す
- 思惑
- 斜めから撮った写真は、奥ほど小さく写る。そのまま写すと、実物にない比率になる。
- このページでは
- 段ごとに左右の端をそろえて台形のゆがみを直した。ファンクションキーの段は、写真では低く見えたが、実物どおりほかの段と同じ高さにした（キーを正方形にするという意味ではない）。
R4-3キーの間のすき間は、どこも同じ幅にする
- 思惑
- すき間が場所によってばらつくと、測った誤差がそのまま「雑な図」に見え、図全体の信用を落とす。
- このページでは
- 隣り合うキーの境目を、測った値の中間に置いて段をすき間なく分割し、そこから全キー共通の 4px のすき間を引いて描いている。
R4-4形の特殊なキーは、実物どおり1つの形として描く
- 思惑
- 2つの四角に分けて描くと、別々の2つのキーに見えてしまう。
- このページでは
- JIS の ⏎ は、逆L字の1つの図形として描いている。2つに分けた案と単純な長方形にした案は、どちらも描画が崩れて不採用にした。光らせるときも、形全体を1つとして光らせる。
R4-5キーの表記は刻印どおりにし、刻印がアイコンならアイコンで描く
- 思惑
- 図の文字と手元の刻印が同じなら、読まずに形で照らし合わせられる。
- このページでは
- 記号と名前を2段で書く（⌘ と command など）。esc は「esc」のまま書く。F1〜F12 には、明るさ・音量などの刻印と同じアイコンを付ける。地球儀（🌐）は絵文字を使わず、刻印に似せて線で描く。⏎ の文字は、刻印と同じく ] の近くに置く。
R4-6利用者の設定や、使い方の癖を図に反映する
- 思惑
- 図が「この人の手元」と一致して初めて、迷わず押せる。
- このページでは
- caps lock を ⌘ として使う設定を初期値でオンにしている。JIS／US の配列を切り替えられる。⌘ と ⇧ は、ふだん使う左側だけを光らせ、右側は控えめにできる。
R4-7段の数や配置が同じなら、どの画面幅でも比率を崩さない
- 思惑
- 幅に合わせて形が変わると、手元との一致が失われる。
- このページでは
- キーの位置と幅は割合で指定し、図全体を拡大縮小している。段の高さは、全段で同じ値にしている。
5見た目
装飾の1つずつに、意味を1つだけ持たせます。同じ見た目は同じ意味、違う意味には違う見た目を使います。
R5-1線＝今いる場所／面＝選んでいる／枠＝固定・フォーカス
- 思惑
- 装飾の種類を見るだけで、状態が読めるようにする。1つの装飾に2つの意味を持たせない。
- このページでは
- 線は目次の左端の縦線だけに使う。面は一覧の行、目次（操作中）、カードに使う。枠は固定した行とカード、キーで選んでいるボタンに使う。
R5-2選んでいる面は、そこを操作中なら 青、別の場所を操作中なら 灰にする。対になる要素は同じ色にする
- 思惑
- 今どこを操作しているかが、色だけでわかる（Finder と同じ）。行とカードのように同じものを表す要素の色がずれると、別物に見える。
- このページでは
- 目次で ⏎ を押すと、青い面が目次から一覧の行へ移る。行とカードは、同じ色の指定を共有している。
R5-32択で選ばれている方は、濃い青で塗る（例外：設定パネルは無彩色）
- 思惑
- 切り替えスイッチの見た目を、ページ全体でそろえる。ただし設定はキーボードの図のすぐそばに開くので、青を使うと「押すキー」と紛らわしくなる。
- このページでは
- ［順引き｜逆引き］、手順の●、パターンの切り替えは濃い青。設定の［JIS｜US］とチェックボックスは灰色。
R5-4キーの光り方は、意味ごとに3段階に分ける
- 思惑
- 「同時に押す」「どれか1つ」「押さなくてよい側」を、図だけで区別できるようにする。
- このページでは
- 押すキーは青の塗り。どれか1つを押すキーは点線の枠と、行き先などのバッジ。左右にある ⌘ や ⇧ の、普段使わない側は控えめに表示する。
R5-5キーでないものは、キーのような枠で囲まない（例外：実際の画面部品をかたどるもの）
- 思惑
- 枠付きの四角は「押すキー」に見える。文章や画面部品まで囲むと、押す対象と誤解させる。
- このページでは
- 条件や「押し続ける」などは文字だけで書く。Spotlight の入力欄とウインドウ内の操作は、実物に似せた形で描く。
R5-6条件は控えめな文字と同じ色の縦線で示す。色は透けない指定にする
- 思惑
- 条件が操作より目立たないようにしつつ、どこまで効くのかを線で示す。半透明の色は背景によって色味が変わり、文字と線が別物に見える。
- このページでは
- 条件の色は1か所で決め、文字と縦線の両方でその色を使う。
R5-7フォーカスの示し方を統一する。ボタンは外側に2pxの青い枠と2pxのすき間、入力欄は枠線を青にして薄い青をにじませる
- 思惑
- キーで操作している人が、今の位置を必ず見つけられるようにする。塗りつぶしの上に同じ色の枠を描くと、同化して見えなくなる。
- このページでは
- ［順引き｜逆引き］は青い塗りの中に枠を描くのをやめ、全体の外側に枠を出すようにした。
R5-8割り当てキーは、ボタンの右端に小さく添える
- 思惑
- メニューの見慣れた見せ方なので、説明しなくても「このキーで押せる」と伝わる。
- このページでは
- ［キーボードをしまう K］［⚙ 設定 ,］。
R5-9色はすべて名前付きの指定（トークン）で管理し、明るい表示と暗い表示の両方を作る
- 思惑
- 直すときは1か所で済ませ、どちらの表示でも読める状態を保つ。
- このページでは
- 選んでいる面の青と灰、条件の色などを、それぞれ1つのトークンにまとめている。
R5-10書体は役割ごとに分ける。見出し・本文・キーの記号の3つ
- 思惑
- 役割ごとに最適な書体を選び、ページの中の格を書体で示す。役割を混ぜないことで、見ただけで「見出し」「説明」「キー」が区別できる。
- このページでは
-
役割 書体 選んだ理由 見出し Zen Kaku Gothic New（太字） 太くても形が崩れない角ゴシックで、本文との差がはっきり出る。 本文 BIZ UDPゴシック 見間違えにくさを重視したユニバーサルデザイン書体。条件や補足など、小さな文字でも読める。 キーの記号 Mac のシステムフォント（San Francisco） R5-11 を参照。
R5-11キーの記号は、題材の実機と同じ書体で描く
- 思惑
- ⌘ ⌥ ⇧ ⌃ ⏎ ⌫ は、書体によって形が大きく変わる。メニューや刻印と同じ形でなければ、見比べられない。
- このページでは
- Mac のメニューと同じ San Francisco を指定している。Safari 向けの -apple-system だけでは Chrome（Claude アプリを含む）で効かず、⇧ が ↑ に見えたので、BlinkMacSystemFont も加えた。以前使っていた等幅の書体は、記号の形が実機と違うので外した。
R5-12実物にない説明のラベルを足すときは、控えめに、対象に寄り添わせ、囲まない
- 思惑
- 画面部品の絵は実物に似せる（R5-5）。ただ、それだけでは初めての人に正体が伝わらないことがある。説明のラベルを足しても、主役（部品の絵）より目立たず、別の部品にも見えないようにする。
- このページでは
- Spotlight の検索窓の上に「Spotlight検索」と添えている。
決めたこと 理由 検索窓の真上に置き、すき間は 1px どの部品の説明なのかを、近さで示す 左端は、検索窓の角の丸みの分だけ内側に入れる（一覧 8px、キーボード上 16px） 窓の左端にぴったりそろえるより、窓の形に沿って見える 太字にせず、少し淡い色にする 太字では主張しすぎた。灰色まで淡くすると、暗い表示でキーの文字に埋もれた 枠や背景の札で囲まない 囲むと、それ自体が別の部品やキーに見える キーボードの上では、文字のまわりを背景色でふちどる 囲まなくても、下のキーの文字と混ざらずに読める
6キーボード操作
キーボードだけで、すべてができることが前提です。まず「モード（今いる場所）」を決め、そのモードの中での選び方と、モード同士の行き来の仕方を決めます。
R6-1モードを定義し、「モードの中で選ぶ操作」と「モード同士を行き来する操作」を表にする
- 思惑
- 場当たり的にキーを割り当てると、どこかで行き止まりや矛盾が生まれる。表にすれば、抜けやぶつかりが見える。
- このページでは
-
モード 中で選ぶ 行き来 選択なし なし ↓／Tab で目次、/ で検索 ［順引き｜逆引き］ ←→ で切り替え ↓ で検索欄（逆引きではキーの入力欄） 検索欄 文字を入力 ↑ で上へ、↓／⏎ で結果へ（空なら目次）、esc で消去 → 目次 目次 ↑↓（右の一覧も追従） ⏎ で項目、先頭で ↑ を押すと検索欄 項目 ↑↓、←→ で手順やパターン、⏎ で固定 esc で来た場所（目次か検索欄）、/ で検索 逆引きの入力欄 キーを入力して選ぶ esc で［選んだキーをすべて解除］ ［選んだキーをすべて解除］ ⏎ で解除 ↑↓ で上下、Tab で結果 設定 ↑↓、←→、⏎ esc で開く前の場所
R6-2キーの意味は、どこでも同じにする
- 思惑
- 一度覚えたキーが、別の場所でも同じように働く。場所ごとに覚え直させない。
- このページでは
-
キー 意味 ↑↓／Tab⇧Tab 前後へ移動 ⏎／Space 中へ入る・決める・固定する esc 来た場所へ1段戻る ←→ 2択の切り替え、手順やパターンの切り替え / K , どこからでも：検索／キーボードの表示／設定 ⌫ 選んだものをすべて解除（逆引き）
R6-3同じ意味のキーは、どちらでも同じように動かす
- 思惑
- 人によって先に試すキーは違う。途中でキーを持ち替えても、期待どおりに動くようにする。
- このページでは
- Tab で途中まで進んでから ↓ に持ち替えても、選択位置は飛ばない。設定の中でも ↑↓ と Tab、⏎ と Space が同じように効く。
R6-4↑↓ の移動は画面の並びどおりにし、端まで行ったら隣のモードへつなげる
- 思惑
- 画面で上にあるものは ↑ で、下にあるものは ↓ で行ける、という空間の感覚を裏切らない。
- このページでは
- ［逆引き］→［選んだキーをすべて解除］→ キーの入力欄 の並びにした。目次の先頭で ↑ を押すと、上にある検索欄へ移る。
R6-5esc は「来た場所へ1段戻る」に統一する
- 思惑
- どこにいても esc で戻れるので、迷子にならない。
- このページでは
- 検索の結果から esc を押すと、目次ではなく検索欄へ戻る。検索欄の esc は、1回目で入力を消し、2回目で目次へ移る。
R6-6最初の一押しを無駄にしない
- 思惑
- 初めての人が最初に押したキーで何も起きない（画面がスクロールするだけ）と、そこで諦める。
- このページでは
- 何も選んでいないときの ↓ や Tab は、入口（目次）へ移る。ボタンを選んでいるときの ↓ も、スクロールではなく次の場所へ移る。
R6-7タブ型の2択は、Tab で止まるのを選ばれている方だけにし、← → で切り替える
- 思惑
- 「選ばれている方」と「フォーカスがある方」がずれるのを防ぐ。標準的なタブと同じ動きにする。
- このページでは
- ［順引き｜逆引き］、設定の［JIS｜US］。
R6-8文字を打つ場所では、文字キーの割り当てを止める。すべてのキーを受け取る欄は、出口を esc だけにする
- 思惑
- 検索欄で「k」と打っただけで、キーボードの表示が消えるような事故を防ぐ。
- このページでは
- 検索欄と逆引きの入力欄では、K や , は文字として扱う。逆引きの入力欄では矢印や Tab も探すキーなので、esc だけで外へ出る。
R6-9一時的に開くパネルは、中だけを巡回し、閉じたら開く前の場所へ戻す
- 思惑
- パネルの外へ迷い出ないようにし、閉じたあとに作業の続きからすぐ始められるようにする。
- このページでは
- 設定は , で開き、esc で閉じると、開く前に選んでいた項目へ戻る。
R6-10操作のあとに待たせない
- 思惑
- 0.5秒の待ちでも、効いていないように感じる。
- このページでは
- 目次で ⏎ を押したら、スクロールの終わりを待たずにすぐ項目を選ぶ。スクロールはそのまま続ける。
R6-11初めての人が理解できない仕掛けは置かない
- 思惑
- 意味のわからない部品は、それ自体が迷いのもとになる。
- このページでは
- 「一覧へ移動」「キーボードの表示へ移動」のスキップリンクは削除した。最初の ↓ で入口へ移れるようにして、役目がなくなったため。
7案内文
ページ上部に常に出ている、1〜2行の操作案内です。初めての人が、これだけを読んで使えることを目指します。
R7-1今いる場所で使える操作だけを、その場に合わせて出し分ける
- 思惑
- 全操作を並べると、読まれない。今必要なものだけなら、一目で読める。
- このページでは
- 選択なし、検索欄（空／入力あり）、目次、項目（通常／手順あり／固定中）、［順引き｜逆引き］、逆引きの各場所、設定（チェックボックス／2択）で、それぞれ別の文を出す。
R7-2書いたとおりに必ず動くようにする
- 思惑
- 案内と違う動きが1つでもあると、案内全体が信用されなくなる。
- このページでは
- 文を変えたら、実際にそのキーを押して確かめる。案内と動きが合わないときは、動きのほうを直すこともある（例：検索結果での esc）。
R7-3マウスの操作は書かない。同じ意味のキーは、代表の1つだけを書く
- 思惑
- マウスでの操作は見ればわかる。このページの売りはキー操作なので、短い文にそれだけを載せる。
- このページでは
- 「↑↓ で移動」とだけ書き、Tab は省く。「⏎ で固定」とだけ書き、Space は省く。
R7-4長すぎず短すぎず、「キー → 結果」の形でそろえる
- 思惑
- 文の形がそろっていると、さっと読めて覚えやすい。
- このページでは
- 「↓ で目次へ、/ で検索へ。項目を選ぶと、押すキーが下に光ります。」
R7-5案内文は、タイトルより上の、常に見える位置に置く
- 思惑
- ページを開いて最初に目に入り、スクロールしても消えないようにする。
- このページでは
- 上端に留まる帯にしている。
8マウス操作
R8-1マウスを乗せると選ぶ。ただし、実際にポインタを動かしたときだけにする
- 思惑
- クリックなしで次々に見比べられるようにする。ただしスクロールしただけで、ポインタの下の項目に選択が飛ばないようにする。
- このページでは
- ポインタの座標が変わったときだけ選ぶ。固定中は、ほかの行に乗せても選択を変えない。
R8-2クリックで固定し、もう一度で解除する。固定は表示している側からも解除できるようにする
- 思惑
- マウスを動かしても表示を残したいときに、固定できるようにする。固定の解除は、目に入っている場所からすぐできるようにする。
- このページでは
- 行の左端にピンを付け、カードの右上にもピンのボタンを置く。キーで別の項目へ移ると、固定は外れる。
9作り方・確かめ方
R9-1まず問いに答え、案を出し、合意してから作る
- 思惑
- 作り直しの手間を減らし、判断の理由を残す。
- このページでは
- 「〜はどうする？」と聞かれたら、まず今の状態を答える。直し方は、選択肢とおすすめを添えて出す。
R9-2直したら、実際に操作して確かめる
- 思惑
- 「たぶん動く」を出荷しない。とくに、案内文と実際の動きの一致は必ず確かめる。
- このページでは
- キー操作を順に送り、そのたびに選ばれている場所と案内文を記録して照らし合わせる。見た目は、明るい表示と暗い表示、広い画面と狭い画面で確かめる。
R9-3過去の決定とぶつかる変更は、手を止めて確かめる
- 思惑
- 以前に理由があって決めたことを、知らないうちに壊さない。
- このページでは
- 「2択は青」にそろえる提案は、「設定は灰色」という以前の決定とぶつかったので、実装を止めて確かめた（R5-3）。
R9-4ときどき、ルールを表にして統一の崩れを洗い出す
- 思惑
- 少しずつ直していると、同じ意味なのに見た目が違う箇所が生まれる。表にすると、それが見える。
- このページでは
- 「状態 → 装飾」の表を作り、フォーカス枠のすき間の違い、パターン選択の枠、狭い画面の目次の見た目を見つけて直した。
10別の題材で作るとき
次の順に進めます。各段階で、上の章のルールを当てはめます。
- 利用者と手元を決める。誰が、どの装置（キーボード、コントローラーなど）で、どの環境に見慣れているか。P-2 の「見慣れた振る舞い」の手本は、ここで決まる。
- 目当てのモノとアプリを洗い出す。アプリは、多くの人が使い、見ただけではわからない操作があるものを選ぶ。量の多いアプリは別ページにする（R1-13〜R1-16）。利用者が「〜したい」と思うときに頭に浮かぶモノを集め、一段ずつ抽象化して分類と大分類を作る（R1-1）。何にでも効く動作だけを抜き出して、「汎用的な操作」にする（R1-2）。初めての人向けの入口も1つ作る（R1-7）。
- 項目を書く。できること、操作、条件、パターンか手順か、補足に分けて、記法どおりにデータを書く（R1-8〜R1-12、2章）。
- 手元の装置の図を、実物から作る。写真から寸法を測ってゆがみを直し、表記は刻印どおりにする（4章）。キーの光り方は3段階で描き分け、記号は実機と同じ書体で描く（R5-4、R5-11）。
- モードと行き来の表を作る。キーの意味をページ全体でそろえ、同じ意味のキーはどちらでも動くようにする（6章）。
- モードごとに案内文を書く。使える操作だけを、「キー → 結果」の形で書く（7章）。
- 見た目のルールを当てはめる。線・面・枠、選んでいる面の青と灰、フォーカス枠を決める（5章）。題材固有の例外は書き残す（P-3）。
- 確かめる。案内文どおりに操作して動きを確かめ、状態と装飾の表で統一の崩れを洗い出す（9章）。
このページ固有のもの（JIS 配列、Finder の選択色、Mac のメニュー表記、書体、色の値など）は、題材に合わせて置き換えてかまいません。置き換えるときも、思惑が満たされているかで判断します。