Zenn
Accenture Japan (有志)
🐈

Gemini 2.5 Pro Experimental良い感じ

マッサン (Masanori Yoshida)
2025/03/26に公開
1
Gemini
tech

1. はじめに

日本時間2025年3月26日早朝に、次世代の大規模言語モデル（Large Language Model, LLM）として「Gemini 2.5」が発表されました。特に「Gemini 2.5 Pro Experimental」は、多くのベンチマークテストでトップクラスの性能を示し、より複雑な思考に対応できる新しいAIモデルとのことです。
https://blog.google/technology/google-deepmind/gemini-model-thinking-updates-march-2025/#gemini-2-5-thinking

2. Gemini 2.5 とは？

“Thinking Model” とは？

従来のAIモデルは、テキストを入力するとそのまま答えを返す「変換（変形）」作業に近いイメージでした。
一方、Gemini 2.5は「Thinking Model（思考モデル）」と呼ばれる仕組みを採用し、回答を導く前に内部的なステップ（推論プロセス）を踏むようになっています。
これにより

  • 複雑な文脈の理解
  • 筋の通ったロジック（論理展開）の保持
  • 回答の正確性向上
    が期待できるのが特徴です。

3. Gemini 2.5 Pro Experimental の主な特徴

  1. 大幅に強化されたベースモデル
    前バージョン（Gemini 2.0）よりも、トレーニングデータ量やモデルアーキテクチャが改善されており、多様なタスクへの適応力が向上しています。
  2. 高度な推論・コード生成能力
    数学やプログラミング問題を解くベンチマーク（例えばAIMEなど）で高得点を記録しており、コード生成や数式を使った問題解決にも強みを発揮します。
    • AIME(数学競技)、LiveCodeBench(プログラミングタスク)などのテストで高水準を達成。
  3. 幅広い応用範囲
    単純なQ&Aにとどまらず、複雑な文書分析や高度な推論を要する場面でも安定した出力が得られます。
  4. LMArenaリーダーボードでNo.1
    LMArenaはLLMの品質やパフォーマンスを人間の評価(ヒューマン・ジャッジ)を軸に比較するサイトですが、そこで大きな差をつけてトップを獲得しています。これは「使いやすさ」「出力の自然さ」など、総合的な品質評価でも評価されたことを示します。

4. どのように活用できるのか？

4.1 ソフトウェア開発の支援

  • コードレビュー支援: コードの誤り検出や最適化の提案
  • テストケース自動生成: 新機能に応じたテストコードを自動生成し、開発効率を向上

4.2 データ分析やレポーティング

  • 大量のログデータから問題の原因を推察
  • 自然言語で問い合わせるだけでレポートのプロトタイプを生成

4.3 AIエージェント開発

  • カスタマーサポート用のチャットボットや、自動応答システム
  • より文脈を理解した音声アシスタントの作成

参考コード例 (Python)

import gemini_sdk

model = gemini_sdk.load_model("gemini-2.5-pro-experimental")

# シンプルなQ&A
question = "新しいAPIエンドポイントの設計指針を教えて"
answer = model.generate_response(question)
print(answer)

5. 価格や提供形態

  • Google AI Studio および Geminiアプリにて先行公開中
  • Vertex AI（Google CloudのAIプラットフォーム）への提供も予定されており、企業ユース向けの大規模利用にも対応できるようになります
  • 有料プランの料金体系は近日公開予定

6. 使ってみた

最近個人的に楽しんでいる、グラレコ風インフォグラフィックのプロンプトをブラッシュアップしてもらいました。いいかんじ😸

弊社風のインフォグラフィックを自作しているのですが、ブラッシュアップ前後のアウトプット比較は下記です。

ブラッシュアップ前
ブラッシュアップ前
## 目的
以下の内容を、**大きなFont Awesomeアイコン**と**手書き風の吹き出し**を活用した日本語のグラフィックレコーディング風HTMLインフォグラフィックに変換してください。各カードに1つの大きなアイコンを配置し、小さなインラインアイコンを積極的に活用して情報を視覚的にわかりやすく表現します。

## デザイン仕様
### 1. カラースキーム

<palette>

<color name='Core-Purple-1' rgb='A100FF' r='161' g='0' b='255' />
<color name='Core-Purple-2' rgb='7500C0' r='117' g='0' b='192' />
<color name='Core-Purple-3' rgb='460073' r='70' g='0' b='115' />


