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

はじめに

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

目的

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

プロンプトの内容

# グラフィックレコーディング風インフォグラフィック変換プロンプト 
## 目的 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風の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. カラースキーム

<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が生成されました。

<!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>

See the Pen らくらくサイト - 簡単ウェブサイト運営 by Yushi Yamamoto (@yamamotoyushi) on CodePen.

まとめ

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

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

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

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

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

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

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

👉 ポートフォリオ

🌲 らくらくサイト