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

Meta社が「useEffectの46%は不要だった」という調査結果を発表。それを知った私が、自分のコードを見直してuseEffectを減らしていった体験談。連鎖するuseEffectでデバッグに苦労した経験から、どうやって改善していったかを共有。 useEffectを使いすぎてた私がMeta社の調査結果を見て反省した話 こんにちは。とちです。 Reactで開発していて、「useEffect書きすぎかも…」と感じたことはありませんか？私はしょっちゅうありました。 そんな中、Meta社（旧Facebook）が自社のコードベースを調査したら、useEffectの約46%が実は不要だったという調査結果を知って、かなり衝撃を受けました。 この記事では、私がuseEffectを使いすぎていた理由を反省しつつ、どうやって減らしていったかを共有します。 React公式ガイドライン：useEffectは「

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

そして、この一連の流れを限られた時間で実践することで、個人開発するための力が身につく！ この方法は、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

エンジニアや個人開発者が 技術情報を投稿するための プラットフォームです。個人開発アプリのPRにもどうぞ。

Cursor の Docs 設定方法 Cursor の Docs 設定は、Settings > Features > Docs から設定できます。 ここで、よく使用するフレームワークやサービスの公式ドキュメントを追加することで、開発中にドキュメントを参照してコードを生成したり、必要な情報を素早く参照できるようになります。 Cursor Docs で Index させたドキュメントは、Symbols（アットマーク）を押せば参照可能です。 Index failed ドキュメントによっては、すぐに Index されるので、他のユーザーと共有化されている可能性もありそうです。 フロントエンド開発 Next.js 用途：React ベースのフレームワーク 特徴：App Router、Server Components、API Routes などの最新機能のドキュメント shadcn/ui UI sh

個人開発者がプロダクトを登録したり、エンジニアが技術情報を投稿するためのプラットフォームです。SEO/LLMO最適化の設計やツールで、集客と露出を強化できます。全て無料・無制限です。

Next.js や BaaSを使うときのセキュリティ対策の覚書。RLS、DOMPurify、クリックジャッキングやXSS対策、クロスオリジン、CSPの設定など。 個人開発向け。認証系のアプリケーション開発時における現時点での BaaS やウェブアプリケーション（Next.js など）のセキュリティ対策の覚書。チェックリストなので深くは掘り下げない。更新、追加、修正予定あり。 データセキュリティ RLS の有効化とポリシー設定 例えば、Supabase を使う場合、RLS を有効にしてポリシーを適切に作成。各ユーザーがアクセスできるデータを厳密に制御する。 RLS（Row-Level Security）はデータベースのテーブルでユーザーごとに異なるアクセス制限を設定する仕組み。例えば、自分の投稿だけが見えるようにするなど、柔軟な制御が可能。 ポリシーとは、各ユーザーがどのデータにアクセスでき