Coding is in a FLUX | AIコーディング

【日曜コーディング】 先日話題になった「GPT-Realtime-Translate」を使った同時通訳アプリを作ってみました🎙️ 日本語の発話を即座に英語音声＋字幕で出力する構成です。 話し始めると直ぐに英語音声がでてくるのはスゴイ！対面会話で実用レベルに到達しました🔥 #バイブコーディング #claude

ClaudeをOpus 4.6に変え、frontend-designをアップデートした後にWebアプリ作らせてみた。 修正点が少ない満足いくアウトプットだったので、しばらくこの構成でいってみます！ #claude #バイブコーディング

参照元はこちらです。 SKILL.md（最新版） github.com/anthropics/cla… v1.1.0 更新コミット github.com/anthropics/cla… プラグインページ（インストールはここから） claude.com/plugins/fronte…

Claude Codeで56万人以上が使っている公式プラグイン「frontend-design」がv1.1.0に大型アップデートされました。AIが作るUIの「全部同じに見える」問題を解決するツールですが、今回はNGリスト方式をやめて、AI自身に「デフォルトに見えないか」とセルフ批評させる設計思想へ根本から変わっています。 ──────────────── ▎ABOUT │ frontend-designとは Claude Codeの「スキル」という仕組みを使った公式プラグインです。 SKILL.mdというMarkdownファイルに指示を書くと、Claudeがフロントエンドの作業時にその指示を読み込んで行動を変えます。 やっていることはシンプルで、コードを書く前に約1,300トークンのデザイン指針を読ませるだけです。 ファインチューニングでもビジョンモデルでもなく、ただのMarkdownファイル1枚。 にもかかわらず56万インストールを超え、Claude Codeで最も人気のあるプラグインになっています。 理由は「分布的収束」の問題です。 同じモデルが同じようなプロンプトを受け取ると、Interフォント、パープルグラデーション、3カードグリッドに収束してしまう。 frontend-designはこの問題に対する最もシンプルな回答でした。 ▎BEFORE │ v1.0.0の限界 v1.0.0のアプローチは直球でした。 「Inter、Roboto、Arialは使うな」「パープルグラデーション禁止」という明示的なNGリスト方式です。 効果はありましたが、一つ問題が起きました。 Claudeは禁止されたフォントの代わりにSpace Groteskを選ぶようになったのです。 v1.0.0自身がこれに気づき「Space Groteskに収束するな」と追記しましたが、フォントAを禁止すればBに逃げる。モグラ叩きです。 さらに「世代間で共通の選択に収束するな」と指示していましたが、Claudeの各会話は独立しており、前の会話で何を選んだかを知る手段がありません。 実行不可能な指示でした。 ▎AFTER │ v1.1.0の設計思想 v1.1.0を開くと、最初に目に入るのはこの一文です。 「他の誰とも間違えようがないビジュアルを、すべてのクライアントに提供する小さなスタジオのデザインリードとしてアプローチせよ」 v1.0.0が「これを使うな」と言っていたのに対して、v1.1.0は「こう考えろ」と言っています。 5つのデザイン原則が新設されました。 ・ヒーローは論文である: ページ冒頭に置くべきは、その主題で最も特徴的なもの。大きな数字＋ラベル＋グラデは「テンプレートの回答」と明記 ・タイポグラフィが個性を運ぶ: 表示用と本文のフォントを「他のどのプロジェクトでも選ばないペアリング」で決める ・構造は情報である: 01/02/03のナンバリングは内容が本当に順序を持つ場合だけ。装飾に構造を使わない ・モーションは意図的に: ページロード、スクロール、ホバー。どれが効くか選ぶ。アニメーション過多はAI生成感を助長する ・複雑さはビジョンに合わせる: マキシマリストなら凝った実装、ミニマルなら余白とタイポの精度に全振り ▎CORE │ 3つのAIデザイン・デフォルト v1.1.0で最も読み応えがあるのは、AI生成デザインの「デフォルト」を自己分析しているセクションです。 ✅ クリーム背景（#F4F1EA付近）にセリフ体とテラコッタのアクセント ✅ 真っ黒背景にアシッドグリーンか朱赤のワンポイント ✅ 新聞風の細罫線にゼロ角丸の密なカラムレイアウト どれも正当なデザインですが、音楽アプリでもセキュリティ企業のLPでも同じクリーム＋テラコッタが出てくるなら、それは「選択」ではなく「デフォルト」です。 v1.1.0はブリーフが方向を指定しているなら従え、自由度があるならこの3つに逃げるなと指示しています。 「雇われたデザイナーと同じように、得意なことをやるのと、各プロジェクトを実験の機会にするバランスがある」という表現が印象的です。 ▎HOW │ 2パスの設計プロセス 実務的な核は「2パス」の設計プロセスです。 brainstorm、explore、plan、critique、build、critique again。 まずデザインプランを「トークンシステム」として設計します。 ・カラー: 4〜6色のHEX値パレット ・タイプ: 表示用・本文用・補助用の2種以上のフォント ・レイアウト: ASCIIワイヤーフレームで比較検討 ・シグネチャ: そのページだけの記憶に残る独自要素 次に「同じようなページのために作っても同じプランになるか？」と自問させます。 同じになるなら、その部分を修正し、なぜ変えたのかを説明させる。 セルフ批評を設計プロセスに構造的に組み込んでいるのがv1.1.0の真骨頂です。 ▎NEW │ UXライティングの指針 完全に新設されたのがUXライティングのセクションです。 「コピーもデザインと同じくらいテンプレ化しうる」という問題意識から、UIテキストの書き方にまで踏み込んでいます。 ・ユーザーの側から書く: 「webhook config」ではなく「通知の管理」 ・アクションは具体的に: 「Submit」ではなく「Save changes」。ボタンが「Publish」なら完了トーストも「Published」 ・エラーは謝罪しない: 何が起きたか、どうすれば直るかを伝える ・空画面は行動への招待: 「データがありません」ではなく最初の一歩を促す ビジュアルだけ個性的にしても、ボタンが全部Submitならやっぱりテンプレに見える。 UIの印象はビジュアルだけでは決まらないという認識が加わりました。 ▎WHY │ シャネルの鏡 v1.1.0の哲学を象徴するのがこのセクションです。 「大胆さは一箇所に集中させよ。シグネチャ要素を唯一の記憶に残るものにし、周りは静かで規律正しく保て」 シャネルの「家を出る前に鏡を見て、アクセサリーを1つ外しなさい」まで引用しています。 v1.0.0の「遠慮するな、限界を見せろ」から「大胆さを散らすことがリスク」への転換です。 1つの大きなリスクを、抑制された文脈の中で際立たせる。 プロのデザイナーが実際にやっていることをプロンプトの形で教えようとしています。 ▎TLDR │ まとめ frontend-design v1.1.0は「何を禁止するか」から「どう考えるか」へのシフトです。 56万インストールを超えたClaude Code最人気プラグインが、AI生成デザインの質を構造的に底上げしにきました。 SKILL.mdはGitHubで公開されています。 1,300トークンのMarkdownですが、AIにデザインの判断力を持たせようとする試みとして一読の価値があります。 #ClaudeCode #AIデザイン #フロントエンド

