YouMind
ログイン

HTML ブランド:入力ベースの成果物が台頭する時代

@emmettshine
英語2026年5月13日
437K
201
15
17
401

TL;DR

クリエイティブエージェンシーは、静的な成果物から「アトミックキット」へと移行しています。これは、HTML や JSON で構成された機械可読なブランドシステムであり、AI エージェントがデザインを実装する一方で、人間はより高度で独創的な思考に集中することを可能にします。

クリエイティブワークが、従来のアウトプットからアトミュニックシステム主導の成果へとシフトしている理由

先週、私たちはあるファウンダーに、2つのフォルダ(/human、/agent)と readme.md .md/) を含む zip ファイルを送りました。1ヶ月の作業を経て、agent フォルダ内には、YAML、JSON、Markdown、HTML、CSS、SVG ファイルを通じて、ブランド全体が指示としてエンコードされていました。受け取ったファウンダーは、そのパケットを Cursor にドロップし、プロンプトを入力すると、その日のうちにほぼ完成したランディングページができあがりました。

ここ数週間で、シンプルな zip フォルダが、私たちが、私たちが求められる成果物になりつつあります。ウェブサイトでも、ソフトウェア製品でも、Go-to-Market キャンペーンのバイブルでもありません。言い換えれば、私たちのインプットこそが価値の源泉であり、アウトプットではなく、成果を生み出す原動力なのです。

これは私たちにとってかなり新しいことであり、Claude Design によって可能になったことに後押しされています。アクセスしやすい UI レイヤーと、Design が生成する整理されたファイルを生成する機能は、@littleplainsxo にとって大きなブレイクスルーでした。

この数週間、私たちが経験してきたことを、この取り組みを一緒に進めているごうとしているごく初期のファウンダー数名と共有したいと思います。

また、人間の創造性と独創的な思考(いわゆる「マジックトリック」)が最も価値を発揮される場面と、なぜそれがますます私たちが対価を得たいものになっているのかについてもお話しします。

Emmett - inline image

プロジェクトの価値は上流へ移行している

私たちは、クリエイティブワークそのものが変化しており、それに伴って価値、タイムライン、価格モデルも変わっていることを目の当たりにし始めています。

数日前、@alexleiphart と私はオフィスで、業界の友人たちが遊びに来ていた数人の友人たちに、この仕事の進め方の変化を説明しようとしていを説明しようとしていました。私たちが直面している変化を説明するために、ホワイトボードに図を描きました。縦軸にプロジェクトの価値、横軸にプロジェクトの時間を取った図です。

Emmett - inline image

価値がより upfront / インプットベースになっていることを示す、大まかなホワイトボードの図。

従来のサービス契約では、成果物が積み上がるにつれて、価値はゆっくりと着実に成長していきます。時間に対して対価を払い、アウトプットを受け取り、契約期間を通じて価値が構築されます。しかしここ数ヶ月、私たちが見ているのは、横向きにした漏斗のようなものです。

初期段階です。

初期段階の契約では、価値の最も高い価値の集中はまさにスタート地点にあります。深いリサーチ、専門家による統合、そしてブランドとして企業をどうポジショニングするかという大胆な判断力です。誰のためのものか。何を言うか。どのように聞こえるか。市場のどこに位置するか。これらの判断力こそが、機能するシステムと機能しないシステムを分けるものです。ここから漏斗は急激に狭まります。なぜなら、思考が完了すれば、アウトプットはその思考のロジックに従って実行されるからです。

注:図の一番最後にある「magic-trick.md」に注目してください。これについては後ほど説明します。

エージェンシーモデルがシフトしている

エージェンシーワークの歴史のほとんど(すべて?)において、引き継ぎは静的なものでした。デザインファイル、PDF、クライアントが参照し解釈するデッキ...そして、新しい作業が行われ、新しいコピーが書かれ、新しいベンダーやチームメンバーが雇われるにつれて、徐々にそこから逸れていくものでした。

