SVG作成(雲雨傘)
Kenta
Prompt
雲雨傘のフレームワークを説明するSVGを作成して
A system prompt was added to support web rendering
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雲雨傘フレームワーク</title>
<style>
body {
margin: 0;
padding: 20px;
font-family: 'Hiragino Sans', 'Yu Gothic', sans-serif;
background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background: white;
border-radius: 15px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
max-width: 800px;
}
h1 {
text-align: center;
color: #1565c0;
margin-bottom: 30px;
font-size: 24px;
}
.framework-svg {
width: 100%;
height: auto;
border-radius: 10px;
}
.description {
margin-top: 20px;
padding: 20px;
background: #f5f5f5;
border-radius: 10px;
font-size: 14px;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="container">
<h1>雲雨傘フレームワーク</h1>
<svg class="framework-svg" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
<!-- 背景 -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />
<stop offset="100%" style="stop-color:#E0F6FF;stop-opacity:1" />
</linearGradient>
<filter id="dropShadow">
<feDropShadow dx="2" dy="2" stdDeviation="3" flood-color="rgba(0,0,0,0.3)"/>
</filter>
</defs>
<!-- 背景 -->
<rect width="800" height="500" fill="url(#skyGradient)"/>
<!-- 雲（問題・課題） -->
<g id="cloud" filter="url(#dropShadow)">
<ellipse cx="200" cy="120" rx="60" ry="30" fill="#666666"/>
<ellipse cx="160" cy="130" rx="40" ry="25" fill="#666666"/>
<ellipse cx="240" cy="130" rx="50" ry="25" fill="#666666"/>
<ellipse cx="180" cy="100" rx="35" ry="20" fill="#666666"/>
<ellipse cx="220" cy="100" rx="35" ry="20" fill="#666666"/>
</g>
<!-- 雨（影響・結果） -->
<g id="rain">
<line x1="170" y1="150" x2="165" y2="200" stroke="#4A90E2" stroke-width="3" opacity="0.8"/>
<line x1="190" y1="155" x2="185" y2="210" stroke="#4A90E2" stroke-width="3" opacity="0.8"/>
<line x1="210" y1="152" x2="205" y2="205" stroke="#4A90E2" stroke-width="3" opacity="0.8"/>
<line x1="230" y1="158" x2="225" y2="215" stroke="#4A90E2" stroke-width="3" opacity="0.8"/>
<line x1="180" y1="160" x2="175" y2="220" stroke="#4A90E2" stroke-width="2" opacity="0.6"/>
<line x1="200" y1="162" x2="195" y2="225" stroke="#4A90E2" stroke-width="2" opacity="0.6"/>
<line x1="220" y1="165" x2="215" y2="230" stroke="#4A90E2" stroke-width="2" opacity="0.6"/>
</g>
<!-- 傘（対策・解決策） -->
<g id="umbrella" filter="url(#dropShadow)">
<path d="M 150 280 Q 200 250 250 280" stroke="#E74C3C" stroke-width="3" fill="#FF6B6B"/>
<line x1="200" y1="280" x2="200" y2="350" stroke="#8B4513" stroke-width="4"/>
<path d="M 195 345 Q 200 355 205 345" stroke="#8B4513" stroke-width="3" fill="none"/>
</g>
<!-- ラベルと説明 -->
<g id="labels">
<!-- 雲のラベル -->
<rect x="60" y="80" width="100" height="60" fill="white" stroke="#666666" stroke-width="2" rx="5"/>
<text x="110" y="100" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">雲</text>
<text x="110" y="115" text-anchor="middle" font-size="12" fill="#666">問題・課題</text>
<text x="110" y="130" text-anchor="middle" font-size="12" fill="#666">リスク要因</text>
<!-- 雨のラベル -->
<rect x="300" y="170" width="100" height="60" fill="white" stroke="#4A90E2" stroke-width="2" rx="5"/>
<text x="350" y="190" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">雨</text>
<text x="350" y="205" text-anchor="middle" font-size="12" fill="#666">影響・結果</text>
<text x="350" y="220" text-anchor="middle" font-size="12" fill="#666">悪い結果</text>
<!-- 傘のラベル -->
<rect x="300" y="300" width="100" height="60" fill="white" stroke="#E74C3C" stroke-width="2" rx="5"/>
<text x="350" y="320" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">傘</text>
<text x="350" y="335" text-anchor="middle" font-size="12" fill="#666">対策・解決策</text>
<text x="350" y="350" text-anchor="middle" font-size="12" fill="#666">予防手段</text>
</g>
<!-- フレームワークの流れを示す矢印 -->
<g id="arrows">
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7"
refX="9" refY="3.5" orient="auto" markerUnits="strokeWidth">
<polygon points="0 0, 10 3.5, 0 7" fill="#333" />
</marker>
</defs>
<path d="M 200 150 L 220 170" stroke="#333" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
<path d="M 200 240 L 200 260" stroke="#333" stroke-width="2" fill="none" marker-end="url(#arrowhead)"/>
</g>
<!-- タイトルとステップ -->
<text x="400" y="50" text-anchor="middle" font-size="20" font-weight="bold" fill="#1565c0">雲雨傘フレームワーク</text>
<!-- ステップの説明 -->
<g id="steps">
<rect x="450" y="100" width="320" height="320" fill="white" stroke="#ccc" stroke-width="1" rx="10" opacity="0.9"/>
<text x="610" y="125" text-anchor="middle" font-size="16" font-weight="bold" fill="#1565c0">思考ステップ</text>
<text x="470" y="155" font-size="14" font-weight="bold" fill="#333">1. 雲（問題の特定）</text>
<text x="480" y="175" font-size="12" fill="#666">• 何が問題なのか？</text>
<text x="480" y="190" font-size="12" fill="#666">• どんなリスクがあるか？</text>
<text x="480" y="205" font-size="12" fill="#666">• 原因は何か？</text>
<text x="470" y="235" font-size="14" font-weight="bold" fill="#333">2. 雨（影響の分析）</text>
<text x="480" y="255" font-size="12" fill="#666">• どんな悪影響があるか？</text>
<text x="480" y="270" font-size="12" fill="#666">• 誰に影響するか？</text>
<text x="480" y="285" font-size="12" fill="#666">• いつ起こるか？</text>
<text x="470" y="315" font-size="14" font-weight="bold" fill="#333">3. 傘（対策の検討）</text>
<text x="480" y="335" font-size="12" fill="#666">• どう予防するか？</text>
<text x="480" y="350" font-size="12" fill="#666">• どう対処するか？</text>
<text x="480" y="365" font-size="12" fill="#666">• 代替案は何か？</text>
<text x="470" y="395" font-size="12" font-style="italic" fill="#999">論理的思考と問題解決の基本フレーム</text>
</g>
</svg>
<div class="description">
<h3>雲雨傘フレームワークとは</h3>
<p>マッキンゼー・アンド・カンパニーで使われる論理的思考のフレームワークです。物事を構造化して考える際の基本的な枠組みとして活用されています。</p>
<h4>各要素の詳細</h4>
<ul>
<li><strong>雲（事実・問題）：</strong> 客観的な事実や現状の問題を把握する段階</li>
<li><strong>雨（影響・結果）：</strong> その問題がもたらす具体的な影響や結果を分析する段階</li>
<li><strong>傘（対策・解決）：</strong> 問題に対する具体的な対策や解決策を検討する段階</li>
</ul>
<p>このフレームワークにより、感情的にならず論理的に問題を整理し、効果的な解決策を導き出すことができます。</p>
</div>
</div>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>雲雨傘フレームワーク図解</title>
<style>
body{
margin:0;
font-family: "Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
background:#f4f7fa;
}
svg text{
font-size:14px;
fill:#222;
font-weight:600;
user-select:none;
}
.label-small{
font-size:12px;
font-weight:500;
}
</style>
</head>
<body>
<svg viewBox="0 0 800 600" width="100%" height="100%">
<!-- タイトル -->
<text x="400" y="40" text-anchor="middle" font-size="22" fill="#333">
雲雨傘フレームワーク
</text>
<!-- 雲 (Cloud) -->
<g id="cloud">
<path d="M220 140
a70 50 0 0 1 120 -20
a60 45 0 0 1 120 20
a70 55 0 0 1 -40 100
l-180 0
a60 50 0 0 1 -40 -100
z"
fill="#bcdffb" stroke="#7bb9e8" stroke-width="3"/>
<text x="400" y="160" text-anchor="middle">クラウドサービス層</text>
<text x="400" y="185" text-anchor="middle" class="label-small">
(SaaS / PaaS / IaaS)
</text>
</g>
<!-- 雨 (Data, Threats, Requests) -->
<g id="rain">
<!-- 7 lines/droplets -->
<g stroke="#4ba3f2" stroke-width="4" stroke-linecap="round">
<line x1="300" y1="220" x2="300" y2="290"/>
<line x1="340" y1="225" x2="330" y2="295"/>
<line x1="380" y1="230" x2="360" y2="300"/>
<line x1="420" y1="228" x2="400" y2="298"/>
<line x1="460" y1="225" x2="440" y2="295"/>
<line x1="500" y1="220" x2="480" y2="290"/>
<line x1="260" y1="225" x2="280" y2="295"/>
</g>
<text x="400" y="215" text-anchor="middle" class="label-small" fill="#4ba3f2">
データ／要求／脅威
</text>
</g>
<!-- 傘 (Umbrella) -->
<g id="umbrella">
<!-- 傘のトップ -->
<path d="M200 320
q200 -90 400 0
q-25 30 -50 0
q-25 30 -50 0
q-25 30 -50 0
q-25 30 -50 0
q-25 30 -50 0
q-25 30 -50 0z"
fill="#ff6b6b" stroke="#d14e4e" stroke-width="3"/>
<!-- 傘の持ち手 -->
<line x1="400" y1="320" x2="400" y2="470"
stroke="#8d5a2b" stroke-width="8"/>
<path d="M400 470
q0 40 30 40"
fill="none" stroke="#8d5a2b" stroke-width="8"
stroke-linecap="round"/>
<text x="400" y="300" text-anchor="middle" fill="#fff" font-size="18">
セキュリティ／抽象化層
</text>
<text x="400" y="318" text-anchor="middle" class="label-small" fill="#fff">
(API Gateway・IAM・監査)
</text>
</g>
<!-- 保護される資産 -->
<g id="assets">
<!-- アプリケーション -->
<rect x="140" y="490" width="160" height="60" rx="8"
fill="#ffffff" stroke="#c2c2c2" stroke-width="2"/>
<text x="220" y="525" text-anchor="middle">アプリケーション</text>
<!-- データ -->
<rect x="320" y="490" width="160" height="60" rx="8"
fill="#ffffff" stroke="#c2c2c2" stroke-width="2"/>
<text x="400" y="525" text-anchor="middle">データ</text>
<!-- ユーザー -->
<rect x="500" y="490" width="160" height="60" rx="8"
fill="#ffffff" stroke="#c2c2c2" stroke-width="2"/>
<text x="580" y="525" text-anchor="middle">ユーザー</text>
</g>
<!-- 説明矢印 -->
<g id="arrows" stroke="#7d7d7d" stroke-width="2" fill="none" marker-end="url(#arrowhead)">
<line x1="220" y1="480" x2="220" y2="385"/>
<line x1="400" y1="480" x2="400" y2="385"/>
<line x1="580" y1="480" x2="580" y2="385"/>
</g>
<!-- 矢印ヘッド -->
<defs>
<marker id="arrowhead" markerWidth="8" markerHeight="8"
refX="0" refY="3" orient="auto">
<path d="M0,0 L0,6 L6,3 z" fill="#7d7d7d"/>
</marker>
</defs>
<!-- 凡例 -->
<text x="20" y="580" class="label-small" fill="#555">
雲 : クラウドサービスからのデータ/リクエスト
</text>
<text x="20" y="595" class="label-small" fill="#555">
傘 : セキュリティと抽象化で資産を保護
</text>
</svg>
</body>
</html>
```Drag to resize
はい、承知いたしました。
ビジネスフレームワークである「雲雨傘」を説明するSVGを作成します。以下に提示するコードは、単一のHTMLファイルとして完結しているため、そのままブラウザで表示できます。
このSVGでは、各ステップ（雲・雨・傘）をアイコンとテキストで視覚的に表現し、思考のプロセスが左から右へ流れるようにデザインしました。各要素にはシンプルなアニメーションを追加して、より分かりやすくしています。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雲雨傘フレームワーク SVG</title>
<style>
body {
font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f4f7f9;
color: #333;
}
svg {
width: 90%;
max-width: 900px;
height: auto;
}
/* アニメーション */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
opacity: 0;
}
#group-cloud { animation-delay: 0.2s; }
#arrow1 { animation-delay: 0.8s; }
#group-rain { animation-delay: 1.0s; }
#arrow2 { animation-delay: 1.6s; }
#group-umbrella { animation-delay: 1.8s; }
/* テキストスタイル */
.title {
font-size: 28px;
font-weight: bold;
fill: #2c3e50;
text-anchor: middle;
}
.step-title {
font-size: 22px;
font-weight: bold;
fill: #34495e;
text-anchor: middle;
}
.step-subtitle {
font-size: 16px;
fill: #7f8c8d;
text-anchor: middle;
}
.step-description {
font-size: 18px;
fill: #333;
text-anchor: middle;
font-weight: 500;
}
/* アイコンのスタイル */
.icon-cloud { fill: #ecf0f1; stroke: #bdc3c7; stroke-width: 2.5; }
.icon-rain { fill: #3498db; }
.icon-umbrella-canopy { fill: #e74c3c; stroke: #c0392b; stroke-width: 2.5;}
.icon-umbrella-handle { fill: none; stroke: #c0392b; stroke-width: 5; stroke-linecap: round;}
/* 矢印のスタイル */
.arrow {
stroke: #95a5a6;
stroke-width: 3;
stroke-dasharray: 8, 8;
marker-end: url(#arrowhead);
}
</style>
</head>
<body>
<svg viewBox="0 0 900 450">
<defs>
<!-- 矢印の先端定義 -->
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="0" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#95a5a6" />
</marker>
</defs>
<!-- メインタイトル -->
<text x="450" y="50" class="title fade-in">雲・雨・傘 フレームワーク</text>
<!-- === ステップ１: 雲 (事実) === -->
<g id="group-cloud" class="fade-in">
<g transform="translate(150, 220)">
<!-- 雲アイコン -->
<path d="M -75 -15 a 40 40 0 0 1 0 80 h 150 a 40 40 0 0 1 0 -80 a 30 30 0 0 1 -30 -20 a 45 45 0 0 1 -90 10 z" class="icon-cloud"/>
<!-- テキスト -->
<text y="-100" class="step-title">雲：事実 (Fact)</text>
<text y="-75" class="step-subtitle">現状の客観的な情報</text>
<text y="80" class="step-description">「空が黒い雲で覆われている」</text>
</g>
</g>
<!-- === ステップ２: 雨 (解釈) === -->
<g id="group-rain" class="fade-in">
<g transform="translate(450, 220)">
<!-- 雨アイコン -->
<g class="icon-rain">
<path d="M -40 -30 Q -40 -60, -20 -60 Q 0 -60, 0 -30 Z" />
<path d="M 10 -45 Q 10 -75, 30 -75 Q 50 -75, 50 -45 Z" />
<path d="M -20 -55 Q -20 -85, 0 -85 Q 20 -85, 20 -55 Z" />
</g>
<!-- テキスト -->
<text y="-100" class="step-title">雨：解釈 (Interpretation)</text>
<text y="-75" class="step-subtitle">事実が何を意味するか</text>
<text y="80" class="step-description">「雨が降りそうだ」</text>
</g>
</g>
<!-- === ステップ３: 傘 (行動) === -->
<g id="group-umbrella" class="fade-in">
<g transform="translate(750, 220)">
<!-- 傘アイコン -->
<g transform="translate(0, -35)">
<path d="M -60 0 A 60 60 0 0 1 60 0 Z" class="icon-umbrella-canopy"/>
<path d="M 0 0 L 0 50 C 0 70 -20 70 -20 50" class="icon-umbrella-handle"/>
</g>
<!-- テキスト -->
<text y="-100" class="step-title">傘：行動 (Action)</text>
<text y="-75" class="step-subtitle">解釈に基づく打ち手</text>
<text y="80" class="step-description">「傘を持っていく」</text>
</g>
</g>
<!-- === 矢印 === -->
<path id="arrow1" d="M 260 220 H 340" class="arrow fade-in"/>
<path id="arrow2" d="M 560 220 H 640" class="arrow fade-in"/>
</svg>
</body>
</html>
```Drag to resize
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>雲雨傘のフレームワーク（Cloud-Umbrella Framework）SVG図解</title>
<style>
body {
background: #f0f5fa;
font-family: "Yu Gothic", "Meiryo", sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
svg {
background: #fff;
border-radius: 24px;
box-shadow: 0 4px 24px #0002;
}
</style>
</head>
<body>
<svg width="600" height="650" viewBox="0 0 600 650">
<!-- 雲 -->
<ellipse cx="200" cy="170" rx="80" ry="48" fill="#dbeafe"/>
<ellipse cx="310" cy="130" rx="55" ry="38" fill="#dbeafe"/>
<ellipse cx="400" cy="175" rx="70" ry="45" fill="#b6e5fc"/>
<ellipse cx="320" cy="190" rx="100" ry="55" fill="#c7f2ff"/>
<!-- 雲ラベル -->
<text x="300" y="115" text-anchor="middle" font-size="22" font-weight="bold" fill="#3892c7">クラウド (Cloud)</text>
<text x="300" y="215" text-anchor="middle" font-size="16" fill="#19527a">外部環境・予測できない要因</text>
<!-- 雨 -->
<g>
<line x1="230" y1="220" x2="210" y2="270" stroke="#6ec8fc" stroke-width="4"/>
<ellipse cx="210" cy="277" rx="8" ry="9" fill="#6ec8fc"/>
<line x1="260" y1="230" x2="245" y2="285" stroke="#27a0ec" stroke-width="4"/>
<ellipse cx="245" cy="292" rx="7" ry="9" fill="#27a0ec"/>
<line x1="295" y1="210" x2="300" y2="270" stroke="#73beea" stroke-width="4"/>
<ellipse cx="300" cy="278" rx="8" ry="10" fill="#73beea"/>
<line x1="350" y1="217" x2="355" y2="273" stroke="#b4c8dd" stroke-width="3"/>
<ellipse cx="355" cy="280" rx="6" ry="8" fill="#b4c8dd"/>
<line x1="370" y1="205" x2="385" y2="270" stroke="#41b8fe" stroke-width="4"/>
<ellipse cx="385" cy="278" rx="8" ry="9" fill="#41b8fe"/>
</g>
<!-- 雨 ラベル -->
<text x="300" y="310" text-anchor="middle" font-size="18" fill="#35789a">不確実性・リスク（雨）</text>
<!-- 傘 -->
<path d="M150 318 Q300 210 450 318 Q353 330 300 330 Q247 330 150 318 Z" fill="#ffea38" stroke="#bbb337" stroke-width="4"/>
<ellipse cx="300" cy="330" rx="7" ry="7" fill="#bbb337"/>
<rect x="293" y="330" width="14" height="55" fill="#7a6e52" rx="4"/>
<path d="M300 385 Q308 410 320 410 Q340 410 340 395" stroke="#7a6e52" stroke-width="7" fill="none"/>
<!-- 傘ラベル -->
<text x="300" y="350" text-anchor="middle" font-size="22" font-weight="bold" fill="#997700">傘 (Umbrella)</text>
<text x="300" y="370" text-anchor="middle" font-size="15" fill="#595019">対応策・備え</text>
<!-- 地面 -->
<rect x="80" y="430" width="440" height="22" fill="#b6c9d8"/>
<text x="300" y="455" text-anchor="middle" font-size="17" fill="#486488">組織・個人</text>
<!-- 各レイヤー補助矢印 -->
<g stroke="#777" stroke-width="2" marker-end="url(#arrow)">
<line x1="215" y1="245" x2="215" y2="315"/>
<line x1="385" y1="245" x2="385" y2="315"/>
<line x1="300" y1="330" x2="300" y2="430"/>
</g>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="8" refX="4" refY="4"
orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L8,4 L0,8 Z" fill="#777"/>
</marker>
</defs>
<!-- タイトル -->
<text x="300" y="60" text-anchor="middle" font-size="27" font-weight="bold" fill="#3166b3">雲雨傘のフレームワーク 図解</text>
<!-- 説明 -->
<rect x="90" y="485" width="420" height="110" rx="14" fill="#edf4fd" stroke="#9db3d8" stroke-width="1.5"/>
<text x="300" y="510" text-anchor="middle" font-size="15" fill="#295583">このフレームワークは、<tspan x="300" dy="22">「雲＝外部要因、雨＝リスク、傘＝対応策」とし、</tspan>
<tspan x="300" dy="22">外部環境の変化や不確実性（雲、雨）に対し、</tspan>
<tspan x="300" dy="22">どのように備え・守る（傘）かを可視化します。</tspan>
</text>
</svg>
</body>
</html>
```
Drag to resize
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 600" width="400" height="600">
<!-- Background -->
<defs>
<linearGradient id="cloudGradient" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a0d2eb" />
<stop offset="100%" stop-color="#d0e7f9" />
</linearGradient>
<filter id="shadow" x="-10" y="-10" width="200" height="200">
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/>
</filter>
</defs>
<!-- Sky Background -->
<rect width="100%" height="100%" fill="url(#cloudGradient)"/>
<!-- Rain Drops -->
<g stroke="#66b2ff" stroke-width="2" opacity="0.6">
<line x1="50" y1="50" x2="60" y2="90" />
<line x1="80" y1="60" x2="90" y2="110" />
<line x1="110" y1="40" x2="120" y2="80" />
</g>
<!-- Umbrella Canopy -->
<path d="M 100,300
Q 200,100 300,300
Q 250,400 200,400
Q 150,400 100,300 Z"
fill="#e6e6e6" stroke="#666" stroke-width="2" filter="url(#shadow)"/>
<!-- Ribs Structure -->
<g stroke="#888" stroke-width="2">
<line x1="200" y1="300" x2="100" y2="300" />
<line x1="200" y1="300" x2="150" y2="370" />
<line x1="200" y1="300" x2="250" y2="370" />
<line x1="200" y1="300" x2="200" y2="400" />
</g>
<!-- Shaft/Handle -->
<rect x="195" y="400" width="10" height="80" fill="#ccc" stroke="#888" stroke-width="1"/>
<rect x="190" y="480" width="20" height="20" fill="#eee"/>
<!-- Framework Labels -->
<g font-family="sans-serif" font-size="14" fill="#333">
<!-- Canopy Layer -->
<text x="220" y="270">雲感知層</text>
<circle cx="205" cy="280" r="3" fill="red"/>
<line x1="200" y1="280" x2="210" y2="280" stroke="red" stroke-width="1"/>
<!-- Sensor Module -->
<text x="180" y="360">雨検知センサー</text>
<line x1="200" y1="350" x2="170" y2="360" stroke="red" stroke-width="1"/>
<!-- Water Drainage -->
<text x="230" y="390">水滴防止コーティング</text>
<line x1="230" y1="380" x2="220" y2="370" stroke="red" stroke-width="1"/>
<!-- Smart Handle -->
<text x="160" y="515">スマートグリップ</text>
<line x1="200" y1="490" x2="170" y2="505" stroke="red" stroke-width="1"/>
</g>
<!-- Title -->
<text x="100" y="30" font-size="20" font-weight="bold" fill="#333">雲雨傘 フレームワーク</text>
</svg>
```
This SVG visualization demonstrates the technical framework of a "Cloud and Rain Umbrella" through:
1. **Canopy Layer**: Represents advanced cloud sensing technology
2. **Sensor Module**: Rain detection system in the central rib
3. **Water Drainage System**: Special water-repellent coating
4. **Smart Handle**: Intelligent grip with control features
5. **Structural Components**: Reinforced ribs and support system
6. **Environmental Interaction**: Cloud and rain background elements
The design uses gradient sky background, shadow filters, and labeled technical components with red connectors to explain the system's architecture in Japanese labeling.Drag to resize
以下は、日本の「雲雨傘（くもあまがさ）」フレームワークを説明するSVGコードです。このフレームワークは「事実（雲）→解釈（雨）→行動（傘）」の3段階で構成される意思決定プロセスを視覚化しています。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雲雨傘フレームワーク</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f5;
}
.container {
width: 100%;
max-width: 800px;
}
text {
font-size: 16px;
text-anchor: middle;
}
.title {
font-size: 24px;
font-weight: bold;
fill: #333;
}
</style>
</head>
<body>
<div class="container">
<svg width="100%" height="500" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
<!-- 背景 -->
<rect width="100%" height="100%" fill="#f9f9f9" rx="10" ry="10"/>
<!-- タイトル -->
<text x="400" y="50" class="title">雲雨傘フレームワーク</text>
<!-- 雲の図形 -->
<path d="M150,150 Q200,100 250,150 Q300,80 350,150 Q400,120 450,150 Q500,100 550,150 Q600,130 630,150 Q620,200 630,230 Q600,210 550,220 Q500,230 450,220 Q400,240 350,220 Q300,230 250,220 Q200,210 170,230 Q180,200 150,150 Z" fill="#e6f2ff" stroke="#99c2ff" stroke-width="2"/>
<text x="400" y="180" font-weight="bold" fill="#0066cc">雲（事実）</text>
<text x="400" y="210" font-size="14" fill="#333">観察した事実やデータ</text>
<text x="150" y="260" font-size="12" fill="#333">・売上が前年比10%減少</text>
<text x="150" y="280" font-size="12" fill="#333">・競合A社は20%増加</text>
<!-- 雨の矢印 -->
<line x1="400" y1="250" x2="400" y2="300" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
<polygon points="400,310 390,300 410,300" fill="#666"/>
<!-- 雨の図形 -->
<path d="M300,320 L500,320 L500,370 L300,370 Z" fill="#f0f0f0" stroke="#999" stroke-width="2"/>
<text x="400" y="340" font-weight="bold" fill="#666">雨（解釈）</text>
<text x="400" y="360" font-size="14" fill="#333">事実から導き出される解釈</text>
<text x="350" y="390" font-size="12" fill="#333">自社製品の競争力低下が原因</text>
<!-- 傘の矢印 -->
<line x1="400" y1="400" x2="400" y2="430" stroke="#666" stroke-width="2" stroke-dasharray="5,5"/>
<polygon points="400,440 390,430 410,430" fill="#666"/>
<!-- 傘の図形 -->
<path d="M350,450 L450,450 L400,480 Z" fill="#ffe6e6" stroke="#ff9999" stroke-width="2"/>
<path d="M370,450 L400,430 L430,450" fill="#ffe6e6" stroke="#ff9999" stroke-width="2"/>
<text x="400" y="500" font-weight="bold" fill="#cc0000">傘（行動）</text>
<text x="400" y="520" font-size="14" fill="#333">解釈に基づく具体的な行動</text>
<text x="380" y="550" font-size="12" fill="#666">製品リニューアルプロジェクト開始</text>
</svg>
</div>
</body>
</html>
```
このSVGでは:
1. 雲（くも） - 観測された事実やデータを表します（例: 売上減少）
2. 雨（あめ） - 事実から導き出される解釈や分析を示します
3. 傘（かさ） - 解釈に基づいて取るべき行動を表現します
フレームワークの流れが視覚的に理解できるように、上から下への矢印で各要素を接続しています。色分けも施し、雲は青系、雨はグレー系、傘は赤系で表現しました。Drag to resize
```html <svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> <!-- 背景 --> <rect x="0" y="0" width="400" height="300" fill="#f0f0f0" rx="10" /> <!-- 雲 --> <ellipse cx="150" cy="100" rx="70" ry="30" fill="#ffffff" /> <ellipse cx="200" cy="80" rx="50" ry="20" fill="#ffffff" /> <ellipse cx="220" cy="120" rx="60" ry="25" fill="#ffffff" /> <!-- 雨 --> <line x1="180" y1="150" x2="180" y2="170" stroke="#0000ff" stroke-width="2" /> <line x1="200" y1="160" x2="200" y2="180" stroke="#0000ff" stroke-width="2" /> <line x1="220" y1="170" x2="220" y2="190" stroke="#0000ff" stroke-width="2" /> <!-- 傘 --> <path d="M 250 200 A 50 50 0 0 0 300 250 L 275 250 Z" fill="#ff0000" /> <line x1="275" y1="250" x2="275" y2="280" stroke="#000000" stroke-width="4" /> <!-- 注釈 --> <text x="20" y="280" font-size="16">雲雨傘のフレームワーク：香港の民主化運動のシンボル</text> </svg> ```
Drag to resize
# 雲雨傘フレームワークのSVG図解
以下に「雲雨傘」フレームワークを説明するSVGを作成しました。このフレームワークは状況分析と意思決定のプロセスを視覚化したものです。
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雲雨傘フレームワーク</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
color: #2c3e50;
}
.container {
max-width: 900px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 30px;
text-align: center;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
font-size: 2.2rem;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.subtitle {
color: #7f8c8d;
font-size: 1.1rem;
margin-bottom: 30px;
}
.framework-explanation {
background: #f8f9fa;
border-radius: 12px;
padding: 20px;
margin: 25px 0;
text-align: left;
border-left: 4px solid #3498db;
}
.framework-explanation h3 {
color: #2980b9;
margin-top: 0;
}
.framework-explanation ul {
padding-left: 20px;
}
.framework-explanation li {
margin-bottom: 10px;
line-height: 1.5;
}
.legend {
display: flex;
justify-content: center;
gap: 30px;
margin: 20px 0;
flex-wrap: wrap;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 0.9rem;
}
.legend-color {
width: 20px;
height: 20px;
border-radius: 4px;
}
.cloud-color { background: #3498db; }
.rain-color { background: #2980b9; }
.umbrella-color { background: #1abc9c; }
footer {
margin-top: 30px;
color: #7f8c8d;
font-size: 0.9rem;
}
</style>
</head>
<body>
<div class="container">
<h1>雲雨傘フレームワーク</h1>
<div class="subtitle">状況分析と意思決定のための思考フレームワーク</div>
<svg width="100%" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- 背景の雲 -->
<path d="M50,80 Q100,50 150,80 T250,80 T350,70 T450,90 T550,60 T650,80 T750,70" stroke="#ecf0f1" stroke-width="8" fill="none" stroke-dasharray="10,5"/>
<!-- 雲 (状況) -->
<g transform="translate(200, 100)">
<path d="M0,0 Q-30,-20 -10,-30 Q-40,-50 0,-40 Q40,-50 10,-30 Q30,-20 0,0 Z" fill="#3498db" opacity="0.8"/>
<path d="M-20,-10 Q-40,0 -20,10 Q0,20 20,10 Q40,0 20,-10 Q0,-20 -20,-10 Z" fill="#3498db" opacity="0.8"/>
<text x="0" y="40" text-anchor="middle" font-size="20" fill="#2c3e50" font-weight="bold">雲</text>
<text x="0" y="65" text-anchor="middle" font-size="16" fill="#3498db">状況・事実</text>
</g>
<!-- 雨 (推論) -->
<g transform="translate(400, 150)">
<!-- 雨粒 -->
<path d="M-20,-30 L-20,-10" stroke="#2980b9" stroke-width="2"/>
<path d="M0,-30 L0,-10" stroke="#2980b9" stroke-width="2"/>
<path d="M20,-30 L20,-10" stroke="#2980b9" stroke-width="2"/>
<path d="M-10,-40 L-10,-20" stroke="#2980b9" stroke-width="2"/>
<path d="M10,-40 L10,-20" stroke="#2980b9" stroke-width="2"/>
<!-- 雨滴 -->
<path d="M-20,-10 Q-25,-5 -20,0 Q-15,5 -20,10" fill="#2980b9" opacity="0.7"/>
<path d="M0,-10 Q-5,-5 0,0 Q5,5 0,10" fill="#2980b9" opacity="0.7"/>
<path d="M20,-10 Q15,-5 20,0 Q25,5 20,10" fill="#2980b9" opacity="0.7"/>
<text x="0" y="50" text-anchor="middle" font-size="20" fill="#2c3e50" font-weight="bold">雨</text>
<text x="0" y="75" text-anchor="middle" font-size="16" fill="#2980b9">推論・解釈</text>
</g>
<!-- 傘 (行動) -->
<g transform="translate(600, 100)">
<!-- 傘の部分 -->
<path d="M-40,0 Q0,-50 40,0" fill="#1abc9c" opacity="0.8"/>
<!-- 傘の柄 -->
<rect x="-3" y="0" width="6" height="60" fill="#7f8c8d"/>
<!-- 傘の先端 -->
<circle cx="0" cy="60" r="5" fill="#e74c3c"/>
<text x="0" y="100" text-anchor="middle" font-size="20" fill="#2c33d0" font-weight="bold">傘</text>
<text x="0" y="125" text-anchor="middle" font-size="16" fill="#1abc9c">行動・意思決定</text>
</g>
<!-- 矢印と説明 -->
<path d="M280,120 L360,150" stroke="#7f8c8d" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
<path d="M440,150 L520,120" stroke="#7f8c8d" stroke-width="3" stroke-dasharray="5,5" marker-end="url(#arrowhead)"/>
<text x="320" y="130" text-anchor="middle" font-size="16" fill="#7f8c8d">観察に基づく</text>
<text x="320" y="150" text-anchor="middle" font-size="16" fill="#7f8c8d">解釈・推論</text>
<text x="480" y="130" text-anchor="middle" font-size="16" fill="#7f8c8d">推論に基づく</text>
<text x="480" y="150" text-anchor="middle" font-size="16" fill="#7f8c8d">行動決定</text>
<!-- 矢印ヘッドの定義 -->
<defs>
<marker id="arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto">
<polygon points="0 0, 10 3.5, 0 7" fill="#7f8c8d"/>
</marker>
</defs>
</svg>
<div class="legend">
<div class="legend-item">
<div class="legend-color cloud-color"></div>
<span>雲: 観察可能な事実・状況</span>
</div>
<div class="legend-item">
<div class="legend-color rain-color"></div>
<span>雨: 事実から導かれる推論・解釈</span>
</div>
<div class="legend-item">
<div class="legend-color umbrella-color"></div>
<span>傘: 推論に基づく行動・意思決定</span>
</div>
</div>
<div class="framework-explanation">
<h3>雲雨傘フレームワークとは？</h3>
<p>このフレームワークは、意思決定プロセスを3つのステップに分けて考える手法です。</p>
<ul>
<li><strong>雲（事実）</strong>：客観的に観察できる事実やデータ</li>
<li><strong>雨（解釈）</strong>：観察した事実から導き出される解釈や推論</li>
<li><strong>傘（行動）</strong>：解釈に基づいて取るべき行動や意思決定</li>
</ul>
<p>このフレームワークを使うことで、事実と解釈を明確に分離し、より客観的な意思決定が可能になります。</p>
</div>
<footer>
<p>雲雨傘フレームワークは、事実に基づいた意思決定プロセスを可視化するための思考ツールです</p>
</footer>
</div>
</body>
</html>
```
## フレームワークの説明
このSVG図解は「雲雨傘」フレームワークを以下のように表現しています：
1. **雲（状況・事実）** - 青い雲のイラストで表現
- 客観的に観察できる事実や状況を表します
- 例：空に暗い雲が広がっている
2. **雨（推論・解釈）** - 青い雨粒のイラストで表現
- 観察した事実から導かれる解釈や推論を表します
- 例：この雲は雨を降らせる可能性が高い
3. **傘（行動・意思決定）** - 緑の傘のイラストで表現
- 推論に基づいて取るべき行動や意思決定を表します
- 例：傘を持って出かけることに決める
矢印は「事実→解釈→行動」という思考の流れを示しています。このフレームワークを使うことで、事実と解釈を明確に分離し、より客観的な意思決定が可能になります。Drag to resize