Pie Chart(円グラフ)
全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。
全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。
軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。
グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。
AIに仕事を頼むとき、指示も生成も確認も直しも、1つの会話の中でやっていませんか。私たちは記事や翻訳や図を作る13種類の仕事の流れを、人・司令AI・生成AI・照合プログラム・文脈ゼロのAI(事情を何も知らないAI)の5つの役に分けて回しています。いちばん効いているのは、その文脈ゼロのAIに検品させる段でした。この記事自身を例に、5役の流れと、明日から1つの会話を分ける手順をまとめます。
群青を一度も見たことのない予備知識ゼロのAIに、公開ドキュメントとnpmだけを渡して実業種の画面を170枚組ませた記録の総集編です。3回手組みされたものだけを作るという運用で26のコンポーネントが加わるまでと、その過程で見えた5つの法則をまとめます。
AIにUIを作らせるのではなく、AIに「何が作れなかったか」を書かせる方法論です。予備知識ゼロのAIの「無い」が強い証拠になる理由、手組みの跡を次に作るコンポーネントの仕様として読む手順、AIが正直に書ける環境の作り方をまとめます。
そのコンポーネントを作るべきかの判断根拠は、弱・中・強の3段に分かれます。最も強いのは「既存のコンポーネントではHTML構造上つくれない」です。書類ダウンロード行を例に、拡張で足りる場合と新設しかない場合の線を引きます。
やりたいことからコンポーネントを引く一覧は、間違った先へ誘導すると、載せないより危険です。予備知識ゼロのAIに170画面を組ませて見つかった誤誘導を6つのパターンに整理し、対応表の質を測る4つの軸(型・アクセシビリティ・形・扱う対象)を示します。
3つの別々の画面で独立に手組みされたら初めて作る、という運用を170画面続けて群青に加わった26のコンポーネントを、8つのグループに束ねて紹介します。どの3画面が根拠になったかを、画面の番号つきで辿れます。
デザインシステムが育ったかどうかは、作ったコンポーネントが次に自力で見つかるまでのラウンド数で測れます。170画面のコールドテストで、この距離は初期の17から終盤の1〜2まで縮みました。距離を縮める3つの仕組みも並べます。
鉄道・航空・バス・タクシー・トラックの5モードを、事業者向けと利用者向けの両面で60画面以上走り切った記録です。利用者向けを1枚で締めかけた失敗から、完走の定義を「両面が同じ厚みになったとき」に引き直すまでを書きます。