Gemini 2.5 pro を使用してインフォグラフィック / Webサイト制作

2025.3.27 2025.3.28

Aqsh

プロンプト1つで、Webページが1分で作れる

入力文をAIでインフォグラフィック化し、HTMLコードを出力するプロンプトです。Gemini 2.5 pro やClaude 3.7 Sonnetなどに貼り付けて使用すると良い結果が得られやすいです。

コピーしてご利用ください。

インフォグラフィック作成プロンプト

# インフォグラフィック作成プロンプト

"# 高品質インフォグラフィックHTML作成プロンプト
以下の指示に従い、入力文を **高品質なレスポンシブ・インフォグラフィックHTML** に変換してください。**エグゼクティブプレゼンにも耐えうる資料** を想定した **高い情報密度** と **優れた視認性** をPC・スマートフォンの両デバイスで実現させてください。

## 入力文 作成日：2025年3月　作成者：Aqsh.co.jp 
[ここに入力文を貼り付ける]
   

## 1. 全体デザイン仕様

### 1.1 カラースキーム
- メイン文字色：`#334155`
- 見出し色：`#EE6C8A`（Flory Pink）
- サブタイトル色：`#475569`
- 背景：白ベース（`#ffffff`）またはグラデーション（`linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)`）

### 1.2 タイポグラフィ
```html
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
</style>
```
- **タイトル（28-32px, 太字）**
  ```css
 .header-title { /* Note: HTML構造に合わせてクラス名を修正 */
    font-size: 32px; /* PC */
    font-weight: 700;
    background: linear-gradient(90deg, 見出し色に合わせる 0%, #f091a9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 8px; /* タイトル下のマージン調整 */
}
/* スマホ用タイトルサイズ調整 */
@media (max-width: 768px) {
    .header-title {
        font-size: 24px;
    }
}
  ```

- **サブタイトル（14-16px）**
  ```css
.header-subtitle { /* Note: HTML構造に追加する場合の例 */
    font-size: 14px;
    color: サブタイトル色に合わせる;
    margin-bottom: 12px;
    font-weight: 500;
}
/* スマホ用サブタイトルサイズ調整 */
@media (max-width: 768px) {
    .header-subtitle {
        font-size: 13px;
    }
}
  ```

- **セクション見出し（16-18px）**
  ```css
.card-title { /* Note: HTML構造に合わせてクラス名を修正 */
    font-size: 18px; /* PC */
    font-weight: 700;
    color: 見出し色に合わせる;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* スマホ用セクション見出しサイズ調整 */
@media (max-width: 768px) {
    .card-title {
        font-size: 16px;
    }
}
  ```

- **本文（12-13px, 行間1.3-1.4）**
  ```css
.card-content, .process-desc, .capability-item span, .comparison-table td, li { /* 影響範囲を明記 */
    font-size: 13px; /* PC */
    line-height: 1.4; /* 行間を少し広めに */
    color: メイン文字色に合わせる;
    overflow-wrap: break-word;
}
/* スマホ用本文サイズ調整 */
@media (max-width: 768px) {
    .card-content, .process-desc, .capability-item span, .comparison-table td, li {
        font-size: 12px; /* スマホでは少し小さく */
        line-height: 1.35;
    }
}
  ```

### 1.3 レイアウト設計
- **ベースコンテナ**
  ```css
.slide-container {
    width: 1600px; /* PCでの最大幅 */
    max-width: 100%; /* 画面幅追従 */
    min-height: 800px; /* 最小高さを設定 (コンテンツ量に応じて調整) */
    margin: 12px auto; /* 上下左右中央寄せ */
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); /* グラデーション背景適用 */
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 16px; /* PC */
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* paddingを含めてwidth計算 */
}
/* スマホ用コンテナ調整 */
@media (max-width: 1648px) { /* 1600px + padding 24*2 */
    .slide-container {
        width: auto; /* 幅自動調整 */
        margin: 16px;
        padding: 16px; /* スマホではpaddingを少し小さく */
        min-height: unset; /* スマホでは最小高さを解除 */
    }
}
@media (max-width: 768px) {
  .slide-container {
      margin: 8px;
      padding: 16px; /* さらに小さく */
  }
}
  ```