<color name='Accent-Purple-1' rgb='B455AA' r='180' g='85' b='170' />
<color name='Accent-Purple-2' rgb='A055F5' r='160' g='85' b='245' />
<color name='Accent-Purple-3' rgb='BE82FF' r='190' g='130' b='255' />
<color name='Accent-Purple-4' rgb='DCAFFF' r='220' g='175' b='255' />
<color name='Accent-Purple-5' rgb='E6DCFF' r='230' g='220' b='255' />


<color name='Black' rgb='000000' r='0' g='0' b='0' />
<color name='Dark-Gray' rgb='96968C' r='150' g='150' b='140' />
<color name='Light-Gray' rgb='E6E6DC' r='230' g='230' b='220' />
<color name='White' rgb='FFFFFF' r='255' g='255' b='255' />


<color name='Blue' rgb='0041F0' r='0' g='65' b='240' />
<color name='Light-Blue' rgb='00FFFF' r='0' g='255' b='255' />
<color name='Green' rgb='64FF50' r='100' g='255' b='80' />
<color name='Red' rgb='FF3246' r='255' g='50' b='70' />
<color name='Orange' rgb='FF7800' r='255' g='120' b='0' />
<color name='Yellow' rgb='FFEB32' r='255' g='235' b='50' />
</palette>


### 2. グラフィックレコーディング要素
- 全体を白背景（#FFFFFF）のキャンバス上に配置
- **各カードに1つの特大サイズのテーマアイコン**を配置（fa-5x程度）、コアパープルを使用
- **カード内のコンテンツは小さなアイコン付きリスト形式**で構造化
- **手書き風の吹き出し**でポイントや補足情報を追加、白背景でシンプルに
- 内容を複数のセクションに分け、カード形式で整理
- キーワードをタグ形式で視覚的に強調
- コードサンプルはプレビュー形式で表示
- 関連する概念をつなぐ視覚的な要素（矢印や線）
- 各カードをアニメーションで強調（任意の部分に適用）
- カード内部の情報量を増やし、小さなアイコンで視覚的に整理

### 3. タイポグラフィ
  - タイトル：32px、#333333（テキスト色）、太字、特大関連アイコン付き（fa-6x）
  - カードタイトル：24px、#000000、大きめアイコン付き（fa-5x）
  - リスト見出し：18px、#000000
  - リスト項目：16px、#333333、小さなアイコン付き
  - タグ：16px、#000000、背景色付き（アクセントパープル）
  - 本文：16px、#333333、行間1.5
  - コードプレビュー：14px、等幅フォント、背景色付き（Light-Gray）
  - 吹き出し内テキスト：15px、#333333
  - 日付や補足：14px、#96968C
  - フォント指定：
    ```html
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');
    </style>
    ```

### 4. レイアウト
  - 全体：必ず**3カラム構成**（レスポンシブ対応）
  - ヘッダー：超大型アイコン付きタイトル（fa-7x）+日付+出典、Core-Purple-1使用
  - 各カード：1つの大きなアイコン＋リスト形式のコンテンツ＋吹き出し
  - カード内部：構造化されたリスト形式で情報を整理
  - コードプレビュー：等幅フォント、背景色付きのプレビュー形式（Light-Gray）
  - 余白：視認性を高めるための十分な余白を確保
  - 横幅：100%（最大2000px程度でセンタリング）

### 5. 吹き出しとタグ表現
- **手書き風の吹き出し**：背景白、境界線Core-Purple-2の1種類のみ
- **位置バリエーション**：上部/左右/下部からの吹き出しでレイアウトに変化
- **タグ表現**：キーワードやコード例をタグ風のデザインでハイライト（アクセントパープル背景）
- **アイコン装飾**：吹き出し内にも小さなアイコンを配置

### 6. アニメーション効果
- **各カードの大型アイコンにアニメーション**（fa-beat-fade, fa-bounce, fa-flip等）
- カードの出現時のフェードインスケールアニメーション
- 重要キーワード出現時のハイライト効果
- 背景色の変化アニメーション（ホバー時）
- スクロールに連動したカードの出現効果
- **重要** タイトルのアイコンにはアニメーション不要

## 7. アイコン活用ガイドライン
- カードごとの大型アイコン（1つのみ）：
  - メインコンセプト：**fa-5x〜fa-7x**（カードの中心に配置）、コアパープルで色付け
  
