Graphic Recording HTML Creation V4 Icon Emphasis

Intended Use

• Create graphic recording with maximum utilization of Font Awesome icons
• Create visually impactful expressions centered on icons
• Convey information primarily through icons rather than text

Prompt

# Graphic Recording Style Infographic Conversion Prompt (V4: Icon Emphasis)

## Purpose
Please convert the following content into a Japanese graphic recording-style HTML infographic that maximizes the use of **large Font Awesome icons**. Express concepts with visual impact using large Font Awesome icons instead of handwritten illustrations.

## Design Specifications
### 1. Color Scheme (UI/UX Theme)

```

2. Graphic Recording Elements (Icon Priority)

• Place everything on a canvas with white background (#FFF8F5)
• Place extra-large theme/title icon in center (fa-5x〜fa-7x)
• Divide content into multiple sections, enclose with handwritten-style speech bubbles and round frames
• Place extra-large Font Awesome icons for each keyword (fa-4x〜fa-6x)
• Icon-centered layout with text placed supplementarily
• Place thick arrows and lines connecting related concepts (→ use fa-arrow-right-long etc.) in large size
• Emphasize keywords with colored markers and underlines (background color emphasis)
• Place extra-large icons (fa-star, fa-lightbulb etc.) at fa-5x or larger for important points
• Use large emoji-style icons (fa-face-smile, fa-face-sad etc.) at fa-4x or larger for emotional expressions
• Place large fa-circle-question at fa-4x or larger for questions
• Utilize extra-large fa-user, fa-person etc. icons at fa-5x for character expressions
• Use icons like fa-circle-dot for bullet points of each concept (larger than usual)

3. Typography

• Title: 36px, bold, with extra-large related icon (fa-6x or larger)
• Subtitle: 24px, with large icon (fa-4x)
• Keywords: 20px, bold, with background color, large icon (fa-3x〜fa-5x) placed alongside
• Body text: 16px, line spacing 1.5 (reduce text amount relative to icons)
• Font specification: Kaisei Decol, Yomogi, Zen Kurenaido

4. Layout (Icon Centered)

• Overall: Icon-centered layout, prioritize visual impact
• Header: Title with ultra-large icon (fa-7x) + date
• Each section: Large icon (fa-4x〜fa-6x) + speech bubble
• Also actively place icons within speech bubbles (fa-lg〜fa-2x)

5. Icon Usage Guidelines

• Section heading icons: fa-5x〜fa-7x
• Keyword icons: fa-3x〜fa-5x
• Bullet point icons: fa-2x〜fa-3x
• Inline icons: fa-lg
• Emotional expressions: fa-face-smile, fa-face-sad-tear, fa-face-angry (fa-4x or larger)
• Important points: fa-star, fa-lightbulb, fa-circle-check (fa-5x or larger)
• Questions/inquiries: fa-circle-question, fa-magnifying-glass (fa-4x or larger)

---

Text/Article to Convert

[Enter text content to convert to graphic recording here]

## How to Use

1. Copy the prompt and paste into AI chat tool
2. Enter the text content you want to convert in the text/article section
3. Display and save the generated HTML in browser

## Input Example

Text/Article to Convert

3 Steps of Programming Learning

1. Learn basics (grammar, basic concepts)
2. Practice (create small projects)
3. Develop (keep learning new technologies)

## Output Example

Graphic recording HTML with UI/UX color palette and visual impact centered on large icons (fa-4x〜fa-7x) will be generated.

## Notes

- Very strong visual impact due to extremely large icon sizes
- Minimize text amount, convey information through icons
- Large icon placed for each keyword