## 目次
1. <a href="#section1">Claudeとは</a>
2. <a href="#section2">有料版の使用制限と効率的な使い方</a>
3. <a href="#section3">Claudeの3つの使い方とその違い</a>
4. <a href="#section4">質問の仕方のコツ</a>
5. <a href="#section5">セッション管理</a>
6. <a href="#section6">Gitとの連携</a>
7. <a href="#section7">初心者が気をつけること</a>

---
<a id="section1"></a>
## 1. Claudeとは

### 1.1 Claudeの基本

**Claude**は、米国Anthropic社が開発した高性能AIアシスタントです。

**開発元:** Anthropic社（OpenAIの元メンバーが創業）  
**初公開:** 2023年3月  
**最新モデル:** Claude Opus 4.5, Claude Sonnet 4.5, Claude Haiku 4.5

### 1.2 なぜ開発者にClaudeなのか？

| 特徴 | 説明 |
|------|------|
| **長文処理能力** | 最大20万トークン（約15万文字）処理可能 |
| **高精度なコード生成** | Python, JavaScript, PHP, Java, C++など多言語対応 |
| **日本語対応** | 日本語コメントやドキュメント生成が得意 |
| **コードレビュー** | セキュリティやパフォーマンスの指摘が優秀 |

---
<a id="section2"></a>
## 2. 有料版の使用制限と効率的な使い方

### 2.1 ⚠️ 重要: 有料版 = 無制限ではない

多くの方が誤解していますが、**Claude Pro/Maxプランでも使用回数に制限があります。**

```
❌ 誤解: 「有料版なら使い放題！」
✅ 正解: 「有料版でも5時間ごとに制限がある」
```

### 2.2 使用制限の詳細

#### リセットサイクルと目安

| プラン | リセット周期 | 目安の使用回数 |
|--------|--------------|---------------|
| Free | 5時間ごと | 10〜20回程度 |
| Pro | 5時間ごと | 50〜100回程度（Freeの約5倍） |
| Max 5x | 5時間ごと | 250〜500回程度（Proの5倍） |
| Max 20x | 5時間ごと | 1000〜2000回程度（Proの20倍） |

※実際の使用回数は、メッセージの長さや複雑さによって変動します。

#### 制限に達するとどうなる？

制限に達すると、以下のメッセージが表示されます：

```
⚠️ You've reached your usage limit for Claude Sonnet.
Your limit will reset in 6 hours and 23 minutes.
```

**対処法:**
- 制限がリセットされるまで待つ
- 軽量モデル（Haiku）に切り替える
- 上位プランへのアップグレードを検討

### 2.3 使用回数に影響する要因

**メッセージの長さ** - 短いメッセージ（「バグを修正して」）は少ないカウント、長いメッセージは多いカウント

**会話の長さ（履歴）** - Claudeは毎回、全履歴を読み込むため、メッセージ数が増えるほど使用回数が増加

**複数ファイルの添付** - テキストのみ < PDF複数 + 画像2枚など

**使用モデル** - Haiku < Sonnet < Opus の順で使用回数が増加

| モデル | 使用回数への影響 | 性能 | 推奨用途 |
|--------|-----------------|------|----------|
| Claude Haiku 4.5 | 小（1x） | 軽量・高速 | 簡単なタスク |
| Claude Sonnet 4.5 | 標準（2〜3x） | バランス型 | 通常の開発作業 |
| Claude Opus 4 | 大（5x） | 最高性能 | 複雑なタスク |

### 2.4 制限を効率的に使うコツ

**✅ 推奨する使い方**

新しいチャットを頻繁に作成（30分〜1時間、20〜30メッセージごと）、必要最小限の情報のみ提供、軽量モデル（Haiku）を活用、複数の質問をまとめる。

**まとめて質問の例:**
```
❌ 1つずつ質問（3回のやり取り）
「この関数の名前は？」→「引数は？」→「戻り値は？」

✅ まとめて質問（1回のやり取り）
「この関数について: 1. 関数名 2. 引数 3. 戻り値」
```

**❌ 避けるべき使い方**
- 1つのチャットを延々と続ける
- 不要なファイルを大量にアップロード
- Opusモデルを簡単なタスクで多用

---
<a id="section3"></a>
## 3. Claudeの3つの使い方とその違い

Claudeには、用途に応じて3つの使い方があります。

### 3.1 Claude.ai（Webブラウザ版）

**アクセス:** https://claude.ai | **環境:** Webブラウザ | **推奨:** 初心者向け

