diff --git a/docs/design-principles/README.md b/docs/design-principles/README.md index 5d107b089..cf38a4e33 100644 --- a/docs/design-principles/README.md +++ b/docs/design-principles/README.md @@ -44,6 +44,8 @@ 紙面のデザインと調査の手順は、適用ルールに入れていない。アクセシビリティの数値は WCAG の文書に置く。 +出典のうち外部の文書は、この文書で使う範囲に絞った要約を [sources/](./sources/README.md) に置く。リンクが切れたときは、要約を手がかりに代わりの文書を探す。 + ### [デザイン段階で決める WCAG 2.2 の達成基準](./wcag-for-designers.md) WCAG 2.2 の Level A と AA の達成基準のうち、配色、文字、レイアウト、部品の振る舞い、文言、画面の流れを決めた時点で適合がほぼ決まるものを並べる。必須には達成基準の本文が要求する内容だけを書き、それより厳しい選択は推奨に分けている。実装の書き方だけで決まる基準は、末尾に名前だけを置く。 diff --git a/docs/design-principles/principles.md b/docs/design-principles/principles.md index 4ddf2283b..425e49f09 100644 --- a/docs/design-principles/principles.md +++ b/docs/design-principles/principles.md @@ -419,7 +419,7 @@ ### ニールセンのユーザビリティ 10 原則 -Jakob Nielsen がインタラクティブシステムの評価用に整理した十のヒューリスティックである。原文は [10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/)（Nielsen Norman Group）。 +Jakob Nielsen がインタラクティブシステムの評価用に整理した十のヒューリスティックである。原文は [10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/)（Nielsen Norman Group）。要約は [sources/nngroup-ten-usability-heuristics.md](./sources/nngroup-ten-usability-heuristics.md)。 | 原則 | 吸収先 | | --- | --- | @@ -444,7 +444,7 @@ Jakob Nielsen がインタラクティブシステムの評価用に整理した ### デジタル庁のユーザビリティデザインの原則 -デジタル庁の DS-671.1『ユーザビリティ導入ガイドブック』は、次の四つを推奨している。アクセシビリティファーストを基盤にし、その上に対話、情報提示、人間中心を置く、という関係である。公開先は [サービスデザイン（デジタル庁）](https://www.digital.go.jp/policies/servicedesign)。対話の原則は JIS Z 8520、情報提示の原則は JIS Z 8522 を参照している。 +デジタル庁の DS-671.1『ユーザビリティ導入ガイドブック』は、次の四つを推奨している。アクセシビリティファーストを基盤にし、その上に対話、情報提示、人間中心を置く、という関係である。公開先は [サービスデザイン（デジタル庁）](https://www.digital.go.jp/policies/servicedesign)。要約は [sources/digital-agency-service-design.md](./sources/digital-agency-service-design.md)。対話の原則は JIS Z 8520、情報提示の原則は JIS Z 8522 を参照している。 アクセシビリティファーストは、使いやすさの選択が多様な利用者の利用可能性と衝突したときに、利用可能性を優先するという基盤である。適用ルールの一項目にはせず、この文書の前提にした。数値は [wcag-for-designers.md](./wcag-for-designers.md) に置く。 @@ -488,14 +488,14 @@ Jakob Nielsen がインタラクティブシステムの評価用に整理した | パターン | 内容 | 吸収先 | | --- | --- | --- | -| F 字型パターン | 文章が主体のウェブページでは、視線が上部と左寄りに集中する。Nielsen Norman Group のアイトラッキングに基づく（[F-Shaped Pattern of Reading on the Web](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)） | 読み順と優先度 | +| F 字型パターン | 文章が主体のウェブページでは、視線が上部と左寄りに集中する。Nielsen Norman Group のアイトラッキングに基づく（[F-Shaped Pattern of Reading on the Web](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)、要約は [sources/nngroup-f-shaped-pattern.md](./sources/nngroup-f-shaped-pattern.md)） | 読み順と優先度 | | Z 字型パターン | 要素の少ないページで、左上、右上、左下、右下の順に要素を置く配置の経験則。F 字型パターンと同じ種類の計測結果ではない | 読み順と優先度 | ### その他のウェブで使う法則 | 法則 | 内容 | 吸収先 | | --- | --- | --- | -| ジャコブの法則 | 利用者は他のサイトにいる時間のほうが長く、そちらの慣習どおりに動くことを期待する（[Jakob's Law](https://www.nngroup.com/articles/jakobs-law-internet-ux/)、Nielsen Norman Group） | 一貫性 | +| ジャコブの法則 | 利用者は他のサイトにいる時間のほうが長く、そちらの慣習どおりに動くことを期待する（[Jakob's Law of the Internet User Experience](https://jakobnielsenphd.substack.com/p/jakobs-law)、Jakob Nielsen。要約は [sources/jakobs-law.md](./sources/jakobs-law.md)） | 一貫性 | | 連続位置効果 | 並びの先頭と末尾の項目が、中央より記憶に残りやすい | 読み順と優先度 | | フォン・レストルフ効果 | 周囲と違う一つの要素が記憶に残りやすい | 読み順と優先度 | | ドハティのしきい値 | 応答がおおよそ 400 ミリ秒を超えると、対話のテンポが落ちる、という呼び方。Doherty と Thadani の応答時間に関する議論に由来する | 状態と応答 | diff --git a/docs/design-principles/sources/README.md b/docs/design-principles/sources/README.md new file mode 100644 index 000000000..8161a8be2 --- /dev/null +++ b/docs/design-principles/sources/README.md @@ -0,0 +1,12 @@ +# 参照元の要約 + +[principles.md](../principles.md) が参照している外部の文書を、この文書で使う範囲に絞って要約したもの。原文の翻訳・転載ではなく要点のまとめなので、正確な表現は原文で確かめる。 + +| 要約 | 原文 | 状態（2026-10-19 時点） | +| --- | --- | --- | +| [nngroup-ten-usability-heuristics.md](./nngroup-ten-usability-heuristics.md) | [10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/)（Nielsen Norman Group） | 公開中 | +| [nngroup-f-shaped-pattern.md](./nngroup-f-shaped-pattern.md) | [F-Shaped Pattern of Reading on the Web](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)（Nielsen Norman Group） | 公開中 | +| [jakobs-law.md](./jakobs-law.md) | [Jakob's Law of the Internet User Experience](https://jakobnielsenphd.substack.com/p/jakobs-law)（Jakob Nielsen） | 以前のリンク先（nngroup.com/articles/jakobs-law-internet-ux/）は読めなくなったため、Nielsen 本人の解説に差し替えた | +| [digital-agency-service-design.md](./digital-agency-service-design.md) | [サービスデザイン（デジタル庁）](https://www.digital.go.jp/policies/servicedesign)、[DS-671.1 ユーザビリティ導入ガイドブック](https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/a39265b7/20260601_introduction_to_usability.pdf) | 公開中。原則の中身はガイドブック（PDF）にある | + +リンクが切れたら、リンクの文言から代わりの文書を探して要約を差し替え、この表の「状態」に経緯を書く。 diff --git a/docs/design-principles/sources/digital-agency-service-design.md b/docs/design-principles/sources/digital-agency-service-design.md new file mode 100644 index 000000000..02cedb0f7 --- /dev/null +++ b/docs/design-principles/sources/digital-agency-service-design.md @@ -0,0 +1,51 @@ +# デジタル庁のサービスデザインとユーザビリティデザインの原則（要約） + +- 原文: + - [サービスデザイン（デジタル庁）](https://www.digital.go.jp/policies/servicedesign)（最終更新 2026-07-09） + - [DS-671.1 ユーザビリティ導入ガイドブック](https://www.digital.go.jp/assets/contents/node/basic_page/field_ref_resources/e2a06143-ed29-4f1d-9c31-0f06fca67afc/a39265b7/20260601_introduction_to_usability.pdf)（デジタル庁 技術検討会議サービスデザインタスクフォース。初版 2025-09-30、改訂 2026-06-01） +- 確認日: 2026-10-19 +- 使っている箇所: [principles.md](../principles.md)「デジタル庁のユーザビリティデザインの原則」 + +サービスデザインのページは方針と取り組みの紹介で、原則の中身はガイドブック（PDF）に書かれている。 + +## サービスデザインのページ + +利用者中心（人間中心）を原則に行政サービスを設計し、年齢・障害の有無・経済状況などにかかわらず、誰もがデジタル化の恩恵を受けられるようにする。デジタルに不慣れな人や、直接サービスを使わない人も含めて、利用者の目的・環境・ライフステージの変化を具体的に想定する。 + +主な取り組み: + +- 行政職員向けに、利用者視点が要る理由・事例・道具をまとめた資料（行政サービスにおける利用者視点導入ガイドブック） +- 政府のウェブサービスの UI の調査・点検と、各府省庁が参照するガイドライン・チェックリスト +- サービスデザインのガイドラインの策定・改定（生成 AI などの新しい論点も含める） +- デザインとウェブアクセシビリティの専門人材による、設計段階からの参画とレビュー +- デザインシステム（β 版）の構築と、デザインデータの公開 + +## ユーザビリティデザインの 4 つの原則（DS-671.1） + +アクセシビリティファーストを基盤にし、その上に対話・情報提示・人間中心の原則を置く。 + +### 1. アクセシビリティファースト（基盤） + +多様な利用者が使えることを最優先にする。使いやすさとアクセシビリティが食い違うときは、アクセシビリティを優先する。JIS X 8341 シリーズや WCAG を参照し、代わりの手段や合理的配慮も含める。 + +### 2. 対話の原則（JIS Z 8520） + +利用者とシステムのやり取りを安全で円滑にする 7 項目。 + +| 項目 | 要点 | +| --- | --- | +| タスクへの適合性 | 利用者の目的に合い、必要な情報を適切な形で示す | +| 自己記述性 | システムの状態と、次にできることが伝わる | +| 期待への一致 | 利用者の予想や慣れに沿って振る舞う | +| 学習性 | 安全に試しながら使い方を覚えられる | +| 制御可能性 | 手順や時間を利用者が管理でき、中断・取り消しができる | +| 使用エラーへの耐性 | エラーが起きても利用者が自分で回復できる | +| エンゲージメントへの配慮 | 利用者の意欲を保てる | + +### 3. 情報提示の原則（JIS Z 8522:2022） + +人の認知の特性に合わせて情報を見せる 6 項目。気づきやすさ、注意をそらさないこと、区別しやすさ、解釈しやすさ、簡潔さ、内部・外部の一貫性。 + +### 4. 人間中心の原則 + +自律性の高いシステム（AI など）を使うときの配慮として位置づけられている。詳しくはガイドブックの 3.6 節を参照。 diff --git a/docs/design-principles/sources/jakobs-law.md b/docs/design-principles/sources/jakobs-law.md new file mode 100644 index 000000000..aa0195db4 --- /dev/null +++ b/docs/design-principles/sources/jakobs-law.md @@ -0,0 +1,23 @@ +# ジャコブの法則（要約） + +- 原文: [Jakob's Law of the Internet User Experience](https://jakobnielsenphd.substack.com/p/jakobs-law)（Jakob Nielsen） +- 確認日: 2026-10-19 +- 使っている箇所: [principles.md](../principles.md)「その他のウェブで使う法則」 +- 経緯: 以前のリンク先（Nielsen Norman Group の記事 https://www.nngroup.com/articles/jakobs-law-internet-ux/ ）が 2026-10-19 に読めなかったため、Nielsen 本人による解説に差し替えた + +## 法則 + +利用者は、ほかのサイトで多くの時間を過ごしている。そのため、自分のサイトもほかのサイトと同じように動くことを期待する（Nielsen が 2000 年に提唱）。 + +## 理由 + +利用者は 1 つのサイトにとどまらず、何度も目にする共通のパターンから「ウェブとはこう動くもの」というメンタルモデルを作り、初めてのサイトにも当てはめる。モデルに合う設計は使いやすく、外れる設計は誤操作と苛立ちを生む。魅力的なサイトでも、覚え直しの負担を上回るのは難しい。 + +## 設計への示唆 + +- **既定は慣習に従う**: 上部の検索欄、カートのアイコン、標準のスクロール、ピンチでの拡大、目立つ主操作のボタンなど +- **目新しさのための変更をしない**: スクロールの挙動を乗っ取る（スクロールジャック）、ロゴを中央に置く、などは使いやすさを損なう例として挙げられている +- **大きく良くなるときだけ新しくする**: 少し違うだけでは覚え直しの負担に見合わない。1 割良くなっても 2 割苛立たせるなら失敗する +- **新しい操作方法は収束を待つ**: 音声・AR / VR・AI などでは、競合する設計が共通のパターンに落ち着くのを見て、それに合わせる +- **古い慣習は慎重に捨てる**: 昔の技術の制約から生まれた慣習で、新しいやり方に明らかな利点があるときだけ捨てる +- 標準の部品と振る舞いをできるだけ使い、プラットフォームをまたいでも一貫させる diff --git a/docs/design-principles/sources/nngroup-f-shaped-pattern.md b/docs/design-principles/sources/nngroup-f-shaped-pattern.md new file mode 100644 index 000000000..3fa64301f --- /dev/null +++ b/docs/design-principles/sources/nngroup-f-shaped-pattern.md @@ -0,0 +1,41 @@ +# ウェブで文章を読むときの F 字型パターン（要約） + +- 原文: [F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile)](https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/)（Kara Pernice、Nielsen Norman Group。2017 年公開） +- 確認日: 2026-10-19 +- 使っている箇所: [principles.md](../principles.md)「視線のパターン」 + +## F 字型パターンとは + +文章を流し読みするとき、視線は上部を横に走り、少し下がって短く横に走り、そのあと左端を縦に下りる。注視の分布が F の字に見えるため、こう呼ぶ。各行の先頭の数語と、最初の数行がいちばん読まれる。下のほうで興味を引く段落があると E の字に近くなる。対象は本文の領域で、ナビゲーションには当てはまらない。 + +## 起きる条件 + +- 見出しや箇条書きのない、ひと続きの文章である +- 早く済ませたい +- すべてを読むほどの動機がない + +手がかりがないと、人は左上から始まるいちばん楽な道をたどる。読む語を減らそうとし、求める情報がありそうだと感じられないと読むのをやめる。画面の幅で改行位置が変わるため、目に入る語は端末ごとに変わる。 + +## ほかの流し読みのパターン + +| パターン | 内容 | +| --- | --- | +| レイヤーケーキ | 見出しだけを拾い、本文を飛ばす | +| スポット | リンクや数字など特定のものを探して、大きく飛ばす | +| マーキング | 視線を一点に置いたまま画面を送る（モバイルで多い） | +| バイパス | 箇条書きの各項目で、同じ書き出しの語を飛ばす | +| コミットメント | ほぼすべてを読む（まれ） | + +## 影響 + +右側や下のほうにある大事な情報を見落とし、本人は見落としたことに気づかない。 + +## 設計の推奨 + +- いちばん大事なことを最初の 2 段落に書く +- 見出しは見た目ではっきり区別し、情報量の多い語から始める +- 関連する短いまとまりを見た目でグループにする +- 重要な語だけを控えめに太字にする +- 「こちら」ではなく、行き先がわかるリンクの文言にする +- 列挙と手順には箇条書きと番号付きリストを使う +- 不要な文章を削る diff --git a/docs/design-principles/sources/nngroup-ten-usability-heuristics.md b/docs/design-principles/sources/nngroup-ten-usability-heuristics.md new file mode 100644 index 000000000..62b5d3874 --- /dev/null +++ b/docs/design-principles/sources/nngroup-ten-usability-heuristics.md @@ -0,0 +1,24 @@ +# ニールセンのユーザビリティ 10 原則（要約） + +- 原文: [10 Usability Heuristics for User Interface Design](https://www.nngroup.com/articles/ten-usability-heuristics/)（Jakob Nielsen、Nielsen Norman Group） +- 確認日: 2026-10-19 +- 使っている箇所: [principles.md](../principles.md)「ニールセンのユーザビリティ 10 原則」 + +## 位置づけ + +具体的なガイドラインではなく、画面を評価するときの大まかな経験則（ヒューリスティック）。1990 年に Rolf Molich と共にヒューリスティック評価のために作り、1994 年に整理した。中身は 1994 年からほぼ変わらず、2020 年に言い回しを見直している。 + +## 10 の原則 + +| # | 原則 | 要点 | +| --- | --- | --- | +| 1 | システムの状態を見えるようにする | 何が起きているかを、適切なタイミングのフィードバックで伝える。結果を伴う操作の前に、今の状態がわかるようにする | +| 2 | システムと現実を一致させる | 内部の用語ではなく利用者が知っている言葉と概念を使い、自然で論理的な順に並べる | +| 3 | 利用者に制御と自由を与える | 誤って始めた操作から抜けられる道（取り消し・やり直し・キャンセル）をはっきり示す | +| 4 | 一貫性と標準 | 製品の中で用語と操作をそろえ、プラットフォームや業界の慣習にも合わせる | +| 5 | エラーを防ぐ | 起きやすい条件を取り除くか、危険な操作の前に確認を求めて、問題を起こさない | +| 6 | 記憶より認識 | 選択肢と情報を見える場所に置き、画面をまたいで覚えておかなくて済むようにする | +| 7 | 柔軟性と効率 | 慣れた人向けの近道を用意しつつ、初めての人の邪魔をしない。よく使う操作は利用者が調整できる | +| 8 | 美的で最小限のデザイン | 関係の薄い情報や滅多に使わない情報を削る。余計な要素は大事な情報と注意を奪い合う | +| 9 | エラーを認識・診断・回復できるようにする | エラーは平易な言葉で、何が問題でどう直せばよいかを示し、気づきやすい見た目にする | +| 10 | ヘルプと文書 | 説明なしで使えるのが理想。必要なときは、探しやすく、作業に沿い、短く、その場で見られるようにする | diff --git a/docs/improvement/log.md b/docs/improvement/log.md index faa5cd87e..12bfe48de 100644 --- a/docs/improvement/log.md +++ b/docs/improvement/log.md @@ -4,6 +4,7 @@ | 日付 | 種別 | 内容 | 再発防止 | | ---------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | +| 2026-10-19 | 文書 | principles.md が参照する外部の文書の要約を `docs/design-principles/sources/` に追加。読めなくなった Jakob's Law のリンクを Nielsen 本人の解説に差し替え | 要約に原文・確認日・経緯を記録し、リンク切れ時の手順を sources/README.md に記載 | | 2026-10-19 | 構成 | コンポーネント構造規則（yorozuya）を取り込み、`src/components/ui//index.tsx` に本体・テスト・ストーリー・フックを置く形に変更。テストをコンポーネントごとに分け、useFormField を `FormField/useFormField.ts` に分けた | ADR-0016。`scripts/check-structure.ts` と dependency-cruiser で構造と import を検査 | | 2026-10-19 | 文書 | アイコン画像（ICO・PNG。ホーム画面用と 1024px）を追加し、Storybook のファビコンとホーム画面のアイコンに設定 | 書き出し方と差し替えを `docs/assets/README.md` に記載。manager-head.html を置くと SVG のファビコンが自動で入らなくなるため明示し、e2e（`e2e/docs.spec.ts`）でリンクを検査 | | 2026-10-19 | 文書 | 作者名の表記を tkc310 に統一（README・LICENSE・各パッケージの author） | — |