UIデザインにおける単純作業をAIで自動化できたら最高ですね！今回は、自動化のポイントと自分の仕事は何かをするべきかを考えるための記事です。
「UX for AIワークショップ」の講師グレッグ・ヌーデルマン氏による「AIアポカリプス「世界の終末」「文明の崩壊」に備える：AIプロンプトとしての簡易UI/UXデザイン表記法」のブログ記事の翻訳です。
私の友人や同僚たちは、AIファーストのデザインツールに夢中になっています。この小さなツールの開発が、繰り返しの退屈な「ロボット作業」を排除し、効率的で質の高いデザイン作り出す第一歩です。
Greg Nudelman（グレッグ・ヌーデルマン）
2024年2月16日
ロボット作業とは何か？
ルーチンワーク、つまり同じページを何度も設計する作業のことです。特にその中でも設計するページがすでにデザインシステム内にテンプレートとして定義されている場合をロボット作業と呼びます。私が最も嫌う例はテーブルやフォームの設計です。
ある有名企業での忘れがたい経験ですが、ある6人の部署が、テーブルウィジェットの仕様書40ページを作るのに3か月を費やしました。コーディングでもなく、デザインでもなく、ただ仕様書を作るためだけにです。しかも、そこには1枚の図すらありませんでした。これは本当の話です。
以前の記事「3分以内でAIデザイン用のFigmaテーブルを作る方法:2023年7月10日」でテーブルの工夫について取り上げましたが、どうやら一部のデザイナーは自ら余計な仕事を増やしていることに気がついていません。
別の大手企業では、ログインページの設計に数か月を費やしました。この場合もコーディングはなく、十数人の優秀なプロフェッショナル達が、入力欄の長さをどうするか、中央揃えにするか、パスワードリカバリーのリンクの文言をどうするか、ボタンを「Sign in（新規登録）」「Log in（ログイン）」「Login（ログイン）」のどれにするか……などを150回も変更していました。まさに「うんざり」するほど変更していました。
今この瞬間も、一般的な住所フォームの新しいバージョンを設計し、名前を姓と名に分けるべきか、住所欄を2行にするべきか、ボタンを「Submit（提出）」にするべきか、その設計がブランドガイドラインにとって「古臭すぎる」かどうかを議論している人がいるに違いありません。
AIの時代で、こうした作業はまさにロボットに任せた方が良いのです。むしろロボットの方が、優れたWebやモバイルの事例を参照し、間違いが少なくなる可能性すらあります。特に、ロボットが堅実で安定したデザインシステムや関連ページの具体的な事例を効果的に活用している場合は、なおさら重要です。
このプロセスを自動化するタイミングは既に来ており、シンプルなプロンプトの入力だけで機能するReactコードへ変換できるAIファーストのUXデザインツールです。それを実現するプロンプトこそが「簡易UI/UXデザイン表記法」です。
ロボット作業ではないものとは？
ロボット作業ではないものとは何でしょうか？人として、デザイナーとして、どこで価値を発揮すべきでしょうか？
簡単に答えをいうと、新しい発明、戦略的な取り組み、AIを活用して顧客体験を改善することです。プロダクトと市場の適合性を高めるデザイン。プロダクトロードマップのビジョンを推進すること。ステークホルダーの合意形成を主導すること。プロダクトの統合などです。
さらに言えば、会社が少ないコストでより多くの利益を得られるようにすること。最も単純な答えは、簡易UXデザイン表記法では記述できないもの全てです。それでは、本題に入りましょう。
ロボットにできる仕事
大手企業の案件で「馬頭型ポンプジャックをAIで異常検出する」方法としてのUIが次の簡易表記からだったことに多くの人が驚いていました。
簡単な例でご紹介
以下は、ある画面のダッシュボード画面です。
この手描きのワイヤーフレームを簡易UI/UXデザイン表記法にすると、次のようになります。
Rule Detail: [Fluid Pound] (0)ON ( )OFF
{Anomaly graph} <retrain>
Settings:
Analyze every [10 \//] cycles
When confidence match > [90] %, perform the following:
[X] Pause pump for [10 minutes \/ ]
[ ] Notify [Email 1, 2… ]
[ ] Generate [Warning \/] alert
[[Update]]
簡易UI/UXデザイン表記法でAIをロボット化
私はコンサルタントとして20年以上前、この簡易UI/UXデザイン表記法を開発しました。この記法により、リモートのブレインストーミング会議でも、チーム全員に同じ理解を得ることができました。
クライアントとのコミュニケーションを改善し、シンプルなテキストメモだけで効率的かつ明確にデザインをつくることができます。チーム全員が参加する通話中に、その場で記録でき、複雑なフォーム、テーブル、図も作成することで時間を節約することができました。
可能な限りシンプルでありながら、もっとも一般的なレイアウトオプションやフォームコントロールを効率的に記録できるように設計されています。
簡易UI/UXデザイン表記法の要素
[Fluid Pound] //入力フィールド
[Description… ] //テキストエリア
(0)ON ( )OFF //ラジオボタン
{Anomaly graph} //非フォーム要素（画像やヒーローイメージなど）
(More info) //補助テキスト
<retrain> //リンク
Settings: //セクション見出し
[10 minutes \/ ] //ドロップダウン
[10 minutes | 20 minutes | 30 minutes | 1 hour \/ ] //ドロップダウンの選択肢表示
[X] //チェックボックス（オン）
[ ] //チェックボックス（オフ）
[[Update]] //プライマリーボタン
-|——— //スライダー
(0 ) //スイッチ
Etc.
特に便利なのは、テーブルの作成です。異なるカラムの追加は、列の見出しと必要最小限の行を記述するだけです。テーブルの例を見てみましょう。
この手描きのワイヤーフレームを簡易UI/UXデザイン表記法にすると以下になります。
Table:
Rule|On|#Wells|Runs (24hrs)|Last Updated|Updated By
Fluid Pound|(0 )|1,000|24,000|1/11/24 3:02 PM|jsmith
Sort: on; #Wells. Search: by name.
AIとReactで簡単に作成
デザイン要件（やアイデア）を簡易表記法で直接書き出せば、ページやフォームのドキュメント化にかかる時間をすぐに節約できます。しかし、この記法を長期的に採用する最大の利点は、AIが容易に理解できる点です。
AIは簡易UI/UXデザイン表記をプロンプトとして受け取ります。それらを、標準的なデザインパターンやデザインシステムのコンポーネントを適用して、Reactコードとして10〜20種類のワイヤーフレームを作ることが可能になります。
Rule Name|ON|#Wells|Runs (24hrs)|Last update| by
Fluid Pound|(0 )|1,000|24,000| 1/1/24,3:02pm| J.Smith
上記をAIは次の通りに認識します。
- 「by」はシステムにおける標準の「Updated By（更新者）」カラム
- 「J.Smith」はシステム内ではログインハンドル「jsmith」として表示
- 「1/1/24,3:02pm」は日付であり、システムの標準日付形式は「1/11/24 3:02 PM」
簡易UI/UXデザイン表記だけで、Ractコンポーネントを作成することができます。
AIに作業させる仕事を生み出すための問い
AIの時代が本格化し、簡易UI/UXデザイン表記（プロンプト）から標準デザインパターンや既製のReactコンポーネントを使って10〜20種類のデザインを数秒で動作コードに変換できるツールが登場しつつあります。このとき、次の問いを自分に投げかけてください。
- 同じテーブルデザインで列だけ違うページや、同じ住所フォームのためにFigmaでワイヤーフレームを再び作るというロボット作業をしていないか？
- Figmaで作っているワイヤーフレームは、簡易UI/UXデザイン表記法で数行にまとめ、そのままReactコードに変換できるものではないか？
- やっていることの大半をAIでできないか？
- どうすれば本当に価値を加えられるのか？
人が行う仕事を再発見するための問い
AIに置き換わらない仕事として以下のようなことを考えてみてください。きっと、今までの仕事とは異なる発想をすることができるでしょう。
- チームを調整し、実行の障害を取り除く方法とは？
- プロダクトビジョンを定め、ロードマップに影響を与える方法とは？
- 新しいものを発明し、特許出願を支援する方法とは？
- GartnerやForresterのアナリストとの関係を改善する方法とは？
- 自社がAIから価値を引き出す方法とは？
- AIを含むプロダクトを設計する方法とは？
- AIファーストで考える方法とは？
- 自動的に回る継続的なユーザーリサーチ体制を構築する方法とは？
- AI時代に備えた堅牢で包括的なデザインシステムを構築する方法とは？
Greg Nudelman（グレッグ・ヌーデルマン） & Daria Kempka（ダリア・ケンプカ）（編集協力）
ワークショップのご案内
2025年11月15日「AIと共創する次世代プロダクトデザイン」のワークショップに参加して、ここでしか手に入らないAI活用の視点を学びましょう。
