「Claude」の作業を「GPT-5.4」が批判、「GitHub Copilot CLI」に新機能「Rubber Duck」／AIのセカンドオピニオンで問題の芽を摘み取る
Claude Codeに特化したデザインシステムを作って工夫したこと｜坪田 朋
こんにちは、坪田です。 前回のClaude記事で触れた、Claude CodeやAI最適化したデザインシステムを作ってみたのでまとめです。 Claude Codeが生成するUIの品質が安定しない課題最初の頃は、何か作っても 「いかにもAIが作りました」感のあるデザインで生成されてしまう ストレスがあって、例えば、コンポーネントに強めのシャドウをかけたり、カードUIの上部に強めのカラーバーを付けたりしてイマイチだった。 「いい感じに」とか「シンプルに」と指示してもダメで、AIには「いい感じ」の基準がなく、 基準がないから、学習データの中で「よくあるデザイン」を確率的に再現してしまう。 その結果、同じプロダクトなのに、画面ごとに微妙にボタンの高さが違ったり色のトーンがズレる、スペーシングがバラつくし、AIはやたらと絵文字を多用するのが課題だったので、Claude Code開発に適したデザインシ
コードを書くのをやめた。Claude Codeに月商300万のSaaSの全コードを書かせ、完全ソロ運用しているという話。
コードを書くのをやめた。Claude Codeに月商300万のSaaSの全コードを書かせ、完全ソロ運用しているという話。 私は現在、B2B向けのニッチな自動化APIミドルウェアをSaaSとして完全な個人で運用し、広告費ゼロ・従業員ゼロで毎月およそ300万円ほどのMRR、定額の月次収益を生み出している。しかも実を言うと、この半年間、エディタを開いて人間が手入力する従来のコーディング作業など1秒たりともおこなっていない。ローカルのターミナルからClaude Codeを呼び出し、AIに要件と仕様を突っ込んでシステム全体を保守拡張させているだけだ。 コードを手書きする時代は終わった。ではエンジニアは何をすれば勝てるのか。本当に機能するAIネイティブ時代のSaaS個人開発と、B2Bマーケティングの泥臭い現実を、書き殴っておく。 エディタを捨てろ。Claude CodeとStripeの組み合わせで人間
Playwright + OWASP ZAP + Claude Code で E2E テストから脆弱性診断まで一気通貫でできるかやってみた
はじめに 最近、他チームのエンジニアが「Playwright で書いた E2E テストを OWASP ZAP に通して脆弱性診断をやってみた」という話を聞きました。 「E2E のシナリオってそのまま脆弱性診断にも使えるの？」 気になったので自分でも試してみました。その記録です。 やったこと（全体像） シンプルな Todo アプリを題材に、以下の流れで試しました。 1. Next.js で Todo アプリを構築 2. Playwright で E2E テスト（12シナリオ）を作成 3. バックエンドを FastAPI + MySQL に変更（Docker） 4. E2E シナリオを ZAP プロキシ経由で実行 → 脆弱性診断
Claude Codeで仕様駆動開発、tsumikiが良かった
はじめに 前回の記事では、Claude Codeに出戻りした話と、コンテキストエンジニアリングの考え方について書いた。 今回は「じゃあ実際に実務でどう使うの？」という話だ。 個人開発のプロジェクトなら思いついたままにClaude Codeを走らせて実装すればいい。それはそれで楽しいし、それなりの成果物もできる。 ただ、それでは再現性がない。 以前書いた記事でも触れたが、モデルの精度が上がったとはいえAIはいまだにガチャだ。何かを作るたびに品質がブレる状態では実務には持ち込めない。 そこでたどり着いたのが、仕様駆動開発（Spec-Driven Development） だ。 仕様駆動開発とは 仕様駆動開発とは、以下の工程を経て実装に至る開発フレームワークだ。 人間がやること：要件定義と設計をAIと徹底的に壁打ちして、曖昧さを潰す AIがやること：タスク化以降の実装フェーズ 以前の記事で書いた
Claude Codeを加速させる私の推しスキル・ツール・設定（Findyイベント登壇資料）
本記事は、Findyイベント「鹿野さんに聞く！Claude Codeをさらに加速させる私の推しツール」の登壇資料です。 Claude Codeの開発を加速させるための推しスキル・ツール・設定を紹介しています。 Claude Codeのためにターミナルを素早く起動したい Raycastショートカット + スニペットを使う Raycastとは、様々な機能を呼び出せるランチャーアプリ Alfredやspotlightみたいなもの Raycastを使い、hotkeyキー1発でアプリを起動できるようにする Windowsでも動作する 私は ⌥⌘T で起動させている ターミナルのT Claude Codeを素早く起動したい スニペットを使う 私はRaycastのスニペット機能を使っている 短い入力（例c;）でClaude Codeを起動できるように Claude Codeの起動と同時にプロンプトを実行
Claude Code Skills (Agent Skills) 入門【社内勉強会スライド】 | DevelopersIO
社内のチームメンバー(クラウド事業本部コンサルティング部)向けに 「 Claude Code Skills (Agent Skills) 勉強会 」を開催しました。 DevelopersIO向けに調整したスライドを掲載します。 スライドの内容:テキスト情報を以降に記載します。参考になれば幸いです。 勉強会の目的 勉強会の背景やゴール、アジェンダを連携します。 背景 Skills がアツいです🔥 Claude Code (AIエージェント)の動きを 自分好みにカスタマイズ できる拡張機能 手軽に作れて、手軽に共有できます この勉強会のゴール 参加者全員が Skills をセットアップ して、基本的な使い方を理解する 普段の業務での活用方法を参加者全員で探索 する 参加者の知見やアウトプットを引き出す 期待する成果 この時間: Skills のセットアップ完了 + 基本的な使い方の理解 今後
Claude Code / Codex ユーザーのための誰でもわかるHarness Engineeringベストプラクティス
カスタムリンター戦略: エージェント向けルールの設計 Factory.aiの4カテゴリ Factory.aiがオープンソースで公開したeslint-pluginは、エージェント向けリントルールを4カテゴリに分類しています。 Grep-ability(検索容易性): デフォルトエクスポートよりnamed exportを強制。一貫したエラー型と明示的なDTO。エージェントがコードベースをgrepで走査する際の命中精度を高める Glob-ability(配置予測可能性): ファイル構造を予測可能に保つ。エージェントがファイルを確実に配置・発見・リファクタリングできるようにする アーキテクチャ境界: クロスレイヤーのインポートをブロック。ドメイン固有のallowlist/denylistで依存方向を強制 セキュリティ/プライバシー: 平文シークレットのブロック、入力スキーマのバリデーション強制、e
Claude Code on the Web でスマホだけでアプリを開発しリリースしてみた
どうも、@ruwatana です 🙂 tl;dr Claude Code on the Web とともに、ほぼスマホだけでアプリをゼロから作って約2週間でリリースできていい感じでした！ ※ 本記事では Claude Code on the Web の開発体験にフォーカスします スマホでアプリ開発ができたなら・・・ 通勤などの外出中のちょっとした空き時間、自宅でも PC を開かずリビングやベッドでスマホからアプリ開発ができたらいいのにな〜と近頃ずっと考えていました。 できます。 そう、Claude Code on the Web なら。 Claude Code on the Web とは Claude Code on the Web （ウェブ上の Claude Code）は、Anthropic が 2025年10月20日 に発表した、ブラウザおよびアプリから直接コーディングタスクを依頼でき
Claude Opus 4.6で作る、PowerPointでそのまま編集できる高品質スライド｜IT navi
AIを使ったスライド作成は以前から可能でしたが、作った後に編集できないという課題がついて回りました。例えばNotebookLMでは、多彩なデザインのスライドをpptxファイルとして出力できるものの、各ページが1枚の画像として埋め込まれるため、文字や図表を後から修正するのが困難です。 その点、Claudeで作成したスライドはパーツごとに分かれたpptxファイルとしてダウンロードできるため、PowerPoint上でそのまま編集できるのが大きな強みです。さらに、専用のスキルを活用すれば、洗練されたデザインのスライドを安定して繰り返し生成できます。 本記事では、このパワポスライド作成用スキルの作り方と使い方を解説します。今回作成したスキルも公開しますので、ぜひご活用ください。 １．パワポスライド作成用スキルの作り方(1) 参考にするスライドの準備最初に、参考にするスライドやスライド作成のためのプロ
AIのやりすぎで頭がおかしくなっている - 運河
最近AIをやりすぎている。自分でもわかるくらい頭がおかしくなっている。 まともな状態ではないから、本来は人に見える場所に文章を書いたりするべきではない。ただ、自分の状態を精神状態を記録するために書いておきたい。 初めに書いておくが、この文章では一切AIを使っていない。というのもAI使うと、さらにおかしくなりそうだからだ。調査にも構成にも使っていない。100%生身、ピュアで粗雑な状態で僕が言葉を選んで書いている。 これまでもテクノロジー全般は好きで、これまでもChatGPTなどを使って仕事の調査をしたり引っ越しをしたり英語学習に活用したりしてきた。今年のAIは、昨年までとは一味違う人間の気を狂わせる何かがあると感じている。 仕事でのソフトウェア開発の話を最初にする。多少技術的になってしまうけど、これが入り口で僕はおかしくなったし、最も急激に変化している部分なので話さないといけない。 AIコー
デスクトップ Claude Code の Preview 機能で UI を直接確認する
Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Claude Code のデスクトップアプリに新しい Preview 機能がリリースされました。これを使用すると、コードから起動したアプリケーションの UI を直接確認しながら、同時にログやコードも確認して問題を解決できます。この記事では Preview 機能の使い方を紹介します。 Preview 機能を使用する まずは Claude Code のデスクトップアプリをインストールしましょう。Claude Code のドキュメント からお使いの OS に対応したインストーラーをダウンロードして、インストールを完了
なぜ、Claude Codeは、RAGを捨ててAgentic Searchを選んだのか？
先日、Claude Codeの開発者でありAnthropicのエンジニアでもあるBoris Cherny氏が、「初期のClaude CodeではRAG＋ローカルベクターDBを使っていたが、最終的にAgentic Searchの方が圧倒的に良いと分かった」 という発言がありました 私はBoris氏のこの投稿を見たとき「やっぱ、そうだよな」と思いました。なぜなら私もRAGで検索システムを作った際に似たようなことを考えていたからです。この記事ではこの騒動の背景を整理しつつ、なぜClaude CodeがRAGを捨ててAgentic Searchを選んだのかを説明します。 Boris Cherny氏について Boris Cherny氏はAnthropicのエンジニアであり、Claude Codeの創設者 でもあります。また『Programming TypeScript』の著者でもあり、複数の技術系ポ
AIは速いのに、人間が遅い？ Claude Codeをさらに加速させる私の「推しツール」 - Findy Media
本記事では、エンジニアがつくってきた“自分仕様のAIツール”やAI活用術をご紹介します。エージェントやBot、LLM連携ツールなど、実用的なものから、ちょっと遊び心のあるものまで。プロンプト設計やUIの工夫、うまくいかなかったことや思いがけない発見を通して、AIとの付き合い方をのぞいていきます。AIをどう使うかだけでなく、どんな距離感で付き合っているのか。誰かのAIとの向き合い方が、あなたとAIのちょうどいい“さじ加減”の手がかりに。 Ubieの鹿野です。普段はUbieでプロダクトエンジニアとして働いていて、フロントエンド・バックエンド・モバイルアプリ開発等をしています。2025年5月頃から「Claude Codeにタスク丸投げおじさん」を自称しています。 Claude Codeを始めとするAIエージェントの登場で、コードが生産されるスピードと量は劇的に向上しました。しかし、実際の開発では
Playwright CLIとClaude Code Skillsで効率的なブラウザテストを実現する
はじめに Playwright MCPを使いブラウザテストのシナリオについて実装しておりましたがMCP経由だとツール定義のロード等でコンテキストが約8%増加するという以下の記事を受けて 自分でもPlaywright CLIとClaude CodeのSkills（カスタムコマンド） を組み合わせることでコンテキストを抑えつつブラウザ自動化を行うことをやってみようとおもいました。 Playwright CLIとは Playwright MCPリポジトリから、v0.0.58（2026/1/24）で追加されたトークン効率的なCLIモードです。 リリースノートでは以下のように紹介されています We are adding a new token-efficient CLI mode of operation to Playwright. This brings the long-awaited off
知っているようで知らないCLAUDE.mdを深掘りする | gihyo.jp
「Claude Code」は、CLI上で動くLLMによるAIエージェントツールです。本連載は12月5日に発売された『Claude CodeによるAI駆動開発入門』に書ききれなかった応用的な内容や最新のアップデートについて解説します。書籍をあわせて読むとさらに理解が深まることでしょう。 今回は知っているようで知らない、Claude Codeの「CLAUDE.md」について深掘っていきます。 CLAUDE.mdとは記憶である 前提としてClaude Codeは、立ち上げた際、つまりセッション間で、そのコードベースやユーザーとの過去のやり取りを基本的に覚えていません。しかしセッションを立ち上げるたびに、膨大なコードベースを毎回走査して理解していくのも現実的ではありません。 そのため、コードやルールなどを理解する起点として存在しているのがCLAUDE.mdです。 これはエンジニアにとってのREAD
Claude Code公式プラグイン「frontend-design」完全解説 - AIの"AIスロップ"問題を解決する革新的スキル｜アイドリ | AI-Driven Lab
Claude Code公式プラグイン「frontend-design」完全解説 - AIの"AIスロップ"問題を解決する革新的スキル 本記事の対象者主な対象者： Claude Codeを使ってフロントエンド開発を行いたい開発者、AIが生成するUIデザインの品質に不満を感じている方を想定しています。 技術レベル： 初級〜中級を想定しています。 前提知識： HTML/CSS/JavaScriptの基礎知識、Claude Codeの基本的な使い方を理解していることを前提とします。 この記事で得られるもの： frontend-designプラグインのインストールから活用まで一通り実践できるようになり、AIが生成するフロントエンドの品質を劇的に向上させる方法を習得できます。 要約本記事の主要トピック： 本記事はAI生成UIの「AIスロップ」問題、frontend-designプラグインの設計思想とア
Claude Codeの機能が多くて混乱している人へ
はじめに Claude Codeを触り始めると、「Skills」「Custom Commands」「Hooks」「サブエージェント」「MCP Servers」...と、似たような機能がいくつも出てきて混乱しませんか？ それらを使わなくても開発効率は使っていない時よりもかなり上がっているので、私は自腹で月300ドル払っていましたが、半年ほどあまり活用していませんでした。しかし活用したところかなり便利だったので一度まとめてみます。 この記事では、各機能の使い方だけでなく、「なぜその機能が存在するのか」「どういう問題を解決するのか」という思想から説明していきます。思想を理解すれば、新しい場面に遭遇しても自分で判断できるようになりますし、「この機能、こういう使い方もできるんじゃないか」というアイデアも浮かびやすくなるのかなと思います。 Claude Codeの考え方を理解する なぜこんなに多くの拡
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2026年版】Claude Codeを最強にするプラグイン・MCP・ツール総まとめ - Qiita
Claude CodeやCursorを使って、AIがUIデザインを生成することができる「Pencil」が登場！ - Qiita