第7章 · Claude on the Web

claude.ai の基本機能

claude.ai Basics
→ で次のスライド · F でフルスクリーン · N で講師ノート · Esc で終了

重要キーワード

claude.ai
クロードAI
Anthropic 公式の Web チャットインターフェース
Projects
プロジェクト
system prompt とファイルを固定する作業空間
Artifacts
アーティファクト
コード/文書/図を独立パネルで編集
Connectors
コネクタ
外部サービス連携 (Google Drive 等)
Project Knowledge
プロジェクトナレッジ
Project に常時参照される参考ファイル群
Custom Instructions
カスタム指示
Project ごとの system prompt 相当

claude.ai

ブラウザで Claude を使う最も手軽な方法。インストール不要、ログインだけで全機能が使えます。

プラン (詳細は ch1-l2 参照)

  • Free: 軽い利用、Sonnet 制限あり
  • Pro ($20/月): 標準ユーザー、Opus 少量、Claude Code 限定的
  • Max 5x ($100/月): パワーユーザー、Opus たっぷり
  • Max 20x ($200/月): 開発者、Claude Code ヘビー利用
  • Team / Enterprise: 組織契約、SSO・監査ログ等

主要機能

  • 💬 Chat: 1 対 1 対話
  • 📁 Projects: プロジェクト単位で system prompt とファイルを固定
  • 🎨 Artifacts: コード・ドキュメント・図を独立パネルで編集
  • 📎 Files: PDF / DOCX / 画像 / CSV をアップロード
  • 🔌 Connectors: Google Drive / Notion / GitHub / Slack 等と接続 (ch7-l6 で詳説)
  • 🌐 Web Search: 必要に応じて検索 (トグル式)
  • 🔬 Research: 多段検索+引用付きの深掘り調査 (ch7-l8 で詳説)
  • 🧰 Skills: PDF/Excel/Word 等の専門タスク用パッケージ (ch7-l9 で詳説)
  • 🤖 Claude Code on the web: コーディングタスクをクラウドに委任 (ch7-l2〜l5 で詳説)
  • 🧑‍💼 Claude Cowork: デスクトップの知識労働エージェント (ch7-l2 で詳説)
  • 🖥️ Computer Use (preview): ブラウザ操作 (ch7-l7 で詳説)
  • 🎙️ Voice mode (preview): 音声入出力

Projects 詳説 (一番重要)

Projects = カスタマイズされた作業空間。「特定の文脈・参考資料・口調」を固定して何度も会話できる。 ChatGPT の Custom GPT に相当しますが、ファイル添付がより強力です。

構成要素

Project: "B2B SaaS マーケ 2026"
├─ Custom Instructions (system prompt 相当)
│   "あなたは B2B SaaS のマーケ担当として..."
├─ Project Knowledge (常時参照される資料群)
│   ├─ 競合分析_2026Q1.pdf
│   ├─ ペルソナ定義.md
│   ├─ ブランドガイドライン.docx
│   └─ 過去の優秀コピー集.md
└─ Chats (この Project 内の会話履歴、複数)

Custom Instructions の書き方 (実例)

``` あなたは弊社 (BtoB SaaS、ターゲット: 中堅企業 IT 担当者) の 広告コピー作成パートナーです。

出力スタイル

  • トーン: 落ち着いたプロフェッショナル、誇張は避ける
  • 文末: 常体 ("である調") は使わず、敬体 ("です/ます調")
  • 1 案あたり: 主見出し (15 字以内) + サブコピー (40 字以内)
  • 1 リクエストにつき必ず 3 案出す

制約

  • 価格訴求は禁止 (営業段階で別途決定)
  • 競合社名を出さない
  • 「業界 No.1」など根拠のない最上級は使わない
  • 数字を使うときは Project Knowledge の事実だけ参照

確認質問

情報不足なら、3 つを超えない範囲で確認質問を返してください。 ```

→ 毎チャットで上記を書き直す必要なし。Project に固定 して資料も合わせて参照させられる。

Project Knowledge に入れるべきもの

  • ✅ ブランドガイドライン、ペルソナ定義、競合分析
  • ✅ よく参照する技術仕様 (社内 API、設計書)
  • ✅ 過去の優れた成果物 (few-shot 学習に効く)
  • ❌ 機密度が極めて高いファイル (NDA 下情報など)
  • ❌ 巨大すぎるファイル (1 ファイル数 MB は遅くなる)
  • ❌ 動的に更新されるデータ (毎回貼り直す方がマシ)

💡 Project Knowledge は毎ターン context に乗るので、トークン消費に直結。本当に必要なものだけ入れる。

Project の使い分け実例

Project 名 用途 Custom Instructions の要点
📝 ブログ執筆 技術ブログの下書き 文体・SEO・著者プロフィール
🐛 デバッグ相談 プロジェクト固有のバグ相談 リポジトリ構造・依存ライブラリ
📊 競合分析 市場調査 業界用語・分析フレーム
🎓 学習サポート 個人の学習 学習スタイル・既知範囲
✉️ ビジネスメール 顧客への返信下書き 自社のトーン・敬語レベル

