おはようございます。マイクです。
時刻は朝7時を少し回ったところ、2026年1月31日・土曜日の朝、いかがお過ごしでしょうか。
この番組「zenncast」では、Zennで話題になっているトレンドの記事をピックアップして、コーヒー片手にゆるっと、でも中身はぎゅっと濃くご紹介していきます。

今日はお便り紹介はお休みで、そのぶん技術ネタたっぷりでお届けしていきますね。

さて、きょう紹介する記事は全部で5本です。
AIコーディング、マルチエージェント、Figma連携、認証フレームワーク、そしてデザインとコードの統合ツールまで、かなり広いレンジで攻めていきます。それぞれ要点をぎゅっとまとめてお話ししますので、気になった記事はあとでショーノートからじっくり読んでみてください。

まず1本目。
タイトルは「Claude Code Orchestra: Claude Code × Codex CLI × Gemini CLIの最適解を探る」。
これ、名前からしてすでにかっこいいんですけど、「単一のAIコーディングエージェントでは全部を高水準でこなすのはムリだよね」という前提からスタートしています。そこで、Claude Codeを“指揮者”、Codex CLIを“深い推論担当”、Gemini CLIを“リサーチ担当”として、三位一体で動かすテンプレートを提案しているんですね。
ポイントは、`.claude/docs/`に知識ベースを集約して、3つのエージェントから共通参照できるようにしているところ。さらに6種類のHooksでユーザーの操作を監視して、「今はCodexに設計レビューを回そう」とか「ここはGeminiで広めのリサーチしよう」といった協調提案を自動で出してくれます。重い設計・デバッグはCodexにバックグラウンドで投げて、1Mトークン級の大規模リサーチはGeminiに任せ、その要約をClaudeが受け取って計画を組み立てる、という分業体制ですね。
/​startprojectコマンドを叩くと、「Geminiリサーチ→Claude計画→Codexレビュー→タスク分解→設計ドキュメント更新→別セッションでCodexレビュー」と、6フェーズのフローが走るのもおもしろいところです。さらに/checkpointingでセッション履歴を保存して、そこから「スキル」を抽出していく仕掛けもある。Everything Claude Codeや、MCPをガチガチに組むスタイルと比べて、Skillsとサブエージェントを土台にしたほうが、安定性・コンテキスト保護・ワークフローの再利用性が高いのでは、と整理してくれています。既存プロジェクトに.gitごとディレクトリをコピーすれば導入できる“テンプレ”としてまとまっているので、「とりあえずAI三人体制でやってみたい」という人にはかなり実用的な記事になっています。

。。。。

続いて2本目。
タイトルは「Claude CodeのHooksをハックして自律駆動するマルチエージェントを作った」。
さっきは「Orchestra」でしたが、こちらはもっと“ハック寄り”の事例です。Claude CodeのHooks機構、具体的にはSessionStart、UserPromptSubmit、PostToolUse、Stopといったイベントにフックして、stdoutをコンテキストに突っ込むだけ、というシンプルな仕組みの上に、かなり本格的なマルチエージェント環境を構築しています。
肝になっているのは、task_stack.jsonと、status配下のファイル群を“単一の情報源”として扱う設計。毎ターンHooks側でそれらを読み直すことで、コンテキストの抜けや圧縮による忘れを補っているんですね。OpenH264のYUV444対応という、けっこう骨太なプロジェクトで試していて、最初は依存関係を無視したり、グローバル設定が干渉したりして、タスクが大量失敗するんですが、Hooksで問題検出→自己診断→task_stack_managerの修正、という流れを自律的に回すことで、だんだん安定していく。フィードバックループがちゃんと機能する、という実証になっています。
数字もなかなかインパクトがあって、運用65日で44億トークン消費、API換算だと約1.5万ドル。でも、Claude Maxの月額2か月分＝400ドルくらいで賄えた、というコスト対効果も示されています。一方で、まだコンテキスト圧縮やサーキットブレイカー、状態永続化まわりの脆弱性、コスト構造など、未解決の課題もきちんと明示。いきなり全部やるのではなく、まずはSessionStartとUserPromptSubmitのHookから段階導入するのが現実的だよ、と提案していて、「マルチエージェントやってみたいけど怖い……」という人への良いガイドになっています。

。。。。

