ADR-0028: 操作できる要素と重なる面の角を 2px で丸め、重なる面にずらした影を付け、罫を引く動きを筆の線にする¶

Status¶

承認

Context¶

ふだんの画面の角丸、影、動きを、操作感を落とさない範囲で決め直す必要がある。

• 箱の角は丸めず、影を使わず、読み込み中の印は罫で示していた。テーマ変数は、Tailwind のデフォルトの角丸と影を消している。
  • ADR-0024: トークンを、fukuemon.dev の値のプリミティブトークン、セマンティックトークン、テーマ変数の 3 つの層にし、生成りの地と旧サイトの差し色にする
• サイト全体の動きの規則は、位置を動かさないことと、動きのために JavaScript を配らないことを決めている。例外はトップの庭だけである。
  • ADR-0026: トップの最初の訪問で水墨の門を描き、門をくぐった立体の庭にプロフィールを置く
• 運営者は、トップの庭の試作で墨と筆の線が描かれる動きを見て、ふだんの画面にも筆の動きを入れると決めた。角丸と影を使わない決定も、見直してよいとした。
• Button の読み込み中の印は、24px の罫が伸びて抜ける形である。ボタンの中では「—」に見え、処理中と読み取りにくい。動きを減らす設定では、止まった「—」になる。
• 運営者は、カタログの Button、Tabs、TextField、Dialog、TreeView、ActionMenu、Link を並べた試作で、角丸、影、動き、処理中のボタンの案を比べて選んだ。
• ボタンの secondary と枠のある TextField は枠を box-shadow で描き、フォーカスの表示も box-shadow を使う。
• 挿絵 kasumi の動きの層は、読み込みのときに霞の帯が横に動き、位置を動かさない規則に合っていない。
• WCAG 2.2 の達成基準 2.2.2 は、自動で始まり、5 秒を超えて続き、ほかの内容と並んで出る動きに、止める手段を求める。
  • 出典: Understanding SC 2.2.2: Pause, Stop, Hide

Decision¶

罫で区切る版面を保ったまま、操作できる要素と重なる面の角を 2px で丸め、重なる面にぼかさない影を付け、罫を引く動きを筆の線の形にして広げる。
コードを動かす画面の中の版面、角丸、ファイルのドロワーの影は、ADR-0073 が決める。

• 角丸
  • 操作できる要素と重なる面の角を、2px で丸める。ふだんの画面が使う角丸の名前は、テーマ変数の rounded-control の 1 つだけにする。
  • 対象は、Button、IconButton、枠のある TextField、TreeView の行、Disclosure の要約、タブの閉じるボタン、Dialog、ActionMenu、検索の候補の一覧である。
  • Tabs のタブ、下罫だけの検索の欄、メニューの項目、Notice、StatusBadge、Table、コードブロックの角は丸めない。罫で示す要素と、罫で区切る面のためである。
• 影
  • 影は、重なる面（ダイアログ、メニュー、候補の一覧）だけに付ける。ボタンと入力欄には付けない。影が、重なりだけを表すためである。
  • 影は、ぼかさずに右下へ 4px ずらす。テーマ変数に、影の名前を 1 つだけ置く（shadow-raised）。ぼかした影は、ダークの面の上でほぼ見えなかった。
  • 重なる面は、surface-raised の面、1px の枠、この影を組にして示す。
• 動きを付ける操作
  • 選んだタブの罫と、検索の欄のフォーカスの罫を、筆の線の形（入りが太く、終わりを払う）にして、左から 1 回引く。ハイコントラストのときの選んだタブの罫の形は、ADR-0068 が決める。
  • 文中のリンクの hover で、下線の下に 2px の罫を左から 1 回引く。罫は背景で描き、折り返したリンクでは全ての行に引く。疑似要素で描く筆の線は、折り返すと最後の行の一部にだけ出るためである。
  • 文中のリンクの左右を、フォーカスの表示が外へ広がる 6px だけ空ける。フォーカスの表示を、前後の文字に重ねないためである。
  • 記事の一覧の題のように文中に置かないリンクは、左右を空けない。見出しや帯と左端をそろえるためである。
  • 筆の線は、折り返さない所（選んだタブ、検索の欄、ダイアログの上端、ナビゲーション）に使う。
  • ボタンを押している間は面を濃くし、離すと、文字の色の墨がにじんで消える。主のボタンと danger のボタンでも、にじむ色は文字の色（明るい色）のままにする。
  • ダイアログ、メニュー、候補の一覧は、濃度を上げて出す。ダイアログは、上端に墨の筆の線を 1 回引く。
  • フォーカスの表示には、動きを付けない。キーボードの利用者が、今いる場所をすぐに見つけられるためである。検索の欄の筆の線だけが例外のままである。
