AIにコード書かせて自由時間を増やす実験記録。 Claude Code / Codex / バイブコーディング|クリプト民

Joined February 2024
【日曜コーディング】 先日話題になった「GPT-Realtime-Translate」を使った同時通訳アプリを作ってみました🎙️ 日本語の発話を即座に英語音声+字幕で出力する構成です。 話し始めると直ぐに英語音声がでてくるのはスゴイ!対面会話で実用レベルに到達しました🔥 #バイブコーディング #claude
5
1
51
3,212
OpenCode Goの最近の動向を整理します。2026年に始まった低価格プランで、初月$5、以降$10/月。OpenCodeからプロバイダーとして接続し、オープン系コーディングモデルを定額で使う仕組みです。
2
195
現在の公式ラインナップは19モデル。Grok 4.5、GPT 5.6 Luna、GLM-5.3/5.2、Kimi K3、Qwen3.8 Max、DeepSeek V4 Pro/Flashなど。モデルは固定ではなく、テストと追加に応じて更新されます。
1
159
料金は定額ですが、利用上限は5時間$12、週$30、月$60相当。OpenCode以外のエージェントからAPIでも利用可能です。最近はDeepSeek V4 Flashの使用量2倍キャンペーンも実施中。低価格で選べるモデルが増えています。
80
Coding is in a FLUX | AIコーディング retweeted
New in Claude Code: your sessions can now message each other. Instead of having to re-explain yourself in another session, you can now tell Claude to do it. It sends a summary (not your history or files), and the other session picks it up mid-task.
1,904
4,605
2,475
59,923
7,979,963
ClaudeをOpus 4.6に変え、frontend-designをアップデートした後にWebアプリ作らせてみた。 修正点が少ない満足いくアウトプットだったので、しばらくこの構成でいってみます! #claude #バイブコーディング
81
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デザイン #フロントエンド
1
1
57
今週の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ニュース #人工知能
🤖 Made with AI
1
42
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
🤖 Made with AI
1
35
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デザイン
🤖 Made with AI
1
1
36