参照元はこちらです。 ▎Fable 5 騒動 memeburn.com/claude-fable-5… ▎Claude Code Artifacts venturebeat.com/data/anthropic… ▎Mistral 3 tpsreport.news/news/mistral-3… ▎ChatGPT Dreaming V3 openai.com/index/chatgpt-… ▎Gemini CLI廃止 9to5google.com/2026/06/17/gem…

今週のAI、激動でした。Claude Fable 5が24時間でプロンプト漏洩→米政府規制でシャットダウン。Mistralが675B MoEをApache 2.0で公開。OpenAIがChatGPTのメモリを刷新。Claudeはセッションを「Artifacts」でURL共有化。GoogleもGemini CLIをAntigravity CLIへ統合。今週の主要ニュースをまとめます。 ──────────────── ▎NEWS │ Claude Fable 5：漏洩→規制→世界シャットダウン Anthropicが6月9日にClaude Fable 5をリリースしました。 公開から24時間以内に全システムプロンプト（約12万文字・1585行）がGitHubに流出しました。 流出後、競合他社へのリクエストを密かに劣化させる「サイレント格下げ」ルールの存在が発覚し、大きな批判を呼びました。 6月12日には米政府が輸出規制令を発動し、外国籍ユーザーへのアクセス遮断を命じました。 国籍リアルタイム確認が不可能なため、AnthropicはFable 5とMythos 5のアクセスを全世界で停止しました。 Anthropicは「誤解」と声明を出しており、Opus 4.8が当面の代替手段となっています。 その後、開発者コミュニティが漏洩プロンプトをOpus 4.8に適用し、Fable 5相当の挙動を再現しました。 ▎UPDATE │ Claude Code Artifacts：セッションをリアルタイムURLで共有 6月18日、Claude CodeのTeam・Enterpriseプラン向けに「Artifacts」機能が追加されました。 コーディングセッションの成果物をインタラクティブなHTMLページとして発行し、URLで共有できます。 AIが作業中も同じURLのページがリアルタイム更新され、更新履歴のロールバックも可能です。 ダッシュボードや分析結果をURLで送るだけでチームに共有できる、実務直結の機能です。 ▎OPEN │ Mistral 3：675B MoEをApache 2.0でオープン公開 6月18日、Mistral AIがMistral 3ファミリーを一挙公開しました。 目玉のMistral Large 3はアクティブ41B・総パラメータ675BのスパースMoEモデルで、Apache 2.0の無償公開です。 エッジモデルMinistral 3（3B・8B・14B）も同日Apache 2.0で公開されています。 音声合成Voxtral TTS（9言語・70ms遅延）や数学証明特化モデルLeanstralも同時にリリースされました。 Amazon Bedrock・Azure Foundryなど主要プラットフォームで今すぐ利用可能です。 ▎MEM │ OpenAI：ChatGPTのメモリが「Dreaming V3」へ進化 6月19日、OpenAIはChatGPTのメモリシステムをDreaming V3にアップグレードしました。 会話をバックグラウンドで整理し、古い記憶を自動更新する仕組みです。 「来月シンガポールに行く」が帰国後に「7月にシンガポールへ行った」へ自動書き換えされる例が示されました。 現在はアメリカのPlus・Proユーザーが対象で、他国・無料ユーザーへ順次展開予定です。 ▎SHIFT │ Gemini CLIがAntigravity CLIへ統合・廃止 6月17〜18日、GoogleはGemini CLIとGemini Code Assistのコンシューマー向けサービスを廃止しました。 後継はAntigravity CLIで、Google Antigravityプラットフォームのマルチエージェント対応バックエンドに統合されます。 「複数エージェントが連携する時代に、ツールを一本化する」という判断です。 ▎JAPAN │ 日本関連：AIサイバーセキュリティと広告 6月16日、SoftBankとOpenAIが「Patching as a Service」を東京で発表しました。 AIを使った脆弱性診断から修正提案まで一括サポートするサイバーセキュリティサービスです。 孫正義氏は「AIサイバー攻撃は日本にとって"黒船"になりかねない」と警告しました。 6月19日には、ChatGPTが日本でも広告表示のトライアルを開始しました。 無料版とGoプラン（月1,400円）のユーザーが対象で、電通デジタルと連携して提供されます。 ▎TLDR │ まとめ モデルリリース・ドラマ・プロダクト更新が一週間で同時に動いた、記憶に残る週でした。 Fable 5の騒動は「リーク→規制→コミュニティ復活」という異例の展開で、2026年のAIガバナンスの転換点となりそうです。 オープン勢（Mistral）も商用勢（Anthropic・OpenAI）も止まらないスピードで進化を続けています。 #AI #AIニュース #人工知能