過去数十年のデジタルベースのクリエイティブワークにおいて、Brand_Guidelines_FINAL_v3-FINAL-FINAL-FINAL.pdf に遭遇したことがある人なら、そのパターンをよく知っています。ブランドは、クライアントのチームが維持できる形で、引き継ぎ後に世の中に存在していました。

しかし、私たちやエージェンシック・クリエイティブの最前線に立つ者たちが最近出荷しているものは、形態も意図も異なります。

私たちが今出荷するキットの形状。

/human フォルダには、従来の形式(PDF、Figma のリンクドキュメントなど)のブランドガイドラインが含まれており、これは依然として価値があり、大多数のチームにとって中核的なものです。

/agent フォルダは、より興味深い部分です。

/human フォルダでの作業に基づき、YAML、JSON、Markdown、HTML、CSS、SVG ファイルは、あらゆるエージェンツールが読み取って構築できるように構造化されています。ブランドはもはもはやドキュメントではなく、指示としてエンコードされており、私たちの上流での判断に基づいています。そのフォルダを開いたエージェントは、組み込まれた POV を持ち、行動に移せる全体論的なシステムを手に入れることができます。

ここ数ヶ月のブレイクスルーは、このキットが個別に取得可能なだけでなく、エンドツーエンドで一貫性を持っていることです。

この「アトミックシステム」を Claude Design、Code、Cursor(その他多くのツール)に入力すれば、ブランドの DNA は拡張され、ランディングページ、UI サーフェス、GTM キャンペーンなどを、高い品質、コンテキスト、EQ、技術的な具体性で執筆、デザイン、アニメーション化、出荷することができます。なぜなら、基礎となる思考がファイルの構造に組み込まれているからです。

これは、人間がシステムを理解するための形式と、エージェントがシステムを拡張するための形式という、2つの形式で表現された同じブランドです。ここ数ヶ月のブレイクスルーは、エージェント向けの情報パケットが、より明確な高レベルの統一された方向性を持ち、それを構築するための低レベルの技術的詳細も備えるようになったことです。

例:

私たちは最近、Type(先日公開された実際のサイトをご覧ください!)というマルチプレイヤー AI ワークスペースツールのために、アトミックキットの構築を支援しました(@fletchrichman に感謝)。

最終的なパケットを Cursor に入れ、1つのプロンプトを入力しました。「アトミックデザインシステムと戦略に基づいて、HTML のランデランディングページを生成してください。」モデルはアトム、分子、有機体を順に処理し、正しいフォント、動作するホバーステート、特定のモジュール、仕様に合ったモーション、埋め込まれたブランドガイドラインの CSS 要素を備えた、完全なランディングページを生成しました。また、ブランドのポジショニング、戦略、トーンオブボイス、プロダクションコピーのガイドラインにも従っていました。非常に優れた出来で、素晴らしいファウンディングチームと、少しのマジック(次のセクションを参照)に)に支えられていました。

モーションフォルダには、Type 固有のイージングカーブとトランジション速度を指定した JSON ファイルが含まれています。これを視覚化するよう依頼すると、Claude Design は、説明を読むだけでなく、クリックして操作できるインタラクティブなコンポーネントを生成しました。

デザイン主導またはエンジニアリング主導のファウンディングチーム(Type など)にとっては、このループはさらにタイトに機能します。彼らはキットをエディタに取り込み、1つか2つの値を変更して保存すれば、すぐに構築を開始できます。原色を変更するには、1つの CSS 変数を更新します。モーションカーブを変更するには、JSON を編集します。Claude Design に再アップロードすれば、ガイドライン全体が新しい値に基づいて再生成されます。このキットは、作業に最も近い人々によって、コードでリアルタイムに編集可能です。

同じキットを Opus 4.7 で Cursor を開き、1つのプロンプトを入力:アトミックキットから HTML ランディングページを構築してください。

