Google Fonts使用教學日文資訊圖表

{
  "type": "日式資訊圖",
  "topic": "[Google Fonts的使用方法]",
  "style": "利落現代扁平化設計，純白背景，柔和粉藍與薄荷色角落漸變色塊，帶微陰影的圓角卡片，科技教程視覺風格，清晰向量排版與UI插圖",
  "canvas": {
    "aspect_ratio": "16:9"
  },
  "headline": {
    "main": "[Google Fontsの使い方]",
    "sub": "[基本の3ステップ]"
  },
  "layout": {
    "sections": [
      {
        "title": "[1. フォントを選ぶ]",
        "position": "left",
        "count": 1,
        "labels": [
          "[1. フォントを選ぶ]"
        ],
        "card_style": "帶淺藍邊框與柔和陰影的圓角白色面板",
        "icon": "帶數字1的藍色圓形圖示",
        "illustration": "顯示字型搜尋UI的瀏覽器視窗，包含3行大型‘Aa あ’字型預覽、頂部搜尋欄與簡潔介面線條",
        "body_text": "[Google Fontsのサイトで、好きな書體を探します。]"
      },
      {
        "title": "[2. 埋め込みコードを取得]",
        "position": "center",
        "count": 1,
        "labels": [
          "[2. 埋め込みコードを取得]"
        ],
        "card_style": "帶淺藍邊框與柔和陰影的圓角白色面板",
        "icon": "帶數字2的藍色圓形圖示",
        "illustration": "帶有兩條程式碼片段並由細線分隔的深色程式碼編輯面板",
        "code_blocks": {
          "count": 2,
          "labels": [
            "<link> (HTML)",
            "@import (CSS)"
          ],
          "content": [
            "<link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\">",
            "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');"
          ]
        },
        "body_text": "[表示された<link>やCSSをコピーします。]"
      },
      {
        "title": "[3. CSSで適用]",
        "position": "right",
        "count": 1,
        "labels": [
          "[3. CSSで適用]"
        ],
        "card_style": "帶淺藍邊框與柔和陰影的圓角白色面板",
        "icon": "帶數字3的藍色圓形圖示",
        "illustration": "展示帶有兩個選擇器及font-family樣式的白色程式碼卡片",
        "code_blocks": {
          "count": 2,
          "labels": [
            ".title",
            "body"
          ],
          "content": [
            ".title { font-family: 'Poppins', sans-serif; }",
            "body { font-family: 'Noto Sans JP', sans-serif; }"
          ]
        },
        "body_text": "[font-familyを指定して、デザインに反映します。]"
      },
      {
        "title": "[ポイント]",
        "position": "bottom-left",
        "count": 3,
        "labels": [
          "[読みやすさで選ぶ]",
          "[日本語対応を確認する]",
          "[使いすぎず、2〜3種類に絞る]"
        ],
        "card_style": "淡藍色調圓角白色卡片",
        "icon": "圓形內的藍星圖示",
        "body_format": "專案符號列表"
      },
      {
        "title": "[よく使う組み合わせ]",
        "position": "bottom-center-right",
        "count": 2,
        "labels": [
          "[見出し: Poppins]",
          "[本文: Noto Sans JP]"
        ],
        "card_style": "淡薰衣草紫圓角白色卡片",
        "icon": "紫色雙環相扣圖示",
        "body_format": "兩個膠囊型示例框"
      }
    ],
    "connectors": {
      "count": 2,
      "style": "連線頂部3個卡片的大號藍色向右箭頭"
    },
    "pagination": {
      "text": "[2 / 2]",
      "position": "bottom-right",
      "style": "藍色圓角標籤"
    }
  },
  "text_language": "Japanese",
  "color_palette": {
    "primary_blue": "#2f80ff",
    "navy": "#0f2b5b",
    "google_colors": [
      "#4285F4",
      "#DB4437",
      "#F4B400",
      "#0F9D58"
    ],
    "lavender": "#8b6cff",
    "background": "#ffffff"
  }
}