- **ヘッダー**
  ```css
.header {
    display: flex;
    flex-direction: column; /* タイトルと日付を縦並びに */
    align-items: flex-start; /* 左寄せ */
    margin-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}
.header-date { /* 日付用スタイル追加 */
    font-size: 12px;
    color: お任せ;
}
/* スマホ用ヘッダー調整 */
@media (max-width: 768px) {
    .header {
        margin-bottom: 16px;
        padding-bottom: 12px;
    }
    .header-date {
        font-size: 11px;
    }
}
  ```

- **コンテンツエリア(カラム構成）**
  ```css
.content {
    display: flex; /* PCでは横並び */
    gap: 24px; /* PCでのカラム間隔 */
    /* height: calc(100% - 80px); /* 高さを指定せず、コンテンツに合わせる */
}

.column {
    width: 50%; /* PCでは各カラム50% */
    display: flex;
    flex-direction: column;
    gap: 16px; /* カード間の縦方向の間隔 */
}

/* スマホ用カラム構成 (1カラムに変更) */
@media (max-width: 768px) {
    .content {
        flex-direction: column; /* スマホでは縦並び */
        gap: 16px; /* スマホでのカラム（旧カラム）間隔 */
    }
    .column {
        width: 100%; /* スマホでは各カラム100% */
        gap: 12px; /* スマホでのカード間隔 */
    }
}
  ```

- **カード型コンポーネント**
  ```css
.card {
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 16px; /* PC */
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 子要素のはみ出し防止 */
}
/* スマホ用カード調整 */
@media (max-width: 768px) {
    .card {
        padding: 4px;
    }
}
  ```

- **カード内コンテンツエリア**
  ```css
.card-content {
    /* font-size, line-heightは1.2で定義済み */
    overflow-wrap: break-word;
    /* overflow: auto; は基本的に避ける。コンテンツ量調整で対応 */
    /* max-height: 100%; は不要な場合が多い */
    flex-grow: 1; /* カード内でコンテンツエリアがスペースを埋めるように */
}
  ```

- **オーバーフロー対策**
  ```css
  .card-content {
      font-size: 13px;
      overflow-wrap: break-word;
      overflow: auto;
      max-height: 100%;
  }
  ```

- **フッター要素**
  ```css
.footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 11px;
    color: お任せ;
}
/* スマホ用フッター調整 */
@media (max-width: 768px) {
    .footer {
        margin-top: 16px;
        padding-top: 12px;
        font-size: 10px;
    }
}
 ```

### 1.4 リスト要素最適化
```css
ul {
    padding-left: 16px;
    margin-bottom: 6px;
}

li {
    margin-bottom: 4px;
    font-size: 12px;
    line-height: 1.3;
}
```

### 1.5 ハイライト要素
```css
.highlight {
    background-color: お任せ;
    padding: 2px 4px;
    border-radius: 4px;
    font-weight: 500;
}
```

## 2. コンポーネント設計

### 2.1 プロセスフロー
```css
.process-flow {
    display: flex;
    justify-content: space-between;
    margin: 20px 0; /* 上下マージン調整 */
    position: relative;
    /* スマホ表示で折り返す場合 */
    flex-wrap: wrap; /* 必要に応じて有効化 */
    gap: 16px; /* 折り返し時の縦間隔 */
}

/* プロセス間の線 (オプション) */
.process-flow::before {
    content: '';
    position: absolute;
    top: 18px; /* アイコンの中心に合わせる */
    left: 11%; /* 最初のステップの半分 */
    right: 11%; /* 最後のステップの半分 */
    height: 2px;
    background-color: お任せ;
    z-index: 1;
}

.process-step {
    text-align: center;
    width: 22%; /* PC: 4ステップ想定 */
    z-index: 2;
    background-color: rgba(お任せ, お任せ, お任せ, 0.5); /* 線の上に文字が乗るように */
    padding: 0 4px; /* 線との重なり調整 */
}

.process-icon {
    background-color: 見出し色に合わせる;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 8px;
    font-size: 16px;
    font-weight: bold;
    border: 3px solid white; /* 背景との境界を明確に */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.process-title {
    font-size: 13px; /* 本文より少し大きい */
    font-weight: 600;
    margin-bottom: 4px;
    color: メイン文字色に合わせる;
}

.process-desc {
    font-size: 11px; /* 本文より小さい */
    color: サブタイトル色に合わせる;
    line-height: 1.3;
}

/* スマホ用プロセスフロー調整 */
@media (max-width: 768px) {
    .process-flow {
        /* flex-direction: column; */ /* 縦一列にする場合 */
        /* align-items: center; */
        gap: 20px; /* ステップ間の間隔 */
    }
    .process-flow::before { /* スマホでは線を非表示にすることも検討 */
        display: none;
    }
    .process-step {
        width: 45%; /* スマホ: 2列にする場合 */
        /* width: 80%; */ /* スマホ: 1列にする場合 */
        margin: 0 auto; /* 中央寄せ */
        background-color: transparent; /* 背景透過解除 */
        padding: 0;
    }
    .process-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .process-title {
        font-size: 12px;
    }
    .process-desc {
        font-size: 10px;
    }
}
```

### 2.2 グリッドレイアウト
```css
.capability-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PC: 2列 */
    gap: 12px;
    margin-top: 12px;
}

.capability-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: #f8fafc; /* 背景色を少しつける */
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #eef2f7;
}

.capability-icon {
    font-size: 16px; /* 少し大きく */
    color: 見出し色に合わせる;
    min-width: 20px; /* アイコン幅確保 */
    text-align: center;
}

.capability-item span { /* テキスト部分 */
    font-size: 12px; /* 少し小さめ */
    line-height: 1.3;
    color: メイン文字色に合わせる;
}

/* スマホ用グリッド調整 */
@media (max-width: 768px) {
    .capability-grid {
        grid-template-columns: 1fr; /* スマホ: 1列 */
        gap: 8px;
    }
    .capability-item {
        padding: 6px 8px;
    }
    .capability-icon {
        font-size: 14px;
    }
    .capability-item span {
        font-size: 11px;
    }
}
```

### 2.3 アイコンリスト
```css
.integration-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 可変グリッド */
    gap: 8px; /* 少し間隔をあける */
    margin-top: 8px;
}

.integration-item {
    background-color: お任せ;
    border-radius: 6px; /* 角丸調整 */
    padding: 4px 8px; /* padding調整 */
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 4px; /* アイコンとテキストの間隔 */
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid #fce7ec;
    color: お任せ; /* 文字色調整 */
}

.integration-item svg, .integration-item img { /* アイコンサイズ */
    width: 14px;
    height: 14px;
}

/* スマホ用アイコンリスト調整 */
@media (max-width: 768px) {
    .integration-list {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* スマホでは最小幅を小さく */
        gap: 6px;
    }
    .integration-item {
        font-size: 10px;
        padding: 3px 6px;
        gap: 3px;
    }
    .integration-item svg, .integration-item img {
        width: 12px;
        height: 12px;
    }
}
```

### 2.4 テーブル
```css
.table-container { /* テーブルの横スクロール対応 */
    overflow-x: auto;
    margin-top: 10px;
    -webkit-overflow-scrolling: touch; /* スマホでの慣性スクロール */
}

.comparison-table {
    width: 100%;
    min-width: 500px; /* テーブルの最小幅を指定して横スクロールを促す */
    border-collapse: collapse;
    font-size: 12px; /* PC */
}

.comparison-table th {
    background-color: お任せ;
    padding: 10px 12px; /* padding調整 */
    text-align: left;
    font-weight: 600; /* 見出しを少し強調 */
    border-bottom: 2px solid 見出し色に合わせる; /* 見出し下の線を強調 */
    color: お任せ;
    white-space: nowrap; /* 見出しは折り返さない */
}

.comparison-table td {
    padding: 10px 12px; /* padding調整 */
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top; /* セル内コンテンツを上揃えに */
    line-height: 1.4;
}

.comparison-table tbody tr:last-child td { /* 最後の行の下線を消す */
    border-bottom: none;
}

.comparison-table tbody tr:nth-child(even) td { /* 偶数行に背景色 */
    background-color: お任せ;
}

/* スマホ用テーブル調整 */
@media (max-width: 768px) {
    .comparison-table {
        font-size: 11px; /* スマホではフォントを小さく */
        min-width: 400px; /* スマホでの最小幅 */
    }
    .comparison-table th,
    .comparison-table td {
        padding: 8px 10px; /* スマホではpaddingを小さく */
    }
}
```

## 3. 実装のベストプラクティス

### 3.1 情報量の最適化
- 長文は要点のみに圧縮し、冗長な表現を避ける
- 一つの文は20-30字程度に収める
- 箇条書きは簡潔に、可能な限り1-2行に収める
- 重要な概念だけを選別し、本質的でない詳細は削除する

### 3.2 テキスト調整テクニック
- 主要タイトルは簡潔に、内容を的確に表現する単語を選ぶ
- 複合語は可能な限り短縮する（例：「スケジュール管理」→「スケジュール」）
- 説明文は「です・ます」体をできるだけ省略し、体言止めを活用
- 接続詞・副詞を削減し、情報密度を高める

### 3.3 視覚的階層
- 情報の重要度に応じた視覚的ヒエラルキーを確立
- 強調したいポイントには `highlight` クラスを適用
- 補足情報はより小さなフォントサイズで表示
- アイコン（絵文字）は視認性の高いものを選定
- ホバーアニメーション: タイムライン項目やナビゲーションに、スムーズで subtle なホバーアニメーション（少し浮き上がる、色が濃くなるなど）を追加し、インタラクティブ性を高める。

## 4. HTML構造ひな形

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>インフォグラフィックHTML</title>
    <style>
        /* 1. 全体デザイン仕様, 2. コンポーネント設計 のCSSをここに展開 */
        /* Noto Sans JPのインポート */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
        body {
            font-family: 'Noto Sans JP', sans-serif;
            margin: 0;
            padding: 0;
            background-color: 調和の取れた色にする; /* ボディ背景色 */
        }
        /* --- ここからCSS定義 --- */
        /* 1.1 カラースキーム (CSS変数化も検討) */
        :root {
            --main-text-color: メイン文字色に合わせる;
            --heading-color: 見出し色に合わせる;
            --subtitle-color: サブタイトル色に合わせる;
            --highlight-bg: 調和の取れた色にする;
            --highlight-text: 調和の取れた色にする;
            --border-color: 調和の取れた色にする;
            --card-bg: #ffffff;
            --body-bg-start: 調和の取れた色にする;
            --body-bg-end: 調和の取れた色にする;
        }

        /* 1.2 タイポグラフィ */
        .header-title { font-size: 32px; font-weight: 700; background: linear-gradient(90deg, 見出し色に合わせる 0%, #f091a9 100%); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; }
        .header-subtitle { font-size: 14px; color: var(--subtitle-color); margin-bottom: 12px; font-weight: 500; }
        .card-title { font-size: 18px; font-weight: 700; color: var(--heading-color); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
        .card-content, .process-desc, .capability-item span, .comparison-table td, li { font-size: 13px; line-height: 1.4; color: var(--main-text-color); overflow-wrap: break-word; }

        /* 1.3 レイアウト設計 */
        .slide-container { width: 1600px; max-width: 100%; min-height: 800px; margin: 24px auto; background: linear-gradient(135deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%); border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); padding: 32px; position: relative; overflow: hidden; box-sizing: border-box; }
        .header { display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 16px; }
        .header-date { font-size: 12px; color: お任せ; }
        .content { display: flex; gap: 24px; }
        .column { width: 50%; display: flex; flex-direction: column; gap: 16px; }
        .card { background-color: var(--card-bg); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 16px; border: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; transition: all 0.2s ease-in-out; }
        .card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
        .card-content { flex-grow: 1; }

        /* 1.4 リスト要素 */
        ul, ol { padding-left: 20px; margin-top: 8px; margin-bottom: 8px; }
        li { margin-bottom: 5px; }
        li::marker { color: var(--heading-color); }

        /* 1.5 ハイライト */
        .highlight { background-color: var(--highlight-bg); padding: 2px 5px; border-radius: 4px; font-weight: 500; color: var(--highlight-text); font-size: 0.95em; }

        /* 1.6 フッター */
        .footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border-color); text-align: center; font-size: 11px; color: #64748b; }

        /* 2.1 プロセスフロー */
        .process-flow { display: flex; justify-content: space-between; margin: 20px 0; position: relative; flex-wrap: wrap; gap: 16px; }
        .process-flow::before { content: ''; position: absolute; top: 18px; left: 11%; right: 11%; height: 2px; background-color: お任せ; z-index: 1; }
        .process-step { text-align: center; width: 22%; z-index: 2; background-color: rgba(お任せ, お任せ, お任せ, 0.5); padding: 0 4px; }
        .process-icon { background-color: var(--heading-color); color: white; width: 36px; height: 36px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto 8px; font-size: 16px; font-weight: bold; border: 3px solid white; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .process-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--main-text-color); }
        .process-desc { font-size: 11px; color: var(--subtitle-color); line-height: 1.3; }

        /* 2.2 グリッドレイアウト */
        .capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
        .capability-item { display: flex; align-items: center; gap: 8px; background-color: #f8fafc; padding: 8px; border-radius: 6px; border: 1px solid #eef2f7; }
        .capability-icon { font-size: 16px; color: var(--heading-color); min-width: 20px; text-align: center; }
        .capability-item span { font-size: 12px; line-height: 1.3; color: var(--main-text-color); }

        /* 2.3 アイコンリスト */
        .integration-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; margin-top: 8px; }
        .integration-item { background-color: var(--highlight-bg); border-radius: 6px; padding: 4px 8px; font-size: 11px; display: flex; align-items: center; gap: 4px; justify-content: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 1px solid #fce7ec; color: #6b293c; }
        .integration-item svg, .integration-item img { width: 14px; height: 14px; }

        /* 2.4 テーブル */
        .table-container { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; }
        .comparison-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: 12px; }
        .comparison-table th { background-color: var(--highlight-bg); padding: 10px 12px; text-align: left; font-weight: 600; border-bottom: 2px solid var(--heading-color); color: お任せ; white-space: nowrap; }
        .comparison-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-color); vertical-align: top; line-height: 1.4; }
        .comparison-table tbody tr:last-child td { border-bottom: none; }
        .comparison-table tbody tr:nth-child(even) td { background-color: #fdfdfe; }

        /* --- レスポンシブ対応 --- */
        /* PC幅調整 */
        @media (max-width: 1648px) {
            .slide-container { width: auto; margin: 16px; padding: 24px; min-height: unset; }
        }
        /* タブレット・スマホ共通 */
        @media (max-width: 768px) {
            .header-title { font-size: 24px; }
            .header-subtitle { font-size: 13px; }
            .card-title { font-size: 16px; }
            .card-content, .process-desc, .capability-item span, .comparison-table td, li { font-size: 12px; line-height: 1.35; }
            .slide-container { margin: 8px; padding: 16px; }
            .header { margin-bottom: 16px; padding-bottom: 12px; }
            .header-date { font-size: 11px; }
            .content { flex-direction: column; gap: 16px; } /* 1カラムに */
            .column { width: 100%; gap: 12px; }
            .card { padding: 4px; }
            .footer { margin-top: 16px; padding-top: 12px; font-size: 10px; }
            /* Process Flow (2列表示例) */
            .process-flow { /* flex-direction: column; gap: 20px; */ /* 縦一列の場合 */ }
            .process-flow::before { display: none; }
            .process-step { width: 45%; /* margin: 0 auto; */ background-color: transparent; padding: 0; }
            .process-icon { width: 32px; height: 32px; font-size: 14px; }
            .process-title { font-size: 12px; }
            .process-desc { font-size: 10px; }
            /* Capability Grid (1列表示) */
            .capability-grid { grid-template-columns: 1fr; gap: 8px; }
            .capability-item { padding: 6px 8px; }
            .capability-icon { font-size: 14px; }
            .capability-item span { font-size: 11px; }
            /* Integration List (最小幅調整) */
            .integration-list { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; }
            .integration-item { font-size: 10px; padding: 3px 6px; gap: 3px; }
            .integration-item svg, .integration-item img { width: 12px; height: 12px; }
            /* Table (フォント、padding調整) */
            .comparison-table { font-size: 11px; min-width: 400px; }
            .comparison-table th, .comparison-table td { padding: 8px 10px; }
        }
        /* --- ここまでCSS定義 --- */
    </style>
</head>
<body>
    <div class="slide-container">
        <div class="header">
            <h1 class="header-title">メインタイトル</h1>
            <!-- <div class="header-subtitle">サブタイトル（必要に応じて）</div> -->
            <div class="header-date">2025年MM月</div>
        </div>

        <div class="content">
            <!-- 左カラム (PC) / 上部 (スマホ) -->
            <div class="column">
                <div class="card">
                    <div class="card-title">🔍 セクション1</div>
                    <div class="card-content">
                        <p>ここにコンテンツが入ります。テキストやリスト、コンポーネントなどを配置します。</p>
                        <ul>
                            <li>箇条書き項目1</li>
                            <li>箇条書き項目2 <span class="highlight">ハイライト</span></li>
                        </ul>
                    </div>
                </div>

                <div class="card">
                    <div class="card-title">📊 セクション2: プロセス</div>
                    <div class="card-content">
                        <div class="process-flow">
                            <div class="process-step">
                                <div class="process-icon">1</div>
                                <div class="process-title">ステップ1</div>
                                <div class="process-desc">簡単な説明</div>
                            </div>
                            <div class="process-step">
                                <div class="process-icon">2</div>
                                <div class="process-title">ステップ2</div>
                                <div class="process-desc">簡単な説明</div>
                            </div>
                            <div class="process-step">
                                <div class="process-icon">3</div>
                                <div class="process-title">ステップ3</div>
                                <div class="process-desc">簡単な説明</div>
                            </div>
                             <div class="process-step">
                                <div class="process-icon">4</div>
                                <div class="process-title">ステップ4</div>
                                <div class="process-desc">簡単な説明</div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 他のカード -->
            </div>

            <!-- 右カラム (PC) / 下部 (スマホ) -->
            <div class="column">
                 <div class="card">
                    <div class="card-title">⚙️ セクション3: 機能</div>
                     <div class="card-content">
                         <div class="capability-grid">
                            <div class="capability-item">
                                <span class="capability-icon">✔️</span>
                                <span>機能Aの説明</span>
                            </div>
                             <div class="capability-item">
                                <span class="capability-icon">✔️</span>
                                <span>機能Bの説明</span>
                            </div>
                             <div class="capability-item">
                                <span class="capability-icon">✔️</span>
                                <span>機能Cの説明</span>
                            </div>
                             <div class="capability-item">
                                <span class="capability-icon">✔️</span>
                                <span>機能Dの説明</span>
                            </div>
                         </div>
                    </div>
                </div>
                 <div class="card">
                    <div class="card-title">🔗 セクション4: 連携</div>
                     <div class="card-content">
                        <div class="integration-list">
                            <div class="integration-item">ツール1</div>
                            <div class="integration-item">ツール2</div>
                            <div class="integration-item">ツール3</div>
                            <div class="integration-item">ツール4</div>
                            <div class="integration-item">ツール5</div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="card-title">📋 セクション5: 比較表</div>
                    <div class="card-content">
                        <div class="table-container">
                            <table class="comparison-table">
                                <thead>
                                    <tr>
                                        <th>項目</th>
                                        <th>プランA</th>
                                        <th>プランB</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>機能X</td>
                                        <td>✔️</td>
                                        <td>✔️</td>
                                    </tr>
                                    <tr>
                                        <td>機能Y</td>
                                        <td>-</td>
                                        <td>✔️</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- 他のカード -->
            </div>
        </div>

        <div class="footer">フッター情報 | © YYYY</div>
    </div>
</body>
</html>
```

## 5. 出力時の注意点 - コピーライトをAqsh.co.jp で入れる。リンクをhttps://aqsh.co.jp で設定する。
- レスポンシブ対応: PC（幅1600px程度）とスマートフォン（幅768px以下）の両方で最適に表示されるように、メディアクエリを適切に適用すること。特にスマートフォンでは1カラム構成になるようにレイアウトを調整。
- テキストがコンテナやカードからはみ出さないように、overflow-wrap: break-word; を適用し、必要に応じてコンテンツ量を調整する。はみ出しは絶対に発生させないこと。
- 要素同士が重ならず、視覚的に整理されるよう、gap や margin, padding を適切に設定する。特にスマホ表示（1カラム）時の垂直方向の余白に注意。
- 特にリスト、テーブル、長文パラグラフには注意
- グリッド/テーブルのセル幅を調整し、均等配分より内容に合わせた配分を優先
- コンテンツ量のバランスを重視。
- PC表示時、左右カラムの高さが極端に偏らないように、カードの配置や内容量を考慮する。
カード内のコンテンツ量が多い場合は、フォントサイズを基準値（PC: 13px, スマホ: 12px）より小さくすること（最小11px程度まで）も検討するが、可読性を損なわない範囲で。
- テーブルは内容が多い場合、横スクロール (overflow-x: auto;) を許容する (.table-containerでラップ)。
- スクロールバー: 基本的に要素内スクロールバー（overflow: auto;）は避ける。コンテンツが多すぎる場合は、情報の精査や分割を検討する。テーブルの横スクロールは例外的に許容。
- 視認性と情報密度: デザイン要素（色、フォント、余白）を効果的に使用し、高い情報密度を保ちつつ、優れた視認性を確保する。特に色のコントラストに注意。
- アイコン: 意味が明確で、スタイルに一貫性のあるアイコン（SVG推奨）を使用する。
- 視覚的要素と強調のため、ホバーアニメーションを入れる: 各項目や重要な要素に、スムーズで subtle なホバーアニメーション（少し浮き上がる、色が濃くなるなど）を追加し、インタラクティブ性を高める。

情報密度と視認性を両立し、PCでもスマートフォンでも見やすい、プロフェッショナルなインフォグラフィックHTMLの作成を心がけてください。

"

出力例

💥 衝撃のアップデート概要

Google Workspaceが大きく進化。これまでアドオンだったGeminiのAI機能が、主要プランに標準搭載されます。

変更点: 「Gemini for Google Workspace」アドオン廃止
新体系: Workspace ビジネス/エンタープライズプランに標準搭載
コスト: わずか月額+$2 (ユーザーあたり)で全Gemini機能を利用可能に！
スローガン: "AI for Every Business" - 全従業員が最新AIを活用できる環境へ。

🚀 AI活用のパラダイムシフト

AIは特別なツールではなく、PCやスマホのように日常業務に不可欠な存在になりつつあります。

📈 利用フェーズの変化: 「試す」から「コア業務で使い倒す」へ (採用、契約書チェック等)。

⏱️ ROI (日本調査): Gemini利用で週平均160分の時間節約効果。

💡 働き方の変革: 海外とのコミュニケーション、資料作成補助など、AIがワークフローに組み込まれる。

✨ Geminiアプリ (旧Advanced) 活用例

スタンドアロンで利用できるGeminiアプリの強力な機能例です。

ドライブ連携: 複数ファイル(履歴書、企画書等)の内容を横断的に分析・比較・評価。
Gems (カスタム指示): 定型的な作業（例: 特定ルールの校正）を"My AIエージェント"として保存・再利用可能。
プロンプト支援: 入力した指示をGeminiがより効果的なプロンプトに自動改善。
データ連携: 生成した表などを直接Google スプレッドシートにエクスポート。

例: 募集要項に基づき、複数の履歴書を読み込ませて候補者を自動で初期評価し、表にまとめる。

🤝 サイドパネル連携 (Gmail & Docs)

使い慣れたアプリ内で、画面遷移なくAIのサポートを受けられます。

✉️ Gmail: 長文メールスレッドの要約、文脈を踏まえた返信ドラフト作成 (英語等への翻訳も可)、メール本文への直接挿入。

📄 Docs: 文書全体の自動要約表示、選択範囲からの決定事項抽出、要点をタスクリスト化し担当者を割り当て。

これにより、会議の議事録作成やメール対応などが大幅に効率化されます。

🔍【注目】NotebookLM Plus - 高精度リサーチツール

情報収集・調査・分析に特化した強力なAIツール。Google Workspaceユーザーなら利用可能に！

ソース指定: 自分で選んだ信頼できる情報源（PDF, Webサイト, Drive文書, YouTube動画, 音声ファイル(MP3)等）を指定。
高信頼性: 指定ソースのみに基づいて回答（ハルシネーション抑制）。引用元を明記。
共有機能: 作成したノートブックを個人間やグループで共有可能。FAQボットなどに最適。
出力調整: 回答のスタイル（例: 5歳児にも分かるように）や長さ（短め/長め）をカスタマイズ。
多様な用途: 社内規定FAQ、マニュアル解説、専門知識の平易化、議事録分析、文献調査、書籍速読など。

📈 含まれるAI機能一覧 & 今後の展開

今回のアップデートで利用可能になる主なAI機能と、今後の展開です。

Gemini アプリ

サイドパネル

NotebookLM Plus

Google Vids (動画生成/予定)

Meet AI機能 (予定)

Google VidsやMeetへのAI統合など、さらなる機能拡張が予定されています。

🛡️ セキュリティ & 活用TIPS

安全性: Google Workspace内のGemini利用はセキュリティに配慮。入力データがモデル学習に使われることはありません。アクセス権限も遵守。
推奨: セキュリティリスクのある個人利用AI（シャドーIT）を防ぐためにも、公式の安全なAI環境の活用が重要。
使い分けヒント:
- アイデア出し/壁打ち/0→1作成 → Gemini アプリ
- 事実確認/社内FAQ/情報整理 → NotebookLM Plus
機会: 特にリソースの限られる中小企業にとって、AI活用は生産性を飛躍的に向上させるチャンスです。

カテゴリー: SNS投稿、ブログ記事作成、生成AIプロンプト

タグ: AI claude Gemini Webサイトプロンプト

“Gemini 2.5 pro を使用してインフォグラフィック / Webサイト制作” に対して1件のコメントがあります。

【Aqsh】AI活用による生産性向上セミナー実施のお知らせ

衝撃！AIツール Gemini 2.5 Pro によるインフォグラフィック作成

プロンプト1つで、Webページが1分で作れる

インフォグラフィック作成プロンプト

出力例

Google Workspace & Gemini 最強進化【2025年版】

“Gemini 2.5 pro を使用してインフォグラフィック / Webサイト制作” に対して1件のコメントがあります。

【Aqsh】AI活用による生産性向上セミナー実施のお知らせ

衝撃！AIツール Gemini 2.5 Pro によるインフォグラフィック作成