はてなブックマーク

Claude Code を使いこなすには CLAUDE.md、Rules、Skills、Subagents、MCPs の 5 つのレイヤーを正しく使い分けることが重要。それぞれの役割を理解して段階的に構築する必要がある 最初にポイントをざっくり書く CLAUDE .md、Rules、Skills、Subagents、MCPs 。5 つのレイヤーの使い分けの感覚はこれだけ覚えればいい どういう思想で働いてほしいかは CLAUDE .md この領域では絶対に守る知識は Rules 人（自動もあり）が開始する作業手順は Skills 自動で任せたい重い作業は Subagents 外部世界と触るなら MCP Claude Code は「全部ルールを書くほど賢くなる」わけではない レイヤーを間違えると、むしろ指示を無視し始める X で 毎日 AI 情報を配信してるコムテです。Agentic AI /

CLAUDE.md は LLM にコードベースを理解させる最重要ファイル。WHY/WHAT/HOW の3要素を300行以内で簡潔に書き、指示は最小限に。段階的開示で詳細は別ファイルに分離し、リンターや自動生成には頼らないのがベストプラクティス Claude Code を使っていて、なんか思い通りに動かんなって感じたことない？指示を書いてるはずなのに無視される、毎回同じことを説明し直さなあかん、コードスタイルがバラバラになる こういう問題の多くは、実は CLAUDE .md の書き方に原因があったりするんよね X で 毎日 AI 情報を配信してるコムテです。Agentic AI / AI 駆動開発などを中心に情報を配信しています この記事は HumanLayer のブログ記事「Writing a good CLAUDE .md」をベースに、Anthropic の公式ドキュメントと最新の学術研

画像を切り出すときは、Figma MCP プラグインインストールすればいいし、新たにアイコンや画像を作りたい場合は、Gemini 3 系をメインで使えばいい 個人的には Antigravity + Gemini 3 Flash の組み合わせがフロントエンドに強いと感じてるけど、結局は 1 つのモデルに固執しない。タスクごとに切り替える のが一番いい それじゃあ、デザインの再現率を上げるテクニックを紹介していくよ テクニック 1：セクション単位で切り出す セクションというのは、ページ内の一つのエリアのこと。ヘッダー、ヒーローセクション、コンテンツエリア、フッターなどがセクションになる コンテンツエリアは、例えばサービスの特徴・料金表・FAQ セクションのこと デザイン全体のスクリーンショットを一気に渡すのは、実は逆効果やったりする AI は視覚情報を処理する時、画像全体に均等に注意を払おうと

2025年はAIに「書かせて読む」開発が定着し、エージェンティック・コーディングが成熟。2026年は品質の80→100点化、非決定論前提の多重評価、ロングラン強化と汎用展開が進み、当面Claude Code優勢 2025年は、まさに激動の1年でした。 年の初めには「Cursor」が流行し、多くのエンジニアがAIによるコード補完に懐疑的でした。しかし年末には状況が一変。「Claude Code」が主役の座を奪い、コードを「書く」のではなく「AIに任せて読む（あるいは最低限しか読まない）」スタイルが定着しました。「エージェンティック・コーディング（自律型AIによる開発）」が一気に成熟し、日常に溶け込んだ年だったと言えるでしょう。 では、2026年には何が起こるのでしょうか。 私が日々キャッチアップを続ける中で見えてきた本質的な変化について、18の予想を軸に解説します。これは私からの「お年玉」で

生成 AI から Agentic AI まで、2026 年に押さえておきたい AI トレンドを厳選。MoE で 10 倍高速化、MCP と A2A でエージェント連携、RAG でハルシネーション対策など、実務で差がつく知識を網羅した AI の進化がめちゃくちゃ速い。2024 年は LLM の年、2025 年は「エージェントの年」と言われてた。ほんで 2026 年はどうなるかというと、エージェントが本番環境に入り、実際に ROI を問われる年になると予測されてる。「2025 年はエージェントを構築する年、2026 年はエージェントを信頼する年」なんて言われてるくらい X で 毎日 AI 情報を配信してるコムテです Agentic AI / AI駆動開発などを中心に情報を配信しています この記事では、2026 年に押さえておきたい AI トレンドを 5 つのカテゴリに分けて解説していく。一言解