• ナビゲーション
  • サイトのヘッダーのナビは、今いるページの印を錆の筆の線にして左から 1 回引き、hover で墨の筆の線を左から 1 回引く。選んだタブの筆の線とそろえる。
  • パンくずリストのリンクは、hover で、リンクの箱の下に筆の線を左から 1 回引く。線は箱に付けるので、ラベルが折り返しても崩れない。
  • 目次の見出しと、シリーズの前後の記事の題は折り返すので、hover で、文字のすぐ下に文中のリンクと同じ 2px の罫を引く。行高 130% で折り返しても、罫が次の行の文字に接しないようにするためである。
  • ナビゲーションのフォーカスの表示にも、動きを付けない。
• 動きの長さと、付けない所
  • 操作に応える動き（色、濃度、山形の回転）は、150ms 以下にする。
  • 罫と筆の線を引く動きは、320ms 以下で 1 回にする。
  • 墨のにじみは、480ms 以下で消す。にじみは押した結果を待たせない飾りなので、操作に応える動きの 150ms の基準の外に置く。
  • 繰り返す動きは、処理中の印だけにする。
  • 操作の結果（切り替えた中身、開いた面の中身）は、動きの終わりを待たずに出す。
  • 入力した文字と誤りの文には、動きを付けない。
  • 位置と配置を動かさない。開閉で中身が出るときも、高さを動かさない。
  • 動きのために JavaScript を配らない。
  • 動きを減らす設定では、全ての動きを止める。罫と筆の線は全長で、処理中の印は止まった形で出す。
• 処理中の印
  • Button の読み込み中は、ラベルを隠し、3 つの点が左から順に薄くなる形で示す。止まっても「…」と読め、ボタンの幅が変わらないためである。
  • ボタンの外で使う Loading は、罫が伸びて抜ける形のままにする。待っていることを表す文を横に出すためである。
  • 処理中の印は、5 秒を超える動きを 5 秒以内に止める決定の例外にする。印は、利用者が待っている処理が終わると消えるためである。
• 挿絵
  • kasumi の動きの層は、霞の帯を横に動かさず、濃度を上げて出す。位置を動かさない規則の例外を、トップの庭だけに保つためである。
  • kasumi と moonPine を置く一覧は、サイトのページを作るときに決める。カタログの例は、記事の一覧の冒頭に置く形にする。

Verification¶

使い捨ての試作で、カタログの実物のコンポーネントに案を当て、chromium で確認した。

• 角丸は、2px のときに、フォーカスの表示が角に沿った。
• ぼかした影は、ダークの面の上でほぼ見えなかった。ずらした影は、ライトとダークの両方で見えた。
• 3 つの点の印は、動きを減らす設定で、濃い点が 3 つ並んだ形で止まった。
• 折り返したリンクでは、疑似要素で描いた筆の線が、最後の行の一部にだけ出た。背景で描いた 2px の罫は、2 行のどちらにも出た。
• 文中のリンクのフォーカスの表示は、外へ 6px 広がり、リンクの後の文字に重なった。リンクの左右を 6px 空けると、重ならなかった。
• サイトの 11 ページを、ヘッダーのナビの変更の前後に、明暗 2 配色と 2 幅で撮って画素で比べた。変わったのは、今いるページの印がある 4 ページの、印の 4px の行だけだった。
• Safari と Firefox での確認はしていない。

Considered Options¶

Consequences¶

Positive¶

• 押せるものと重なる面が、罫で区切っただけの面と見分けやすくなる。
• メニューと候補の一覧が、後ろに幕が無くても、下の内容から浮いて見える。
• 処理中のボタンが、動きを減らす設定でも処理中と読める。
• 動きを付ける操作と長さの基準が 1 か所に決まり、新しいコンポーネントの動きを基準で判断できる。

Negative¶

• ふだんの画面の角丸と影の名前を、テーマ変数に 1 つずつ持つ。
• 筆の線の形、リンクの罫、墨のにじみ、3 つの点の印は、Tailwind のデフォルトで組めず、テーマ変数のファイルにユーティリティとして持つ。
• 開いた直後のダイアログ、メニュー、候補の一覧は濃度が 0 から上がるので、テストは見えるまで待つ。
• 処理中の印を、5 秒を超える動きを止める決定の例外として持つ。