Mystic Library

日本語

English

日本語

English

テーマ

グラレコ風インフォグラフィック V1 石鹸泡グリーン ​

想定用途 ​

  • 石鹸の泡のようなグリーン系カラーパレットでインフォグラフィックを作成したい
  • アニメーション効果を活用した動的な資料を作成したい
  • 3カラム構成で情報を整理して視覚化したい

プロンプト本文 ​

text
# グラフィックレコーディング風インフォグラフィック変換プロンプト V1

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

## デザイン仕様
### 1. カラースキーム（石鹸泡グリーン）
```

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

  • 左上から右へ、上から下へと情報を順次配置
  • 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol）
  • 手描き風の囲み線、矢印、バナー、吹き出し
  • テキストと視覚要素（アイコン、シンプルな図形）の組み合わせ
  • キーワードの強調（色付き下線、マーカー効果）
  • 関連する概念を線や矢印で接続
  • 絵文字やアイコン、Font Awesomeを効果的に配置（✏️📌📝🔍📊など）
  • アニメーションを付与したダイナミックな資料にする
    • Font Awesomeアイコンのアニメーション（fa-beat, fa-bounce, fa-flipなど）
    • 背景グラデーションの変化アニメーション
    • カードの出現時のフェードイン効果

3. タイポグラフィ ​

  • タイトル：32px、グラデーション効果、太字
  • サブタイトル：16px、#475569
  • セクション見出し：18px、#1e40af、アイコン付き
  • 本文：14px、#334155、行間1.4
  • フォント指定：Kaisei Decol, Yomogi, Zen Kurenaido

4. レイアウト ​

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

グラフィックレコーディング表現技法 ​

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

全体的な指針 ​

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

変換する文章/記事 ​

[ここにインフォグラフィック化したいテキストコンテンツを入力]


## 使い方

1. プロンプトをコピーしてAIチャットツールに貼り付け
2. 変換する文章/記事部分にインフォグラフィック化したいテキストを入力
3. 生成されたHTMLをブラウザで表示・保存

## 入力例

変換する文章/記事 ​

サステナビリティへの取り組み ​

  1. 省エネ・再生可能エネルギーの導入
  2. 廃棄物の削減とリサイクル
  3. 地域社会との連携

## 出力例

石鹸の泡のようなグリーン系カラーパレット（深いグリーン#034159、ティール#025951、エメラルド#02735E、明るいグリーン#038C3E、ライム#0CF25D）を使用した、3カラム構成のアニメーション付きグラレコ風インフォグラフィックHTMLが生成されます。

## 注意点

- Font Awesomeのアニメーションが適用されます
- 背景グラデーションが変化する動的な効果があります
- 3カラム均等割り付けで情報が配置されます
- 手書き風フォントで温かみのある印象になります

---

# Graphic Recording Style Infographic V1 Soap Bubble Green

## Intended Use

- Create infographics with soap bubble-like green color palette
- Create dynamic materials with animation effects
- Organize and visualize information in 3-column layout

## Prompt

```text
# Graphic Recording Style Infographic Conversion Prompt V1

## Purpose
Convert the following content into a perfect Japanese graphic recording style HTML infographic created by a top-tier designer. Aim for the highest standards in both information design and visual design. Use hand-drawn style shapes and icons to visually represent the content.

## Design Specifications
### 1. Color Scheme (Soap Bubble Green)
```

2. Graphic Recording Elements ​

  • Arrange information sequentially from top-left to right, top to bottom
  • Use Japanese handwritten fonts (Yomogi, Zen Kurenaido, Kaisei Decol)
  • Hand-drawn style borders, arrows, banners, speech bubbles
  • Combination of text and visual elements (icons, simple shapes)
  • Keyword emphasis (colored underlines, marker effects)
  • Connect related concepts with lines and arrows
  • Effectively place emojis, icons, Font Awesome (✏️📌📝🔍📊, etc.)
  • Create dynamic materials with animations
    • Font Awesome icon animations (fa-beat, fa-bounce, fa-flip, etc.)
    • Background gradient change animations
    • Fade-in effects on card appearance

3. Typography ​

  • Title: 32px, gradient effect, bold
  • Subtitle: 16px, #475569
  • Section headings: 18px, #1e40af, with icons
  • Body: 14px, #334155, line height 1.4
  • Fonts: Kaisei Decol, Yomogi, Zen Kurenaido

4. Layout ​

  • Header: left-aligned title + right-aligned date/source
  • 3-column layout: left 33%, center 33%, right 33%
  • Card components: white background, rounded corners 12px, subtle shadow
  • Proper spacing and hierarchy between sections
  • Use glassmorphism appropriately
  • Width 100%

Graphic Recording Expression Techniques ​

  • Emphasize balance between text and visual elements
  • Highlight keywords with borders and colors
  • Visualize concepts with simple icons and shapes
  • Express numerical data with concise graphs and charts
  • Clarify relationships between information with connecting lines and arrows
  • Effectively use whitespace for visibility

Overall Guidelines ​

  • Natural eye flow arrangement
  • Visually clarify information hierarchy and relationships
  • Create approachable feel with hand-drawn elements
  • Design that remains in visual memory
  • Use animation effects to draw attention to information
  • Clearly cite sources in footer

Article/Text to Convert ​

[Enter text content to be converted to infographic here]


## Usage

1. Copy prompt and paste into AI chat tool
2. Enter infographic text in "Article/Text to Convert" section
3. View and save generated HTML in browser

## Input Example

Article/Text to Convert ​

Sustainability Initiatives ​

  1. Energy conservation and renewable energy adoption
  2. Waste reduction and recycling
  3. Community partnerships

## Output Example

Generates animated graphic recording style infographic HTML using soap bubble-like green color palette (deep green #034159, teal #025951, emerald #02735E, bright green #038C3E, lime #0CF25D) in 3-column layout.

## Notes

- Font Awesome animations are applied
- Dynamic effects with changing background gradients
- Information arranged in equal 3-column distribution
- Warm impression with handwritten fonts