Question 1

AIが生成するデザインがブレたり「AIっぽく」なってしまうのはなぜか？

Accepted Answer

AIにデザインを任せると、画面ごとに色や余白、角丸などが少しずつ異なってしまい一貫性が失われやすい AIの学習データには無難なデザインが多いため、具体的な指定がないとありふれた見た目に収束してしまう AIっぽいデザインを防ぎ統一感を持たせるためには、明確なデザインの指針を与える必要がある

Question 2

Googleが提唱した「DESIGN.md」とはどのようなものか？

Accepted Answer

DESIGN.mdは、Googleが提唱したAI向けデザイン規格のオープンソースである AIが成果物を「どう作るか」を定義するAgents.mdに対し、DESIGN.mdは「どんな見た目の成果物を作るか」を定義する Markdown形式で記述されており、色やフォント、余白、影などのルールを人間にも読める形で管理できる

Question 3

DESIGN.mdを効率よく作成・カスタマイズするにはどうすればよいか？

Accepted Answer

ゼロから自作するのではなく、AwesomeDESIGN.mdというGitHubリポジトリの見本を活用するのがおすすめである AppleやAirbnb、Stripeなど実在する有名企業の洗練されたデザイン定義をベースにカスタマイズできる 見本は英語で記述されているため、AIを使って日本語化し、フォントもNoto Sans JPなどの日本語フォントに変更して適用する

Question 4

作成したDESIGN.mdをAIに読み込ませて適用するにはどう指定すればよいか？

Accepted Answer

Claudeを利用する場合は、Claude.mdファイルに「@DESIGN.md」と1行追加するだけでよい Agents.mdを利用する場合は、「UIはDESIGN.mdに従う」という一文を追記する 1行指定を追加するだけで、以降のデザイン対応時にAIが自動でDESIGN.mdのルールを参照するようになる

Question 5

AIにDESIGN.mdのルールを確実に守らせるにはどうすればよいか？

Accepted Answer

DESIGN.mdは指示であって強制力はないため、AIが見落としたりルール違反を犯したりする可能性がある コードを機械的に検査する「Linter」を活用し、ルール違反がある場合は変更をコミットさせない仕組みを作る Google公式コマンドを使って文字と背景のコントラスト比の警告を出したり、色定義をコードに変換したりできる

Podcast振り返り

AIが洗練された統一感のあるデザインを作り出すDESIGN.md

Podcast振り返り

AIが洗練された統一感のあるデザインを作り出すDESIGN.md