Showing Posts From

コンテンツ制作

デザインハーネスとは｜AIにデザインを任せても崩れない仕組み

デザインハーネスとは｜AIにデザインを任せても崩れない仕組み

はじめに こんにちは、広報・制作担当のmeraです。 AIにバナーや図版を頼むと、1枚目はいい感じに仕上がる。ところが2枚目、3枚目と頼むうちに、色が少しずつずれ、文字の大きさが変わり、気づけば別のブランドのような見た目になっている。そんな経験はありませんか。 私はこれを、プロンプトの書き方が悪いせいだと思っていました。でも最近、そうではないと考えるようになりました。問題はAIの腕ではなく、AIの周りに何を用意しているかのほうにある。その考え方に名前を付けたのが「デザインハーネス」です。この記事でわかることデザインハーネスとは何か、どこから来た言葉なのか デザインハーネスを形づくる4つの層 ブログのTOPページをFigmaデザインに作り替えたときに、実際に効いたこと 明日から小さく始めるための3つの手順デザインハーネスとは、AIを迷わせないための「周りの仕組み」のこと 先に結論を書きます。デザインハーネスとは、AIにデザインを任せるときに、ルール・前提知識・チェックの仕組みをAIの外側に用意しておく考え方です。AIそのものを賢くするのではなく、AIが働く環境を整えることで、仕上がりを安定させます。 もとはエンジニアリングの言葉「ハーネスエンジニアリング」 「ハーネス」という言葉は、2026年に入ってからAIエージェントの開発現場で広く使われるようになりました。2月にはOpenAIが、人間がコードを1行も手で書かずにAIエージェントに製品を作らせた社内実験を「Harness engineering」という記事にまとめています。5か月でおよそ100万行。そこで人間が担ったのは、コードを書くことではなく、環境を設計し、意図を伝え、フィードバックの仕組みを作ることでした。 ソフトウェア開発の論考で知られるMartin Fowler氏のサイトでも、Thoughtworksのビルギッタ・ベッケラー氏がこの考え方を整理しています。その中では、ハーネスという言葉が「AIエージェントのうち、モデル以外のすべて」を指す略語として広まってきた、と説明されています。 つまり、AIエージェント＝モデル（頭脳）＋ハーネス（それ以外の全部） という見方です。同じモデルを使っていても、ハーネスの出来によって結果が大きく変わります。 そのデザイン版を提唱したのが、こぎそさん このハーネスの考え方をデザインの領域に持ち込んだのが、デザイナーのこぎそさん（株式会社Lumilinks）です。2026年5月にnoteで「デザインハーネスとは何か」を公開し、9月5日にはProduct Engineering Conference 2026で「デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜」と題して講演しています。 解説サイト design-harness.com では、デザインハーネスを次のように説明しています。AIエージェントの力を人の判断で御しながら、デザインプロセスを前に進めるための考え方ポイントは「人の判断で御しながら」という部分です。AIに丸投げするのでも、AIを使わないのでもない。AIの速さは活かしつつ、最後の判断は人が持つ。その中間を仕組みで支えるのがデザインハーネスです。 ハーネスの語源は「馬具」 英語の harness は、もともと馬に付ける馬具や、高所作業の安全帯を指す言葉です。 馬具は、馬を縛りつけるための道具ではありません。馬の力を、行きたい方向へ無駄なく伝えるための道具です。AIも同じで、力が強いぶん、向きを与えないとあちこちへ走り出してしまいます。デザインハーネスは、AIの自由を奪うものではなく、AIの力を正しい方向へ通すためのものだと考えると分かりやすいと思います。デザインハーネスは「制約・文脈・検証・評価」の4つの層でできている こぎそさんの整理では、デザインハーネスは4つの層で構成されます。層 役割 具体例制約 やっていいこと・いけないことを決める 色やフォントの指定（デザイントークン）、使ってよい部品、禁止事項文脈 判断の材料を渡す デザイン原則、過去の決定の記録、想定読者、既存の画面検証 できたものをチェックする 色がルール通りか、読みやすいか、文字があふれていないか評価 結果をルールに戻す レビューで出た指摘や失敗パターンを、ルール集に書き足す制約は、AIに「ここからはみ出さないで」と伝える柵です。色をカラーコードで、文字サイズを数値で決めておくと、AIは迷わずその値を使います。 文脈は、AIに「なぜそうするのか」を伝える材料です。同じ色の指定でも、「このブログは専門的な内容を、やさしく伝えたい」と分かっていれば、AIの判断はそちらに寄っていきます。 検証は、できあがったものを確かめる工程です。人の目で見ることもあれば、スクリーンショットを並べて比べたり、ツールで自動チェックしたりすることもあります。 そして一番大事なのが評価です。崩れたところを直して終わりにせず、「なぜ崩れたか」をルールに書き足す。こぎそさんは、このルール集を DESIGN.md というファイルにまとめる方法を紹介しています。こうすると、同じ失敗は二度と起きにくくなります。4つの層は一方通行ではなく、評価から制約へ戻るループになっているのです。プロンプトを工夫するだけでは、なぜ足りないのか 「だったら、プロンプトを丁寧に書けばいいのでは」と思うかもしれません。私も最初はそう考えていました。 でも、プロンプトとハーネスには決定的な違いがあります。プロンプトの工夫 デザインハーネスルールが残る場所 その会話の中だけ ファイルとして環境に残る次の依頼では また一から伝え直す 自動で読み込まれる失敗したとき その場で直してもらう ルールに書き足して、次から防ぐ担当者が変わると 書き方の差がそのまま出る 同じルールで動くプロンプトは、その場かぎりのお願いです。どれだけ上手に書いても、会話が終われば消えてしまいます。一方ハーネスは、環境そのものに残るルールです。だから、何度頼んでも同じ前提から始められます。 **毎回うまく頼む技術より、毎回同じ前提で始められる環境のほうが強い。**これがデザインハーネスの核心だと私は理解しています。【実例】ブログTOPページのFigma化で、デザインハーネスが効いた ここからは私自身の話です。 このブログのTOPページを、Figmaで作ったデザインに作り替えました。ヒーローエリア、「注目の記事」、記事カード、右カラムのバナーや筆者一覧、ページ送り。ヘッダーとフッターも含めて、見た目をほぼ入れ替える作業です。実装はClaudeと一緒に進めました。 振り返ってみると、4つの層がそれぞれちゃんと働いていました。制約：色とフォントは設定ファイルにあった。ただし穴もあった このブログには、テーマカラーやフォントを数値で定義した設定ファイルがあります。メインカラーはカラーコードで1つに決まっていて、フォントも1書体です。ナビのホバー下線や記事カードのアクセントは、この値から作られています。 ただ、あとから見直すと穴も見つかりました。文字や背景に使うグレーは、設定ファイルに定義がありませんでした。そのため新しいパーツでは、Figmaから読み取ったグレーの値が、それぞれのファイルに直接書き込まれています。いまの見た目に問題はありませんが、次に色を調整するときは何か所も直すことになります。 制約に書いていないことは、AIもその場の判断で埋めるしかありません。次にやることは、このグレーを設定ファイルに足すこと。後で出てくる「評価」から「制約」へ戻るループの出番です。 文脈：Figmaのデザインと、CLAUDE.md 見本になるFigmaのデザインがあったことは、何より大きかったです。言葉で「おしゃれな感じに」と伝えるより、完成形を見せたほうが早く、ずれもありません。 もう一つは CLAUDE.md です。これはAIに向けた「このリポジトリの取扱説明書」のようなファイルで、記事の命名ルールや下書きの扱いが書いてあります。以前、奮闘記 #6 で「CLAUDE.mdを育てる」という話を書きましたが、あのとき育てたファイルが、今回もそのまま前提として働いてくれました。 検証：PCとスマホのキャプチャを並べて見る 作ったページは、PC幅とスマホ幅でキャプチャを撮り、Figmaのデザインと見比べながら直していきました。特にメニューはスマホ表示で崩れやすいので、並べて比べる確認を何度か繰り返しています。 コードは読めなくても、画像を並べれば違いは分かります。ノンエンジニアの私にとって、この「目で見て検証できる」形にしてもらったことが一番助かりました。 評価：決めたことは、ファイルに書いて残す 作業の途中では、いくつも判断が必要になりました。たとえば「注目の記事」は自動で選ぶのか、手で選ぶのか。私は記事ごとに手動で指定する方式を選びました。 こうした決定は、会話の中だけで終わらせず、設定ファイルに残しています。右カラムのバナーや「よく読まれている記事」の設定ファイルには、冒頭に「このファイルは何のためのものか」「画像の推奨サイズ」「どの順に並べるか」といった説明が書き込まれています。次にAIがこのファイルを触るときも、私が触るときも、同じルールで迷わず動けます。 気づいたら、ほかにもハーネスがあった TOPページに限らず、このブログの制作には、いつのまにか小さなルールがたまっていました。図版のトンマナは、ネイビーとオレンジの2色に固定したプリセットを使う 文章では、AIっぽさが出るダッシュ記号を使わない。タイトルの区切りは「｜」 記事の画像はJPEGで、横幅は最大1600px（サーバーの転送量を抑えるため） 記事は、構成案を承認してから本文を書いてもらうどのルールも、最初から計画して作ったものではありません。一度崩れたり困ったりしたから、書き足したものです。こぎそさんの4つの層でいえば、「評価」が私の知らないうちにハーネスを育てていた、ということになります。明日から始めるなら、この3つだけでいい デザインハーネスと聞くと大がかりに感じますが、最初は小さくて大丈夫です。 1. 色とフォントを、数値で書き出す 「落ち着いた青」ではなく、カラーコードで書きます。フォント名とサイズも同じです。これだけで、AIの出力のブレはかなり減ります。 2. やってはいけないことを、1枚にまとめる 「この色は使わない」「この言い回しは避ける」など、禁止事項を短いメモにします。AIに依頼するときは、毎回そのメモを読み込ませます。Claudeなら、CLAUDE.md に書いたことは毎回自動で読み込まれます。スキルに書いておけば、関係する依頼のときに読み込まれます。 3. 崩れたら、直すだけで終わらせない 崩れたところを直してもらったら、「次から同じことが起きないように、何をルールに足せばいいか」を一緒に考えます。この1行の追加を続けることが、ハーネスを育てることそのものです。まとめデザインハーネスとは、AIにデザインを任せるときに、ルール・前提知識・チェックの仕組みをAIの外側に用意しておく考え方。 構成は「制約・文脈・検証・評価」の4層で、評価から制約へ戻るループが肝になる。 完璧なハーネスを最初から作る必要はない。崩れるたびにルールを1行足していけば、自然に育っていく。次に読むのがおすすめの記事ノンエンジニアのClaude Code奮闘記 #6 CLAUDE.mdを育てる｜AIへの「自分専用の取扱説明書」のつくり方 AI生成の表示ルールが始まった日｜発信者は何をすべきか参考文献・出典こぎそ「デザインハーネスとは何か」（2026年5月8日） ／ note こぎそ「デザインハーネス 〜AIが生成する"デザイン"の妥当性を、誰がどう担保するのか〜」Product Engineering Conference 2026（2026年9月5日） ／ Speaker Deck デザインハーネス 解説サイト ／ design-harness.com OpenAI「Harness engineering: leveraging Codex in an agent-first world」（2026年2月11日） ／ openai.com Birgitta Böckeler「Harness engineering for coding agent users」（2026年4月2日） ／ martinfowler.com