- リスト項目の小型アイコン：
  - インラインアイコン：**fa-lg**（テキストに合わせたサイズ）
  - 概念別の推奨アイコン：
    - コンセプト：fa-lightbulb, fa-idea, fa-brain, fa-diagram-project
    - カラー：fa-palette, fa-paint-brush, fa-fill-drip, fa-swatchbook
    - タイポグラフィ：fa-font, fa-text-size, fa-text, fa-type
    - アクセシビリティ：fa-universal-access, fa-eye, fa-low-vision, fa-wheelchair
    - キーポイント：fa-key, fa-star, fa-check-circle, fa-exclamation-circle
    - デザイン要素：fa-object-group, fa-layer-group, fa-crop, fa-drafting-compass

## 8. HTML/CSS実装のポイント
```css
:root {
  --core-purple-1: #A100FF;
  --core-purple-2: #7500C0;
  --core-purple-3: #460073;
  --accent-purple-1: #B455AA;
  --accent-purple-2: #A055F5;
  --accent-purple-3: #BE82FF;
  --accent-purple-4: #DCAFFF;
  --accent-purple-5: #E6DCFF;
  --neutral-black: #000000;
  --neutral-dark-gray: #96968C;
  --neutral-light-gray: #E6E6DC;
  --neutral-white: #FFFFFF;
  --secondary-blue: #0041F0;
  --secondary-light-blue: #00FFFF;
  --secondary-green: #64FF50;
  --secondary-red: #FF3246;
  --secondary-orange: #FF7800;
  --secondary-yellow: #FFEB32;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--neutral-white);
  color: #333333;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}

/* カードスタイル */
.section-card {
  flex: 1;
  min-width: 220px;
  max-width: 450px;
  background-color: var(--neutral-white);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
  position: relative;
  overflow: hidden;
  border-top: 4px solid var(--core-purple-1);
}

/* カード内アイコンコンテナ */
.mega-icon-container {
  text-align: center;
  margin: 15px 0;
}

/* カードコンテンツ */
.card-content {
  padding: 0 10px 15px;
}

/* キーワードリスト */
.keyword-list {
  margin: 15px 0;
  padding: 0;
  list-style-type: none;
}

.keyword-list li {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
}

.keyword-list li i {
  margin-right: 8px;
  color: var(--core-purple-2);
  min-width: 16px;
}

/* キーワードタグ */
.keyword-tag {
  background-color: var(--accent-purple-5);
  color: var(--neutral-black);
  padding: 3px 8px;
  border-radius: 5px;
  margin-right: 5px;
  display: inline-block;
  font-weight: bold;
}

.speech-bubble {
  position: relative;
  background: var(--neutral-white);
  border: 3px solid var(--core-purple-2);
  border-radius: 20px;
  padding: 10px 15px;
  margin: 15px 5px;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
}

.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 20px;
  border-width: 12px 8px 0;
  border-style: solid;
  border-color: var(--core-purple-2) transparent;
  display: block;
  width: 0;
}

/* 吹き出し位置バリエーション */
.speech-bubble.right::after {
  left: auto;
  right: 20px;
}

.speech-bubble.top::after {
  bottom: auto;
  top: -13px;
  border-width: 0 8px 12px;
}

.handwritten {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
}

/* コードプレビュー */
pre {
  background: var(--neutral-light-gray);
  padding: 8px;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 10px;
  overflow-x: auto;
}

/* レスポンシブ対応 */
.section-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  max-width: 2000px;
  margin: 0 auto;
}

@media (max-width: 1600px) {
  .section-card {
    min-width: 280px;
  }
}

@media (max-width: 1200px) {
  .section-card {
    min-width: 320px;
  }
}

@media (max-width: 900px) {
  .section-card {
    min-width: 380px;
  }
}

@media (max-width: 768px) {
  .section-layout {
    flex-direction: column;
  }
  
  .section-card {
    width: 100%;
    min-width: auto;
  }
}

/* アニメーション */
.fade-in-scale {
  animation: fadeInScale 0.6s ease-out forwards;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* キーワードハイライト */
.highlight {
  background: linear-gradient(transparent 60%, var(--accent-purple-4) 60%);
  padding: 0 2px;
}

9. 全体的な指針

  • コアパープルを主要色として各カードに効果的に配置、補助的にアクセントパープルを活用
  • 各カードに1つの大きなアイコンを配置し、小さなインラインアイコンを積極的に活用
  • リスト形式で情報を構造化し、視認性と理解しやすさを向上
  • 白背景の吹き出しで統一感を持たせ、ポイントや補足情報を水平に表示
  • キーワードはタグ形式でハイライトし、視覚的に強調
  • 視覚的な記憶に残るデザイン
  • 情報の関連性を視覚的な要素（矢印や線）で表現
  • アニメーションで重要な要素を強調
  • 必ず3カラム構成を維持し、レスポンシブ対応
  • Noto Sans JPフォントを一貫して使用
  • フッターに出典情報を明記

10. 変換する文章/記事

ユーザーが入力（添付）したコンテンツをグラフィックレコーディング形式に変換してください。

Gemini 2.5 Proによるブラッシュアップ後
Gemini 2.5 Proによるブラッシュアップ後
## 目的 

入力された情報を、**視覚的なストーリーテリング**の手法を用いた日本語の**グラフィックレコーディング風HTMLインフォグラフィック**に変換します。目的は、情報を単にリスト化するのではなく、**魅力的で記憶に残りやすく、直感的に理解できる**形で閲覧者に届けることです。Font Awesomeアイコン（特に各セクションを象徴する大きなアイコン）とクリーンな吹き出しデザインを効果的に活用し、視覚的な階層と情報の流れを明確にします。

## デザインコンセプト：視覚的な魅力と理解しやすさの追求

* **グラフィックレコーディングの精神:** 手書きの温かみやライブ感を意識しつつ、デジタルの利点（クリアさ、構造化、インタラクション）を活かします。
* **情報のチャンキング:** 複雑な情報をカード形式で論理的な塊に分割し、消化しやすくします。
* **視覚的階層の明確化:** アイコンサイズ、タイポグラフィ、色、余白を戦略的に使用し、情報の重要度を直感的に伝えます。
* **スムーズな視線誘導:** レイアウト、矢印/線、アニメーションを用いて、閲覧者の視線を自然に導きます。
* **一貫性とブランディング:** 指定されたカラーパレットとタイポグラフィを一貫して使用し、統一感のあるデザインを構築します。

## デザイン仕様

### 1. カラースキーム (変更なし、一貫性強調)

* 指定されたパレットを使用します。
* **`Core-Purple-1` (`#A100FF`)** を主要なアクセントカラー（ヘッダー、カードのトップボーダー、主要アイコンなど）として使用し、視覚的な統一感とブランド感を強調します。
* 他のCore-Purple、Accent-Purpleは、タグ背景、サブアイコン、吹き出しの枠線、強調したい要素などに補助的に使用します。
* ニュートラルカラー（White, Grays, Black）を適切に使用し、可読性とクリーンな印象を保ちます。
* セカンダリーカラーは、必要に応じて特定のデータや注意喚起などに限定的に使用します。

