「HTMLインフォグラフィック」を作る用のプロンプト？

じゃあためしにこの内容を以下のプロンプトで実行してみるか・・・

www.tyoshiki.com

ChatGPT版

Claude3.7版

うーん。だめそう。

一度読み込ませる前に、ChatGPTとかで内容を再構成して
記事化するために最適化してもらわないといけないかも。

一時的にClaude3.7が使えなくなってたのも痛い（現状は3.5しか使えない状態）

また3.7が使えるようになったら試してみます。

一応メモ（多分はてなブログでは表示化けすると思う）

Prompt：
# グラフィックレコーディング風インフォグラフィック変換プロンプト
## 目的
以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します
手書き風の図形やアイコンを活用して内容を視覚的に表現します。
## デザイン仕様
### 1. カラースキーム
```







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

• 左上から右へ、上から下へと情報を順次配置
• 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol）
• 手描き風の囲み線、矢印、バナー、吹き出し
• テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
• キーワードの強調（色付き下線、マーカー効果）
• 関連する概念を線や矢印で接続
• 絵文字やアイコンを効果的に配置（✏️📌📝🔍📊など）

### 3. タイポグラフィ
- タイトル：32px、グラデーション効果、太字
- サブタイトル：16px、#475569
- セクション見出し：18px、#1e40af、アイコン付き
- 本文：14px、#334155、行間1.4
- フォント指定：
```html

```
### 4. レイアウト
- ヘッダー：左揃えタイトル＋右揃え日付/出典
- 3カラム構成：左側33%、中央33%、右側33%
- カード型コンポーネント：白背景、角丸12px、微細シャドウ
- セクション間の適切な余白と階層構造
- 適切にグラスモーフィズムを活用
- 横幅は100%にして
## グラフィックレコーディング表現技法

• テキストと視覚要素のバランスを重視
• キーワードを囲み線や色で強調
• 簡易的なアイコンや図形で概念を視覚化
• 数値データは簡潔なグラフや図表で表現
• 接続線や矢印で情報間の関係性を明示
• 余白を効果的に活用して視認性を確保

## 全体的な指針

• 読み手が自然に視線を移動できる配置
• 情報の階層と関連性を視覚的に明確化
• 手書き風の要素で親しみやすさを演出
• 視覚的な記憶に残るデザイン
• フッターに出典情報を明記

## 変換する文章/記事

ーーー