✅ **メリット:** インストール不要、ファイルアップロード対応、Artifacts機能でコードをプレビュー、自動保存

❌ **デメリット:** プロジェクト全体の解析には不向き、ファイルの自動編集はできない

**向いている作業:** コードレビュー、ドキュメント作成、バグ修正、API仕様確認、テストコード生成

### 3.2 Claude Code（コマンドライン版）

**環境:** ターミナル（Mac / Linux / Windows）| **対応OS:** Mac ✅、Linux ✅、Windows ✅（WSL経由）

**インストール:**

公式のインストール方法は以下を参照してください：
- 公式ドキュメント: https://docs.anthropic.com/claude/docs/claude-code

インストール後のログイン:
```bash
claude login
```

✅ **メリット:** プロジェクト全体を解析可能、複数ファイルの自動編集、ファイル操作、Git連携が便利

❌ **デメリット:** ターミナル操作の知識が必要、ビジュアルプレビューがない

### 3.3 VS Code拡張機能

**環境:** Visual Studio Code | **対応OS:** Windows / Mac / Linux

✅ **メリット:** エディタ内で直接操作、プロジェクト全体の解析、Claude Codeと同等の機能

❌ **デメリット:** APIキー設定が必要、初回セットアップが必要

### 3.4 3つのツール比較

| 項目 | Claude.ai | Claude Code | VS Code拡張 |
|:---|:---:|:---:|:---:|
| **初心者向け** | ✅ 最も簡単 | △ やや難しい | △ 中程度 |
| **複数ファイル自動編集** | ❌ 手動のみ | ✅ 完全対応 | △ 部分的 |
| **プロジェクト全体解析** | △ 手動確認必要 | ✅ 完全対応 | △ 部分的 |
| **セットアップ** | ✅ 不要 | △ インストール必要 | △ APIキー設定必要 |

---
<a id="section4"></a>
## 4. 質問の仕方のコツ

### 4.1 効果的な質問の4つの原則

**原則1: 具体的に**
```
❌ 「ログイン機能を作って」
✅ 「Symfony 6.3でJWT認証を使ったログイン機能を作ってください
   - メールアドレス・パスワード認証、トークン有効期限24時間」
```

**原則2: コンテキストを提供**
```
❌ 「エラーが出ます」
✅ 「[エラーメッセージ] が出ています。[発生状況] です」
```

**原則3: 期待する出力を明示**
```
❌ 「この関数を説明して」
✅ 「この関数について: 1. 目的 2. 引数 3. 戻り値 4. 使用例」
```

**原則4: 制約を明示**
```
❌ 「データベース設計を提案して」
✅ 「MySQL 8.0、想定データ量100万件、多言語対応(日本語・英語・中国語)で」
```

---
<a id="section5"></a>
## 5. セッション管理

Claudeは毎回、会話の全履歴を読み込むため、メッセージ数が増えるとレスポンスが遅くなります。

**新規チャット作成のタイミング:**
- 30分〜1時間経過した
- 20〜30回のやり取りをした
- 話題が変わった

**Claude Codeのコマンド:**

| コマンド | 用途 |
|--------|------|
| `/compact` | 履歴を圧縮。同じプロジェクト内で継続する時 |
| `/clear` | 履歴を完全削除。別プロジェクトに移る時 |

---
<a id="section6"></a>
## 6. Gitとの連携

Claudeを使うと、Git関連の作業が効率的になります。以下は、各作業がどのツールで実行でき、難易度がどのくらいかを示した表です。

| 作業内容 | Claude.ai | Claude Code | 難易度 | 説明 |
|---------|-----------|------------|--------|------|
| **コミットメッセージ生成** | ✅ 可能 | ✅ 可能 | 易しい | diffやコード変更を貼り付けて実行 |
| **git diff の解析** | ✅ 可能 | ✅ 可能 | 易しい | 変更内容を確認・説明してもらう |
| **コードレビュー** | ✅ 可能 | ✅ 可能 | 易しい | 該当コードを貼り付けて指摘を受ける |
| **コンフリクト解決** | ⚠️ 手動確認が必要 | ✅ 自動編集対応 | 中程度 | Claude Codeなら効率的 |
| **PR説明文生成** | ✅ 可能 | ✅ 可能 | 易しい | 内容を説明してもらう |
| **リファクタリング** | ⚠️ 手動編集が必要 | ✅ 複数ファイル自動編集 | 中程度 | Claude Codeなら効率的 |

### 6.1 Claude Codeで便利な使い方

Claude Codeを使う際、シェルエイリアスを設定すると、よく使うコマンドが短縮できます。