Ghostty は Mitchell Hashimoto が Zig で開発した GPU アクセラレーション対応のターミナルエミュレータ。速度・機能・ネイティブ UI の 3 つを両立し、macOS では Metal、Linux では GTK4 を採用。シェル統合で作業効率が劇的 ターミナルって開発者にとって一番長く触れるツールやと思う。だからこそ、ちょっとした引っかかりが積み重なってストレスになるんよね。iTerm2 は高機能やけど重い、Alacritty は速いけど機能が少ない、Warp は AI 搭載で面白いけどネイティブ感がない。どれも一長一短で「これや」っていうのがなかった そんな中で出会ったのが Ghostty。HashiCorp の共同創業者である Mitchell Hashimoto が個人プロジェクトとして開発したターミナルエミュレータで、2024 年末にバージョン 1.

App Router採用プロジェクトのディレクトリ設計を解説。app/client/server/の責務分離、Route Groupsによるレイアウト管理、HonoのNext.js統合、Server Componentを活かす設計パターンを実例とともに紹介します。 この記事では、App Routerのディレクトリ設計について、実際のプロジェクト構成を交えて解説します。 📝 この記事で使う用語 CSR（Client Side Rendering）: ブラウザ側でJavaScriptを実行してHTMLを生成する方式 SSR（Server Side Rendering）: サーバー側でHTMLを生成してからブラウザに送る方式。表示が高速になる Streaming: HTMLを分割して順次送信する方式。ページ全体の読み込みを待たずに表示が始まる 📖 App Routerの基本 Next.js

Antigravity と Gemini 3 Pro でデザイン再現率を上げるには、全画面ではなくセクション単位で画像を切り出してアップロードし、既存コードを読み込ませた状態で生成させ、角丸や余白などの微調整を反復して指示するのが最速で 120 点のクオリティに到達する方法 有料プラン契約して、ガンガン回した結果、Antigravity + Gemini 3 Pro のデザイン再現率をさらに引き上げるコツを掴んだぜぃ ポイントはこれ セクション単位で狭く切り出して画像を見せる 既存のコードとクラス設計を読み込ませた状態で生成させる 細かい修正指示を反復で伝える 80 点を生成させた後に、細かいフィードバックを出す だいたい、これやればデザインの精度がバク上がりする でも、無料やと、すぐにレートリミットや！ なんで、個人アカウントに切り替えて、Google AI Pro（月額 2,900 円

Google が 2025 年 11 月 18 日に発表した次世代 AI IDE。Agent-first アーキテクチャでエディタ、ターミナル、ブラウザを横断制御し、Gemini 3、Claude Sonnet 4.5、GPT-OSS を無料で使える破壊的なプラットフォーム Google が 2025 年 11 月 18 日に発表した次世代 IDE「Antigravity」を調べてみた。まず、個人向けプランが無料で使えるのがまず嬉しい これは単なる「AI 搭載 IDE」じゃなく、Google が本気で開発体験そのものを再定義しようとしてる製品 Cursor からインポートできるのは嬉しい テーマカラーにTokyo Night がある 右から、3 dotsをクリックすると MCP サーバーを選択できる Google Antigravity とは何か Antigravity は、Google

Claude を使いこなすには 5 つの部品の役割を理解することが重要。Skills は専門知識、Prompts は即時指示、Projects は知識ベース、Subagents は専門家チーム、MCP はデータ接続。組み合わせで本当の力を発揮する Claude には「エージェント的に動く」ための 5 つの部品があるらしいんだわ Skills Prompts Projects Subagents MCP この 5 つ、名前だけ聞いても「で、どう違うん？」ってなるよね 実際、ワイも最初は混乱してた でも、それぞれの役割と使い分けを理解すると、Claude の使い方が一気に広がるんよ 公式ブログの「Skills Explained」って記事がめちゃ分かりやすくまとめてくれてたので、それを元に整理していく。５つの部品の解説と導入方法をまとめてみた Claude の 5 つの部品とは何か まず全体像

