Google Fonts 日本語チュートリアル インフォグラフィック

{ &quot;type&quot;: &quot;日本語のインフォグラフィック&quot;, &quot;topic&quot;: &quot;Googleフォントの使い方&quot;, &quot;style&quot;: &quot;デザインは、白の背景、柔らかなライトブルーとミントグリーンのコーナーブロック、微妙な影のある丸みを帯びたコーナーカード、技術チュートリアルの美学、鮮明なベクタータイポグラフィとUIイラストを特徴とする、クリーンでモダンなフラットスタイルです。&quot;, &quot;canvas&quot;: { &quot;aspect_ratio&quot;: &quot;16:9&quot; }, &quot;headline&quot;: { &quot;main&quot;: &quot;Googleフォントの使い方&quot;, &quot;sub&quot;: &quot;基本的な3つのステップ&quot; }, &quot;layout&quot;: { &quot;sections&quot;: [ { &quot;title&quot;: &quot;1. フォントを選択&quot;, &quot;position&quot;: &quot;left&quot;, &quot;count&quot;: 1, &quot;labels&quot;: [ &quot;1. フォントを選択&quot; ], &quot;card_style&quot;: &quot;ライトブルーの枠線/影が付いた丸みを帯びた白いパネル&quot;, &quot;icon&quot;: &quot;青い数字の1の円&quot;, &quot;illustration&quot;: &quot;ブラウザウィンドウにフォント検索インターフェースが表示され、大きなAaとあのサンプルを含む3つのフォントプレビュー、上部の検索バー、小さな色の付いたウィンドウボタン、ライトグレーのインターフェースが表示されます。線と青いアクセント線。、&quot;body_text&quot;: &quot;Google Fonts の Web サイトでお好きなフォントを検索してください。&quot; }、{ &quot;title&quot;: &quot;2. 埋め込みコードを取得する&quot;, &quot;position&quot;: &quot;center&quot;, &quot;count&quot;: 1、&quot;labels&quot;: [ &quot;2. 埋め込みコードを取得する&quot; ]、&quot;card_style&quot;: &quot;水色の枠線/影が付いた丸い白いパネル&quot;, &quot;icon&quot;: &quot;青い数字の 2 の円&quot;, &quot;illustration&quot;: &quot;暗いコード パネルには、細い区切り線で区切られた 2 つのラベル付きコード例が含まれています。&quot;、&quot;code_blocks&quot;: { &quot;count&quot;: 2、&quot;labels&quot;: [ &quot;<link> (HTML)&quot;, &quot; @import (CSS)&quot; ], &quot;content&quot;: [ &quot; <link href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap\" rel=\"stylesheet\"> &quot;, &quot; @import url(&#39;https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&amp;display=swap&#39;);&quot; ] }, &quot;body_text&quot;: &quot;表示をコピー<link>または CSS コード。 }, { &quot;title&quot;: &quot;3. CSS での適用&quot;, &quot;position&quot;: &quot;right&quot;, &quot;count&quot;: 1, &quot;labels&quot;: [ &quot;3. CSS での適用&quot; ], &quot;card_style&quot;: &quot;水色の枠線/影が付いた丸い白いパネル&quot;, &quot;icon&quot;: &quot;青い数字の 3 の円&quot;, &quot;illustration&quot;: &quot;2 つのセレクタと font-family ルールを含む CSS の白いコード カード。&quot;, &quot;code_blocks&quot;: { &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;.title&quot;, &quot;body&quot; ], &quot;content&quot;: [ &quot;.title { font-family: &#39;Poppins&#39;, sans-serif; }&quot;, &quot;body { font-family: &#39;Noto Sans JP&#39;, sans-serif; }&quot; ] }, &quot;body_text&quot;: &quot;フォントファミリーを指定してデザインに適用します。&quot; }, { &quot;title&quot;: &quot;キーポイント&quot;, &quot;position&quot;: &quot;bottom-left&quot;, &quot;count&quot;: 3, &quot;labels&quot;: [ &quot;読みやすさに基づいて選択&quot;, &quot;日本語がサポートされているか確認します。&quot;, &quot;過剰に使用しないでください。 2～3種類に制限してください。], &quot;card_style&quot;: &quot;水色の下地が付いた丸い白いパネル&quot;, &quot;icon&quot;: &quot;円の中の青い星&quot;, &quot;body_format&quot;: &quot;箇条書き&quot; }, { &quot;title&quot;: &quot;一般的な組み合わせ&quot;, &quot;position&quot;: &quot;下中央右&quot;, &quot;count&quot;: 2, &quot;labels&quot;: [ &quot;タイトル: Poppins&quot;, &quot;メインテキスト: Noto Sans JP&quot; ], &quot;card_style&quot;: &quot;薄紫色の色合いが付いた丸い白いパネル&quot;, &quot;icon&quot;: &quot;紫色のチェーンシンボル&quot;, &quot;body_format&quot;: &quot;ピル型のサンプルボックスが2つ&quot; } ], &quot;connectors&quot;: { &quot;count&quot;: 2, &quot;style&quot;: &quot;上部の3枚のカードの間に大きな青い右向き矢印&quot; }, &quot;pagination&quot;: { &quot;text&quot;: &quot;2 / 2&quot;, &quot;position&quot;: &quot;下右&quot;, &quot;style&quot;: &quot;青い角丸ラベル&quot; } }, &quot;text_language&quot;: &quot;日本語&quot;, &quot;color_palette&quot;: { &quot;primary_blue&quot;: &quot;#2f80ff&quot;, &quot;navy&quot;: &quot;#0f2b5b&quot;, &quot;google_colors&quot;: [ &quot;#4285F4&quot;, &quot;#DB4437&quot;, &quot;#F4B400&quot;, &quot;#0F9D58&quot; ], &quot;lavender&quot;: &quot;#8b6cff&quot;, &quot;background&quot;: &quot;#ffffff&quot; } }