Claudeを使って画像やスライド資料を作成する方法！これまで何十時間もかかっていた作業から解放される予感〜

つい先日、Claude3.7Sonnetモデルがリリースされました。実際私も使ってみたんですが、図解などの画像作成能力やスライド資料の作成能力が、爆速に進化していて、本当に驚きました。

今日は、そんなCalude3.7Sonnetモデルを使って、画像やスライド資料を作成する方法についてご案内します。

Claude 3.7を活用した画像・資料作成

Claude 3.7を使って、さまざまな資料作成を効率的に行うことができます。ここでは、具体的な活用事例を紹介します。

参考となる画像をアップロードして類似の画像を作成する

画像をアップロードして図解を作成

Claude 3.7では、画像をアップロードして解析し、類似の図や編集を加えた新しいビジュアルを生成することが可能です。

今回はサンプルとして、以前にさくっと作成した、自作のシンプルな画像をアップロードしてみます。

手順

1. 画像をアップロード: 参考としたい画像を、Claudeのチャット欄にアップロードします。
2. 指示を与える: 参考した画像をもとに対応してほしいことを、チャット欄に入力します。

簡単ではありますが、見事に元の画像を再現してくれました。

プロンプトに変更したい部分を含めることによって、画像の内容を一部変更することも可能です。

例えば、追加で「四角い枠の背景色をピンク色に変えてください。」と伝えてみます。

そうすると、対象部分の色が変わった画像を作成してくれました。

HTML/CSSを指定して綺麗なスライド資料を作成

生成AIではスライド資料作成はまだまだ厳しいと感じていたんですが、今回リリースされたClaude3.7Sonnetモデルでは、もはやスライド資料作成業務も生成AIに任せられる時代が来るかも、と思ってしまったのが正直な感想です。

Claude 3.7では、HTML/CSSの詳細な指定を行うことで、外観も綺麗に整えられたスライド資料を生成できます。

手順

1. 画像をアップロード: 元の図や参考画像をClaudeに提供。
2. 指示を与える: 追加したい要素や色の変更を明確に指示したプロンプトを入力します。

今回は、以下のようなプロンプトを使用しています。

"# 高品質インフォグラフィックHTMLスライド作成プロンプト

以下の指示に従い、与えられたテキストを **インフォグラフィックHTML** に変換してください。**エグゼクティブプレゼンにも耐えうる1枚スライド（16:9）** を想定した **高い情報密度** と **優れた視認性** を両立させてください。

## 1. 全体デザイン仕様

### 1.1 カラースキーム
- メイン文字色：`#334155`
- 見出し色：`#EE6C8A`（Flory Pink）
- サブタイトル色：`#475569`
- 背景：白ベース（`#ffffff`）またはグラデーション（`linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)`）

### 1.2 タイポグラフィ
```html
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
</style>
```
- **タイトル（28-32px, 太字）**
  ```css
  font-size: 32px;
  font-weight: 700;
  background: linear-gradient(90deg, #EE6C8A 0%, #f091a9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  ```

- **サブタイトル（14-16px）**
  ```css
  font-size: 14px;
  color: #475569;
  margin-bottom: 12px;
  font-weight: 500;
  ```

- **セクション見出し（16-18px）**
  ```css
  font-size: 18px;
  font-weight: 700;
  color: #EE6C8A;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  ```

- **本文（12-13px, 行間1.3-1.4）**
  ```css
  font-size: 13px;
  line-height: 1.3;
  color: #334155;
  overflow-wrap: break-word;
  ```

### 1.3 レイアウト設計
- **ベースコンテナ**
  ```css
  .slide-container {
      width: 1600px;
      height: 900px;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 32px;
      position: relative;
      overflow: hidden;
  }
  ```

- **ヘッダー**
  ```css
  .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      border-bottom: 1px solid #e2e8f0;
      padding-bottom: 16px;
  }
  ```

- **2カラム構成**
  ```css
  .content {
      display: flex;
      height: calc(100% - 80px);
      gap: 24px;
  }
  
  .column {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 16px;
      overflow: hidden;
  }
  ```

- **カード型コンポーネント**
  ```css
  .card {
      background-color: white;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
      padding: 12px;
      height: auto;
      overflow: hidden;
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
  }
  ```

- **オーバーフロー対策**
  ```css
  .card-content {
      font-size: 13px;
      overflow-wrap: break-word;
      overflow: auto;
      max-height: 100%;
  }
  ```

### 1.4 リスト要素最適化
```css
ul {
    padding-left: 16px;
    margin-bottom: 6px;
}

li {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.3;
}
```

### 1.5 ハイライト要素
```css
.highlight {
    background-color: #fdf2f4;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}
```