Emmett - inline image
Emmett - inline image
Emmett - inline image

magic_trick.md

なぜなら、通常、ワンショットのプロンプトでは、出荷に必要なものを提供できないからです。

エージェンティックキットが通常生成するものはすべて、入力されたものの再結合です。ポジショニング、トーン、コンポーネント、モーション。それがキットの目的です。アウトプットは一貫性があり、ブランド化され、出荷可能なものになります。また、入力が許容する中央値に収束する傾向があります。正しさと独性と独創性は同じではありません。

ほとんどの人は、ホワイトボード図の最後にある小さな上昇部分、つまりマジックトリックを忘れています。

実行レイヤーがほとんどエージェンティックである場合、契約の終盤に、物事が中央に収束し始める瞬間が訪れます。それはまさに、逆のことをする必要があるタイミングです。ワンショットで魔法のようなブレイクスルーが起こることはほとんどありません(時々、AI の幻覚の創造性が懐かしくなることもあります)。

大きな賭けに出るファウンダーと仕事をするプレミアム価格のスタジオにとって、「中央値」とは、まさに人々が私たちに回避してもらうために対価を払っているものです。

ここで、人間がアイデアを持って再び登場する必要があります。本物の、ブドウドウ糖を消費する、型にはずれた、奇妙な、汗臭い、独創的な創造的思考。それは入力からは予測できなかったものです。

結果を大きく左右するような動き。昨冬のフィルムノワールの見すぎから生まれたローンチフィルムービーのコンセプト、散歩中に思いついた絶妙なプロダクトの瞬間、深夜の外出にぎやかな夜に着想を得たサブカルチャーに通じるキャンペーンアイデア、外国の国での土砂降りの雨の中で偶然見つけた小さなアートギャラリーに触発された、大胆なファーストビューのショーストッパー、システムだけでは生み出せなかったような、より強烈なインパクトを持つビルボードコピー。

私たちは社内でこれを magic_trick.md と呼んでいますが、冗談は半分だけです。

Emmett - inline image

語彙の価値

最近、Diplo が AI について質問されました。 彼の答えの中で、世界最高の DJ は自分よりも年上であることが多いのは、彼らの「語彙」、つまり音楽に関する蓄積された知識のためだと語りました。

彼にとって、その優れた語彙は、朝の5時に起きてフリーマーケットでレコードの箱を掘り返し、家々を訪ねて希少なアナログ盤を探し、すべてのトラックを読み、すべてのレコードのベーシストを知るという年月から生まれました。

DJ を偉大にするのは、何年もかけて蓄積された知識と経験です。それらによって、どのレコードを、どの部屋で、どの夜にどのレコードをかけるべきかがわかるのです。「それが私たちを優れたものにしている。私の才能は、古いレコードを掘り起こすことから来ている。」

Emmett - inline image

よく作られたエージェンティックシステムは、巨大で完全に相互参照されたレコードライブラリに相当します。それ自体は素晴らしいですが、群衆のエネルギー、部屋のフェロモン、そして誰も予想せず、誰もが覚えていることを行う経験がなければ、役に立ちません。

アトミックキットがライブラリなら、magic_trick.md は、優れた DJ が特定の夜に特定の部屋のために組み立てるセットリストです。昨日のアイデアは今日のアイデアではありません。重要なブランドアウトプットごとの勝利の組み合わせは、よく作られたエージェンティックキットと、深い知識に隠れたマジックのアイデアのマジックです。

その独創的な思考のために後流に余地を残しておかないと、正しいけれど誰も覚えていないものを出荷するリスクがあります。

もし大胆なアイデアだけで、その下にシステムがなければ、ローンチアナウンスを乗り切れない、記憶に残るものを出荷することになるでしょう。

システム思考と独創的な思考。両輪です。

HTML & .MD:Markdown からマークアップへ

