UIXHERO
  • 記事
  • UXリファレンス
  • リソース
  • 学習ルート
  • About
お問い合わせ
  1. ホーム
  2. 記事

記事一覧

UX心理、UIデザイン原則、UIコンポーネント、リサーチ記事を横断して探せるUIXHEROのナレッジ一覧です。目的に合わせて絞り込みながら、設計や実装の判断材料を見つけられます。

UIデザイン完全ガイド

UX心理・UI原則・コンポーネントの3レイヤーを一本化した総合ガイド

見る

UX心理(119)

UIデザインの「なぜ」を説明する心理・認知の法則

見る

UI原則(65)

心理法則をUI設計のルールに翻訳した原則

見る

UIコンポーネント(72)

ボタン・フォーム・モーダルなど実装可能なUI部品

見る

用語集(537)

UX/UIデザインの重要キーワードを網羅した辞書

見る

UIデザイン完全ガイド

UX心理・UI原則・コンポーネントの3レイヤーを一本化した総合ガイド

見る

UX心理(119)

UIデザインの「なぜ」を説明する心理・認知の法則

見る

UI原則(65)

心理法則をUI設計のルールに翻訳した原則

見る

UIコンポーネント(72)

ボタン・フォーム・モーダルなど実装可能なUI部品

見る

用語集(537)

UX/UIデザインの重要キーワードを網羅した辞書

見る
すべて(414)UX心理(119)UI原則(65)コンポーネント(72)アクセシビリティ(11)エンジニアリング(15)インタビュー(22)リサーチ(29)記事(70)依頼先の選び方(4)UI検品の6観点(6)UI裁判(1)

UIXHEROの本

あなたがAIにUIを作らせると、何が起きるか

AIが「できました」と言うとき、何が省かれているのか。予備知識ゼロのAIに、実在する業種の業務UIを175枚作らせ続けた記録です。何が組めて、何が組めなかったか。読んだあとは、AIが渡してあったコンポーネントを組み合わせただけなのか、その場でHTMLとCSSを書き起こしたのかを見分けられるようになります。

電子書籍・2026年8月刊。中身はどこで買っても同じで、買った店のアプリかブラウザで読めます。

Zennで買う(¥1,500)(新しいタブで開く)Amazonで買う(¥1,500)(新しいタブで開く)
UIXHERO

UIXHERO

UXデザインの法則や心理学効果を、実例を交えて解説するリファレンスサイト

ナビゲーション

  • ホーム
  • 記事
  • UXリファレンス
  • About
  • お問い合わせ

その他

  • カテゴリー
  • タグ
  • 検索
  • アーカイブ
  • GUNJO(デザインシステム)

プライバシーポリシー

© 2026 UIXHERO. All rights reserved.

414件の記事が見つかりました

Pie Chart(円グラフ)

18分で読める

全体に対する構成比を扇形で示すチャート。合計が意味を持つ条件、区分数の上限、並び順、値をどこに書くかという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

コンポーネントタグ: ui-components / pie-chart / data-visualization

Radar Chart(レーダーチャート)

17分で読める

複数の軸のスコアを多角形で示すチャート。軸の順序で形が変わるという性質、正規化の根拠、重ねられる系列数、面積を読ませない書き方という設計判断とアクセシビリティ要件を解説する。

コンポーネントタグ: ui-components / radar-chart / data-visualization

Sparkline Chart(スパークライン)

17分で読める

軸も目盛りも持たない小さな傾向線。数字と並べて置く理由、複数を並べるときに縦軸をそろえる必要、期間の明示という設計判断とアクセシビリティ要件を解説する。

コンポーネントタグ: ui-components / sparkline-chart / data-visualization

Stacked Bar Chart(積み上げ棒グラフ)

17分で読める

グループごとの内訳を積み上げて比べるチャート。正確に読めるのは最下段と合計だけという制約、系列の順序、100パーセント正規化の使いどころという設計判断と、色だけに頼らないアクセシビリティ要件を解説する。

コンポーネントタグ: ui-components / stacked-bar-chart / data-visualization

AIを使いこなすとは、プロンプトの話ではなかった|1つの会話に全部やらせるのをやめて、5つの役に分ける

17分で読める

AIに仕事を頼むとき、指示も生成も確認も直しも、1つの会話の中でやっていませんか。私たちは記事や翻訳や図を作る13種類の仕事の流れを、人・司令AI・生成AI・照合プログラム・文脈ゼロのAI(事情を何も知らないAI)の5つの役に分けて回しています。いちばん効いているのは、その文脈ゼロのAIに検品させる段でした。この記事自身を例に、5役の流れと、明日から1つの会話を分ける手順をまとめます。

記事タグ: AI活用 / UI検品 / デザインレビュー

予備知識ゼロのAIに170画面組ませたら、デザインシステムに26個のコンポーネントが加わった

10分で読める

群青を一度も見たことのない予備知識ゼロのAIに、公開ドキュメントとnpmだけを渡して実業種の画面を170枚組ませた記録の総集編です。3回手組みされたものだけを作るという運用で26のコンポーネントが加わるまでと、その過程で見えた5つの法則をまとめます。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI

AIを「忖度しない検査役」にする方法論 — 手組みの跡は、足りないコンポーネントの地図

10分で読める

AIにUIを作らせるのではなく、AIに「何が作れなかったか」を書かせる方法論です。予備知識ゼロのAIの「無い」が強い証拠になる理由、手組みの跡を次に作るコンポーネントの仕様として読む手順、AIが正直に書ける環境の作り方をまとめます。

記事タグ: デザインシステム / AI生成UI / UI検品 / デザインレビュー

「作るべき理由」には強さの段階がある — なぜ『HTML構造上つくれない』が最強か

10分で読める

そのコンポーネントを作るべきかの判断根拠は、弱・中・強の3段に分かれます。最も強いのは「既存のコンポーネントではHTML構造上つくれない」です。書類ダウンロード行を例に、拡張で足りる場合と新設しかない場合の線を引きます。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI / アクセシビリティ

「ユースケース別の対応表」の落とし穴 — 予備知識ゼロのAIが誤誘導された6パターン

12分で読める

やりたいことからコンポーネントを引く一覧は、間違った先へ誘導すると、載せないより危険です。予備知識ゼロのAIに170画面を組ませて見つかった誤誘導を6つのパターンに整理し、対応表の質を測る4つの軸(型・アクセシビリティ・形・扱う対象)を示します。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI / 情報設計

3回確認で生まれたコンポーネントたち — 26の新コンポーネントはどう群青に加わったか

15分で読める

3つの別々の画面で独立に手組みされたら初めて作る、という運用を170画面続けて群青に加わった26のコンポーネントを、8つのグループに束ねて紹介します。どの3画面が根拠になったかを、画面の番号つきで辿れます。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI

作ってから再発見までの距離が縮む — コンポーネントの蓄積が育つとはこういうことだった

11分で読める

デザインシステムが育ったかどうかは、作ったコンポーネントが次に自力で見つかるまでのラウンド数で測れます。170画面のコールドテストで、この距離は初期の17から終盤の1〜2まで縮みました。距離を縮める3つの仕組みも並べます。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI

「完走」の定義が変わった — 運輸5モードを、事業者向けと利用者向けの両面で走り切った記録

12分で読める

鉄道・航空・バス・タクシー・トラックの5モードを、事業者向けと利用者向けの両面で60画面以上走り切った記録です。利用者向けを1枚で締めかけた失敗から、完走の定義を「両面が同じ厚みになったとき」に引き直すまでを書きます。

記事タグ: デザインシステム / UIコンポーネント / AI生成UI
前へ
134
35
次へ