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": "大きな「Aa あ」のサンプルプレビューが3行並んだフォント検索UI、上部検索バー、ウィンドウ操作ボタンを備えたブラウザウィンドウ",
        "body_text": "[Google Fontsのサイトで、好きな書体を探します。]"
      },
      {
        "title": "[2. 埋め込みコードを取得]",
        "position": "center",
        "count": 1,
        "labels": [
          "[2. 埋め込みコードを取得]"
        ],
        "card_style": "水色のボーダーと柔らかなシャドウが付いた角丸の白いパネル",
        "icon": "数字の2が入った青い丸",
        "illustration": "細い区切り線で分けられた2つのコードスニペットを表示するダークコードエディタパネル",
        "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": "2つのセレクターとfont-familyプロパティを含むCSSの記述カード",
        "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": "2つのピル型ボックス"
      }
    ],
    "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"
  }
}