(Nathaniel Whittemore が2日前の彼の優れたポッドキャスト、AI Daily Brief でも議論していたように)議論に値することの一つは、HTML がこの種の作業にとってますます適切な形式になっていると私たちは考えています。

構造化された HTML で表現されたコンポーネントは、あらゆる現代のエージェントが解析可能です。SVG はそのロジックがジオメトリに焼き付けられています。CSS ファイルは視覚言語を構造レベルでエンコードします。これらのファイルは、エージェントが直接行動できる指示です。フラットなラスター書き出し(PNG、JPEG、PDF)は見ることはできますが、から構築することはできません。

システムを HTML、CSS、SVG として構造化するとき、私たちは人間が見るためだけでなく、エージェントが読み取って構築するために構築しています。この区別が、私たちが行うほぼすべてのすべてのアウトプットの決定を形作ります。

(これに関する優れた技術記事については、@thariq による Using Claude Code: The Unreasonable Effectiveness of HTML をご覧ください。)

Emmett - inline image
Emmett - inline image

Claude Design が私たちにもたらした変化

私たちのアトミックキットのコンセプトは、Claude Design よりも前にあります。私たちは今年の初めからこの方向に進んでおり、エッセイ Building Brands for Humans and Agents で、ブランドワークをエージェントが読み取り可能な形式にリファクタリングする根拠を説明しました。

今、大きく異なると感じるのは、これらのキットの1つを、スプリントが要求するスピードで、質高く生産することが真に実現可能になり、かつ、よりインパクトのあるものになったことです。

Claude Design により、私たちはシステムをより視覚的、言語的、戦略的、構造的に考えることができるようになりました。同じツール内で作業し、適切な形式でアーティファクトを生成できます。以前はプロジェクトの後半を費やしていた手動変換ステップが不要になりました。2025 年に 12 〜に 12 週間かかっていた作業が、価値を圧縮することなく、(場合によっては)4 週間のスプリントに収まるようになりました。適切に行われれば、価値は実際に向上しました。

クライアントが持ち帰るキットは、生成的で、構造化され、将来性があり、生きています。従来の成果物は静的で、手動メンテナンスが必要で、即時の実装能力が非常に限られていました。

Emmett - inline image
Emmett - inline image

私たちが販売しているもの:アトミックワールド

アトミックキットが成果物である場合、キットは完成したアセットではありません。それは、完成したアセットを生み出すシステムです。

これにより、実際に販売されているものが変わります。販売されているのは、将来のあらゆるアーティファクト、ページ、プロダクトをすべて同じブランドだと感じさせる、エンコードされた思考です。

キットは、独創的な思考から派生した独創的な作品です。クライアントがそこから生成するすべてのダウンストリームアウトプットは、その独創性を受け継ぎます。

Jack Dorsey と Roelof Botha は最近、「From Hierarchy to Intelligence」を発表し、次世代の企業が「ワールドモデル」と呼ぶものの周りに組織されるようになると主張しています。それは、継続的に更新される、機械が読み取り可能なビジネス自体の理解であり、AI が直接行動できるほどリッチです。彼らの賭けは、理解こそが堀であり、システムが稼働するにつれてその理解の深さが複利効果を生むというものです。

同じことが私たちが行うクリエイティブワークにも当てはまります。

アトミックキットは、ブランドのワールドモデルです。構造化された、機械が読み取り可能な、ブランドとは何か、誰のためのものか、どのように聞こえるか、どのように聞こえ、どのように見えるかについての理解です。その理解の深さが、価値を生み出し、耐久性を生み出します。

「アトミックキットは、ブランドのワールドモデルです。」

この仕事はどのように販売されるか(近い将来?)

従来のクリエイティブワークは時間と素材は時間と素材に価格を付けます。スコープを決め、アウトプットに対価を払い、次に進みます。キットが実際の製品である場合、ホワイトボードの図が示す通り、価値は upfront の作業に集中します。継続的な関係は、制作作業のための再スコープ設定というよりも、生きたシステムへのアクセスを維持することに近づきます。

