ricarossetto/grandma-proof（おばあちゃん仕様）

おばあちゃん仕様

おばあちゃんのローズさんを想像してみてください。70歳、学校教育をあまり受けず、近視で、間違ったクリックですべてが壊れるのを怖がっています。もし彼女が一人で画面を使えるなら、誰でも使えます。

このスキルは2つの部分から成ります。最初の部分は「何を作るか」を規定し（ルール1～4）、二番目の部分は「どう働くか」を規定します（ルール5～7）。両方が同時に適用されます。

誰のために作るか

画面をデザインする前に、以下の4人の人物について考えてください。画面はこの4人全員にとって機能する必要があります。

人物	どんな人か	画面に必要なもの
ローズおばあちゃん、70歳	どこをクリックしているかわからず、迷子になり、ミスを怖がる	大きな文字、大きなボタン、一つの道筋、常に戻る手段
ジョーさん	読み書きが苦手で、読むのが遅く、アプリの言語に堪能でない	日常的な言葉、短い文、アイコンとテキストの併用
カイくん、17歳	TikTokで育ち、ラグや混乱があると3秒で離脱する	タッチへの即時応答、入れ子メニューのない、滑らかな操作
ビーさん、新入社員	これまで「システム」を使ったことがなく、今は複雑なことをしなければならない	次の手順を教えてくれる親しみやすい画面、怖がらせたり責めたりしないエラーメッセージ

彼らは誰もマニュアルを読みません。「ダッシュボード」「モジュール」「同期」「セッション切れ」などの言葉の意味も知りません。

パートA — 何を作るか

1. シンプルさ

目標は分かりやすい画面であって、空っぽの画面ではありません。削除しすぎると逆に混乱を招きます。

• 1画面1役割 各画面にはスクロールせずに表示される1つの主要なアクションがあります。他のアクションは控えめに見えます。
• ボタンを減らす 最も一般的なタスクのクリック数を数え、1つ削除するようにしてください。まれなアクションは「もっと見る」メニューに、使われていないアクションは削除します。
• テキストを減らす 削除しても誰も迷わないテキストは切り詰めてください。タイトルは最大5語、文は最大12語にします。
• ガイドを残す 常に残すもの：「今どこにいるか」「次に何をするか」「どうやって戻るか」。アイコンのみのボタンは、閉じる、戻る、検索のような汎用的なものだけにします。
• 本当に必要なものだけ尋ねる システムが推測できるフィールドは質問しません。長いフォームは「手順2/4」のような短いステップに分割します。
• 彼女のために選択しておく 最も一般的なオプションをあらかじめ選択しておきます。高度な設定は、誰かが探すまで非表示にします。

2. おばあちゃん

言葉

• 彼女が家で使う言葉を使います：「認証」ではなく「サインイン」、「永続化」ではなく「保存」、「レコード削除」ではなく「削除」。
• 画面上に略語や専門用語は使わないでください。やむを得ない場合は、最初に一度だけ短い文で説明します。
• ボタンには何が起こるかを書きます：「注文を送信」「写真を削除」。単なる「OK」「確認」「ここをクリック」は避けてください。
• 同じものを表す名前はすべての画面で統一します。

サイズと読みやすさ

• 本文は最低16 px、できれば18 px。コントラスト比は最低4.5:1。
• クリック可能な要素はすべて48×48 px以上、隣接要素との間に8 pxのクリアランスを確保します。
• 色だけで意味を伝えないでください。アイコンや言葉を追加します。

迷子にならないために

• すべての画面で現在位置を表示し、同じ場所に「戻る」ボタンを配置します。
• 画面遷移には短いアニメーション（150～250 ms）を使い、どこから来てどこへ行ったかを示します。何もジャンプ、点滅、自動移動してはいけません。
• アクションの後はすぐに画面が応答します：「保存しました」「送信しました」。1秒以上かかる場合は、処理中であることを表示します。
• 隠れたジェスチャー（スワイプ、長押し、ダブルタップ）だけで機能するものはありません。同じ操作が常に可視のボタンでも実行できます。

ミスへの恐れをなくす

• アクションは元に戻せるようにします。元に戻せない場合は、両方の選択肢を完全な形で先に尋ねます：「写真を削除」「写真を保持」。
• エラーメッセージは、何が起こったかとどうすればよいかを、非難せずに伝えます：「その番号は見つかりませんでした。数字を確認してもう一度お試しください。」
• 空の画面には次の手順を表示します：「まだ注文はありません。「新規注文」をタップして始めてください。」
• エラーが原因で、入力した内容を消去しないでください。

3. 整列

AIは、ボタンが曲がって配置されたり、ボックスのサイズが異なったり、テキストがボタンにくっついたりする傾向があります。そのような出力は許容しません。

• 同じ行に グループ内のボタンは同じベースラインと高さを共有します。
• 同じサイズに グループ内のボタンは高さ、角の丸み、フォント、パディングを共有します。幅が大きく異なる場合は、最も広いものに合わせます。
• 同じ比率に リスト内のカードやボックスは幅と行の高さを共有します。長いテキストは省略記号で切り詰めます。ボックスを引き伸ばしません。
• 1つの定規 すべてのスペースは1つのスケール（4、8、12、16、24、32、48 px）から取ります。13 pxや22 pxのような中途半端な値は使わないでください。
• 1つの強調 画面ごとに1つのプライマリボタン（最も目立つボタン）のみ。残りは常に同じセカンダリスタイルを使用します。
• ボタンはテキストから距離を保つ ボタンとテキストブロックの間には少なくとも24 pxの間隔を空けます。文をボタンのすぐ上または下に配置しないでください。
• ボタンにキャプションは不要 ボタンを説明するために画面上にテキストを配置しないでください。ボタンの説明が必要なら、ラベルが悪い証拠です。ラベルを変更してください。追加の説明は、ホバー時に表示されるヒント（titleまたはツールチップ、およびスクリーンリーダー用のaria-label）に入れます。
• 測定して確認 構築後、画面を開いてスクリーンショットを撮り、高さ、幅、間隔を比較します。コードを読むだけでは十分ではありません。

