広告 このコンテンツは広告を含んでいます。
【グラレコに満足できない方へ】Gemini 2.5 Proで作る9種類のインフォグラフィックデザイン出力比較とおすすめ紹介
この記事は以下のYouTube動画で紹介したプロンプトを掲載しています。
目次（クリックでジャンプできます）
記事の概要
インフォグラフィックとは？
パッと見て納得！情報が伝わる魔法、インフォグラフィックの秘密
インフォグラフィックってなに？
「インフォグラフィック」って言葉、聞いたことありますか？ 難しそうに聞こえるかもしれないけど、実はとっても身近なものなんです！
カンタンに言うと、インフォグラフィックは「情報（インフォメーション）」と「図（グラフィック）」を組み合わせた言葉。文字だけだと分かりにくいデータや知識、ストーリーなんかを、イラストやグラフ、図を使って、ひと目見てパッと理解できるように表現したものなんだ。
街で見かけるポスターや、ニュースサイトの解説図、プレゼン資料なんかにも、実はたくさん使われているんですよ！
なんでインフォグラフィックがいいの？
文字ばっかりの説明って、読むのが大変だったり、内容が頭に入ってこなかったりしませんか？ インフォグラフィックには、そんな悩みを解決するチカラがあるんです！
-
とにかく分かりやすい！
複雑な情報も、図やグラフで整理されているから、直感的に理解できる！ -
記憶に残りやすい！
視覚的な情報は、文字だけの情報よりもずっと記憶に残りやすいと言われています。 -
シェアされやすい！
パッと見て面白かったり、役に立ったりする情報は、SNSなどで共有されやすいんです。
いろんな種類があるんだ！
インフォグラフィックと一口に言っても、伝えたい内容によって色々な表現方法があります。いくつか代表的な例を見てみましょう！
| 種類 | どんな時に使う？ | ポイント |
|---|---|---|
| 統計データ型 | アンケート結果や調査データを見せたい時 | 円グラフ、棒グラフ、アイコン配列などで数字を視覚化！ |
| 時系列・プロセス型 | 歴史の流れや手順を説明したい時 | タイムラインやフローチャートで、時間の経過や流れを表現！ |
| 比較型 | 複数のものを比べたい時 | 表や並列した図で、違いや共通点を分かりやすく！ |
| 地理・地図型 | 場所に関する情報を示したい時 | 地図上にデータをマッピングして、地域ごとの特徴を示す！ |
※他にもたくさんの種類があります！
インフォグラフィック作成の簡単ステップ
「自分でも作ってみたい！」と思ったあなたへ。基本的な作成ステップを紹介しますね。
1目的とターゲットを決める
誰に、何を伝えたくて作るのか？ を最初にハッキリさせよう！
2情報収集・整理
伝えたい情報を集めて、どの情報が一番大事か整理しよう。
3ストーリーと構成を考える
どういう順番で見せたら分かりやすいか、全体の流れ（ストーリー）を考えよう。
4デザインする
色やイラスト、グラフを選んで、分かりやすく魅力的な見た目に仕上げよう！無料ツールもたくさんあるよ！
5公開・共有する
完成したら、WebサイトやSNSなどで公開して、たくさんの人に見てもらおう！
よくある疑問 Q&A
インフォグラフィックに関する、よくある質問にお答えします！
| Q. 質問 | A. 回答 |
|---|---|
| デザインセンスがないけど作れる？ | 大丈夫！ 最近は無料でおしゃれなテンプレートがたくさん使えるツール（Canvaなど）があるので、初心者でも簡単に作れますよ。 |
| 何のツールを使えばいい？ | 有名なのは Canva (キャンバ), Piktochart (ピクトチャート), Infogram (インフォグラム) など。無料で始められるものが多いです。 |
| どんな情報がインフォグラフィックに向いてる？ | 数字データ、手順・プロセス、比較、歴史、地理情報など、視覚的に表現しやすい情報は特におすすめです！ 文字だけだと伝わりにくいことを図解するイメージですね。 |
| 作る上で一番大事なことは？ | 「誰に何を伝えたいか」を明確にすることです！ 見た目がおしゃれでも、情報が分かりにくかったら意味がありません。常に「分かりやすさ」を意識しましょう。 |
まとめ：情報をデザインして、もっと伝わる体験を！
インフォグラフィックは、情報を分かりやすく、魅力的に伝えるための強力なツールです。
難しく考えすぎず、まずは身の回りの情報を「どうやったら図で表せるかな？」と考えてみることから始めてみませんか？ きっと、情報発信がもっと楽しく、効果的になりますよ！
９つのインフォグラフィック紹介
Gemini 2.5 Proで作る！9種類のインフォグラフィックデザイン
こんにちは！Gemini 2.5 Proって、実はHTMLで色々な見た目のインフォグラフィックも作れるんです。
YouTube動画で比較する前に、どんなスタイルがあるのか、ここでサクッと見ていきましょう！✨
比較するインフォグラフィックのスタイルたち
今回は、こんな特徴的なスタイルたちをGemini 2.5 Proに作ってもらって、どれくらいイイ感じに出力できるか比べてみる予定です！
フラットデザイン：シンプル is ベスト！
- 特徴：影や立体感をなくして、スッキリ見やすい！ 色やアイコンがパッと目に入りますね。ミニマルでモダンな印象です。
- HTML/CSSポイント：CSSで色を塗ったり、SVGアイコンを使ったりが基本。レイアウトはFlexboxやGridで整列させるとキレイ！
- 比較ポイント：Geminiくん、基本的な見た目や色選びは得意かな？ スマホでもちゃんと見えるコード（レスポンシブ）を生成できるかも見どころ！
グラフィックレコーディング風：手描きの温かみ
- 特徴：まるで手で描いたような、温かい雰囲気が魅力。ラフな線やイラスト、手書きっぽい文字で、親しみやすさアップ！
- HTML/CSSポイント：CSSで手描き感を出すのはちょっと工夫が必要かも？（線のかすれ、手書き風フォントなど）。自由な配置もポイント。
- 比較ポイント：この「手描きっぽさ」や「要素のつながり」を、GeminiくんがHTML/CSSでどれだけ再現できるか、腕の見せ所ですね！
アイソメトリック：おしゃれな立体感
- 特徴：斜め上から見たような、ちょっと不思議な立体感がおしゃれ！建物やモノ、手順の説明とかに向いています。
- HTML/CSSポイント：CSSの`transform`っていう機能で、要素を斜めにしたり回転させたり。SVGで作ることも多いです。
- 比較ポイント：CSSだけでこの立体感をちゃんと作れるかな？ パーツの重なりとか、角度とか、正確さもチェックしたい！
マテリアルデザイン：現実世界みたいな操作感
- 特徴：Google発のデザイン。フラットだけど、影や動きで奥行きを感じさせるのがポイント。ボタンとかが「押せそう」に見えます。
- HTML/CSSポイント：`box-shadow`で影をつけたり、`transition`で滑らかな動きをつけたり。
- 比較ポイント：フラットデザインとの subtle な違い（特に影！）を理解して、CSSで表現できるか見てみましょう。
データビジュアライゼーション中心：データで語る！
- 特徴：グラフ（棒、円、線など）が主役！数字やデータを分かりやすく見せることに特化しています。
- HTML/CSSポイント：SVGでグラフを描いたり、CSSだけでも簡単なグラフは作れます。もしかしたらJavaScriptのライブラリを使うコードが出てくるかも？
- 比較ポイント：渡したデータに合わせて、適切なグラフを選んで描画できるか？ グラフに必要なタイトルやメモリなどもちゃんと作れるか、注目です！
他にも魅力的なスタイルが！
さらに、こんなスタイルたちも比較候補として面白そうです！
- ミニマリズム：究極のシンプル美。余白が大事！
- レトロ/ヴィンテージ：懐かしい時代の雰囲気。色使いやフォントが特徴的。
- タイポグラフィ中心：文字のデザインで魅せる！フォント選びがキモ。
- グラスモーフィズム：すりガラスみたいな透明感。モダンでおしゃれ。
一目でわかる！スタイルの特徴比較
それぞれのスタイルにどんな特徴があって、どんな時に使いやすいか、ざっくりまとめてみました！
| スタイル名 | デザインの特徴 | 得意な表現 | Geminiへの期待ポイント |
|---|---|---|---|
| フラット | シンプル、ミニマル、影なし | クリアな情報伝達、アイコン中心 | 基本的なレイアウト、配色、レスポンシブ対応 |
| グラレコ風 | 手描き感、温かみ、ラフな線 | 親しみやすさ、プロセスや関連性 | 「手描きっぽさ」のCSS表現、統一感 |
| アイソメトリック | 疑似的な立体感、斜め視点 | 構造、プロセス、未来感 | CSS `transform`の活用、角度の正確性 |
| マテリアル | フラット＋影・動き、奥行き | 操作感の示唆、UI要素 | 影(`box-shadow`)、アニメーションの質 |
| データViz中心 | グラフが主役、データ重視 | 統計、比較、推移 | 適切なグラフ選択、SVG描画、必要要素の生成 |
| ミニマリズム | 極限までシンプル、余白活用 | 洗練された印象、ブランド訴求 | 「引き算」のデザイン、効果的な余白 |
| レトロ | 特定時代の模倣、懐かしさ | 雰囲気作り、特定のテーマ訴求 | 時代感の再現（色、フォント、テクスチャ） |
| タイポグラフィ中心 | 文字が主役、フォントデザイン | メッセージ性、読みやすさ | 効果的なフォント組み合わせ、情報階層 |
| グラスモーフィズム | すりガラス効果、透明感 | モダン、軽快さ、UI要素 | `backdrop-filter`の活用、重なり順 |
目的別！スタイル選びのヒント（簡易版）
「どのスタイルがいいか迷う…」という時の、簡単な考え方のフローです！
START: 伝えたいことは何？
主にデータや数字を見せたい？
（YESなら下へ、NOならさらに下へ）
（YESなら下へ、NOならさらに下へ）
データビジュアライゼーション中心 が得意！
手順やモノの構造を分かりやすく？
（YESなら下へ、NOならさらに下へ）
（YESなら下へ、NOならさらに下へ）
アイソメトリックやフロー図表現がいいかも！
どんな雰囲気・印象を与えたい？
（シンプル？ 温かい？ おしゃれ？ など…）
（シンプル？ 温かい？ おしゃれ？ など…）
フラット、グラレコ、ミニマル、レトロなど、伝えたい雰囲気に合わせて選ぼう！
スタイル決定！ Geminiに依頼してみよう！
これらのスタイルを実際に Gemini 2.5 Pro に作ってもらって比較するYouTube動画、絶対面白そうですよね！乞うご期待！
フラットデザインのインフォグラフィックプロンプトを紹介
動画で紹介したプロンプト（特定のテーマについて資料作成する）
<br>リマレこちらが動画の資料に使用した図解資料のHTMLインフォグラフィック作成プロンプトです。
# 変数欄の{テーマ} = “●●ここにテーマを入れる●●”の中に特定のテーマを入れてください。
例：Gemini 2.5 Proとは など
# 目的
目的は、「ひと目見て理解できる図解資料のHTML」を作成することです。
# 指示内容
{テーマ} についての解説を、以下のデザイン要件に基づいたインフォグラフィック風HTMLで作成してください。
# 変数
{テーマ} = "●●ここにテーマを入れる●●"
# 文章のスタイル
・親しみやすい口語体
・簡潔な文章
・初心者にも理解しやすい言葉を使う
・分かりやすい具体例を活用する
# 図解資料のタイトル条件
・想定読者を引き込むキャッチーなタイトル
・20字から35字の間
・テーマに適切なタイトル付け
・「図解」というフレーズは使用禁止
【デザイン要件詳細】
全体的なスタイル:
リッチフラットデザインを採用してください。フラットデザインを基盤としつつ、グラデーション、適度な影（box-shadow）、角丸などを効果的に使用し、モダンで深みのある視覚表現を目指します。図解要素のスタイルを多めに活用しましょう。
カラースキーム:
基調色: オーシャンブルー系（例: 濃い青 #023e8a から標準的な青 #0077b6、明るい水色 #48cae4 まで）をメインに使用してください。
グラデーション: オーシャンブルーから水色へのグラデーションを効果的に活用してください。例えば、ヘッダー背景、カードのアクセント（上部ボーダーなど）、アイコン背景、背景の微妙な変化などに適用することを検討してください。
コントラスト:
ページ全体の背景: 非常に薄い水色（例: #f0f8ff AliceBlue）または白に近い明るい色。
コンテンツカード背景: 白 (#ffffff)。
主要テキスト: 濃紺 (#012a4a) またはダークグレーで、白い背景に対して高い可読性を確保してください。
濃い青の背景上のテキスト: 白 (#ffffff)。
アクセントカラー: 鮮やかな黄色（例: #ffc107）を強調ボックスなどに限定的に使用してください。
レイアウト:
各情報セクションを、背景色が白で、角丸と影（box-shadow）を持つ独立したカードとして表示してください。カード間のマージンを適切に設定してください。
コンテンツ要素間の余白（パディング、マージン）は、情報が整理され、見やすいように調整してください。
タイポグラフィ:
見出し (h1, h2など): 'Poppins' などのモダンなサンセリフ体（文字色は濃い青）。
本文 (pなど): 'Noto Sans JP' などの可読性の高い日本語対応サンセリフ体（文字色は濃紺）。
重要な語句にはマーカーや太字を活用するなどして強調。
文章は簡潔にする。
アイコン:
Font Awesome 6 アイコンを使用してください。
リスト項目では、アイコンを円形の背景（オーシャンブルー系のグラデーションまたは単色）で囲み、テキストの左側に配置してください。
ヘッダー:
ページの最上部に配置し、オーシャンブルーから水色へのグラデーション背景にしてください。
タイトル（h1）は中央揃えで、文字色は白にしてください。
図解要素のスタイル:
表 (<table>):
シンプルでクリーンなデザインにしてください。
ヘッダー行（<th>）はオーシャンブルー系の背景色に白文字など、区別しやすいスタイルにしてください。
行（<tr>）ごとに背景色を交互に変える（ゼブラストライピング）と見やすくなります。
罫線は細く、色は明るいグレー（例: #dee2e6）などが適切です。
表 (<table>) のデータ行 (tbody 内の <tr> 要素) にマウスカーソルを合わせた際 (:hover 擬似クラスを使用) に、その行の背景色が変わるようにしてください。
ホバー時の背景色: 既存のデザインと調和する、明るく目立ちすぎない色を指定してください。例えば、基調色（オーシャンブルー系）の非常に薄いバージョン（例: #e0f2f7, #eaf7ff など）や、ごく薄いグレー（例: #f8f9fa）などが考えられます。
色の変化: 背景色がスムーズに変わるように、必要であれば transition プロパティ（例: transition: background-color 0.2s ease;）を追加してください。
対象範囲: このホバーエフェクトは、表のヘッダー行 (<thead> 内の <tr>) には適用しないか、適用する場合はより控えめな効果にしてください。データ行の視認性を高めることが目的です。
フロー図/ステップ図:
CSS（FlexboxやGridなど）で表現可能な範囲で、視覚的に分かりやすく目立つスタイルを定義してください。
各ステップや要素を角丸のボックスで表現し、背景色や枠線にオーシャンブルー系の色を使用してください。
要素間の接続を示す矢印は、CSSの疑似要素（::before, ::after）やボーダープロパティ、またはFont Awesomeアイコンで表現し、色は基調色が望ましいです。
図のホバー: マウスオーバー時に図やカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
特定の要素:
強調ボックス: 特に重要なメッセージを示す部分では、アクセントカラー（黄色）の背景を持つボックスを使用してください。
リスト項目のホバー: マウスオーバー時にカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
レスポンシブデザイン:
スマートフォンなどの画面サイズでも、レイアウトや図解が見やすいようにメディアクエリで調整してください。（特に表やフロー図は横スクロールや縦積みにするなど工夫が必要な場合があります）
見出しのデザイン:
各見出しはオーシャンブルーから水色へのグラデーション背景にしてください。
作成するコンテンツのテーマ: [ここに具体的なテーマや内容を記載。表やフロー図などを含めてほしい旨も具体的に記述すると良い]
上記要件を可能な限り満たしたHTMLコード（CSSは<style>タグ内に記述）を生成してください。よろしくお願いします。
チャットで対話したあとにその内容で資料作成してもらうプロンプト
何度か対話して、出た回答から資料作成して欲しいときに使うプロンプトです。
# 目的
目的は、このチャットのやり取りであなたが回答した内容を「ひと目見て理解できる図解資料のHTML」を作成することです。
# 指示内容
あなたが出力した解説をもとに以下のデザイン要件に基づいたインフォグラフィック風HTMLで作成してください。
# 文章のスタイル
・親しみやすい口語体かつ敬語
・簡潔な文章で要約
・初心者にも理解しやすい言葉を使う
・分かりやすい具体例を活用する
# 図解資料のタイトル条件
・想定読者を引き込むキャッチーなタイトル
・20字から35字の間
・テーマに適切なタイトル付け
・「図解」というフレーズは使用禁止
【デザイン要件詳細】
全体的なスタイル:
リッチフラットデザインを採用してください。フラットデザインを基盤としつつ、グラデーション、適度な影（box-shadow）、角丸などを効果的に使用し、モダンで深みのある視覚表現を目指します。図解要素のスタイルを多めに活用しましょう。
カラースキーム:
基調色: オーシャンブルー系（例: 濃い青 #023e8a から標準的な青 #0077b6、明るい水色 #48cae4 まで）をメインに使用してください。
グラデーション: オーシャンブルーから水色へのグラデーションを効果的に活用してください。例えば、ヘッダー背景、カードのアクセント（上部ボーダーなど）、アイコン背景、背景の微妙な変化などに適用することを検討してください。
コントラスト:
ページ全体の背景: 非常に薄い水色（例: #f0f8ff AliceBlue）または白に近い明るい色。
コンテンツカード背景: 白 (#ffffff)。
主要テキスト: 濃紺 (#012a4a) またはダークグレーで、白い背景に対して高い可読性を確保してください。
濃い青の背景上のテキスト: 白 (#ffffff)。
アクセントカラー: 鮮やかな黄色（例: #ffc107）を強調ボックスなどに限定的に使用してください。
レイアウト:
各情報セクションを、背景色が白で、角丸と影（box-shadow）を持つ独立したカードとして表示してください。カード間のマージンを適切に設定してください。
コンテンツ要素間の余白（パディング、マージン）は、情報が整理され、見やすいように調整してください。
タイポグラフィ:
見出し (h1, h2など): 'Poppins' などのモダンなサンセリフ体（文字色は濃い青）。
本文 (pなど): 'Noto Sans JP' などの可読性の高い日本語対応サンセリフ体（文字色は濃紺）。
重要な語句にはマーカーや太字を活用するなどして強調。
文章は簡潔にする。
アイコン:
Font Awesome 6 アイコンを使用してください。
リスト項目では、アイコンを円形の背景（オーシャンブルー系のグラデーションまたは単色）で囲み、テキストの左側に配置してください。
ヘッダー:
ページの最上部に配置し、オーシャンブルーから水色へのグラデーション背景にしてください。
タイトル（h1）は中央揃えで、文字色は白にしてください。
図解要素のスタイル:
表 (<table>):
シンプルでクリーンなデザインにしてください。
ヘッダー行（<th>）はオーシャンブルー系の背景色に白文字など、区別しやすいスタイルにしてください。
行（<tr>）ごとに背景色を交互に変える（ゼブラストライピング）と見やすくなります。
罫線は細く、色は明るいグレー（例: #dee2e6）などが適切です。
表 (<table>) のデータ行 (tbody 内の <tr> 要素) にマウスカーソルを合わせた際 (:hover 擬似クラスを使用) に、その行の背景色が変わるようにしてください。
ホバー時の背景色: 既存のデザインと調和する、明るく目立ちすぎない色を指定してください。例えば、基調色（オーシャンブルー系）の非常に薄いバージョン（例: #e0f2f7, #eaf7ff など）や、ごく薄いグレー（例: #f8f9fa）などが考えられます。
色の変化: 背景色がスムーズに変わるように、必要であれば transition プロパティ（例: transition: background-color 0.2s ease;）を追加してください。
対象範囲: このホバーエフェクトは、表のヘッダー行 (<thead> 内の <tr>) には適用しないか、適用する場合はより控えめな効果にしてください。データ行の視認性を高めることが目的です。
フロー図/ステップ図:
CSS（FlexboxやGridなど）で表現可能な範囲で、視覚的に分かりやすく目立つスタイルを定義してください。
各ステップや要素を角丸のボックスで表現し、背景色や枠線にオーシャンブルー系の色を使用してください。
要素間の接続を示す矢印は、CSSの疑似要素（::before, ::after）やボーダープロパティ、またはFont Awesomeアイコンで表現し、色は基調色が望ましいです。
図のホバー: マウスオーバー時に図やカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
特定の要素:
強調ボックス: 特に重要なメッセージを示す部分では、アクセントカラー（黄色）の背景を持つボックスを使用してください。
リスト項目のホバー: マウスオーバー時にカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
レスポンシブデザイン:
スマートフォンなどの画面サイズでも、レイアウトや図解が見やすいようにメディアクエリで調整してください。（特に表やフロー図は横スクロールや縦積みにするなど工夫が必要な場合があります）
見出しのデザイン:
オーシャンブルーから水色へのグラデーション背景にしてください。
作成するコンテンツのテーマ: [ここに具体的なテーマや内容を記載。表やフロー図などを含めてほしい旨も具体的に記述すると良い]
上記要件を可能な限り満たしたHTMLコード（CSSは<style>タグ内に記述）を生成してください。よろしくお願いします。
グラフを含めたプロンプト
完成度下がるかもしれないけど、グラフも含めて作成するプロンプトも載せておきます。
# 変数欄の{テーマ} = “●●ここにテーマを入れる●●”の中に特定のテーマを入れてください。
例：Gemini 2.5 Proとは など
# 目的
目的は、「ひと目見て理解できる図解資料のHTML」を作成することです。
# 指示内容
{テーマ} についての解説を、以下のデザイン要件に基づいたインフォグラフィック風HTMLで作成してください。
# 変数
{テーマ} = "●●ここにテーマを入れる●●"
# 文章のスタイル
・親しみやすい口語体
・簡潔な文章
・初心者にも理解しやすい言葉を使う
・分かりやすい具体例を活用する
# 図解資料のタイトル条件
・想定読者を引き込むキャッチーなタイトル
・20字から35字の間
・テーマに適切なタイトル付け
・「図解」というフレーズは使用禁止
【デザイン要件詳細】
全体的なスタイル:
リッチフラットデザインを採用してください。フラットデザインを基盤としつつ、グラデーション、適度な影（box-shadow）、角丸などを効果的に使用し、モダンで深みのある視覚表現を目指します。図解要素のスタイルを多めに活用しましょう。
カラースキーム:
基調色: オーシャンブルー系（例: 濃い青 #023e8a から標準的な青 #0077b6、明るい水色 #48cae4 まで）をメインに使用してください。
グラデーション: オーシャンブルーから水色へのグラデーションを効果的に活用してください。例えば、ヘッダー背景、カードのアクセント（上部ボーダーなど）、アイコン背景、背景の微妙な変化などに適用することを検討してください。
コントラスト:
ページ全体の背景: 非常に薄い水色（例: #f0f8ff AliceBlue）または白に近い明るい色。
コンテンツカード背景: 白 (#ffffff)。
主要テキスト: 濃紺 (#012a4a) またはダークグレーで、白い背景に対して高い可読性を確保してください。
濃い青の背景上のテキスト: 白 (#ffffff)。
アクセントカラー: 鮮やかな黄色（例: #ffc107）を強調ボックスなどに限定的に使用してください。
レイアウト:
各情報セクションを、背景色が白で、角丸と影（box-shadow）を持つ独立したカードとして表示してください。カード間のマージンを適切に設定してください。
コンテンツ要素間の余白（パディング、マージン）は、情報が整理され、見やすいように調整してください。
タイポグラフィ:
見出し (h1, h2など): 'Poppins' などのモダンなサンセリフ体（文字色は濃い青）。
本文 (pなど): 'Noto Sans JP' などの可読性の高い日本語対応サンセリフ体（文字色は濃紺）。
重要な語句にはマーカーや太字を活用するなどして強調。
文章は簡潔にする。
アイコン:
Font Awesome 6 アイコンを使用してください。
リスト項目では、アイコンを円形の背景（オーシャンブルー系のグラデーションまたは単色）で囲み、テキストの左側に配置してください。
ヘッダー:
ページの最上部に配置し、オーシャンブルーから水色へのグラデーション背景にしてください。
タイトル（h1）は中央揃えで、文字色は白にしてください。
図解要素のスタイル:
表 (<table>):
シンプルでクリーンなデザインにしてください。
ヘッダー行（<th>）はオーシャンブルー系の背景色に白文字など、区別しやすいスタイルにしてください。
行（<tr>）ごとに背景色を交互に変える（ゼブラストライピング）と見やすくなります。
罫線は細く、色は明るいグレー（例: #dee2e6）などが適切です。
表 (<table>) のデータ行 (tbody 内の <tr> 要素) にマウスカーソルを合わせた際 (:hover 擬似クラスを使用) に、その行の背景色が変わるようにしてください。
ホバー時の背景色: 既存のデザインと調和する、明るく目立ちすぎない色を指定してください。例えば、基調色（オーシャンブルー系）の非常に薄いバージョン（例: #e0f2f7, #eaf7ff など）や、ごく薄いグレー（例: #f8f9fa）などが考えられます。
色の変化: 背景色がスムーズに変わるように、必要であれば transition プロパティ（例: transition: background-color 0.2s ease;）を追加してください。
対象範囲: このホバーエフェクトは、表のヘッダー行 (<thead> 内の <tr>) には適用しないか、適用する場合はより控えめな効果にしてください。データ行の視認性を高めることが目的です。
表には「おすすめ度」などの評価指標を★の数で評価する項目を入れてください。
フロー図/ステップ図:
CSS（FlexboxやGridなど）で表現可能な範囲で、視覚的に分かりやすく目立つスタイルを定義してください。
各ステップや要素を角丸のボックスで表現し、背景色や枠線にオーシャンブルー系の色を使用してください。
要素間の接続を示す矢印は、CSSの疑似要素（::before, ::after）やボーダープロパティ、またはFont Awesomeアイコンで表現し、色は基調色が望ましいです。
図のホバー: マウスオーバー時に図やカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
特定の要素:
強調ボックス: 特に重要なメッセージを示す部分では、アクセントカラー（黄色）の背景を持つボックスを使用してください。
リスト項目のホバー: マウスオーバー時にカードが結構浮き上がり、影が濃くなるインタラクションを追加してください。
レスポンシブデザイン:
スマートフォンなどの画面サイズでも、レイアウトや図解が見やすいようにメディアクエリで調整してください。（特に表やフロー図は横スクロールや縦積みにするなど工夫が必要な場合があります）
見出しのデザイン:
各見出しはオーシャンブルーから水色へのグラデーション背景にしてください。
グラフの挿入:
適切な場所に数値を数値で説明できる資料をグラフ（円グラフやレーダーチャート等）形式で作成してください。
数値は事実ベースで作成してください。
作成するコンテンツのテーマ: [ここに具体的なテーマや内容を記載。表やフロー図などを含めてほしい旨も具体的に記述すると良い]
上記要件を可能な限り満たしたHTMLコード（CSSは<style>タグ内に記述）を生成してください。よろしくお願いします。
ご不明な点やご質問などがありましたらお気軽にお問い合わせください。
YouTube動画のコメント欄でも良いです。
この記事が気に入ったら
いいね または フォローしてね！
コメント