## 2. コンポーネント設計

### 2.1 プロセスフロー
```css
.process-flow {
    display: flex;
    justify-content: space-between;
    margin: 16px 0;
    position: relative;
}

.process-step {
    text-align: center;
    width: 22%;
    z-index: 2;
}

.process-icon {
    background-color: #EE6C8A;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 8px;
    font-size: 16px;
    font-weight: bold;
}

.process-title {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.process-desc {
    font-size: 11px;
}
```

### 2.2 グリッドレイアウト
```css
.capability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.capability-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.capability-icon {
    font-size: 14px;
    color: #EE6C8A;
    min-width: 20px;
}
```

### 2.3 アイコンリスト
```css
.integration-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 8px;
}

.integration-item {
    background-color: #fdf2f4;
    border-radius: 12px;
    padding: 3px 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 2px;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```

### 2.4 テーブル
```css
.comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
}

.comparison-table th {
    background-color: #fdf2f4;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.comparison-table td {
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
}
```

## 3. 実装のベストプラクティス

### 3.1 情報量の最適化
- 長文は要点のみに圧縮し、冗長な表現を避ける
- 一つの文は20-30字程度に収める
- 箇条書きは簡潔に、可能な限り1-2行に収める
- 重要な概念だけを選別し、本質的でない詳細は削除する

### 3.2 テキスト調整テクニック
- 主要タイトルは簡潔に、内容を的確に表現する単語を選ぶ
- 複合語は可能な限り短縮する（例：「スケジュール管理」→「スケジュール」）
- 説明文は「です・ます」体をできるだけ省略し、体言止めを活用
- 接続詞・副詞を削減し、情報密度を高める

### 3.3 視覚的階層
- 情報の重要度に応じた視覚的ヒエラルキーを確立
- 強調したいポイントには `highlight` クラスを適用
- 補足情報はより小さなフォントサイズで表示
- アイコン（絵文字）は視認性の高いものを選定

## 4. HTML構造ひな形

```html
<!DOCTYPE html>
<html lang=""ja"">
<head>
    <meta charset=""UTF-8"">
    <meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
    <title>インフォグラフィックスライド</title>
    <style>
        /* ここにスタイルを定義 */
    </style>
</head>
<body>
    <div class=""slide-container"">
        <div class=""header"">
            <h1 class=""header-title"">メインタイトル</h1>
            <div class=""header-date"">YYYY年MM月</div>
        </div>
        
        <div class=""content"">
            <!-- 左カラム -->
            <div class=""column"">
                <div class=""card"">
                    <div class=""card-title"">🔍 セクション1</div>
                    <div class=""card-content"">
                        コンテンツ
                    </div>
                </div>
                
                <!-- 他のカード -->
            </div>
            
            <!-- 右カラム -->
            <div class=""column"">
                <!-- カード -->
            </div>
        </div>
        
        <div class=""footer"">フッター情報 | © YYYY</div>
    </div>
</body>
</html>
```

## 5. 出力時の注意点

- 文字のはみ出しが最も重要な問題。絶対に発生させないこと
- 特にリスト、テーブル、長文パラグラフには注意
- コンテンツ量が多い場合は、フォントサイズを12pxまで小さくする
- グリッド/テーブルのセル幅を調整し、均等配分より内容に合わせた配分を優先
- スクロールバーが必要な場合は、美観を損なわないよう最小限に
- カード間のバランスを考慮し、高さの極端な偏りを避ける

情報密度と視認性を両立した、プロフェッショナルなスライドの作成を心がけてください。
"

このプロンプトを貼り付けてから、「AIエージェントの仕組みがわかるスライド資料を作成して」と伝えると、綺麗なスライド資料をまとめてくれました。

どうでしょう、なかなかのクオリティではないでしょうか？

たとえばChatGPTのDeepResearchとの組み合わせで、まずレポート文章をChatGPTで出力してからClaude3.7Sonnetにレポート文章を読み込ませてスライド資料にまとめる、なんて使い方もできそうですね。

まとめ

実際にClaude3.7Sonnetモデルを使って画像やスライド資料を作成してみて、Claude 3.7は、資料作成の強力なサポートツールとして非常に優れていることがわかりました。特に、画像をアップロードすることで類似の図を作成したり、HTML/CSSを指定して洗練されたスライド資料を生成したりする機能は、業務効率を大幅に向上させる可能性を秘めています。

これまでスライド作成や図解の作成には多くの手間と時間がかかっていましたが、Claude 3.7の登場により、それらの作業を自動化し、高品質な成果物を短時間で得ることが可能になりました。

もし、ちょっとでも気になる、使ってみたい、と言う方は、この記事を参考に、チャレンジしてみてください！