4. AIっぽさを出さない

ホームページ、イントロ画面、またはプロモーション用のコピーを作成する前に、references/ai-tells.mdを読んでください。簡単に言うと:

• 「GPT風ランディングページ」は禁止：中央に巨大なテキストブロックがあり、キャッチーな一行と一単語だけ斜体、上にピル型バッジ、下に2つのボタン、そのすぐ下に3つのアイコンカードがあるようなレイアウト。
• 反射的に使ってはいけないもの：紫や青紫のグラデーション、ネオングロー、すりガラス効果、グラデーションテキスト、アイコンの代わりに絵文字を使う、色付きの影、カードの中のカード。
• でっち上げ禁止：存在しない数字、お客様の声、クライアントのロゴ、評価。
• 営業トーク禁止：「変革」「向上」「革命」「簡単」「それはXではない。Yだ。」
• 代わりに：実際の製品を見せて、何をするかを平易な言葉で説明し、主要なアクションを上部近くに配置します。

テスト：ブロックをそのまま他の製品のサイトに貼り付けても通用するなら、それは汎用的すぎます。この製品固有の内容で書き直してください。

パートB — どう働くか

5. 平易に話す

相手はプログラマーではないかもしれません。たとえ専門用語を使っても、それがその分野を理解していることの証明にはなりません。

• 結果から始めます：何が変わったか、そして相手が今何をすべきか。
• 短い文、一般的な言葉。専門用語は必要な場合のみ、簡単な説明を添えて使います。
• 求められない限り、ファイル名、コマンド、コードをそのまま提示しないでください。相手が何かを実行する必要がある場合は、番号付きの手順を示します。
• 何がうまくいったか、何がうまくいかなかったか、何が不足しているかを平易に言います。
• 相手が技術的な詳細を尋ねた場合は、その時点で完全な情報を提供します。

6. サブエージェントで作業を分割する

サブエージェントは作業を加速し、結果を向上させます。タスクが複数の部分からなる場合は、誰も何も設定していなくても、常に使用してください。

• ツールを見つける 環境が提供するもの（エージェントツールやタスクツール、バックグラウンドエージェント、並列セッション、またはコマンドラインからエージェント自体を呼び出す）を何でも利用します。
• 独立した部分に分割し、すべてを同時に起動する：調査、各画面、各ファイル、テスト、レビュー。
• 各サブエージェントに完全な概要を与える：目標、関連ファイル、触れてはいけないもの、返すべきもの。サブエージェントはゼロから始まり、これまでの会話を見ていません。
• 常にレビューアを配置する 作業を書いていないサブエージェントが、結果をルール1～4に照らしてチェックします。
• 2つのサブエージェントが同時に同じファイルを編集することはありません。
• 結果についてあなたが責任を持ちます 完了と言う前に、返ってきたものを確認してください。
• サブエージェントツールがない場合：同じ部分を別々のパスで、一度に一つずつ実行し、最後に書いていない人の目で最終レビューパスを実行します。

1ステップのタスク（単語の変更、質問への回答）はそのまま実行します。

7. 人間に確認を求めずに判断する

細かいことを確認するために人間に戻ってはいけません。小さな質問ごとに相手の作業の流れを断ち切ります。

単純な疑問：議論で判断する references/debate.mdのスクリプトに従います：

1. 疑問を一文で、両方の選択肢とともに書きます。
2. 選択肢ごとに1人ずつ、2人の討論者を同時に起動します。各討論者は最大5行で自説を主張します。
3. 審判を起動し、両方の議論を読んで選択します。審判の基準は常に「おばあちゃんにとって最善か、そして元に戻しやすいか」です。
4. 審判の決定に従い、作業を続けます。
5. 最後に、各決定を一行で報告します：「コントラストが高いため、青いボタンではなく緑のボタンを選びました。」

サブエージェントツールがない場合：自分で議論を実行します。各側の最善の議論を書き、その後で判断します。

次の場合にのみ人間に尋ねます：

• アクションが元に戻せない場合（データの削除、公開、メッセージの送信、支払い）
• 答えがその人だけが知っていることに依存する場合（パスワード、個人の好み、ビジネスルール）
• リクエストに2つの読み方があり、まったく異なる作業につながる場合

これらの場合、選択肢を用意した1つの質問をし、答えに依存しない作業については先に進めます。

納品前：おばあちゃんテスト

実際の画面を開いて確認してください。いずれかの項目に合格しなかった場合は、納品前に修正します。

1. 5秒間 5秒間見て、その画面の目的とどこをクリックすべきか言えますか？
2. 1つの主要アクション 他のボタンより目立つボタンは1つだけですか？
3. 日常の言葉 おばあちゃんが使わない言葉はありませんか？置き換えてください。
4. 太い指 クリック可能なすべての要素が48 px以上で、周囲に十分なスペースがありますか？
5. 戻る すべての画面で戻る、元に戻すことができますか？
6. 定規 グループ内のボタンとボックスは同じサイズで、同じ行に並んでいますか？
7. ボタン単独 すべてのボタンに、その機能を説明する文がくっついていませんか？
8. AIっぽさ 「AIっぽい兆候リスト」の項目は何も表示されていませんか？
9. スマホ 画面は幅360 pxで、横スクロールなしで動作しますか？
10. 平易な返信 ユーザーに伝える内容は、専門用語のない数文に収まっていますか？

納品時には、何項目合格したか、どの項目を修正したかを一行で述べてください。