AIデザインがぶれる理由とデザインMD
こんにちは、超実践AI論の大地です。 今回は、AIにイケてるデザインを作らせ、一貫性を持たせるためのデザインMDというテーマでお話しします。
AIにデザインをさせると、画面ごとに色や角丸、余白が少しずつ違ったり、どこかで見たようなAIっぽいデザインになることがよくあります。
これはAIの仕組みからすると当然の話で、アンソロピックの公式ブログでも、学習データでは無難なデザインが支配的なため、
指定がないとありふれたAIっぽい見た目に収束してしまうのだそうです。 このAIっぽいデザインを解決するために役立つのがデザインMDです。
デザインMDはGoogleが提唱したAI向けのデザイン企画のオープンソースです。
AgentsMDがAIが成果物をどう作るかを定義する一方、デザインMDはどんな見た目の成果物を作るかを定義します。
デザインMDはただのマークダウンファイルなので、色やフォント、余白、影やレイアウトといったデザインに関するルールが人にも読める形で書かれています。
見本の取得とAIへの読み込ませ方
自分のアプリやサイトでデザインMDをゼロから作るのは大変なので、Awesome Design MDというGitHubリポジトリから見本を取ってくるのがおすすめです。
Awesome Design MDにはアプリやAirbnb、Stripeなど、実在する74のウェブサイトから作られたデザインMDが載っています。
ここから有名企業の洗練されたデザインMDを取ってきて、自分のサイトやアプリ用にカスタマイズして使うのがおすすめです。
特に、Awesome Design MDのサイトはすべて英語なので、AIに日本語にしてもらい、フォントもNotSansJPなどの日本語フォントに変えてから使うのがおすすめです。
作成したデザインMDをAIが使うようにするためには、クロードだったらクロードMDにatmarkDesignMDと一行書けばOKです。
AgentsMDの場合は、UIはデザインMDに従うという一文を書きましょう。
これで、次からデザイン関連の対応をAIがするときは、デザインMDに従ってくれるようになります。
リンターでデザインルールを強制する
ここからは少し上級レベルの話です。
デザインMDを作っても、それはAIが従うべきデザインの指針であって、強制ではありません。
AIがデザインMDの指示を無視したり、見落としたりすれば、デザインのルールを守っていない成果物ができてしまいます。
それを防ぐのがリンターです。
リンターとは、プログラムのコードをあらかじめ定義したルールに従って機械的に検査するツールです。
ルール違反のコードがあったら、AIにその変更をコミットさせないこともできます。
このリンターを使って、デザインMDで定義した色やフォント、余白のルールなどを、AIを強制的にデザインMDに従わせることができます。
Google公式コマンドと導入まとめ
デザインMD自体でも、Google公式のコマンドで色々便利な機能を使うことができます。
例えば、デザインMDの定義する文字と背景のコントラストが見えづらかったら警告を出したり、
デザインMDの色定義をプログラムで使う色のコードに変換したりすることができます。
詳しくは、Google Labs CodeのデザインMD公式リポジトリを見てみてください。
今回の内容をまとめます。
AIが作るデザインを、AIっぽくないかつ一貫したものにしたいなら、Google公式が提唱するデザインMDというフォーマットが有効です。
デザインMDでAI向けのデザインのルールを決めたら、リンターでデザインのルール違反を検知すると、
AIがルール外のデザインをしてくることはなくなります。
デザインMDを作ったら、クロードMDならアットマークデザインMDと一行書く、
エージェンツMDならUIはデザインMDに従うと一行書けば準備完了です。
デザインMDの見本は、オーサムデザインMDのGitHubリポジトリから、
アプリやAirbnbといった有名企業のデザインMDを持ってくることができます。
ぜひあなたも、自分のアプリやサイトにデザインMDを導入して、
AIっぽくない洗練されたデザインにしてみてください。
概要欄にも今回の内容を解説した記事を貼っておきます。
業務自動化の相談案内
最後に一つお知らせです。
点票作成、受発中管理、請求書などの業務は、AIで自動化してコスト削減できます。
僕が現場の課題を聞き、システム開発から運用まで対応可能です。
相談は無料なので、概要欄のリンクからお問い合わせください。
それでは今日はこの辺で。