脳科学と経験学習の観点から、プログラミング学習では「実践→理解」の順番が正しい。デービッド・コルブの経験学習モデルと神経科学的なエラーシグナル理論に基づき、詰まることが学習のトリガーになり、ドーパミンが放出されて記憶が定着する。 プログラミング学習、いきなり分厚い本から読み始めてない？ プログラミングを始めるとき、まず何をするだろうか？ 多くの人は「まずは基礎を固めないと」って思って、入門書を買うんよね。オライリーの分厚い本とか、評判のいい技術書とか。ワイも最初はそうやった やけど、正直に言うと、これって遠回りなんよな 読んでるときは「なるほどな」って思うけど、いざ実装しようとすると全然覚えてない。「あれ、この章読んだはずやのに」って何度もページを戻る。そんな経験ない？ X や技術系のコミュニティでは「本派 vs 実践派」の論争がよく起こるんやけど、これって実は学習フェーズの違いを混同して

Claude Code の Skillsは、Claude に追加の能力や専門知識を与える。今行っているタスクに関連するときだけ読み込まれる。必要なファイルだけをロードするため、無駄なトークン消費がない Claude Code Skills（スキル）とは？ ここでは、ローカルエディター（Claude Codeなど）で動作する Skills 機能について解説する。公式DocsやGitHubリポジトリで説明されている内容の要点をまとめる 要点まとめ Claude に追加の能力や専門知識を与える 特定ドメインに関する専門スキルを付与できる プロンプトから自動的に参照される（トリガー不要） 必要に応じて動的にロードされる Claude アプリ・Claude Code・API で共通利用可能 Pro・Max・Team・Enterprise 向けプランで利用可能 一度作ったスキルは、複数の会話やプロジェ

なぜSerena MCP Serverを使うとAIのコード編集が正確になるのか AIがコードを理解する二つのアプローチ 現在のAI開発ツールは、コードを理解するために主に二つのアプローチを活用している。一つは「意味的な類似性」で関連コードを発見するRAG（Retrieval-Augmented Generation）、もう一つは「構文的な構造」を解析するLSPやPSIといった技術だ。重要なのは、これらは対立する技術ではなく、それぞれに強みがあるということである。 CursorやGitHub Copilotといった主流のAI開発ツールは、RAGによる埋め込み検索を中心に据えている。コードを数値ベクトルに変換し、意味的に類似したコードを高速に発見する。「ユーザー認証の処理を探したい」といった曖昧な要求に対して、authenticationやlogin、validateといった概念的に関連するコ

AIの暴走を防ぐ4段階フロープロセス AIの過剰な機能実装、エラーハンドリング、要件を無視したコーディング。これらによる手戻りの発生や新たなバグに日々悩まされている方も多いと思います。 そんな中、AmazonのAIエディタ「kiro」には単純明快で効率的なAI Codingが可能になるプロセスが実装されていたので、これを参考にCLAUDE.mdを作成しました。 そのプロセスは下記のとおり、シンプルで当たり前な内容です。 このプロセスが未導入だった場合 実際に「売上データを分析して」と指示した場合、AIは以下のような過剰な実装を行いがちです。 20種類以上のグラフを生成（棒グラフ、折れ線、散布図、ヒートマップ...） 全項目間の相関分析を実行 機械学習による売上予測モデルまで構築 データクレンジング、外れ値除去、正規化を勝手に適用 エラーが出ても別の手法で強引に続行 このプロセスを導入した場

Vercel は便利で簡単だ。個人開発にとって簡単さは大切である しかし、 Vercel の無料枠に依存したくない Vercel のオンデマンドによるリソース消費が怖い 月額費用を限りなく抑えたい Cloudflare Workers の高速性を活かしたい ある日、Vercel からFunction 使用量増加に関するメールが届いた xxxx has used 75% of the monthly included Function Invocations on the pro plan. Once you hit 1M Invocations, additional usage is $0.60 per 1M Invocations.（プロプランの月間関数呼び出し回数の75%を使用しました。100万回を超えると、 100万回ごとに0.60ドルの追加料金が発生します。） うーん、だるい。面