```xml
<palette>
<color name='Core-Purple-1' rgb='A100FF' r='161' g='0' b='255' />
<color name='Core-Purple-2' rgb='7500C0' r='117' g='0' b='192' />
<color name='Core-Purple-3' rgb='460073' r='70' g='0' b='115' />

<color name='Accent-Purple-1' rgb='B455AA' r='180' g='85' b='170' />
<color name='Accent-Purple-2' rgb='A055F5' r='160' g='85' b='245' />
<color name='Accent-Purple-3' rgb='BE82FF' r='190' g='130' b='255' />
<color name='Accent-Purple-4' rgb='DCAFFF' r='220' g='175' b='255' />
<color name='Accent-Purple-5' rgb='E6DCFF' r='230' g='220' b='255' />

<color name='Black' rgb='000000' r='0' g='0' b='0' />
<color name='Dark-Gray' rgb='96968C' r='150' g='150' b='140' />
<color name='Light-Gray' rgb='E6E6DC' r='230' g='230' b='220' />
<color name='White' rgb='FFFFFF' r='255' g='255' b='255' />

<color name='Blue' rgb='0041F0' r='0' g='65' b='240' />
<color name='Light-Blue' rgb='00FFFF' r='0' g='255' b='255' />
<color name='Green' rgb='64FF50' r='100' g='255' b='80' />
<color name='Red' rgb='FF3246' r='255' g='50' b='70' />
<color name='Orange' rgb='FF7800' r='255' g='120' b='0' />
<color name='Yellow' rgb='FFEB32' r='255' g='235' b='50' />
</palette>

2. 主要な視覚要素 (具体性と目的を強化)

  • 全体背景: クリーンな白背景 (#FFFFFF)。
  • カード (情報の単位):
    • 各カードは1つの主要トピックを表します。
    • 上部に Core-Purple-1 の太いボーダー (border-top: 4px solid var(--core-purple-1);) を配置し、視覚的な区切りと一貫性を与えます。
    • 背景は白 (#FFFFFF)、角丸 (border-radius: 20px)、適度な影 (box-shadow: 5px 5px 15px rgba(0,0,0,0.1);) で浮遊感を演出。
  • メガアイコン (各カードのシンボル):
    • 各カードに1つだけ、その内容を象徴する特大アイコン (fa-5x〜fa-7x) を中央上部付近に配置します。
    • 色は Core-Purple-1 または Core-Purple-2 を使用し、存在感を際立たせます。
    • 目的: カードの主題を一目で伝え、視覚的なアンカーポイントとなります。
  • コンテンツリスト (構造化された情報):
    • カード内の情報は、小さなアイコン (fa-lg) 付きのリスト形式で構造化します。
    • アイコンはリスト項目の内容を示唆し、テキストを読む前の予備情報を提供します。アイコン色は Core-Purple-2 など、メガアイコンより少し控えめな色を使用。
    • 目的: 情報を整理し、スキャンしやすく、理解を助けます。
  • 吹き出し (補足と強調):
    • クリーンなデザイン: 白背景 (background: var(--neutral-white);)、Core-Purple-2 の境界線 (border: 3px solid var(--core-purple-2);)、角丸 (border-radius: 20px)。手書き風の フォント ではなく、クリーンな枠線でグラレコ 風 を表現します。
    • 内容: 重要なポイント、補足説明、引用などを簡潔に記述。内部にも関連する小さなアイコンを配置可能。
    • 配置: コンテンツの邪魔にならず、かつ関連性がわかる位置（上下左右）に配置。CSSの ::after でしっぽを表現。
    • 目的: 主要な流れを妨げずに、追加情報や注意を引きたい箇所を効果的に提示します。
  • キーワードタグ (視覚的ハイライト):
    • 重要なキーワードやカテゴリ名をタグ形式で表示。
    • 背景色は Accent-Purple-4 や Accent-Purple-5 など、優しいアクセントカラーを使用。文字色は #000000 または Core-Purple-3。
    • 目的: キーワードを素早く識別させ、情報のスキャナビリティを高めます。
  • コードプレビュー (具体例の提示):
    • 背景 Light-Gray (#E6E6DC)、等幅フォントで見やすく表示。
    • 目的: コード例を明確に区別し、読みやすくします。
  • 接続要素 (関係性の可視化):
    • 関連性の強いカード間や、カード内の複雑な要素間に、控えめな線や矢印（点線、曲線など、CSS border や ::before/::after、または必要ならSVG）を配置します。
    • 色は Dark-Gray や Light-Gray を使用し、主張しすぎないように注意。
    • 目的: 情報の関連性やフローを視覚的に示し、理解を深めます。

3. タイポグラフィ (階層と可読性を重視)

  • フォント: Noto Sans JP (ウェイト 400, 700) を一貫して使用。読みやすさとモダンな印象。
  • 全体タイトル: 32px, Core-Purple-3 (#460073), Bold (700), 超大型アイコン (fa-7x, Core-Purple-1) 付き。
  • カードタイトル: 24px, #000000, Bold (700)。メガアイコンはこのセクションの視覚要素として機能。
  • リスト見出し/小見出し: 18px, #000000, Bold (700)。
  • リスト項目: 16px, #333333, Regular (400), 行間 1.6。小さなアイコン (fa-lg) 付き。
  • タグ: 14px-15px, #000000 または Core-Purple-3, Bold (700)。背景色付き。
  • 本文/説明文: 16px, #333333, Regular (400), 行間 1.6。
  • コードプレビュー: 14px, 等幅フォント (monospace), #333333。
  • 吹き出し内テキスト: 15px, #333333, Regular (400), 行間 1.5。
  • 日付/出典/補足: 14px, Dark-Gray (#96968C), Regular (400)。
  • フォント読み込み:
<style>
@import url('[https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap](https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap)');
@import url('[https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css](https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css)'); /* バージョンは適宜最新を確認 */
</style>

4. レイアウト (構造とレスポンシブ)

  • 全体構造: 必ず 3カラムグリッド を基本とします (display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;)。
  • レスポンシブ:
    • 画面幅に応じてカラム内のカード幅が調整されるように (flex: 1; min-width: ...; max-width: ...;)。
    • 具体的なブレークポイント例:
      • > 1200px: 3カラム
      • 769px - 1200px: 2カラム
      • <= 768px: 1カラム (カードが縦に並ぶ)
    • メディアクエリ内の min-width 設定を見直し、画面幅が狭くなるにつれてカラム数が減るように調整してください（元のCSS例は逆の挙動に見えるため注意）。
  • ヘッダー: ページ最上部に配置。超大型アイコン付きタイトル、日付、出典情報。背景は Core-Purple-1 のグラデーションや単色などで区別しても良い。
  • カード間の余白: gap: 20px; (またはそれ以上) を確保し、視覚的な分離と整理を促します。
  • カード内部の余白: padding を適切に設定し、コンテンツが詰まりすぎないようにします。
  • 最大幅とセンタリング: 全体のコンテナに max-width: 1800px; margin: 0 auto; などを設定し、超ワイドスクリーンでの間延びを防ぎます。

5. アニメーションとインタラクション (目的を持った動き)

  • 目的: 重要な要素に注意を引き、単調さを避け、リッチな体験を提供します。ただし、過度なアニメーションはUXを損なうため注意。
  • カード出現: スクロールに応じてカードがフェードイン & スケールアップ (fadeInScale アニメーション) で表示される効果。
  • メガアイコン: 各カードのメガアイコンに控えめなアニメーション (例: fa-beat-fade をホバー時のみ適用、またはゆっくりとした fa-pulse) を適用し、視線を集めます。常時激しく動くアニメーション (fa-bounce, fa-flip の連続など) は避ける。
  • 重要キーワード: 出現時やホバー時に背景ハイライト (.highlight クラスのような効果) を適用。
  • カードホバー: カードにマウスホバーした際に、影が少し濃くなる、または border-top の色が少し明るくなるなどの** subtle な** フィードバック。
  • タイトルアイコン: ヘッダーの超大型アイコンにはアニメーション不要。静的なシンボルとして機能させます。

6. アイコン活用ガイドライン (役割の明確化)

  • メガアイコン (カードごと):
    • 役割: カードの主題を瞬時に伝えるシンボル。
    • サイズ: fa-5x 〜 fa-7x。カードデザインの中心要素。
    • 色: Core-Purple-1 または Core-Purple-2。
  • リスト内アイコン (インライン):
    • 役割: 各項目の内容を補足し、視覚的な区切りを提供。テキストの可読性を助ける。
    • サイズ: fa-lg (テキストと同程度か少し大きめ)。
    • 色: Core-Purple-2 や Dark-Gray など、メガアイコンより控えめに。
    • 推奨アイコン例 (元のリストを維持):
      • コンセプト：fa-lightbulb, fa-idea, fa-brain, fa-diagram-project
      • カラー：fa-palette, fa-paint-brush, fa-fill-drip, fa-swatchbook
      • タイポグラフィ：fa-font, fa-text-size, fa-text, fa-type
      • アクセシビリティ：fa-universal-access, fa-eye, fa-low-vision, fa-wheelchair
      • キーポイント：fa-key, fa-star, fa-check-circle, fa-exclamation-circle
      • デザイン要素：fa-object-group, fa-layer-group, fa-crop, fa-drafting-compass

7. HTML/CSS実装のポイント (提供されたCSSをベースに調整)

  • CSS変数: 提供されたCSS変数を全面的に活用し、保守性と一貫性を高めます。
:root {
  --core-purple-1: #A100FF;
  --core-purple-2: #7500C0;
  --core-purple-3: #460073;
  --accent-purple-1: #B455AA;
  --accent-purple-2: #A055F5;
  --accent-purple-3: #BE82FF;
  --accent-purple-4: #DCAFFF;
  --accent-purple-5: #E6DCFF;
  --neutral-black: #000000;
  --neutral-dark-gray: #96968C;
  --neutral-light-gray: #E6E6DC;
  --neutral-white: #FFFFFF;
  --secondary-blue: #0041F0;
  --secondary-light-blue: #00FFFF;
  --secondary-green: #64FF50;
  --secondary-red: #FF3246;
  --secondary-orange: #FF7800;
  --secondary-yellow: #FFEB32;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  background-color: var(--neutral-white);
  color: #333333;
  line-height: 1.6; /* Readability adjustment */
  margin: 0;
  padding: 0;
}

.infographic-container { /* Wrapper for centering and max-width */
  max-width: 1800px;
  margin: 0 auto;
  padding: 20px;
}

.infographic-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 20px;
  /* Optional background for header section */
  /* background: linear-gradient(135deg, var(--core-purple-1), var(--core-purple-2)); */
  /* color: var(--neutral-white); */
}

.infographic-header__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--core-purple-3); /* Or white if using dark header bg */
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

.infographic-header__icon {
  color: var(--core-purple-1);
}

.infographic-header__meta {
  font-size: 14px;
  color: var(--neutral-dark-gray); /* Or light gray/white if using dark header bg */
}

.section-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 25px; /* Slightly increased gap */
  justify-content: center;
}

.section-card {
  flex: 1 1 300px; /* Flex basis for better wrapping */
  min-width: 280px; /* Minimum width before wrapping */
  max-width: 480px; /* Maximum width */
  background-color: var(--neutral-white);
  border-radius: 20px;
  padding: 20px; /* Increased padding */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  border-top: 5px solid var(--core-purple-1); /* Slightly thicker border */
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* For hover */
}

.section-card:hover {
   box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.15);
   transform: translateY(-3px);
}

.mega-icon-container {
  text-align: center;
  margin: 10px 0 25px 0; /* Adjusted margin */
  color: var(--core-purple-1); /* Icon color */
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--neutral-black);
  margin-bottom: 15px;
  text-align: center; /* Center title below icon */
}

.card-content {
  /* No extra padding needed if card padding is sufficient */
}

.content-list { /* Changed from keyword-list for generality */
  margin: 20px 0;
  padding: 0;
  list-style-type: none;
}

.content-list li {
  margin-bottom: 12px; /* Increased spacing */
  display: flex;
  align-items: flex-start; /* Align icon top */
  font-size: 16px;
  color: #333333;
  line-height: 1.6;
}

.content-list li i.fa-lg { /* Specificity for list icons */
  margin-right: 10px; /* Increased space */
  color: var(--core-purple-2);
  min-width: 18px; /* Ensure alignment */
  padding-top: 3px; /* Align icon better with text */
}

.keyword-tag {
  background-color: var(--accent-purple-5);
  color: var(--core-purple-3);
  padding: 4px 10px; /* Slightly larger */
  border-radius: 5px;
  margin: 0 5px 5px 0; /* Allow wrapping */
  display: inline-block;
  font-size: 14px; /* Adjusted size */
  font-weight: 700;
}

.speech-bubble {
  position: relative;
  background: var(--neutral-white);
  border: 3px solid var(--core-purple-2);
  border-radius: 15px; /* Slightly less round */
  padding: 12px 18px;
  margin: 20px 5px;
  font-size: 15px;
  color: #333333;
  line-height: 1.5;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.08);
}

.speech-bubble::after, .speech-bubble::before { /* Added ::before for border */
  content: '';
  position: absolute;
  display: block;
  width: 0;
  border-style: solid;
  border-color: transparent; /* Default */
}

/* Bottom pointing tail */
.speech-bubble.bottom::before {
  bottom: -16px; /* Position border slightly outside */
  left: 25px;
  border-width: 16px 12px 0;
  border-top-color: var(--core-purple-2); /* Border color */
}
.speech-bubble.bottom::after {
  bottom: -12px; /* Position fill inside border */
  left: 27px; /* Adjust for border thickness */
  border-width: 13px 10px 0; /* Slightly smaller */
  border-top-color: var(--neutral-white); /* Fill color */
}

/* Top pointing tail */
.speech-bubble.top::before {
  top: -16px;
  left: 25px;
  border-width: 0 12px 16px;
  border-bottom-color: var(--core-purple-2);
}
.speech-bubble.top::after {
  top: -12px;
  left: 27px;
  border-width: 0 10px 13px;
  border-bottom-color: var(--neutral-white);
}

/* Right pointing tail - Adjust as needed */
/* Left pointing tail - Adjust as needed */

pre {
  background: var(--neutral-light-gray);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 14px;
  margin: 15px 0;
  overflow-x: auto;
  color: #333333;
  border: 1px solid #ccc; /* Subtle border */
}

code {
  font-family: monospace;
}

.connection-line { /* Example class for connection */
  /* Implement using borders, pseudo-elements, or SVG */
  border-bottom: 2px dashed var(--neutral-dark-gray);
  margin: 10px 0;
  opacity: 0.7;
}

.infographic-footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--neutral-light-gray);
  font-size: 14px;
  color: var(--neutral-dark-gray);
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .section-card {
    flex-basis: calc(50% - 25px); /* 2 columns, accounting for gap */
    max-width: none; /* Remove max-width if needed for 2 col */
  }
}

@media (max-width: 768px) {
  .section-layout {
     gap: 20px;
  }
  .section-card {
    flex-basis: 100%; /* 1 column */
    min-width: 0; /* Reset min-width */
    max-width: 600px; /* Optional max-width for single column */
    margin-left: auto; /* Center card in single column */
    margin-right: auto;
  }
  .infographic-header__title {
    font-size: 28px;
    flex-direction: column; /* Stack icon and title */
    gap: 5px;
  }
  .infographic-header__icon {
     font-size: 3em; /* Adjust icon size relative to title */
  }
}

/* Animations */
.fade-in-scale {
  opacity: 0;
  transform: scale(0.95);
  animation: fadeInScale 0.6s ease-out forwards;
}

@keyframes fadeInScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.highlight {
  background: linear-gradient(transparent 60%, var(--accent-purple-4) 60%);
  padding: 0 2px;
  display: inline; /* Ensure it behaves like text highlight */
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .section-card,
  .mega-icon-container i {
    animation: none !important;
    transition: none !important;
  }
  .section-card:hover {
    transform: none; /* Disable hover lift */
  }
}
  • クラス命名: BEM (Block, Element, Modifier) などの規則に基づくと、より構造的になります (例: .card, .card__icon, .card__title, .card--highlighted)。提供されたCSSは基本的なクラス名を使用しています。
  • アクセシビリティ:
    • 色のコントラスト比に注意します (特に文字色と背景色)。WCAG基準を満たすように意識します。
    • アイコンには aria-label や title 属性で代替テキストを提供するか、装飾目的であれば aria-hidden="true" を設定します。
    • 適切なHTMLセマンティックタグ (<header>, <article>, <section>, <ul>, <li> など) を使用します。
  • CSSの調整:
    • レスポンシブ: 提供されたCSS例を参考に、画面幅が狭くなるにつれてカラム数が減る (flex-basis や grid-template-columns を使用) ようにメディアクエリを調整しました。
    • 吹き出し (speech-bubble): 枠線と塗りつぶしでより立体的なしっぽを表現するCSS例を追加しました。font-family は body から継承想定です。
    • アニメーション: CSSで基本的な fadeInScale アニメーションと、prefers-reduced-motion への配慮を追加しました。アイコンのアニメーションはCSSで :hover や animation プロパティを使って実装します。

8. 全体的な指針 (再確認と強調)

  • 視覚的な一貫性: 色、タイポグラフィ、アイコンスタイル、余白感を全体で統一します。
  • 情報の優先順位: 視覚的階層を意識し、最も伝えたい情報が最初に目に飛び込むように設計します。
  • 読みやすさ: 十分な行間、適切な文字サイズ、コントラストを確保します。
  • グラレコ「風」: 完全な手書き再現ではなく、そのエッセンス（視覚的要約、アイコン活用、親しみやすさ）をデジタルで表現します。
  • フッター: 最終セクションの後には、出典元情報（もしあれば）を明記するシンプルなフッター (<footer class="infographic-footer">...</footer>) を設けます。

9. 変換対象コンテンツ

[ここに、インフォグラフィック化したいユーザーの文章や記事内容を挿入・添付してください]

ブラッシュアップ後のプロンプトを使って、公開情報であるアクセンチュアの2025年度第２四半期の決算情報をClaude Artifactsでインフォグラフィックにしてみました。いい感じに出力されましたね！

7. まとめ

Gemini 2.5 Proは、Thinking Model として一段と進化した大規模言語モデルです。コード生成や高度な推論など、さまざまなタスクに強みを持ち、既存のワークフローを大きく効率化できる可能性があります。いろいろ試していけたらと思います！

1
Accenture Japan (有志)
Accenture Japan (有志)

アクセンチュア株式会社に所属する社員有志による運営です。アクセンチュアの社員による様々な発信をまとめています。なお、投稿内容は社員個人の見解であり、所属する組織を代表するものではありません。

Discussion