Claude3.7 Artifact
Google fonts の指定を、
下記のフォントのNoto+Sans+JP コードに書き換えました。
Prompt：
# グラフィックレコーディング風インフォグラフィック変換プロンプト
## 目的
以下の内容を、超一流デザイナーが作成したような、日本語で完璧なパワーポイント風のビジネスプレゼンテーションで16:9の比率の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. グラフィックレコーディング要素
- 左上から右へ、上から下へと情報を順次配置
- 日本語のゴシック系フォントの使用
- 手描き風の囲み線、矢印、バナー、吹き出し
- テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
- キーワードの強調（色付き下線、マーカー効果）
- 関連する概念を線や矢印で接続
- 絵文字やアイコンを効果的に配置（✏️📌📝🔍📊など）
### 3. タイポグラフィ
- タイトル：32px、グラデーション効果、太字
- サブタイトル：16px、#475569
- セクション見出し：18px、#1e40af、アイコン付き
- 本文：14px、#334155、行間1.4
- フォント指定：
```html
<style>
@import
url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
</style>
```
### 4. レイアウト
- ヘッダー：左揃えタイトル＋右揃え日付/出典
- 3カラム構成：左側33%、中央33%、右側33%
- カード型コンポーネント：白背景、角丸12px、微細シャドウ
- セクション間の適切な余白と階層構造
- 適切にグラスモーフィズムを活用
- 横幅は100%にして
## グラフィックレコーディング表現技法
- テキストと視覚要素のバランスを重視
- キーワードを囲み線や色で強調
- 簡易的なアイコンや図形で概念を視覚化
- 数値データは簡潔なグラフや図表で表現
- 接続線や矢印で情報間の関係性を明示
- 余白を効果的に活用して視認性を確保
## 全体的な指針
- 読み手が自然に視線を移動できる配置
- 情報の階層と関連性を視覚的に明確化
- 手書き風の要素で親しみやすさを演出
- 視覚的な記憶に残るデザイン
- フッターに出典情報を明記
## 変換する文章/記事
https://x.com/hAru_mAki_ch/status/1896533569968984546
Claude Artifactでカラーパレットの変更
Prompt： # グラフィックレコーディング風インフォグラフィック変換プロンプト ## 目的 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なパワーポイント風のビジネスプレゼンテーションで16:9の比率のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します 手書き風の図形やアイコンを活用して内容を視覚的に表現します。 ## デザイン仕様 ### 1. カラースキーム ``` <palette> <!-- Primary Color - Pink --> <rect x="50" y="80" width="140" height="100" fill="#E94B87" rx="5" ry="5" /> <text x="120" y="200" text-anchor="middle" class="color-name">メインカラー</text> <text x="120" y="220" text-anchor="middle" class="color-code">#E94B87</text> <text x="120" y="240" text-anchor="middle" class="color-desc">アクセント・強調用</text> <!-- Secondary Color 1 - Dark Gray --> <rect x="200" y="80" width="140" height="100" fill="#404040" rx="5" ry="5" /> <text x="270" y="200" text-anchor="middle" class="color-name">ダークグレー</text> <text x="270" y="220" text-anchor="middle" class="color-code">#404040</text> <text x="270" y="240" text-anchor="middle" class="color-desc">見出し・タイトル用</text> <!-- Secondary Color 2 - Light Gray --> <rect x="350" y="80" width="140" height="100" fill="#A0A0A0" rx="5" ry="5" /> <text x="420" y="200" text-anchor="middle" class="color-name">ライトグレー</text> <text x="420" y="220" text-anchor="middle" class="color-code">#A0A0A0</text> <text x="420" y="240" text-anchor="middle" class="color-desc">サブテキスト用</text> <!-- Secondary Color 3 - Light Pink --> <rect x="500" y="80" width="140" height="100" fill="#F8D7E3" rx="5" ry="5" /> <text x="570" y="200" text-anchor="middle" class="color-name">ライトピンク</text> <text x="570" y="220" text-anchor="middle" class="color-code">#F8D7E3</text> <text x="570" y="240" text-anchor="middle" class="color-desc">背景・区切り用</text> <!-- Secondary Color 4 - Navy Blue --> <rect x="650" y="80" width="140" height="100" fill="#2D3E50" rx="5" ry="5" /> <text x="720" y="200" text-anchor="middle" class="color-name">ネイビー</text> <text x="720" y="220" text-anchor="middle" class="color-code">#2D3E50</text> <text x="720" y="240" text-anchor="middle" class="color-desc">フッター・重要部分</text> <!-- Example Usage --> <rect x="50" y="280" width="740" height="80" fill="#FFFFFF" rx="5" ry="5" stroke="#DDDDDD" stroke-width="1" /> <rect x="60" y="290" width="20" height="60" fill="#E94B87" /> <rect x="90" y="290" width="650" height="25" fill="#F8D7E3" rx="3" ry="3" /> <text x="100" y="308" font-family="Arial, sans-serif" font-size="14" fill="#404040" font-weight="bold">ビジネス文書の見出し例</text> <text x="100" y="335" font-family="Arial, sans-serif" font-size="12" fill="#404040">本文テキスト</text> <text x="400" y="335" font-family="Arial, sans-serif" font-size="12" fill="#A0A0A0">補足情報</text> <rect x="650" y="325" width="80" height="20" fill="#2D3E50" rx="3" ry="3" /> <text x="690" y="338" font-family="Arial, sans-serif" font-size="10" fill="#FFFFFF" text-anchor="middle">詳細</text>
<palette>
### 2. グラフィックレコーディング要素 – 左上から右へ、上から下へと情報を順次配置 – 日本語のゴシック系フォントの使用 – 手描き風の囲み線、矢印、バナー、吹き出し – テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ – キーワードの強調（色付き下線、マーカー効果） – 関連する概念を線や矢印で接続 – 絵文字やアイコンを効果的に配置（✏️📌📝🔍📊など） ### 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%にして ## グラフィックレコーディング表現技法 – テキストと視覚要素のバランスを重視 – キーワードを囲み線や色で強調 – 簡易的なアイコンや図形で概念を視覚化 – 数値データは簡潔なグラフや図表で表現 – 接続線や矢印で情報間の関係性を明示 – 余白を効果的に活用して視認性を確保 ## 全体的な指針 – 読み手が自然に視線を移動できる配置 – 情報の階層と関連性を視覚的に明確化 – 手書き風の要素で親しみやすさを演出 – 視覚的な記憶に残るデザイン – フッターに出典情報を明記 ## 変換する文章/記事
Prompt： # グラフィックレコーディング風インフォグラフィック変換プロンプト ## 目的 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なパワーポイント風のビジネスプレゼンテーションで16:9の比率のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します 手書き風の図形やアイコンを活用して内容を視覚的に表現します。 ## デザイン仕様 ### 1. カラースキーム ``` <palette> <!-- Primary Color - Blue --> <rect x="50" y="80" width="140" height="100" fill="#1A5F9C" rx="5" ry="5" /> <text x="120" y="200" text-anchor="middle" class="color-name">メインカラー</text> <text x="120" y="220" text-anchor="middle" class="color-code">#1A5F9C</text> <text x="120" y="240" text-anchor="middle" class="color-desc">アクセント・強調用</text> <!-- Secondary Color 1 - Dark Gray --> <rect x="200" y="80" width="140" height="100" fill="#333333" rx="5" ry="5" /> <text x="270" y="200" text-anchor="middle" class="color-name">ダークグレー</text> <text x="270" y="220" text-anchor="middle" class="color-code">#333333</text> <text x="270" y="240" text-anchor="middle" class="color-desc">見出し・タイトル用</text> <!-- Secondary Color 2 - Light Gray --> <rect x="350" y="80" width="140" height="100" fill="#8A9BAB" rx="5" ry="5" /> <text x="420" y="200" text-anchor="middle" class="color-name">ブルーグレー</text> <text x="420" y="220" text-anchor="middle" class="color-code">#8A9BAB</text> <text x="420" y="240" text-anchor="middle" class="color-desc">サブテキスト用</text> <!-- Secondary Color 3 - Light Blue --> <rect x="500" y="80" width="140" height="100" fill="#D9E6F2" rx="5" ry="5" /> <text x="570" y="200" text-anchor="middle" class="color-name">ライトブルー</text> <text x="570" y="220" text-anchor="middle" class="color-code">#D9E6F2</text> <text x="570" y="240" text-anchor="middle" class="color-desc">背景・区切り用</text> <!-- Secondary Color 4 - Dark Blue --> <rect x="650" y="80" width="140" height="100" fill="#0A3057" rx="5" ry="5" /> <text x="720" y="200" text-anchor="middle" class="color-name">ダークブルー</text> <text x="720" y="220" text-anchor="middle" class="color-code">#0A3057</text> <text x="720" y="240" text-anchor="middle" class="color-desc">フッター・重要部分</text> <!-- Example Usage --> <rect x="50" y="280" width="740" height="80" fill="#FFFFFF" rx="5" ry="5" stroke="#DDDDDD" stroke-width="1" /> <rect x="60" y="290" width="20" height="60" fill="#1A5F9C" /> <rect x="90" y="290" width="650" height="25" fill="#D9E6F2" rx="3" ry="3" /> <text x="100" y="308" font-family="Arial, sans-serif" font-size="14" fill="#333333" font-weight="bold">ビジネス文書の見出し例</text> <text x="100" y="335" font-family="Arial, sans-serif" font-size="12" fill="#333333">本文テキスト</text> <text x="400" y="335" font-family="Arial, sans-serif" font-size="12" fill="#8A9BAB">補足情報</text> <rect x="650" y="325" width="80" height="20" fill="#0A3057" rx="3" ry="3" /> <text x="690" y="338" font-family="Arial, sans-serif" font-size="10" fill="#FFFFFF" text-anchor="middle">詳細</text>
ジブリ風のアニメの画像から抽出するパレットをつくる…。
画像からカラーパレットを抽出するプロンプト
以下のプロンプトを使用して、アニメや写真から魅力的かつ汎用性の高いカラーパレットを作成できます。このプロンプトをコピーして、必要に応じて調整してください。
添付した[アニメ/写真]から調和のとれたカラーパレットを作成してください。以下の要件に沿って作成をお願いします：
1. 画像から目立つ主要な色を5〜7色抽出してください2. 抽出した色を以下のように分類してください：
- メインカラー（画像の中で最も目立つ/代表的な色）
- アクセントカラー（目を引く差し色）
- ベースカラー（背景や大きな面積を占める色）
- 補助色（全体のバランスを取る色）
3. 各色について以下の情報を提供してください：
- カラー名（日本語と英語）
- HEX値
- RGB値
- 使用推奨箇所（デザイン上どこに使うべきか）
この画像の雰囲気や感情を的確に捉えた、調和のとれた実用的なカラーパレットを期待しています。
■オリジナルプロンプト
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%にして
## グラフィックレコーディング表現技法
– テキストと視覚要素のバランスを重視
– キーワードを囲み線や色で強調
– 簡易的なアイコンや図形で概念を視覚化
– 数値データは簡潔なグラフや図表で表現
– 接続線や矢印で情報間の関係性を明示
– 余白を効果的に活用して視認性を確保
## 全体的な指針
– 読み手が自然に視線を移動できる配置
– 情報の階層と関連性を視覚的に明確化
– 手書き風の要素で親しみやすさを演出
– 視覚的な記憶に残るデザイン
– フッターに出典情報を明記
## 変換する文章/記事
ーーー
——————————————————-
提供された情報を分析し、超手描きで視覚的な1枚の画像として表現してください。
– **ユーザー写真**: あれば自然に組み込み（背景除去やイラスト加工も可）
### 2. 入力情報の処理
人生を懸けて取り組んでください。