私（@commte）は、この izanami を、個人開発しました。 このページでは、その知見をもとにアイデア創出や技術選定など 個人開発を成功させるための情報全てを共有します 個人開発の完全ガイドが凄い！ → Claude Code・リソース集・設計ミス集・マネタイズ・注意すべき法律・技術選定コストの落とし穴・技術スタック選定例・大成功したプロダクト共通点・要件定義ガイド・ロードマップ・AI駆動開発 https://izanami.dev/kojin-kaihatsu

Figma Desktop と Claude Code を連携するには、Figmaのデスクトップアプリの左上のアイコンから、基本設定を押し、「Dev Mode MCP サーバーを有効にする」にして、Claude CodeにMCPサーバーを追加する Figma Dev Mode MCP Serverとは何か この連携の核となるのが、Figmaが提供する「Dev Mode MCP Server」という機能だ。MCPは "Multi-purpose Code-generation Platform" の略で、その名の通り、多様なコード生成のためのプラットフォームとして機能する 具体的には、Figmaのデスクトップアプリ内でローカルサーバーを起動し、デザインデータをAIエージェント（この場合はClaude Code）にストリーミングで提供する仕組み。 これにより、AIはFigmaのデザイン構造、例

個人開発は Claude Code、記事作成は Gemini CLI といった感じで使い分けをしてる そうそう、Gemini CLI ってさ、無料枠が多いのよ。だから記事作るときくらいは、使ってみようかなと。でも、無料枠を超過しないように、できるだけ構成とかアイデア出しはワイのほうでやるようにしてる ObsidianにGemini CLIを導入して、数分で6335文字書いてくれた内容はこちら↓皆も、Gemini CLI で記事作って、izanami に投稿して欲しい。izanami は、最初から SEO/LLMO に強いのでおそらく最強の効果がある izanami は SEO保守10年の知見が組み込まれSEO/LLMO強化設計されてる。後は、izanami LLMO Analyzer で点数上げていけば本当に凄いことになりそう… 「ターミナル」とか「CLI」って聞くと、なんか黒い画面に英語

CursorのMax ModeとClaudeモデルの課金体系と性能差を詳しく解説。AnthropicのMaxプランに入っていてもCursorでは別途従量課金が必要で、Max Modeは固定制と違いトークンベースで予測困難。普通の作業なら通常モードが圧倒的にコスパ良し Cursor の Max Mode と Claude モデル：課金と性能差について詳しく調べてみた（2025 年 5 月版） 分かりにくい「Cursor + Claude Max」の課金・性能差・使い所・費用対効果を整理してみました。自分なりの解釈を元に、Deep Research でブラッシュアップした内容をまとめてみました。 Cursor の Max Mode と Claude モデルの関係について、特に課金体系と性能差に焦点を当てています。 参考文献ソース Pricing | Cursor - The AI Code E

結論：Claude Codeのdenyは、ガッツリ書いておけ ワイは、Claude Code と Supabase MCP で、Supabase のDB全部削除させてしまったことがある。目の前でテーブルが「ッポン」といった感じで消えてトラウマになった 思い返せば permissions.deny に書いておけばよかったのかもしれない permissions.deny とはなんぞや？ Claude Codeのpermissions.denyは、AIが危険な操作や機密情報へのアクセスを行わないよう制限する設定やね。これがあるおかげで、AIに任せても「壊さない・漏らさない・暴走しない」が実現される AIに対してのガードレール設計ですね この記事では、Claude Code の deny リストを読み解きながら、「なぜその操作が禁止されているのか」「自分の環境でも取り入れるべきか？」を考えてみる