AI生成の表示ルールが始まった日｜発信者は何をすべきか

AI生成の表示ルールが始まった日｜発信者は何をすべきか

はじめに こんにちは、広報・制作担当のmeraです。 2026年8月2日。AIで作ったものに「AIで作りました」と示させるルールが、この日から動き出しました。EUと、アメリカ・カリフォルニア州で。しかも同じ日にです。 ただし、義務がかかる相手はかなり限られています。そこを取り違えると必要のない不安を抱えることになるので、この記事では「誰に、何が」を先に切り分けます。 カリフォルニアの日付は、もとは2026年1月1日でした。2025年10月13日に署名されたAB 853という改正法が、これを8月2日に動かしています。州の議会分析にも知事の署名メッセージにもEUへの言及はないので、狙って揃えたと断言はできません。ただ結果として、大西洋をまたいだ2つの規制が同じ日から同じ方向を向き始めました。 なお、この記事に出てくる日付はすべて現地の暦です。時差があるぶん、先に動き出したのはEUのほう。日本時間に直すとEU側が8月2日の朝、カリフォルニア側が同じ日の夕方にあたります。日本から見ても、8月2日は8月2日のままでした。この記事でわかること8月2日に始まったルールが、誰に何を求めているのか 「来歴（プロベナンス）」という考え方と、その限界 日本でブログやSNSを書いている人が、明日から何をすればいいか8月2日に何が始まったのか EU側で動き出したのは、AI法（AI Act）の第50条です。義務は立場で4つに分かれています。 AIシステムを作って提供する側（プロバイダー）には2つ。相手がAIだと分かる設計にすること、そして生成・加工したコンテンツに機械が読めるマークを埋め込むこと。それを使って世に出す側（デプロイヤー）にも2つ。感情認識や生体分類を使うなら知らせること、そしてディープフェイクを公開するなら「これはAIで作ったものです」と開示すること。 ディープフェイクの定義は第3条にあり、実在の人物・物・場所・団体・出来事に似ていて、本物だと誤認させるもの、とされています。ドラゴンや生身で空を飛ぶ人のような明らかに非現実的なものは含まれません。映画や風刺作品に含まれる場合は、鑑賞を妨げない形での表示、たとえばクレジットや説明欄での明記が認められています。 **制裁金は最大1,500万ユーロ、または全世界年間売上高の3%のいずれか高いほう。**ただし第99条(6)に逆転規定があり、中小企業やスタートアップについては「いずれか低いほう」が上限になります。なお第50条(2)の機械可読マークについては、8月2日より前から市場に出ていた生成AIシステムに限り2026年12月2日までの猶予が入りました。適用開始の13日前、2026年7月20日には欧州委員会が第50条の最終ガイドラインを採択しています。 カリフォルニア側は AI Transparency Act です。対象は月間100万ユーザーを超える生成AIの提供者。**目に見えないメタデータ（latent disclosure）を生成物に埋め込むこと、誰でも無料で使える判定ツールを公開すること、利用者が見えるラベルを付けられる選択肢を用意すること。**対象は画像・動画・音声で、テキストは入っていません。罰則は1違反あたり5,000ドル、違反した日ごとに別の違反として数えられます。 そしてここからが発信者にとっての本題です。2027年1月1日からは、大規模オンラインプラットフォーム（直近12か月の月間ユニークユーザー200万人超）に対して、投稿されたコンテンツに来歴データが入っているかを検出し、ラベルとして表示する義務が始まります。「来歴」とは、要するに何なのか 来歴、英語でいうプロベナンス（provenance）。もともとは美術品の世界の言葉で、「この絵は誰の手を経てここに来たか」という記録のことです。それをデジタルファイルに持ち込んだのが C2PA（Content Credentials）という規格になります。 やっていることはシンプルで、ファイルの中に「誰が」「どのツールで」「いつ」「どう編集したか」を署名付きで書き込む。技術仕様は2026年1月5日にバージョン2.3が公開されました。Googleは来歴の検証機能をまずGeminiアプリで提供し、検索とChromeにも順次広げると発表しています。Pixel 10のカメラアプリは、撮影したすべての写真に署名を付けます。AIで作ったものだけでなく、AIで作っていないものを証明する側にも同じ仕組みが使われ始めています。 私はAdobeのツールを25年ほど使ってきました。数年前、Photoshopの書き出し画面に「Content Credentials」という項目が増えたとき、正直に言うと何も考えずに素通りしていました。今はそこにチェックを入れるのが制作フローの一部になっています。あの頃スルーしていた小さなチェックボックスが、法律の名前で呼ばれる日が来るとは思っていませんでした。 ただし来歴は万能ではありません。スクリーンショットを撮る、画像を圧縮する、SNSにアップロードして再エンコードされる。この程度のことでメタデータは簡単に消えます。C2PAは証拠ではなく、あくまで手がかりです。「来歴がある＝本物」ではなく、「来歴がない＝何も分からない」というだけ。ここを取り違えると、ラベルのない古い写真がすべて疑わしく見えてしまいます。日本の発信者に、これは関係あるのか 結論から言うと、ブログ記事の本文については、たいていの場合は法的な義務の外にいます。 EU第50条(4)の文章に関する開示義務には、条文そのものに大きな除外規定があるからです。人間がレビューまたは編集上のコントロールを行い、自然人か法人が編集責任を負っている文章は、対象から外れます。AIに下書きを手伝わせても、自分で読んで直して自分の名前で出しているなら、ここに当てはまります。カリフォルニア側にいたっては、対象が画像・動画・音声だけで、テキストはそもそも入っていません。 もちろんEU向けにサービスや広告を出している、欧州拠点から動画を公開しているといったケースでは確認が要ります。それでも、日本の個人ブログにEUの制裁金がいきなり飛んでくる、という話ではありません。 けれど本当に効いてくるのは、罰則ではなく仕組みのほうです。 プラットフォーム側が来歴データを読んで自動でラベルを貼る流れが始まります。カリフォルニアでは2027年1月から義務になり、Googleは検証機能をGeminiアプリから提供し始めました。つまり、自分で何も書かなくても、機械が勝手に「AI生成」と表示する世界がもう組み上がりつつあります。 後から機械に貼られるラベルと、自分で最初から書き添えたひと言。同じ情報でも、読む人の受け取り方はまったく違います。前者は「隠していたのがバレた」に見えて、後者は「最初から言っていた」になる。この差は、記事の内容がどれだけ良くても埋められません。 だからAI利用の明示は、罰則を避けるための作業ではありません。法的には書かなくていい立場だからこそ、自分から書く。それが自分のコンテンツの信用を守る作業になる、と考えています。今日からできること 書いたところを、書く。 全工程を報告する必要はありません。「構成案はAIと壁打ちしました」「アイキャッチは画像生成AIです」「本文は自分で書きました」。この程度の一行を記事末に置くだけで十分です。むしろ細かすぎる開示は読みにくくなります。 画像の来歴を、途中で壊さない。 生成ツールの書き出し設定でContent Credentialsを有効にしておく。そのうえで、リサイズや圧縮のツールがメタデータを剥ぎ取っていないかを一度確認してください。私も画像圧縮を挟んだ時点で来歴が消えていたことがあり、工程を組み替えました。 表記のしかたを、サイト内で1つに決める。 記事ごとに書き方が違うと、書いていない記事が「AIを隠した記事」に見えてしまいます。文言と置き場所をテンプレート化して、全記事で同じにしておくのが安全です。まとめ2026年8月2日、EU AI法第50条とカリフォルニアAI Transparency Actが同じ日に動き出した。カリフォルニアは施行日を1月1日からこの日に延期している。 求められているのは、機械が読めるマークと、人が見て分かるラベルの両方。来歴（C2PA）はその土台だが、スクショや圧縮で簡単に消える手がかりでしかない。 人間が編集責任を負うブログ記事の本文は、EUの開示義務の対象外。カリフォルニアもテキストは対象にしていない。それでもプラットフォーム側が自動でラベルを貼る時代になるため、自分で先に明示しておくことが信用を守る。次に読むのがおすすめの記事【セミナー登壇記】高級シニアレジデンスでの60分間〜AI時代の「正しく疑う力」と人生経験の相乗効果〜 「やさしいAI」とは何か——便利さを超えた、人に寄り添うAIを考える参考文献・出典欧州委員会「EU AI法 第50条 透明性義務」適用開始（2026年8月2日）／ ITmedia NEWS EU Artificial Intelligence Act, Article 50: Transparency Obligations ／ artificialintelligenceact.eu EU Artificial Intelligence Act, Article 99: Penalties（制裁金・第99条(4)(g)および(6)） ／ artificialintelligenceact.eu 欧州委員会「Guidelines on transparency obligations for providers and deployers of AI systems」（2026年7月20日採択） ／ digital-strategy.ec.europa.eu California AB 853 (2025) California AI Transparency Act ／ California Legislative Information California SB 942 California AI Transparency Act ／ California Legislative Information Content Credentials C2PA Technical Specification 2.3（2026年1月5日） ／ spec.c2pa.org Google「How Pixel and Android are bringing a new level of trust to your images with C2PA Content Credentials」 ／ blog.google