私たちはすでにこのようなバージョンを始めています。Dan Batten を通じて、Little Plains チームが独占的にアクセスできるカスタムノードベースのディープリサーチエージェントを構築しました。複数のクライアントからその使用を求められています。準備ができていれば、月額定額料金でアクセスを提供し、継続的に維持・改善することを条件にするでしょう。クライアントは常に最新バージョンを利用できます。

構造的に類似したことが、ブランドシステムにも適用できるかもしれません。私たちはキッチンに留まり、レシピを磨き続けます。クライアントは常に最良のバージョンから構築します。初期費用を抑え、継続的なライセンス、継続的な品質向上。

同じ原理は Flora の仕事でも同じです。私たちはクライアントのためにオリジナルの生成ワークフロー(ビジュアルを生成する方法、カスタム UI 生成パターン、ノードベースのコンテンツパイプライン)を構築し、そのテクニックを、アウトプットだけでなく、使い続けられるアセットとして提供します。これらのテクニックが洗練されるにつれて、アクセスと使用のライセンス供与を検討しています。

Emmett - inline image

クリエイアティブの完全なライセンスモデルにはまだ到達していませんが、議論を始めるには十分なところまで来ています。この仕事が売買される未来は、エージェンシー価格設定よりもソフトウェア価格設定に近いものになるでしょう。私たちにとっては、おそらくハイブリッドになるでしょう。フロントエンドはスコープベースの時間と素材、私たちが残すシステムには継続的なライセンスです。

もしあなたが独創的な思考と独創的なアイデアを持っていると信じるなら、これは有利に働くはずです。

手ではなく、頭脳に対して報酬を得ることを目指しましょう。

現在の状況

私たちは先月、複数のアトミックキットを引き渡しました。ファウンディングチームは、実際のローンチ期限に間に、それらからリアルタイムで構築しています。それが唯一意味のあるテストです。

私たちのフルタイムチームのメンバーは全員、毎日 Claude Design を使用しています。コピーライターは Google ドキュメントではなく HTML サイト内でコピーをテストしており、文字数、改行、そして実際の状況でのナラティブの流れをよりクリーンに確認できるため、HTML サイト内でコピーをテストしています。デザイナーは、展開されるのと同じ環境でコンポーネントをストレステストしています。媒体が媒体であるため、仕事はより正直です。

つまり、上流の定義作業(戦略、ポジショニングのロジック、ブランドを一貫性のあるものにするビジュアルおよびバーバルシステム)が実際の製品になりつつあります。その後の作業はますます下流へと移行しています。

最後に、私たちが常に最も重視してきた仕事(独創的で創造的な思考)は、今後さらに重要になるかもしれません。

お読みいただきありがとうございました!

このようなニッチな話題について話したい方は、hello@littleplains.co までメールください。

  • Emmett & Alex

Emmett Shine と Alex Leiphart は、Little Plains のパートナーです。ニューヨークを拠点に、素晴らしいスタートアップ企業と協力し、ブランド、プロダクト、そしてそれらを結びつけるシステムを手がけています。*

ワンクリック保存

YouMindでバイラル記事をAI深読み

ソースを保存し、的を絞った質問をし、主張を要約して、バイラル記事を再利用できるノートに変えます。すべてを1つのAIワークスペースで行えます。

YouMindを探索
クリエイターのために

あなたの Markdown をきれいな 𝕏 記事に

自分の長文を投稿するとき、画像・表・コードブロックを 𝕏 向けに整形するのは手間がかかります。YouMind は Markdown 全体を、そのまま投稿できるきれいな 𝕏 記事に変換します。

Markdown → 𝕏 を試す

解読すべきパターンをもっと

最近のバイラル記事

バイラル記事をもっと見る