Claude 3.5 Sonnetが、Artifacts機能でSVG形式の図を書いてくれる……

PNGに変換しました

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" width="800" height="600">
  <rect width="100%" height="100%" fill="#f0f0f0"/>
  
  <text x="400" y="50" font-family="Arial, sans-serif" font-size="32" text-anchor="middle" font-weight="bold">多様性と相互尊重</text>
  
  <!-- 異なる価値観 -->
  <g transform="translate(100, 100)">
    <rect width="250" height="150" rx="20" fill="#e6f2ff"/>
    <path d="M125 30 L145 80 L105 80 Z" fill="#4CAF50"/>
    <rect x="120" y="80" width="10" height="40" fill="#795548"/>
    <text x="125" y="140" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">異なる価値観</text>
  </g>
  
  <!-- 多様な個性 -->
  <g transform="translate(450, 100)">
    <rect width="250" height="150" rx="20" fill="#e6ffe6"/>
    <circle cx="125" cy="60" r="20" fill="#2196F3"/>
    <circle cx="100" cy="90" r="20" fill="#FFC107"/>
    <circle cx="150" cy="90" r="20" fill="#E91E63"/>
    <text x="125" y="140" font-family="Arial, sans-serif" font-size="18" text-anchor="middle">多様な個性</text>
  </g>
  
  <!-- みんなそれぞれ素晴らしい -->
  <g transform="translate(200, 300)">
    <rect width="400" height="100" rx="20" fill="#fff9c4"/>
    <path d="M200 30 L210 50 L230 55 L215 70 L220 90 L200 80 L180 90 L185 70 L170 55 L190 50 Z" fill="#FFC107"/>
    <text x="200" y="70" font-family="Arial, sans-serif" font-size="22" text-anchor="middle" font-weight="bold">みんなそれぞれ素晴らしい</text>
  </g>
  
  <!-- お互いを尊重しよう -->
  <g transform="translate(200, 450)">
    <rect width="400" height="100" rx="20" fill="#ffcdd2"/>
    <path d="M180 30 C160 10, 140 30, 180 60 C220 30, 200 10, 180 30" fill="#E91E63"/>
    <text x="200" y="70" font-family="Arial, sans-serif" font-size="22" text-anchor="middle" font-weight="bold">お互いを尊重しよう</text>
  </g>
  
  <text x="400" y="580" font-family="Arial, sans-serif" font-size="14" text-anchor="middle">
    違いを認め合い、互いの価値を尊重することで、より豊かな社会を築くことができます。
  </text>
</svg>

図も色もシンボルも配置も全てClaude 3.5 Sonnetが選んでいます。中身だけ、私が担当。

生成AIの差別化が凄い。
SVG形式だと日本語も正確に扱えて良いですね。

追記

Copilot Pro

頑張った😂

Gemini Advanced

🧐

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#FFD700" />
      <stop offset="100%" stop-color="#FF4500" />
    </linearGradient>
  </defs>

  <g font-family="sans-serif">
    <text x="50%" y="25%" text-anchor="middle" font-size="24" fill="url(#grad1)">
      <tspan x="50%" dy="-1em">十人十色</tspan>
      <tspan x="50%" dy="1.2em">価値観を</tspan>
      <tspan x="50%" dy="1.2em">認め合おう</tspan>
    </text>
  </g>

  <g stroke="#000" stroke-width="2" fill="none">
    <path d="M 50 100 C 50 50, 100 50, 100 100" />
    <path d="M 100 100 C 100 150, 150 150, 150 100" />
    <path d="M 150 100 C 150 50, 200 50, 200 100" />
    <path d="M 200 100 C 200 150, 250 150, 250 100" />
  </g>

  <g fill="#000">
    <circle cx="50" cy="100" r="8" />
    <circle cx="100" cy="100" r="8" />
    <circle cx="150" cy="100" r="8" />
    <circle cx="200" cy="100" r="8" />
    <circle cx="250" cy="100" r="8" />
  </g>
</svg>

ChatGPT+

最初は英語

日本語に修正

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
  <!-- 背景 -->
  <rect width="800" height="600" fill="#f0f8ff"/>
  
  <!-- タイトル -->
  <text x="400" y="50" font-family="Arial" font-size="24" text-anchor="middle" fill="#333">
    多様な価値観を尊重する
  </text>

  <!-- 中央の円 -->
  <circle cx="400" cy="300" r="100" fill="#ffcc00" stroke="#333" stroke-width="2"/>
  <text x="400" y="305" font-family="Arial" font-size="18" text-anchor="middle" fill="#333">
    みんなそれぞれ
  </text>
  <text x="400" y="330" font-family="Arial" font-size="18" text-anchor="middle" fill="#333">
    素晴らしい
  </text>

  <!-- 円の周りのアイコン -->
  <!-- アイコン1 -->
  <circle cx="200" cy="150" r="50" fill="#ff9999" stroke="#333" stroke-width="2"/>
  <text x="200" y="155" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">
    価値観1
  </text>

  <!-- アイコン2 -->
  <circle cx="600" cy="150" r="50" fill="#99ccff" stroke="#333" stroke-width="2"/>
  <text x="600" y="155" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">
    価値観2
  </text>

  <!-- アイコン3 -->
  <circle cx="200" cy="450" r="50" fill="#99ff99" stroke="#333" stroke-width="2"/>
  <text x="200" y="455" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">
    価値観3
  </text>

  <!-- アイコン4 -->
  <circle cx="600" cy="450" r="50" fill="#ffccff" stroke="#333" stroke-width="2"/>
  <text x="600" y="455" font-family="Arial" font-size="14" text-anchor="middle" fill="#333">
    価値観4
  </text>

  <!-- 矢印 -->
  <line x1="400" y1="200" x2="200" y2="150" stroke="#333" stroke-width="2" marker-end="url(#arrow)"/>
  <line x1="400" y1="200" x2="600" y2="150" stroke="#333" stroke-width="2" marker-end="url(#arrow)"/>
  <line x1="400" y1="400" x2="200" y2="450" stroke="#333" stroke-width="2" marker-end="url(#arrow)"/>
  <line x1="400" y1="400" x2="600" y2="450" stroke="#333" stroke-width="2" marker-end="url(#arrow)"/>

  <!-- 矢印の定義 -->
  <defs>
    <marker id="arrow" markerWidth="10" markerHeight="10" refX="0" refY="3" orient="auto">
      <path d="M0,0 L0,6 L9,3 z" fill="#333"/>
    </marker>
  </defs>

  <!-- 説明テキスト -->
  <text x="400" y="550" font-family="Arial" font-size="16" text-anchor="middle" fill="#333">
    異なる価値観を受け入れ、尊重しよう
  </text>
</svg>

Claude 3.5 Sonnetの方が、細かなことをお願いしなくても、すぐ出来てます。
いずれ出来るようになるのでしょうけど、今はこんな感じです。