Artifacts 詳説

Artifacts はチャットの隣に独立した編集領域を開いて、コード・文書・図を作る機能。 Claude が「これは Artifact にすべき」と判断した時に自動で開かれます。

Artifact の種類

種類 用途 プレビュー
Code プレーンなコード シンタックスハイライト
HTML 単体 Web ページ ブラウザレンダリング
React component React 部品 (TSX) ライブプレビュー
Markdown 長文ドキュメント 整形プレビュー
SVG / Mermaid 図表 図として表示
Document テキスト編集 プレーン表示

Artifacts が活きるシーン

  • 🚀 ランディングページ試作: 「シンプルな LP を React で」 → 即動くプロトタイプ
  • 🛠️ 小さなツール: タイマー、計算機、占い、JSON フォーマッタ
  • 📊 データ可視化: Chart.js でインタラクティブなチャート
  • 📝 長文ドキュメント: 反復編集に最適 (履歴が残る)
  • 🎨 デザイン提案: SVG/CSS で複数案を並べて比較

バージョン履歴

Artifact は 編集ごとにバージョンが残り、戻せます。 「3 版前のレイアウトに戻して、色だけ最新版から取って」のような指示も可能。

エクスポート

Artifact は外部に Publish できます (URL を共有 → 誰でも閲覧)。 ただし社内データを含む Artifact を Publish しないよう注意。


Files (ファイルアップロード)

ドラッグ&ドロップ で PDF / DOCX / TXT / 画像 / CSV / XLSX を添付。

ファイル形式 扱われ方
PDF テキスト抽出 + ページごとの画像理解
画像 (PNG/JPG) Vision で内容理解
DOCX テキスト抽出
CSV / XLSX 表として読み込み (大規模なら処理範囲を指示)
TXT / MD プレーンテキスト

制限

  • 1 メッセージあたりのサイズ上限あり (プラン依存)
  • 1 ファイルあたり数十 MB が現実的
  • スキャン PDF (画像のみ) は OCR が必要 → そのまま渡しても画像理解で読める場合も

Web Search

入力欄付近のトグルで ON/OFF。 - ON: 最新情報を Web 検索 → 引用付きで応答 - OFF: 訓練済み知識のみ (高速)

💡 デフォルトは OFF が多い。最新情報が必要な時は意識的に ON にする習慣を。

Web Search vs Connectors の違い (詳細は ch7-l6)

Web Search Connectors
対象 公開 Web あなたが認可した SaaS
認証 不要 OAuth
用途 最新情報リサーチ 個人化されたタスク

Voice Mode

スマホの claude.ai アプリで音声会話が可能。移動中の壁打ちに便利。 通勤中にアイデアを Voice で出して、デスクに戻ってチャットで続きを書く、という使い方が定番。


claude.ai vs API

claude.ai API
ターゲット エンドユーザー 開発者
課金 サブスク 従量
カスタマイズ system + files 全パラメータ
自動化 手動操作 プログラム制御
共有 チャット URL 自前 UI

使い分け

  • 🌐 個人で使う / チームで共有 / 動かす: claude.ai
  • 🛠️ 自社サービスに組み込む / 自動処理: API

claude.ai と API は 別人格 (会話履歴は共有されない) ですが、Project の Custom Instructions と API の system prompt は概念的に対応。

▶ Projects 設計依頼
私はマーケティングチームのマネージャです。「広告コピー生成」用の Claude Project の Custom Instructions と Project knowledge に何を入れるべきかを提案してください。具体例を含めて。
Hands-on Exercise

演習: 自分用 Project を 1 つ作る

claude.ai で新規 Project を作成し、あなたの業務支援用にカスタマイズしてください。

入れる項目案: 1. Custom Instructions (役割・トーン・出力形式・確認質問ルール) 2. Project Knowledge (1〜3 ファイル。社内ガイドライン等で機密でないもの) 3. 試行プロンプトを 3 件

1 週間使ってみて、感触を共有しましょう。

観察ポイント: - Custom Instructions が効いているか (毎回同じトーンか) - Project Knowledge を Claude が引用しているか - 通常チャットと比較して時短になったか

▶ Playground を開いて実行
Hands-on Exercise

演習: Artifacts でプロトタイプを作る

claude.ai で 動くプロトタイプ を Artifacts で作ってみてください。

お題例 (どれか 1 つ): 1. 「ポモドーロタイマー (25/5 分) を React で」 2. 「JSON フォーマッタ (整形 + シンタックスハイライト) を HTML で」 3. 「企業の年間カレンダー (祝日込み) を SVG で」

観察ポイント: - ライブプレビューが動くか - 「ボタンの色だけ変えて」のような微調整が効くか - バージョン履歴で前の版に戻せるか

▶ Playground を開いて実行

理解度チェック

5 問のクイズで理解度を確認しましょう。

クイズを開く
🎉

まとめ

お疲れ様でした!