#15　デザインガイドラインをAI向けに整えたら制作効率が劇的に変わった

毎週月曜配信のポッドキャスト、第15回の内容をまとめました。今回のメイントピックは、デザインガイドラインをマークダウン形式でAI向けに構造化した話。設計思想から実際の活用方法まで紹介しています。

---

メイントピック ── デザインガイドラインをAI向けに整える

デザインガイドラインの起源 ── ポール・ランドの仕事

デザインガイドラインとは何か。その源流を辿ると、デザイナーのポール・ランドに行き着きます。

ポール・ランドは企業向けのコーポレートアイデンティティ（CI）を確立した人物として知られています。ロゴだけでなく、名刺やチラシ、トラックの装飾、空間における展示物の配置に至るまで、企業の視覚的な表現を一貫して整えていくという思想の源流です。

有名な事例としては、IBMのロゴ（目と蜂とMで”IBM”を表現したユニークなバージョンも含めて）、ABCのロゴ、そしてNeXTコンピューターのロゴがあります。

NeXTのロゴについては、色彩設定、活用方法、大文字と小文字の使い分けの実験過程などが細かく書かれた約100ページの冊子がインターネット上に一部公開されています。スティーブ・ジョブズがこれを見て採用を決めたとも言われています。

デザインガイドラインには何が書かれるのか

一般的なデザインガイドラインには以下のような内容が含まれます。

• ロゴの活用方法 ── ロゴ周りに縦幅・横幅の50%以上のスペースを確保する、色を勝手に変えない、半透明にしない等
• カラーパレット ── メインカラー、テキストカラー、グレーの指定
• タイポグラフィ ── フォント、見出しサイズの規定
• スペーシング ── 余白の取り方
• 空間デザイン ── 展示会での配置ルール等

ファーウェイのデザインガイドラインを見たことがありますが、展示会での配置方法まで規定されていました。ヨゼフ・ミューラー＝ブロックマンのグリッドシステムでも述べられているように、平面に限らず3D空間においてもデザインの原則は通じるということです。

AIのために「文字だけ」で書き直す

人間向けのデザインガイドラインはビジュアルで説明されています。しかしAI（LLM）は大量の画像情報を読み解くのがあまり得意ではありません。

ならば、最初から全て文字情報で作ってしまおうと考え、デザインガイドラインをマークダウンファイル（.md）として作成しました。

• カラーパレットは16進数のカラーコードで記述
• タイポグラフィは「見出し1はXXpx」「本文はXXpx」と一つずつ指定
• レイアウトルールも全て文章で明記

AIへの「禁止事項」が鍵

AIは頑張りすぎる傾向があります。人間なら手を抜くような箇所で過度な装飾をしてしまう。そこで、禁止事項をいくつか設けました。

• ボーダーをつけない
• ホバーアクションはクリック可能な要素にのみ、scaleは1.001倍まで
• box-shadowはホバー時以外つけない
• クリックできない要素にbox-shadowを使わない
• 絵文字を使わない
• 中央寄せを廃止し、左寄せを基本とする

人間に対して作るガイドラインとの最大の違いは、この「やっちゃダメ」を明確に書くという点です。AIはルールを与えれば忠実に守ってくれますが、何も言わなければ「良かれと思って」過剰な装飾を入れてきます。

LP・チラシの「骨格テンプレート」も用意した

もう一つ工夫したのが、LPやチラシの構成テンプレートです。AIは情報量が少なすぎたり、人の行動の順序を理解していなかったりする場合があるので、骨格を用意してあげました。

1. ヒーロー ── 大きなビジュアルとキャッチコピー
2. 特徴 ── サービスの3つの特徴
3. 課題提起 ── 「こんなお悩みありませんか？」
4. 導入事例 ── 実際の活用シーン
5. 導入フロー ── 契約から納品までの流れ
6. FAQ ── よくある質問

この骨格テンプレートを参照させることで、抜け漏れのない資料が生成されるようになりました。

実際の成果

このデザインガイドライン.mdを使って以下を制作しました。

• ホームページのデザイン統一 ── AIに指示して作った箇所がまちまちになっていたデザインを、ガイドラインを参照させることで統一
• LP制作 ── ガイドラインに沿ったランディングページの生成
• 展示会用チラシ ── スタートアップジャパン展示会に向けた複数のチラシを制作

結果としてはかなり良好でした。7割の出来のものをAIが作ってくれるので、残りの違和感がある箇所だけ人間が修正すればいい。この効率は大きいです。

なお、このデザインガイドラインのマークダウンファイルはcoiai.netのブログで公開しています。コピペして使っていただいて構いませんので、参考にしてみてください。

https://coiai.net/blog/5904

---

今週のニュース ── Gemma 4とローカルLLMの未来

GoogleのローカルLLM「Gemma 4」がリリースされました。約9GBと比較的軽量です。

実際に使ってみましたが、正直なところ最近のローカルLLMは性能が拮抗してきていて、日常的な用途ではモデル間の違いを実感しにくくなっています。もちろんクラウドのAIにはまだ及びませんが、ローカルLLM同士はかなり似た動作をするようになってきました。

さらに注目なのは「盆栽」のようなさらに軽量なモデルの登場です。GPUがあまり優れていない環境でも動作する。つまり、スマートフォンにローカルでLLMを入れるのが当たり前の時代が来るということです。

これが実現すると何が変わるか。

• 遅延の削減 ── 巨大なデータセンターと通信する必要がなくなる
• ARグラスとの統合 ── リアルタイムで反応が返ってくる体験が可能に
• プライバシーの向上 ── カメラや音声データを外部企業に渡さずに処理できる
• IoTの自由度向上 ── Wi-Fi接続が不要になれば、設置場所の制約がなくなる

通信が発生しない方が場所の自由度も広がる。ローカルでLLMが動作する未来は、個人的にはとても良い方向だと思っています。

---

雑談 ── 作業と仕事、やる気について

作業ばかりで「仕事」ができない悩み

展示会に向けてポスターの制作など作業に追われていました。さすがにポスターはAIに任せてもいいものができないので自分で作っていますが、作業が多いと「仕事」ができない。

仕事とは何かを前に進めること。作業とは既にわかっているタスクを一つずつ片付けること。最近は作業ばかりで仕事らしい仕事ができていないという悩みがある一方で、作業から離れてしまうと現場感覚のない経営層になってしまうのではという不安もあります。

やる気は必要か

やる気がなくても続けられることを仕事にした方がいいのではないかと思っています。

服作りが好きですが、やる気がないと手が動かない。一方で、パソコンで何かを作る作業はやる気がなくてもできる。力を入れすぎると続けづらいし、やる気のある人が必ずしも有能というわけでもない。やる気100%を維持し続けるよりも、淡々と続けられることの方が大事なのかもしれません。

---

おわりに

株式会社coiaiでは、Web開発・XR開発・基幹システム開発・オンプレミスAI導入支援を行っています。

特にUXデザインを強みとしています。現場に入ってUXリサーチを行い、実際にどのような作業が行われているかを直接観察した上で設計に落とし込みます。「システムだけが空中に浮く」ということがないように、現場の声を起点にした開発を徹底しています。

他社に断られた案件や、見積もりが高すぎるといったケースも、方法を変えれば安くできることがあります。ご相談・お見積もりは無料ですので、お気軽にお問い合わせください。