今回は、AnthropicのClaude Codeを使って「1pxトリミンくん」という画像トリミングアプリを作成してみました。実際の体験をもとに、Claude Codeの導入から使い方まで詳しく解説します。
1pxトリミンくん
https://code-plus.jp/app/1px-trimmer/
他のAIコーディングツールとの比較
AIでアプリを作成できるツールは複数ありますが、それぞれ特徴が異なります：
Claude Code
- 特徴: コマンドライン型、自然言語での指示が得意
- 向いている用途: シンプルな単機能アプリ、ファイル処理
- メリット: ローカル実行、プライバシー保護、完成度高い
- デメリット: APIキー設定が必要、ターミナル操作が必要
Bolt.new
- 特徴: Webベース、複雑なアプリ向け
- 向いている用途: 本格的なWebアプリケーション
- メリット: ブラウザだけで完結、高機能
- デメリット: 簡単なアプリには少しオーバースペック
Cline（旧Claude Dev）
- 特徴: VS Code拡張
- 向いている用途: 既存プロジェクトの改修、開発者向け
- メリット: 既存の開発環境と統合
- デメリット: プログラミング知識が必要
料金について
Claude CodeはAnthropic APIを使用するため、使用量に応じた従量課金です。
- 実際の費用: 今回のようなシンプルなアプリ作成で約USD 3.35（約500円）
- 課金方式: 入力・出力トークン数による従量制
- 確認方法: Anthropic ConsoleのCostページで確認可能
小規模なアプリであれば数百円程度なので、試してみるハードルは比較的低いと言えるでしょう。
インストールと初期設定
1. Claude Codeのインストール
npm install -g @anthropic-ai/claude-code
よくあるトラブル: 権限エラーが発生する場合
sudo npm install -g @anthropic-ai/claude-code
2. APIキーの取得と設定
- Anthropic Consoleでアカウント作成
- API Keysページで新しいキーを作成
- Claude Code起動時にキーを設定
3. 起動方法
npx @anthropic-ai/claude-code
重要: プロジェクト専用フォルダで起動することを強く推奨します。
プロジェクトフォルダの作成
Claude Codeは起動したディレクトリでファイルを作成するため、事前にプロジェクト用フォルダを作成しましょう：
mkdir my-app-project
cd my-app-project
npx @anthropic-ai/claude-code
ホームディレクトリで起動してしまうと、ファイルが散らかってしまうので注意が必要です。
効果的な指示の出し方
1. 具体的で詳細な要件を伝える
❌ 悪い例：
画像を編集するアプリを作って
✅ 良い例：
画像を1pxずつトリミングするWebアプリを作ってください。
要件：
- ドラッグ&ドロップで複数の画像をアップロード可能
- 各画像の上下左右を1pxずつトリミング
- 処理後の画像をまとめてダウンロード
- シンプルでわかりやすいUI（イメージオプティムのような感じ）
- ローカルで動作するWebアプリとして作成
用途：Webサイト用画像のフチの透明部分を除去したい
2. 段階的に改良を依頼する
最初から完璧を求めず、基本機能を作ってもらってから改良していくのがコツです：
- 基本機能の実装を依頼
- UIの調整を依頼
- 細かい仕様変更を依頼
3. 参考デザインがある場合は画像で共有
「イメージオプティムのようなUI」など、具体的な参考があると、より理想に近いものができます。
実際の開発体験
今回作成した「1pxトリミンくん」は以下の流れで完成しました：
- 初期要件の伝達（10分）
- 基本機能の実装（Claude Codeが自動生成）
- UIの調整依頼（5分）
- 動作の簡素化（不要なボタン削除など）
- レイアウトの微調整（390px高さ指定など）
全体で約30分程度で、実用的なアプリが完成しました。
Chromeの「ページをアプリとしてインストール」機能
作成したWebアプリは、Chromeの機能を使ってデスクトップアプリのように使用できます：
インストール方法
- 作成したHTMLファイルをChromeで開く
- アドレスバー右端の「⋮」メニューをクリック
- 「ページをアプリとしてインストール」を選択
- アプリ名を設定して「インストール」
メリット
- 独立したウィンドウ：ブラウザのタブに埋もれない
- デスクトップアクセス：アプリ一覧から直接起動可能
- クリーンなUI：ブラウザのアドレスバーやタブが非表示
- オフライン動作：ネット接続不要（今回のアプリの場合）
まとめ
Claude Codeは、プログラミング初心者でも本格的なWebアプリを作成できる強力なツールです。特に：
- シンプルな単機能アプリに最適
- 自然言語での指示で直感的
- ローカル実行でプライバシー安心
- 料金も手頃（数百円程度）
今回のような画像処理アプリなら30分程度で実用レベルのものが完成します。AI開発ツールを試してみたい方は、ぜひClaude Codeから始めてみてください。
参考リンク：