Claude Codeでの開発において、_docs ディレクトリに「日付_機能名.md」で実装ログを残す方法が効果的。Claudeが過去の意図を自然に理解でき、実装の抜け漏れ防止や振り返りにも強い 結論：Claude Code時代に最適なdoc管理、それが「日付_機能名.md」 個人開発をしていると、「前回ここ何やったっけ？」「あれ、なんでこの設計にしたんだ？」という“意図の断絶”が必ず訪れる。 特にClaude CodeなどのAIコーディングツールを活用している場合、その断絶はAIにとっても致命的で、的外れな提案やバグの温床になることもある で、こう思うんよね Claude Code に「どこまで実装が終わっているか」自動で認識させたい 自分やチームメンバーに対して「どんな実装を、いつ頃やったのか」伝えたい そこで便利なのが、_docs/templates/ に yyyy-mm-dd_機

Claude Code + Playwright MCP を使えば、Webの手動テストが自動化してくれる。ブラウザが立ち上がって、フォーム・ログイン・レイアウト・レスポンシブチェック・コンソール確認まで全部試してくれる Claude Code + Playwright MCP の組み合わせによって、これまで人間が行っていた手動のブラウザ操作が、LLM（大規模言語モデル）によって自動化できるようになった。この記事では、仕組み・設定・使い方・できること・従来との差などを解説 Claude Code で、手動テストを走らせた結果 はじめに：何が変わったのか？ 従来、Playwright を使った自動テストには、明示的なコード（TypeScriptやPythonなど）によるシナリオ記述が必要でした。しかし Claude Code と MCP を組み合わせることで、「自然言語でテスト指示」＋「自動ブ

Cloudflare Images, Workers, D1, Next.js, Clerkで揃えれば、初期コストゼロで実用的な MVP が組めます。おまけにカード不要 コスパ最強な技術スタック 凄いところ すべてに無料枠がある（カード不要） 画像・デプロイ・DB・認証の面倒な部分が自動化／省略可能 フロントエンドに集中できる MVP の検証スピードを最大化できる Cloudflare Images（画像最適化） Cloudflare が提供する画像最適化サービス。アップロード（保存・配信は有料）するだけで、自動的にリサイズや圧縮が行われ、CDN を通じて高速に配信できます。URL パラメータでの制御も簡単で、容量課金ではなく画像数による課金体系も魅力。 あまり話題になることもなく、まだ認知されてないイメージですが、構築簡単でコスパ最強です。 自動リサイズ、最適化、CDN 付きでアップロー

そして、この一連の流れを限られた時間で実践することで、個人開発するための力が身につく！ この方法は、Git の使い方も自然と学べるという利点もあるよ。完璧やろこれ。 この記事ガンガン、アップデートしていくから、 You ブクマ OK？ それでは、今週の休日 1 日で以下をやってみましょうー！！ Next.js インストール GO!! おはようございます！今日は休日ですね 「Next.js を活用した個人開発は、ウェブ開発を学ぶ上で最適な方法の一つ」っていうのは聞いたことあるよね？ そんなこと、ワイは聞いたことないんやが、Next.js は個人開発に最適だと思うのよ。Yo, Yo create-next-app でプロジェクト作って、TypeScript、ESLint、Tailwind CSS など導入つっても意味分からんよな Next.js 15 のインストール方法はこれに詳しく書いてある

個人でもプロダクトを公開・運用できる群雄割拠の時代です。ノーコードやクラウドインフラの進化により、個人で SaaS（Software as a Service）を開発し、収益化することも珍しくなくなってきました。 知らずに運営していると、炎上や停止リスクを抱えることに。法律を抑えておくということはユーザーのためでもあります。 精読、理解しやすいように法律の要点のみを紹介します。 1. 個人情報保護法 ユーザーの名前・メールアドレス・IP アドレス・Cookie など、個人を特定できる情報を取り扱う場合は、個人情報保護法が適用されます。利用目的の明示、第三者提供の有無、問い合わせ窓口の設置、安全管理措置などが求められます。プライバシーポリシーの設置は必須です。 2. 景品表示法 「今だけ 50%OFF！」「国内 No.1！」といった広告表現が誇大・虚偽である場合、景品表示法に違反します。Sa