参照元はこちらです。 Hermes agent v0.17.0 リリースノート: github.com/NousResearch/h… 公式サイト・ドキュメント: hermes-agent.nousresearch.com/docs/

197,000スターのOSSエージェント「Hermes agent」がv0.17.0をリリースしました。テーマは「The Reach Release」——届く場所をさらに広げる大型更新です。iMessage連携・Raft対応・バックグラウンドサブエージェント・画像編集機能など新機能が揃い、Write Gateでメモリ更新の承認制御も加わりました。 ──────────────── ▎ABOUT │ Hermes agentとは Nous Researchが開発するOSSの自己進化型AIエージェントです。 最大の特徴は「使えば使うほど賢くなる」学習ループで、会話の経験から自動でスキルを生成し、次回以降に再利用します。 記憶はセッションをまたいで蓄積され、過去の解決策を全文検索で素早く引き出すことができます。 MITライセンスで公開されており、GitHubでは197,000スター超・390人以上のコントリビューターが集まっています。 Telegram・Discord・Slack・WhatsApp・iMessageなど多数のチャンネルに対応し、$5のVPSからGPUクラスター・サーバーレス環境まで幅広く動きます。 ▎NEW │ v0.17.0「The Reach Release」主要機能 2026年6月19日にリリースされた最新バージョンです。 v0.16.0からの変更規模は1,475コミット・800以上のマージPR・245名のコントリビューターと、1ヶ月足らずで大規模なアップデートが届きました。 ✅ iMessage連携（Photon経由）：Appleデバイスからもそのままやり取りができるようになりました ✅ Raftエージェントネットワーク参加：複数エージェントが協調する分散ネットワークへの接続をサポート ✅ バックグラウンドサブエージェント：複数のサブタスクを並列実行し、メイン会話をブロックしない設計に ✅ 画像生成の編集機能：「ゼロから生成」だけでなく既存画像の編集・加工にも対応 ✅ Cursor Composer連携：xAI GrokサブスクリプションでCursorのComposerモデルが使えるように ✅ メモリツールの大型アップグレードとSkills Hubブラウザの全面刷新も同時に実施 ▎UPDATE │ 直近の注目アップデート v0.17.0の前後にも重要な変更が続いています。 6月10日に追加されたWrite Gate機能は、メモリ更新・スキル更新・スキル生成を承認/拒否できる制御機構です。 小さなモデルが誤学習しやすい環境や、本番への影響を慎重に管理したい場面で特に有効で、既存の「危険コマンド承認」と同じ仕組みで動きます。 6月17日にはCuratorのスキル統合処理がオプトイン制に変更されました。 フロンティアモデルを使っているユーザーでは自動統合だけで週$16ほどかかるケースもあり、デフォルトを「未使用スキルの削除のみ」に絞ることで、コストを大幅に抑えられる設計になりました。 統合が必要なときはconfigかダッシュボードから明示的に有効化できます。 ▎WHY │ これだけ注目される理由 Hermes agentはモデルトレーナーが作ったエージェントである点が独特です。 Nous ResearchはHermes・Nomos・Psycheなどのモデル自体を開発しており、LLMの挙動を深く理解したうえで設計されています。 リリースサイクルも速く、2026年3月のv0.3.0公開から毎月複数の大型アップデートを続けており、コミュニティ主導で急速に機能が拡充されています。 ▎TLDR │ まとめ v0.16.0でネイティブデスクトップアプリとWebダッシュボードを獲得し、v0.17.0でiMessage・エージェントネットワーク・バックグラウンド実行とさらに遠くまで手が届くようになりました。 自己進化・マルチチャネル・コスト制御が揃った今、Claude CodeやCursorと並べて試す価値があるエージェントに仕上がっています。 #HermesAgent #AIエージェント #OSS