**~/.zshrc または ~/.bashrc に追加:**

```bash
# クイックレビュー
alias ccr='claude "このコードをレビューして、改善点を指摘してください"'

# バグ修正
alias ccf='claude "このコードのバグを見つけて、修正してください"'

# テスト生成
alias cct='claude "このコードのユニットテストを生成してください"'

# コミットメッセージ生成
alias ccm='git diff --cached | claude "上記の変更に対して、わかりやすいコミットメッセージを1行で生成してください"'
```

**使い方の例:**

```bash
# コードをレビュー
ccr app/services/UserService.php

# バグを修正
ccf app/controllers/AuthController.php

# テストを自動生成
cct tests/UserServiceTest.php
```

---
<a id="section7"></a>
## 7. 初心者が気をつけること

### 7.1 よくある失敗パターン

| パターン | 対策 |
|---------|------|
| 情報詰め込みすぎ | 必要な部分だけを厳選 |
| チャットの長期使用 | 30分〜1時間で新規作成 |
| 生成コードの無検証使用 | 必ずコードレビュー |
| 機密情報の入力 | 環境変数使用、ダミーデータで質問 |

### 7.2 コストを抑えるコツ

1. 軽量モデル（Haiku）の活用
2. 複数の質問をまとめる
3. 20〜30メッセージごとに新規チャット作成
4. 該当部分のみを抜粋（ファイル全体不要）

**重要:** Claudeはあくまでツール。生成されたコードは必ずレビューし、最終判断は開発者であるあなたが行ってください。

**更新情報:** このブログは2025年12月時点での情報です。仕様変更の可能性があるため、最新情報は公式ドキュメントで確認してください。

| 項目 | URL |
|------|-----|
| プラン・制限 | https://support.anthropic.com/ja/ |
| API | https://docs.anthropic.com |
| Claude Code | https://docs.anthropic.com/claude/docs/claude-code |
---

## 参考リンク

- [Claude公式サイト](https://claude.ai)
- [Claude API ドキュメント](https://docs.anthropic.com)

large_claude-eyecatch.jpg

medium_claude-eyecatch.jpg

small_claude-eyecatch.jpg

thumbnail_claude-eyecatch.jpg

claude-eyecatch.jpg

Claude有料版を初めて使う開発者向けガイド

近年、生成AIの技術は急速に進化し、様々な業務に活用されています。これはITの開発現場でも同様で生成AIにプログラムを書いてもらい、業務の効率化に繋げる動きがあります。
  
生成AIと言えば、ChatGPTを使用する話しはよく聞きますが、同じくよく話題に上がる生成AIとして、Claude AIの名前もよく聞きます。Claude AIは、一度に扱える文字数も多い話を聞き、WEBページ全体などの文字数が多いコンテンツも作成できるか、また精度はどの程度なのか実験しました。  
  
Claude AI  
https://claude.ai/new  
  
参考：  
https://mijinko.co.jp/media/chatgpt-claude-difference/

## Claude AIとは  
  
Claude AIは、Anthropic（アンソロピック）というAI研究団体によって開発されました。こちらは、ChatGPT で有名なOpenAI社に所属していた元社員が2021年に立ち上げた企業です。同社のやり方に異を唱え、退社後に設立しました。倫理的なAI開発に強いこだわりを持ち、ユーザーの意図を深く理解し、安全で信頼性の高い対話を提供することを目指しています。

回答内容も、ユーザーの意図をより正確に理解し、適切な応答を生成するために設計されています。  
  
## 実験内容

Claude AIの能力を検証するために、弊社で運営するコンペナビのLP「自治体向け動画コンテスト主催サポート」を最近のトレンドであるBENTO UIの形にする実験をしました。  
  
コンペナビ:  
https://compe.sterfield.jp  
  
コンペナビLP:自治体向け動画コンテスト主催サポート  
https://compe.sterfield.jp/lp_jichitai  
  
また、弊社開発のWEBサイトなので、詳細なデータは手元にありますが、一般の視聴者と同じように通常の閲覧、および右クリックの「ソースの表示」だけで得られる情報のみを使用しました。これは技術者抜きでどんな物が作れるのか試したかったからです。

### 実験1：URLを使ってコーディング依頼
  
先ず、はじめにURLを指定して作る事を試してみました。  
  
「（コンペナビLPのURLを記載）のページをBENTO UIに作り変えてください。そのためのコードを書いてください。」
と依頼してみました。すると、返答の返答がありました。 

> 申し訳ありませんが、私はURLを開いたりウェブページの内容を直接確認したりすることはできません。そのため、指定されたページの具体的な内容を見ることができず、正確なBENTO UIへの変換を行うことは難しいです。  
> しかし、BENTO UIの一般的な構造に基づいて、自治体向けのランディングページをイメージしたBENTO UIのテンプレートを提案することはできます。以下に、そのためのHTMLとCSSのコードを示します。  
  
この返答から、Claude AIは直接URLを開くことができず、具体的にページ内容を確認できないことが分かりました。そして実際に生成されたコードをブラウザでレンダリングしてみたら、以下のようになりました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_1_ca709c375b.png) 

生成されたコードは、BENTO UIの基本構造を備えており、また、設定されているMETA情報を理解している様でした。

### 実験2：HTMLファイルを使ったコーディング依頼

Claude AIはChatGPT と違い、こちらがアップロードしたファイルに応じて返答を求めることができます。なので、コンペナビのLPで右クリックして「ソースの表示」でLPのHTMLをコピーしてHTMLファイルを作成しました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_7ad24841f0.png) 

