AIでインフォグラフィックを生成！グラフィックレコーディング風プロンプトの実験

# グラフィックレコーディング風インフォグラフィック変換プロンプトを試してみた

## はじめに

グラフィックレコーディングとは、情報を視覚的に整理し、図やアイコンを活用して伝える手法です。今回は、**グラフィックレコーディング風のインフォグラフィックを自動生成するプロンプト**を作成し、実際に試してみました。

![スクリーンショット 2025-03-04 19.06.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3637864/d699a316-b452-4ea2-87e2-4e1b9b453d9b.png)


## 目的

このプロンプトの目的は、**テキスト情報を視覚的にわかりやすくデザインし、超一流デザイナーが作成したようなHTMLインフォグラフィックに変換すること**です。

## プロンプトの内容


```xml
# グラフィックレコーディング風インフォグラフィック変換プロンプト 
## 目的 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します 手書き風の図形やアイコンを活用して内容を視覚的に表現します。 
## デザイン仕様 
### 1. カラースキーム  <palette> <color name='ファッション-1' rgb='593C47' r='89' g='59' b='70' /> <color name='ファッション-2' rgb='F2E63D' r='242' g='230' b='60' /> <color name='ファッション-3' rgb='F2C53D' r='242' g='196' b='60' /> <color name='ファッション-4' rgb='F25C05' r='242' g='91' b='4' /> <color name='ファッション-5' rgb='F24405' r='242' g='68' b='4' /> </palette>  
### 2. グラフィックレコーディング要素 - 左上から右へ、上から下へと情報を順次配置 - 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol） - 手描き風の囲み線、矢印、バナー、吹き出し - テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ - キーワードの強調（色付き下線、マーカー効果） - 関連する概念を線や矢印で接続 - 絵文字やアイコンを効果的に配置（など） 
### 3. タイポグラフィ - タイトル：32px、グラデーション効果、太字 - サブタイトル：16px、#475569 - セクション見出し：18px、#1e40af、アイコン付き - 本文：14px、#334155、行間1.4 - フォント指定： html <style> 
@import
 url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap…'); </style>  
 ### 4. レイアウト - ヘッダー：左揃えタイトル＋右揃え日付/出典 - 3カラム構成：左側33%、中央33%、右側33% - カード型コンポーネント：白背景、角丸12px、微細シャドウ - セクション間の適切な余白と階層構造 - 適切にグラスモーフィズムを活用 - 横幅は100%にして 
 ## グラフィックレコーディング表現技法 - テキストと視覚要素のバランスを重視 - キーワードを囲み線や色で強調 - 簡易的なアイコンや図形で概念を視覚化 - 数値データは簡潔なグラフや図表で表現 - 接続線や矢印で情報間の関係性を明示 - 余白を効果的に活用して視認性を確保 
 ## 全体的な指針 - 読み手が自然に視線を移動できる配置 - 情報の階層と関連性を視覚的に明確化 - 手書き風の要素で親しみやすさを演出 - 視覚的な記憶に残るデザイン - フッターに出典情報を明記 

## 変換する文章/記事
```

プロンプトでは以下の要素を指定しました。

### 1. カラースキーム

```xml
<palette>
  <color name='ファッション-1' rgb='593C47' />
  <color name='ファッション-2' rgb='F2E63D' />
  <color name='ファッション-3' rgb='F2C53D' />
  <color name='ファッション-4' rgb='F25C05' />
  <color name='ファッション-5' rgb='F24405' />
</palette>
```

### 2. グラフィックレコーディング要素

- **手書き風フォントの使用**（Yomogi, Zen Kurenaido, Kaisei Decol）
- **矢印、吹き出し、バナー、囲み線**を活用
- **キーワードの強調**（色付き下線、マーカー効果）
- **視覚的な階層を整理**（情報を上から下へ順に配置）

### 3. レイアウト

- ヘッダーに「タイトル＋日付/出典」
- **3カラム構成（左 33%、中央 33%、右 33%）**
- **カード型コンポーネント**を活用
- **グラスモーフィズムを適用**

## 実際の出力結果

このプロンプトを使用して変換した結果、以下のようなHTML/CSSが生成されました。

```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>
    @import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap');
    
    :root {
      --fashion-1: #593C47;
      --fashion-2: #F2E63D;
      --fashion-3: #F2C53D;
      --fashion-4: #F25C05;
      --fashion-5: #F24405;
      --text-dark: #334155;
      --heading: #1e40af;
    }
    
    body {
      font-family: 'Zen Kurenaido', sans-serif;
      background-color: #f8f9fa;
      color: var(--text-dark);
      line-height: 1.4;
      padding: 20px;
    }
    
    .container {
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
      background-color: white;
      border-radius: 12px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      padding: 30px;
    }
    
    .title {
      font-family: 'Kaisei Decol', serif;
      font-size: 32px;
      font-weight: bold;
      background: linear-gradient(45deg, var(--fashion-1), var(--fashion-4));
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title">らくらくサイト</h1>
    <p>簡単ウェブサイト運営をもっと手軽に 💻✨</p>
  </div>
</body>
</html>
```

<p class="codepen" data-height="647" data-default-tab="result" data-slug-hash="zxYZymR" data-pen-title="らくらくサイト - 簡単ウェブサイト運営" data-editable="true" data-user="yamamotoyushi" style="height: 647px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/yamamotoyushi/pen/zxYZymR">
  らくらくサイト - 簡単ウェブサイト運営</a> by Yushi Yamamoto (<a href="https://codepen.io/yamamotoyushi">@yamamotoyushi</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


## まとめ

今回作成したプロンプトを試した結果、以下のポイントが確認できました。

✅ **デザインの統一感があるHTML/CSSを自動生成**できた  
✅ **手書き風フォントや装飾が適用**され、グラフィックレコーディングの雰囲気を再現できた  
✅ **視覚的に情報が整理されたデザイン**になった  

この手法を活用すれば、**ブログ記事やレポートを簡単に視覚的なインフォグラフィックに変換**できそうです。

今後は、より高度なレイアウト調整やカスタマイズの余地を探りながら、このプロンプトをブラッシュアップしていきたいと思います！


----

### 最後に：業務委託のご相談を承ります

私は、業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用し、レスポンシブなWebサイトやインタラクティブなアプリケーション、API連携など、幅広いニーズに対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、ぜひお気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

👉 [ポートフォリオ](https://yushiyamamoto.vercel.app/)


🌲 [らくらくサイト](https://rakuraku-site.prodouga.com/)