参照元はこちらです。 Anthropic公式 claude.com/product/design VentureBeat venturebeat.com/technology/ant… Fast Company fastcompany.com/91561193/anthr…

Claude Designが6月17日に大型アップデートされました。デザインシステムの取り込み、Claude Codeとの双方向連携、トークン消費の改善と、今回の変更は多岐にわたります。初週に100万ユーザーを集めたプロトタイピングツールが、デモから企業のデザインワークフローの起点へと本格的に進化しています。 ──────────────── ▎ABOUT │ Claude Designとは 4月17日にAnthropicが公開したAIデザインツールです。 テキストで「こんな画面がほしい」と伝えると、Claude Opus 4.7がHTML・CSS・JavaScriptでプロトタイプを生成します。 静的なモックアップ画像ではなく、ブラウザで動く実際のコードが出力される点が特徴です。 スライド、LP、ダッシュボード、管理画面など、ビジュアル系の制作物を幅広くカバーしています。 Pro・Max・Team・Enterpriseプランで利用可能で、初週だけで100万人以上が利用しました。 ▎NEW │ 今回のアップデートの背景 大きな話題を集めた一方、「トークンを大量に消費する」という問題が浮上していました。 あるレビュアーはWebページのプロトタイプ3パターンを作っただけで、週間クォータの80%を使い切ったと報告しています。 また、デザインシステムへの準拠が不安定で、出力がClaude独自のセンスに寄ってしまう傾向もありました。 Anthropicのデザイナー Nate Parrott氏は「実際の企業が求める定性的な一貫性を登れるよう、継続的に改善してきた」と語っています。 今回のアップデートは、これらの課題に正面から応えるものです。 ▎CORE │ デザインシステムの取り込み 最大の目玉は、デザインシステムのインポート機能の刷新です。 GitHubリポジトリ、デザインファイル、直接アップロードの3経路から、自社のデザインシステムを取り込めるようになりました。 Claudeは取り込んだコンポーネントで設計し、出力をデザインシステムと照合して自動修正してから表示します。 つまり、ユーザーが結果を見る前に「ブランドに合っているか」をClaudeが自分でチェックする仕組みです。 管理者ロールも新設され、承認済みのデザインシステムをロックして編集を制限できます。 大規模なチームでも、全員の出力がブランドガイドラインに沿うよう統制が取れるようになりました。 ▎CODE │ Claude Codeとの双方向連携 2つ目の柱は、Claude Codeとのシームレスな接続です。 Claude Codeで /design-sync を実行すると、ローカルコードベースのReactコンポーネント等がClaude Designに同期されます。 プロトタイプが実際のコンポーネントから始まるため、「見た目は良いけどコードに落とすと別物」という問題が減ります。 完成したデザインはハンドオフバンドルとしてClaude Codeに渡せます。 スクショも再構築も不要で、そのまま実装に移れるのが大きいです。 逆方向もあります。Claude Codeのターミナルで /design と打てば、開発環境を離れずにデザインの作成・編集・同期ができます。 デザイナーとエンジニアが同じコンポーネントライブラリ上で行き来できる設計は、かなり実用的です。 ▎EDIT │ エディタの刷新 地味ですが重要な改善がエディタです。 キャンバス上で要素をドラッグ、リサイズ、整列できるようになりました。 フォント変更やボタンスタイルの調整など、以前はプロンプトで指示していた微調整が直接操作で行えます。 小さな変更のたびにモデルの再生成が走らなくなるため、トークンの節約にもつながります。 数百件の安定性修正も含まれており、日常ツールとしての信頼性が底上げされています。 ▎FIX │ トークン消費の改善 Claude Designの使用制限がチャット・Cowork・Claude Codeと統合されました。 以前は別枠で小さめの制限があり、すぐ上限に達していたのが解消されています。 エンジニアリング側の最適化も進み、Opus 4.8でデザインを作成した際にデイリークォータの28%で済んだというレポートもあります。 「人々はClaudeのトークンをもっと欲しがっている」とParrott氏が語るように、ここは引き続き注目のポイントです。 ▎LINK │ 外部ツール連携の拡大 エクスポート先がPDFとPowerPointに加え、Adobe、Canva、Gamma、Lovable、Miro、Replit、Vercel、Wix、Base44に拡大しました。 Excelで作った財務モデルをClaude Designでピッチブックにし、PowerPointへ書き出す。 ブランドアセットを作ってCanvaに送り、チームでコラボレーションする。 こうした「Claudeエコシステム内での連続的なワークフロー」がいよいよ現実味を帯びてきました。 VentureBeatはこの動きを「チャットボット戦略ではなく、プラットフォーム戦略だ」と評しています。 ▎TLDR │ まとめ デザインシステム準拠、コードとの往復、エディタ刷新、トークン効率化、外部連携の拡大。 Claude Designは「AIが何か作ってくれるデモ」から「企業のデザインワークフローの起点」へと明確に舵を切りました。 Figmaの代替ではなく、Figmaの上流にあるラピッドプロトタイピングの居場所を狙っている印象です。 Google StitchやVercel v0など競合も多い領域ですが、Claude Codeとの一気通貫の連携はAnthropicならではの強みです。 #ClaudeDesign #Anthropic #AIデザイン

