Claude Code にWebサイトのコーディングをさせる方法—ドキュメント設計から指示出しまで

WEB制作
ClaudeCodeは、アプリ開発やフォームシステムだけでなく、Webサイトのフロントエンドコーディングにも十分活用できます。ただし、何も準備なしに「このデザインをHTMLにしてく…
続きを読む

AIコードレビューツール比較：PHP個人開発でCodeRabbitを12回回した実録と主要ツール総まとめ

AIコーディング
「AIにコードレビューを任せたい」と思ったとき、2026年時点では選択肢がかなり増えています。自分自身はPHPプロジェクト（WordPress非依存のメールフォームシステム）でCo…
続きを読む

Claude Codeでドキュメントを自動更新・同期する方法｜開発とドキュメントのズレを解消

AIコーディング
開発初期はきちんと書いたREADME.mdや設計書が、気づけば現状と全然違う内容になっている。これはおそらく主要な開発者が経験する問題です。原因はシンプルで、コードを変更するたびに…
続きを読む

Remotion で Callout アニメーションを作る【Studio × Zod でリアルタイム座標調整】

動画編集
動画の上に「ここに注目してほしい」を伝えるコールアウト——地図ピン・波紋・コネクター線・ラベルのセットをアニメーションで表示したい場面があります。この記事ではClaudeCode+…
続きを読む

Webページの校正に「Claude in Chrome」が意外と使えた話

AIコーディング
きっかけ：URLを渡してAIに校正させたかったWebページの校正を目視でやっていると、どうしても見落としが出る。「AIに校正させたい」と思ったのは自然な流れでした。HTMLファイル…
続きを読む

CodeRabbit + Claude Codeで自動修正したら、開発日誌も残そう

AIコーディング
CodeRabbit+ClaudeCodeで自動修正したら、開発日誌も残そうCodeRabbitでAIコードレビューを受けて、ClaudeCodeで自動修正する流れは非常に効率的で…
続きを読む

Windows に Claude Code をインストールする方法【Windows Terminal + PowerShell で簡単セットアップ】

AIコーディング
ClaudeCodeはMacでの利用が多いですが、Windowsでも快適に使えます。この記事では、WindowsTerminal+PowerShellを使ってClaudeCodeを…
続きを読む

Claude Code の settings.json コピペですぐ使えるおすすめ設定まとめ【2026年版】

AIコーディング
ClaudeCodeを使っていて「毎回コマンドの許可を求められるのが面倒」「設定ファイルがあるらしいけど何を書けばいいかわからない」と感じていませんか？settings.jsonを…
続きを読む

Claude Codeの会話ログをObsidianに自動保存する仕組みを試してみた

AIコーディング
@kentaroさんの記事「会話を自動でObsidianに記録する仕組みを作った」を見て、ClaudeCodeとの会話を自動でObsidianに記録する仕組みを導入してみました。非…
続きを読む

Claude Code × Remotion で動画字幕を自動化する【環境構築から書き出しまで】

動画編集
動画に字幕を付ける作業、地味に時間がかかりませんか？テロップを1枚ずつ作って読み込んで位置合わせ…という繰り返し作業は、マニュアル動画でもPV動画でも変わりません。この記事では、C…
続きを読む

【Gemini×Claude Code】画面録画から操作マニュアルとナレーション字幕を自動生成する方法

PDF
クライアント向けの操作マニュアル、作るの面倒ですよね。スクリーンショットを撮って、トリミングして、説明文を書いて、PDF化して...。1つのマニュアルに数時間かかることも珍しくあり…
続きを読む

Claude Codeでスクリーンショットからマニュアルを自動生成する方法

PDF
クライアント向けの操作マニュアルを作成するのは、意外と時間のかかる作業です。スクリーンショットを撮影し、適切な説明文を書き、順序立てて構成する。1つのマニュアルに数時間かかることも…
続きを読む

【初心者向け】Claude Code プラグインの導入ガイド - おすすめプラグインと設定方法

AIコーディング
ClaudeCodeには公式プラグインシステムがあり、開発ワークフローを強化できます。この記事では、プラグインの導入方法と、初心者にもおすすめの汎用的なプラグインを紹介します。プラ…
続きを読む

Claude CodeにSlash Commandsで、開発日誌を書いてもらう方法

AIコーディング
ClaudeCodeのSlashCommands機能を使えば、セッション終了前に詳細な開発日誌を自動生成できます。この記事では、SlashCommands/devlogを作って、開…
続きを読む

CodeRabbit CLIとClaude Codeを連携してAIコードレビューから自動修正する方法

AIコーディング
前回の記事「CodeRabbitで全コードレビューしてもらう方法」では、GitHub上でPRを作成してAIコードレビューを受ける方法を解説しました。永久無料で使えるAIコードレビュ…
続きを読む

Vibe Codingのワークフロー 実行編3
- GitHubでバージョン管理しながらClaude開発する方法 -

AIコーディング
効率的で安全なClaudeCode開発のために、GitHubでバージョン管理を組み合わせた実践的な開発ワークフローをご紹介します。これにより、いつでも前の状態に戻れる安心感と、定期…
続きを読む

Vibe Codingのワークフロー 実行編2.1
- Claude Codeに「Serena」を導入する -

AIコーディング
Serenaとは、ClaudeCodeなどのAIコーディングツールを劇的に強化するオープンソースツールです。一言でいうと、「AIに、あなたのプロジェクトを深く理解させるための賢い通…
続きを読む

Vibe Codingのワークフロー 実行編1 - Claude Code 開発指示の基本

AIコーディング
準備編で作成した設計書をもとに、ClaudeCodeで効率的に開発を進めるための実践的なコツをまとめました。Explore→Plan→Code→Commitの4段階的アプローチを中…
続きを読む

Vibe Codingのワークフロー 準備編3 - CLAUDE.mdの作成と最適化設定

AIコーディング
要件定義・設計管理の基盤、デバッグ環境の整備と段階的テスト駆動開発の基盤を作ったら、次はClaudeCode専用の設定とドキュメント準備です。この準備により、ClaudeCodeが…
続きを読む

Vibe Codingのワークフロー 準備編2.3 - Gemini CLI を併用して設計書を作成する

AIコーディング
AIコーディングツールが急速に進化する中、多くの開発者が「ClaudeCode一強」と考えがちです。しかし、実はGeminiCLIとClaudeCodeを戦略的に併用することで、開…
続きを読む

Claude Code のアップデート・ 再インストール・認証エラー等の解決方法

AIコーディング
ClaudeCodeを使っていると、アップデートや認証のエラーで困ることがあります。この記事では、まず現在の状況を確認する方法から、具体的な解決策まで、段階的に解説します。🔍まず現…
続きを読む

Claude Codeの使い方：Claude CodeでかんたんなWebアプリを作ってみた

AIコーディング
今回は、AnthropicのClaudeCodeを使って「1pxトリミンくん」という画像トリミングアプリを作成してみました。実際の体験をもとに、ClaudeCodeの導入から使い方…
続きを読む