Claude 3.5 Sonnetが、Artifacts機能でSVG形式の図を書いてくれる……
![](https://assets.st-note.com/img/1721377128934-Csn425FaQ7.png?width=1200)
<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
![](https://assets.st-note.com/img/1721378507844-VkiE1K4rTo.png?width=1200)
Gemini Advanced
![](https://assets.st-note.com/img/1721378427790-CXpDUADv64.png)
<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+
![](https://assets.st-note.com/img/1721378958821-yyDB5mnvq9.png?width=1200)
![](https://assets.st-note.com/img/1721378958848-2lQ8Ait1DL.png?width=1200)
<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の方が、細かなことをお願いしなくても、すぐ出来てます。
いずれ出来るようになるのでしょうけど、今はこんな感じです。
サポートする値打ちがあると考えて下さって感謝します! 画像生成AI学んでるので、その費用にさせて下さい。 (ポテチとガリガリ君も、つけるかもしれませぬ)