参照元はこちらです。 Design Arena Leaderboard designarena.ai/leaderboard Z.ai公式ブログ（GLM-5.2） z.ai/blog/glm-5.2 HuggingFace（MITライセンス・オープンウェイト） huggingface.co/zai-org/GLM-5.2

ウェブデザインの実力を競うDesign Arenaで、中国発のオープンモデルが初の総合1位を獲得しました。何ヶ月もトップを独占してきたClaude Fable 5やOpusシリーズを抑えた初のモデルです。しかもMITライセンスで誰でも使え、API価格は約7分の1。1000件のサイト分析から見えた3つの勝因をまとめました。 ──────────────── ▎WHAT │ オープンウェイトが王座を奪った Design Arenaの「Non-Agentic Web Design」部門で、GLM-5.2がElo 1360を記録して総合1位になりました。 前世代のGLM-5.1から4ランクアップ、27 Eloポイントの躍進です。 Claude Fable 5、Opus 4.6、Opus 4.7を抑えた初めてのモデルで、Design Arena史上でも最高クラスのスコアです。 パラメータは744B（アクティブ40B）のMoE構成で、ビジョン機能はありません。 競合は最大6.7倍のサイズと推測される中、この結果はインパクトがあります。 ▎WHY1 │ 美しいテンプレート群 Design Arenaチームが1000件のサイトを分析して、3つの勝因を突き止めました。 1つ目は「出力のベースとなるテンプレートの質」です。 GLM-5.2はプロンプトが違っても、洗練された共通の型をベースにサイトを生成します。 初期のAIモデルを悩ませた紫グラデーションのようなアンチパターンを含まず、平均品質が安定して高いのが特徴です。 対するFable 5は出力の多様性が強みで、プロンプトごとに異なるデザインを生み出します。 テンプレート型と多様性型、アプローチの違いが順位差に表れた形です。 ▎WHY2 │ ライブラリをミスなく使いこなす 2つ目は「外部ライブラリのエラー回避力」です。 chart.jsやthree.jsなど他のモデルが失敗しがちなライブラリを自然に呼び出し、使用セッションの21%で勝率が6ポイント上昇しました。 TailwindCSSの利用率は91%で、Opus 4.8の57%を大きく上回ります。 Font Awesomeも51%のセッションで活用し、繊細なデザインインタラクションを実現しています。 外部CDN画像の活用やレイアウトのセンスも、他モデルより一歩先を行きます。 ▎WHY3 │ 緻密で長い出力 3つ目は「出力の量と精巧さ」です。 アニメーション、タイポグラフィの変化、凝ったレイアウトを備えた精巧なサイトを生成します。 テスト時のコード量は他モデルより25%多く、平均生成時間は304.7秒とFable 5の約2倍。 速さと引き換えに、完成度と密度を取る戦略です。 一方でFable 5は競合より38%少ないコード量で高品質を実現しており、効率面では対照的です。 ▎COST │ 7倍安いフロンティア API価格はInput $1.40 / Output $4.40（100万トークンあたり）です。 Fable 5の$10 / $50と比べると、約7倍のコスト差があります。 MITライセンスなので商用利用もファインチューンも自由。HuggingFaceからダウンロードしてセルフホストできます。 IndexShareという新アーキテクチャで、1Mコンテキスト時の計算量を2.9倍削減しているのも技術的な見どころです。 ▎LIMIT │ すべてを制覇したわけではない Fable 5はGame Dev、Data Visualization、3Dデザインで依然1位です。 UIコンポーネント部門ではGLM-5.2は4位にとどまります。 最難関のSWE-Marathonでは13.0%で、Opus 4.8の26.0%に大きく後れを取ります。 生成時間が2倍かかる点も、スピード重視のワークフローでは気になるところです。 また「テンプレートへの過学習では」という指摘も一部にあり、今後の検証が待たれます。 ▎TLDR │ まとめ オープンウェイトのモデルが、クローズドの最強モデルをデザイン評価で初めて破りました。 テンプレート品質、ライブラリ活用、出力密度という地道な改善の積み重ねが、この結果を生んでいます。 オープンソースのフロンティアがこの速さで動いているという事実が、いちばん印象的です。 #GLM5 #DesignArena #生成AI