そして、このHTMLファイルをアップロードし、「今 pasteしたHTMLをBENTO UIに変えてください。なるべく元のデザインの要素 色合いを取り入れてBENTO UIにしてほしい」と指示を出しました。  
  
すると以下のページを作ってくれました。  
 
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_2_2_7ba57ca19f.png) 
    
HTMLファイルを元に、より具体的なレイアウトを作成してくれました。もちろん細部の作りこみは必要になりますが、元のデザインの要素をしっかり認識した上で作成されているのが十分に分かります。  
  
### 実験3：詳細な修正指示を出してみる  
  
さらに、以下の修正指示を出してみました。  
  
>・元のサイトはスクロールするとMOVIEなど動くテキストがありますが、これらも再現してください。  
  
>・コンテスト事例紹介は各企業のロゴがスクロールする構造です。ロゴ（画像）の代わりに、100pxの赤いdivをいくつか用意してスクロールする構造にしてください。  
  
>・ヘッダーのメニューの項目はハンバーガーアイコン（3本の線のアイコン）を押すと表示・非表示に切り替える構造にしてください。
  
と3点の修正指示をしてみました。  
すると以下のページが生成されました。  

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_3_adc40b1594.png)   
  
静止画なので分かりにくいですが、今回はHTML、CSSだけでなくJavaScriptも生成され、実際にスクロールに応じてテキストが動いて出現するなどのアクションも再現されました。ただ、残念ながらスクロールについては意図した通りに作成されませんでした。
  
また、驚いたことにスマホのレイアウトになった際のハンバーアイコン(メニューの収納)の仕掛けも作成してくれました。  
  
 ![](https://cont.sterfield.co.jp/uploads/img3_2_d3744cd143.png) 
  
### 実験4：画像を指定して配置してみる  
  
次に元のサイトから使用している画像を抜き出して、実際に配置できるか試してみました。

 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_685f06a92d.png) 

HTMLと同様に画像をアップロードして、  
  
> 今！自治体による動画コンテストが人気！の箇所で    
> - １募集で、 s1_1.png  
> - ２撮影＆投稿で s1_2.png  
> - ３受賞で s1_3.png  
>
> の画像を入れてください。  
  
と指示してみました。すると、  
  
改善コードが生成されました。
  
 ![](https://cont.sterfield.co.jp/uploads/img_202450830_4_2_de3c195a71.png) 
  
また、コードの生成と合わせてサイズを調整する方法も教えてくれました。もっと細かく指示してクオリティを上げることもできそうです。

## まとめ
Claude AIは無料プランでは1日に対話できる回数が少なく、上記の作業も数日間を要しました。そのため本格的に業務に使うとなると有料プランに入る必要があると感じました。しかし、この欠点を除けばかなり便利なツールだと思います。単純に制作のスピードが上がりそうですが、技術者が不在でもかなり精度の高い物が作れそうです。  
  
生成AIの登場により、エンジニア、非エンジニアの垣根がなくなりつつあり、AIを使う頻度はこれから一層増すでしょう。最近では「プロンプトエンジニア」という言葉まで聞くようになりました。  
これからの時代、AIを使いこなす技術も必須のスキルと言えそうなので学んでいきます。

medium_img_202450830__title.png

small_img_202450830__title.png

thumbnail_img_202450830__title.png

img_202450830__title.png

Claude AIを使ったBENTO UI変換実験レポート：非技術者もWEBページを作れる時代になるのか検証してみた

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Claude

2025/12/05

2024/08/30