DESIGN.mdでAIのデザインを統一。Google提唱の規格とLinter活用法

AIにデザインを任せると、画面ごとに色や角丸、余白が少しずつ違ったり、どこかで見たような「AIっぽい」見た目になったりすることがよくあります。

たいちさんによると、AnthropicAnthropic ── 対話AI「Claude」を開発するアメリカのAI企業です。AIの安全性研究にも力を入れていますの公式ブログでも、学習データでは無難なデザインが支配的なため、指定がないとありふれた見た目に収束してしまうと説明されているそうです。

このAIっぽいデザインを解決する手段として紹介されるのが、Googleが提唱したAI向けのデザイン規格DESIGN.mdです。オープンソースとして公開されています。

たいちさんは、DESIGN.mdをAGENTS.mdと対比して説明します。

DESIGN.mdの中身はただのMarkdownMarkdown ── 見出しや箇条書きを簡単な記号で書けるテキスト形式です。人が読んでもAIが読んでも扱いやすいのが特徴ですファイルです。色やフォント、余白、影、レイアウトといったデザインのルールが、人にも読める形で書かれています。

見本を取ってきて日本語向けにカスタマイズする

自分のアプリやサイト用のDESIGN.mdをゼロから作るのは大変です。そこでたいちさんは、AwesomeDesignMDというGitHubリポジトリから見本を取ってくる方法をすすめています。

このリポジトリには、AppleやAirbnb、Stripeなど、実在する74のウェブサイトから作られたDESIGN.mdが載っています。有名企業の洗練されたDESIGN.mdを持ってきて、自分用にカスタマイズする使い方です。

注意点として、このリポジトリのDESIGN.mdはすべて英語です。たいちさんは、AIに日本語化してもらい、フォントもNoto Sans JPなどの日本語フォントに変えてから使うのがおすすめだと話しています。

AIに読ませるのは1行でいい

作成したDESIGN.mdをAIに使わせる設定は、とても短く済みます。

この設定をしておけば、次からAIがデザイン関連の作業をするときにDESIGN.mdに従ってくれるようになる、とたいちさんは説明します。

ここからは少し上級レベルの話です。DESIGN.mdはあくまでAIが従うべきデザインの指針であり、強制力はありません。

それを防ぐのがLinterLinter ── プログラムのコードを、あらかじめ定義したルールに従って機械的に検査するツールです。書き方の誤りや規約違反を自動で見つけますです。ルール違反のコードがあれば、AIにその変更をコミットさせないこともできます。

たいちさんは、Linterを使えばDESIGN.mdで定義した色やフォント、余白のルールに、AIを強制的に従わせることができると話しています。

Google公式コマンドでできること

DESIGN.md自体にも、Google公式のコマンドで使える便利な機能があります。

たとえば、DESIGN.mdで定義した文字と背景のコントラストが見えづらい場合に警告を出したり、DESIGN.mdの色定義をプログラムで使う色のコードに変換したりできます。詳しくはGoogle Labsが公開しているDESIGN.mdの公式リポジトリを見てほしい、とたいちさんは案内しています。

最後にたいちさんは、DESIGN.mdの見本はAwesome系のGitHubリポジトリから、AppleやAirbnbといった有名企業のものを持ってこられると改めて紹介しています。

番組の終わりには、伝票作成や受発注管理、請求書などの業務をAIで自動化してコストを削減する無料相談の告知もありました。たいちさん自身が現場の課題を聞き、システム開発から運用まで対応するそうです。

まとめ

AIのデザインがブレたり無難になったりするのは、指定がないと学習データの平均に寄るためです。DESIGN.mdでルールを明文化し、必要に応じてLinterで強制することで、一貫した洗練されたデザインに近づけられると話されています。

• DESIGN.mdはGoogleが提唱した、見た目のルールを定義するAI向けデザイン規格
• 見本は74サイト分のDESIGN.mdが載ったGitHubリポジトリから取り、日本語化とフォント変更をしてから使う
• CLAUDE.mdなら「@DESIGN.md」、AGENTS.mdなら「UIはDESIGN.mdに従う」と1行書けば準備完了
• DESIGN.mdは指針なので、Linterで違反を検知すればルール外のデザインを防げる