3本目は、デザインからのフロント実装に興味ある方に刺さりそうな内容。
タイトルは「Figma x Claudeでフルでコーディングしてみた」。
この記事の筆者は、HTML（twig）のコーディングをほぼClaudeに任せて、実際の進め方やつまずきポイントを丁寧に記録しています。まず、CSSやHTML、アクセシビリティ、twig運用、画像形式などのルールを、プロジェクトの「CLAUDE.md」にきっちりまとめるところからスタート。作業中に「これ、毎回同じ注意してるな」と気づいた項目は、その都度ルールとして追記して、精度を上げていくスタイルです。
とはいえ、ルールはしばしば無視されるので、指摘し直したり、サブエージェントを活用したりと、完全自動ではなく“運用でカバー”しているところも正直に書かれています。Figma MCPの使い方としては、一度に依頼する範囲を、人間が通常実装できるくらいの粒度まで細かく分割すること、そしてFigma側のオートレイアウトなどをちゃんと整えることが重要だと分かったそうです。
面倒な計算、たとえばリキッドレイアウト用のclampの値や、line-heightを考慮したマージン算出などは、スラッシュコマンド化して“AIに投げれば一発”にしてしまう工夫も紹介されています。動きのあるインタラクションに関しては、ホバー動作などを録画した動画をClaudeに渡して、そこからコード生成用のプロンプトを書いてもらう、というちょっとおもしろいワークフローも出てきます。
全体として、「AIコーディングはかなり強力だけれど、ルール設計とプロンプト、そしてワークフローのチューニングが本当に大事」という結論で、実体験ベースでの“成功例と失敗例”が詰まった記事になっています。

。。。。

4本目は少しテーマを変えて、Webアプリの認証まわり。
タイトルは「Better Authを理解する」。
動的なWebアプリにおいて「ログインってそもそも何？」というところからちゃんと定義し直してくれているのがまず良いですよね。ここでは、「サーバーが検証可能な秘密情報、たとえばセッションなどをクライアント側に保存する行為、それがログインだ」と整理しています。クライアントに保存されるのは、だいたいCookieですよね、という話。
Better AuthはTypeScript向けの認証・認可フレームワークで、`betterAuth`のインスタンスから`/sign-in/*`や`/get-session`といったHTTPエンドポイントが自動で生えてきて、HonoやNext.jsに簡単にマウントできるようになっています。フロント側には`authClient`、サーバー側にはネットワーク越しではない`auth.api`というインターフェースが用意されていて、Cookie（ヘッダー）を明示的に扱うのか、あるいは暗黙的に扱うのかをちゃんと分けて設計しているのが特徴です。
認証方法は`provider`という概念で抽象化されていて、Googleなどのソーシャルログインは`socialProviders`、メール＋パスワードは`emailAndPassword.enabled = true`といった感じで有効化。ユーザーの永続化には`database`設定が必要ですが、設定しなければインメモリ保存にもできる。ここがポイントで、「認証方法」と「データ永続化」が独立しているので、その場限りのソーシャルログインみたいなケースでは、必ずしも永続化を強制されない、という柔軟さがあります。
さらに、プラグイン経由でOIDCなど多様なIdPにも手広く対応できるようになっていて、TypeScriptでモダンな認証基盤を考えている人には、概念整理の入門としても、具体的な選択肢としても役立つ内容になっています。

。。。。

そして5本目。
タイトルは「さよなら、Figmaからのコピペ。Pencil.devでデザインをコードとして管理する」。
デザインとコードの“分断”にモヤモヤしているフロントエンドの方には、かなり刺さりそうな記事です。Pencil.devは、「VS CodeやCursorの中で動く、AI搭載のプログラマブルなデザインツール」という位置づけで、エディタ内にキャンバスがあって、そこでAIと一緒にUIを組み立てると、裏側でReact + Tailwindのコードが自動生成されます。
おもしろいのは、キャンバスでの見た目編集と、tsxファイルの編集が双方向リアルタイム同期される点。つまり、デザイナー的な感覚でキャンバスをいじってもいいし、開発者っぽくコードをいじってもよくて、どちらから触っても片方が追従する。さらに、デザインはテキストベースの.pencilや.penファイルとしてGit管理できるので、PRにもロールバックにも“デザイン変更”が乗ってくる、という世界観です。
「ログイン画面をダークモードで」といった自然言語プロンプトから一気にUIを立ち上げる“Vibe Coding”にも対応していて、v0.devやBolt.newと比べると、「既存のVS Code + Gitフローの中に自然に溶け込む」ことが一番の強みとして紹介されています。導入にはMacかLinuxが推奨で、VS Code拡張とClaude Codeの設定が必要、さらにEarly Access中で、Claude APIのコストにも注意が必要といった前提条件も正直に書かれているので、「いきなり本番導入」というより、まずはフロントエンドエンジニアがサイドプロジェクトやチームのR&Dとして試す価値があるツールだよ、という締め方になっていました。

。。。。

というわけで、きょうは全部で5本、AIコーディングのオーケストレーションから、Hooksを駆使したマルチエージェント、Figma連携でのコーディング実践、TypeScript向けの認証フレームワークBetter Auth、そしてVS Code内で動くデザイン×コードツールPencil.devまで、一気にご紹介してきました。
気になったキーワードやツールがあった方は、ぜひショーノートから元の記事に飛んで、細かい設定例や実際のワークフローをチェックしてみてください。

番組「zenncast」では、感想や「こんなテーマを取り上げてほしい！」といったリクエストもいつでも募集中です。AIコーディングの失敗談なんかも大歓迎ですので、ぜひ気軽に送ってください。

それでは、きょうも良い一日をお過ごしください。
お相手はマイクでした。また次回のzenncastでお会いしましょう。