HyperFramesにdesign.mdを渡したら、いつもの紫グラデが消えた話
note.comでも読む
以前、こんな記事を書きました。
https://note.com/shinemon33/n/n8986b8fe27a9
今回はその続きです。実は同じことが、動画づくりでも起きていました。私が使っているHyperFramesというツールは、HTMLとCSSで動画を作るフレームワークです。AIにサイトを作らせる依頼と仕組みはほとんど同じ。だから、同じ落とし穴にハマっていたんです。
いつものシアン×紫のグラデーションが、モスグリーンとオレンジに変わりました。ただし、それで一件落着とはいかず、今度は29件のコントラスト警告が出るという想定外のオチも待っていました。順番に書いていきます。
HyperFrames用のAIエージェントスキルには、プロジェクト内のdesign.mdというファイルを読み、色やフォントを制作時の基準にする運用が実は最初から用意されていました。私が一度もそれを使っていなかっただけだったんです。
動画でも、同じ現象が起きていた
ブランドのルールをAIに読み込ませる設定、正直めんどくさそうで後回しにしてしまう、というSNS投稿も見かけました。運用コストやメンテナンスの手間を心配する声です。
HyperFramesでコンポジション（動画のシーン）を作り始めた最初の数週間、私は前作と同じ失敗をしていました。「もっと今っぽく」「シンプルでかっこよく」とだけ指示して、ブランドの話は一度もしていなかったんです。
出てくるのは、毎回似たような配色。前作で紹介した「サイト制作の紫グラデ問題」と、まったく同じ現象がここでも起きていました。
自分のブランドカラーとは全然違う色が平気で使われる。修正しようにも、どこをどう直せばいいのか手がかりがない。「HTMLとCSSで動画を作るツールだから、サイト制作とは事情が違うのかな」と、しばらく考えないようにしていました。
設定がめんどくさくて、ずっと後回しにしていた
正直に話すと、私もしばらくこの問題を放置していました。
ブランドカラーやルールをAIに読み込ませる設定って、なんとなく「エンジニアっぽい作業」に見えませんか？設定ファイルを作って、どこかに置いて、毎回読み込ませて……想像しただけで、ちょっとため息が出るような作業に感じました。
しかも「設定を変えたらまた一からやり直し？」「運用しながらメンテナンスも必要？」という不安も重なって、「まあ、今は手動でいいか」と先送りにしていたんです。
でも、ある日ちょっとした実験をしてみたら、その考えが一気に変わりました。
「design.md」というファイル一枚が、すべてを変えた
design.md形式のルールブックをAIエージェントに読み込ませたら、既存の有名ブランドに近いテイストのUIが作りやすくなった、という報告がSNS上で見られました。
HyperFramesを触っているとき、あるSNS投稿を見かけました。「design.mdというファイルにブランドのルールを書いて読み込ませたら、既存の有名ブランドに近いテイストのUIが作りやすくなった」という話です。
design.mdというのは、Markdown形式で書いたルールブックのこと。難しいコードは一切不要です。プロジェクトのフォルダに置いておけば、HyperFrames用のAIエージェントがコンポジション（動画のシーン）を作るたびに、そのファイルを読み直して、そこに書かれた色やフォントのルールを制作の基準にしてくれます。
余談ですが、「ブランドルールをファイルで渡す」という同じ発想の仕組みは、他のAIツールにも広がってきているようです。
試しに、私も自分のブランドルールをまとめたファイルを作って、プロジェクトのルートに置いてみました。書いた内容はシンプルで、こんな感じです。
私が書いたdesign.mdの中身（抜粋）
# ブランドカラー
- メインカラー: #15803D（モスグリーン）
- 背景: #FAFAF9（温かみのある白）
- アクセント: #F97316（オレンジ）
# フォント方針
- 見出し: 丸ゴシック（親しみやすさと存在感）
- 本文: 角ゴシック（読みやすさ重視）
# トーン
- 親しみやすく、でも軽すぎない
- 余白を大切にしたレイアウトこれを置いた状態で、過去に作った動画の1シーンを複製して、いつもと同じ指示を出し直してみました。
結果を見たとき、思わず「あれ？」と声が出ました。
いつものシアン×紫のグラデーションが、ほとんど出てこなかったんです。
メインのモスグリーン、温かみのある白の背景、オレンジのアクセント。自分でデザインしたみたいな仕上がりなのに、ゼロから自分でやったわけじゃない。「AIっぽさ」が、するっと消えていました。
一件落着と思ったら、次の壁にぶつかった
でも、話はここで終わりませんでした。
ブランドカラーがちゃんと反映されるようになって喜んでいたのも束の間、今度は別の問題に気づきます。モスグリーンやオレンジをそのまま見出しの文字色に使うと、背景に対して読みにくい箇所が出てきたんです。
実際に確認してみると、背景色#FAFAF9に対してモスグリーン単色は4.8:1で、Webのアクセシビリティ基準（WCAG AA・通常文字は4.5:1以上）をぎりぎり通過していました。でも、オレンジ単色は2.68:1しかなく、通常文字の基準はもちろん、見出しなど大きな文字向けの基準（3:1以上）も下回っていたんです。ブランドカラーがちゃんと出るようになった代わりに、一部の色で「読みやすさ」が犠牲になっていました。
対策はシンプルでした。アイコンや装飾に使う「本来の色」と、見出しや強調テキストに使う「濃いめの色」を分けて用意したんです。モスグリーンは見出し用に少し濃くした#166534（コントラスト比6.83:1）、オレンジは#9A3412（同7.0:1）を新しく作り、文字色専用にしました。
この調整で、コントラスト不足の警告は29件から13件まで半減しました。残った13件は、アニメーションのフェード中や装飾オブジェクトとの重なりなど、色そのものよりタイミングが原因になっていそうなものが中心で、これは追って調整していく予定です。「ブランド化すれば解決」だと思っていたら、今度は「読みやすさ」という別の壁にぶつかる。デザインって、一つ直すと一つ見えてくるものなんだな、と実感した出来事でした。
「色1色くらいで変わるの？」という疑問に答えます
ここで、正直な疑問が出てくると思います。「色を1色指定したくらいで、本当にAIのデフォルトの多色使いが完全になくなるのか」という声、SNS上でも見かけます。
その疑問、わかります。私も最初は半信半疑でした。
ただ、実際にやってみてわかったのは、「色だけを1色指定する」のと「ルールとして体系立てて渡す」のは、AIへの伝わり方がまったく違うということです。
単発のプロンプトで「このカラーで」と指示しても、その指示は一度きりで消えてしまいます。でも、design.mdというファイルに「これがこのブランドのルールです」という形で渡すと、AIは制作のたびにそのファイルを読み直して、共通の前提として使ってくれます。
完全に100%コントロールできるとは言い切れません。生成物を見て微調整する手間はゼロにはなりません。実際、私も文字の読みやすさは別途調整が必要でした。でも、「毎回全部手直し」から「細部を少し調整するだけ」に変わるのは、体感としてはっきりわかります。修正コストが大幅に下がるだけで、AIを使う意味がぐっと増します。
また、design.mdのメンテナンスについて心配している方も多いですが、最初に一度ちゃんと作ってしまえば、ブランドが変わらない限り触る必要はほとんどありません。むしろ、ブランドガイドラインをまとめて言語化する機会になるので、AIのためだけじゃなく、自分の頭の整理にもなります。
早めに整えるほど、次の制作がラクになる理由
AIツールは今、ものすごいスピードで進化しています。HyperFramesのように、ルールブックを毎回参照できるツールも増えてきました。
裏を返せば、「ブランドルールをAIに渡せる人」と「毎回プロンプトだけで戦っている人」の差が、これから少しずつ広がっていくということでもあります。
ブランドカラーを教えていない状態でAIを使い続けるのは、地図なしで毎回知らない街を歩くようなもの。目的地には着けても、遠回りと手直しの繰り返しです。
design.mdを一度作ってしまえば、その資産は繰り返し使えます。今日30分かけて作れば、来月以降の修正時間を短縮できることが多いです。「めんどくさい」という気持ちは、私もよくわかります。でも、それを後回しにするコストは、静かに積み上がっていきます。
まとめ
HyperFramesにブランドカラーをdesign.md形式で渡したら、AIのデフォルト多色使いがほとんど出てこなくなり、自分らしいデザインが出やすくなりました。しかも、ブランドカラーをそのまま文字色に使うと読みにくくなるという、想定していなかった壁にもぶつかりました。設定の手間を怖がって後回しにしていた自分が、一番もったいないことをしていたな、と今では思います。
今日できる小さな一歩はこれだけです。
- テキストファイルを開いて「design.md」という名前をつける
- 自分のブランドカラー（16進数コード）を3色だけ書く
- プロジェクトのフォルダに置いて、いつも通りシーンを1つ生成してみる
手順はこれだけです。特別な準備はいりません。
やってみた感想や「こんな結果になった！」という報告、コメントで教えてもらえると嬉しいです。同じ悩みを持つ誰かの参考になるかもしれないので、ぜひ気軽に書いてください。
これからもAI活用の実験結果を包み隠さず発信していきます。フォローしておくと、最新の記事が届きます。一緒に、少しずつ試していきましょう。