参照元はこちらです。 claude.com/blog/artifacts…

Claude Codeの作業がリアルタイム更新されるWebページに変わります。6月18日にリリースされた新機能Artifactsは、PRウォークスルーやインシデント調査、ダッシュボードなど、セッションの全コンテキストからライブページを自動生成します。同じURLで常に最新版に更新され、チーム全員で共有できます。 ──────────────── ▎NEW │ Artifactsとは Claude Codeのセッション中に「ページにして」と頼むだけで、作業内容がインタラクティブなWebページとして生成されます。 コードベース、接続したモニタリングツール、会話の推論。セッションが持つすべてのコンテキストが1枚のページに集約されます。 データソースの接続やインフラ構築は一切不要です。 「このPRをウォークスルーにして」「インシデントをページにまとめて」と言うだけでページが生まれます。 ▎CORE │ リアルタイム更新という衝撃 生成されたページは静的なエクスポートではありません。 Claude Codeが作業を進めるたびに、開いているページがその場でリフレッシュされます。 チャートもテキストも同じURLで自動更新。チームメンバーは更新された瞬間にそれを見ることができます。 バージョン履歴が毎回残るので、いつでも過去の状態にワンクリックで戻せます。 ギャラリー機能で自分が作った全Artifactsを一覧・管理することも可能です。 ▎HOW │ 職種別のユースケース 公式ブログでは職種ごとの具体的な使い方が紹介されています。 ✅ エンジニア：PRの差分・変更理由・テスト内容をまとめたレビューページを生成 ✅ SRE・オンコール：インシデントのタイムライン、容疑コミット、エラー推移を1ページに集約。調査が進むとページ自体がポストモーテムに育つ ✅ セキュリティ：認証まわりのレビュー結果を、該当コード行へのリンク付きでまとめる ✅ 法務・OSS管理：全依存パッケージのライセンス監査。コピーレフトを自動フラグ ✅ アーキテクト：実際のimportグラフからサービス構成をマッピング。ホワイトボードではなくコードから図を起こす ✅ デザイナー：実コンポーネントを使ったUXバリエーションを複数案並べて比較 ✅ EMマネージャー：マージ済みPRをプロジェクト別にまとめた週次成果ページ ▎WHY │ 社内で最も多い使い方はデバッグだった Anthropicのエンジニアが実際に一番使っていたのはデバッグだそうです。 朝会前にインシデント調査を開始して、Artifactのリンクをチームに共有しておく。 Claude Codeがログを読み解くたびにページが自動更新されるので、朝会が始まるころにはタイムライン・容疑コミット・エラー率チャートが揃っている。 「エージェントが何を見つけたか説明して」という時間が不要になります。 VentureBeatの記事ではAnthropic社のBoris Cherny氏が「Artifactsはゲームチェンジャーだ」とコメントしています。 ▎ABOUT │ エンジニア以外にも届く これまでAIコーディングツールの出力を見るには、ターミナルやIDEを開く必要がありました。 Artifactsはブラウザで開けるので、プロダクトマネージャーやデザイナー、コンプライアンス担当者も技術的な作業結果にそのままアクセスできます。 「ツールをインストールして」「ログを読み解いて」ではなく、リンクを開くだけです。 これは単に便利というだけでなく、AI作業の透明性そのものを変える動きです。 ▎WARN │ 知っておくべき制約 現在ベータ版で、Team・Enterpriseプラン限定です。 ページは組織内の認証済みメンバーにのみ共有可能。外部公開する手段はありません。 管理者がロールベースのアクセス制御・保持ポリシーを設定でき、コンプライアンスAPIで組織全体の利用状況を監視できる設計です。 Bedrock・Vertex AI・Foundry経由では使えず、Anthropic API直接接続かつ /login でのサインインが必要です。 APIキーやゲートウェイトークンでの認証ではパブリッシュできません。 CLIとデスクトップアプリ（v1.13576.0以降）で利用可能。Agent SDKやGitHub Actionからはデフォルトで無効です。 ▎TLDR │ まとめ AIコーディングツールの出力が「コード」から「チームが見れるページ」に変わりました。 ターミナルの中で完結していたAIの作業が、ブラウザで誰でも見られる成果物になる。 エンジニア以外のメンバーにもAIの仕事がそのまま届く時代の始まりです。 #ClaudeCode #Artifacts #AIコーディング