デザイン

見た目をそろえて、だれでも使いやすいWebページの画面（UI）を作る

Webサイトの画面を作る時や見直す時に使う。目立たせる順番、余白、文字の大きさ、色、使い回すボタンなどの部品、押した時の反応を決め、公開前にだれでも使えるかと表示の速さを数字で確かめる。

型付きのUI部品集に、AIで部品を足したり直したりする時に使う。先に決まりの書かれた資料を読み、色や角の丸みは共通の値を使い、キーボード操作と使いやすさ（アクセシビリティ）をテストし、説明書と見本ページをそろえ、最後に全部の検査を通す。

体験・サービス・伝え方に迷いがあって大事な決定が止まっている時に使う。問いと決める人を1人決め、各自で案を描き、本物らしい試作品を作って使う人に1人ずつ試してもらい、次の一歩を決める。

話す内容の概要からスライドを作りたい時に使う。使う場面と雰囲気を聞き、本当の内容を入れた表紙スライドの見本を3つ見せ、選ばれたテンプレートの見た目を守って全部のスライドを作り、ブラウザーで見て確かめてから渡す。

AIエージェントが使うデザインツールを作る・直す時に使う。プロジェクトの設定を読み、ブランド用かアプリ画面用かを聞いた上で、コマンドごとの資料を1か所にし、色と文章の決まりを守り、新しい版を出す作業をふだんの変更と分け、新しいデザインチェックはテストを先に書いて作る。

使い回す画面の部品を1つのリポジトリ（モノレポ）にまとめて、AIに直させる時に使う。決められたコマンドとパッケージの分け方を守り、直し方が分かるエラー文を書き、人の操作と同じ形でテストし、アクセシビリティと画面写真を確かめ、API文書を作り直す。

アプリやサイトを設計する時に使う。目・耳・体の動き・分かりやすさの面で作業が止まる所を探し、文字の見やすさ、読み上げなどの支援ツール、字幕、キーボード操作、点滅を見直し、出す前に試す。

アプリとコマンドラインの両方で使う製品の、大きなコード置き場（リポジトリ）でAIに作業させる時に使う。決まりの文書を順に読み、場所ごとにコードを置き分け、新しい機能をアプリとコマンドラインの両方に入れ、いちばん軽いテストで変更を確かめ、出す前に配る版を確かめる。

チームのデザインシステムを説明書にまとめる時に使う。書く範囲を決め、困り事の多い所からページに分けて進め、画面の部品（コンポーネント）ごとに「何か・なぜ・いつ・どう使うか」を書き、出す前に説明書とデザインとコードが合っているかを確かめる。

AIに画面を作らせるためのデザインシステムを作る・直す時に使う。今のブランチ（作業中の版）の説明書を先に読み、スタイルのツールが本当に使えるCSSだけを使い、説明書を中身とそろえ、AIが部品（コンポーネント）を正しく作れるかを試して確かめる。

ブランドの見た目や語り口を作る時・見直す時に使う。目的と価値観から始め、見やすさ（アクセシビリティ）も含めてロゴ・色・文字・配置の決まりを作り、素材を1か所にまとめてチームが使いやすくし、点検と測った結果で決まりを直していく。

デザインを決めるために、利用者の話を聞く調査を始める前に使う。目標をデザインの判断に結び付け、調べ方と役割を決め、できる事や言葉がちがう人を集め、参加者を守って謝礼を払い、記録の中の個人の情報を守る。

お客さんが早くやめてしまう時や、一部のお客さんだけ満足度が低い時に使う。業種・対象のお客さん・図にする範囲を聞き、体験の流れの図（カスタマージャーニーマップ）として、段階ごとの考えと気持ち、つまずく所、担当者つきの改善案を優先順位をつけて出す。