2章 AIでデザイン情報を"丸ごと"スキャン

INDEX

前の章に戻る次の章に進む

2章 AIでデザイン情報を"丸ごと"スキャン

この章の目安学習時間：2時間

この章で到達できるゴール：

SVGとJPG/PNGの特性を理解し、デザインカンプの形式に応じて適切な情報抽出方法を選択できる。
SVGファイルの中身を読み解き、テキストがアウトライン化されているかなどの状態を判断できる。
テキスト情報が保持されたSVGからは、AIで正確なスタイル情報を抽出し、それ以外の場合はJPG/PNGと同様のアプローチで賢く推測できる。

【2-1】はじめに：デザインカンプの形式を確認しよう

目安の学習時間：10分

SVG vs JPG/PNG：あなたに渡されるデータはどっち？

Web制作の実務では、クライアントやデザイナーから様々な形式でデザインデータが提供されます。
特に代表的なのが、SVG（ベクター形式）とJPG/PNG（ラスター形式）です。
この2つは根本的に構造が異なるため、AIで情報を抽出する際のアプローチも変わってきます。

まずは、それぞれの特徴を理解しましょう。

項目	SVG (ベクター形式)	JPG/PNG (ラスター形式)
データの正体	点や線の座標、色などを数値で記録したコード	ピクセルという色のついた点の集合体
特徴	拡大・縮小しても画質が劣化しない	拡大すると画像が荒くなることがある
主な用途	ロゴ、アイコンなど、シャープさが求められる図形	写真、複雑なイラスト、Webサイト全体のデザインカンプ
情報抽出	コードを「解析」して正確な値を取得可能	画像を見て「推測」する必要がある

実務では、「ロゴはSVG、サイト全体のデザインカンプはJPGで」というように、複数の形式が混在して提供されることも少なくありません。

形式と"中身"によって戦略を変える！

このような特徴の違いから、AIに情報を抽出させる際の戦略を立てる必要があります。

理想的なSVGの場合：
AIの頭脳（コード解析能力）を使い、書かれているコードを解析させ、「正確な答え」を引き出します。
JPG/PNGや"訳あり"SVGの場合：
AIの眼（画像認識能力）を使い、描かれている内容を認識させ、「賢い推測」を引き出します。

この章では、この2つのアプローチを両方学び、どのような状況にも対応できるスキルを身につけていきます。

【2-2】ケース1：SVGから"正確な"情報を抜き出す方法（と、その限界）

目安の学習時間：40分

SVGファイルの中身を覗いてみよう

SVGファイルは、その実体は画像データではなく、XML（eXtensible Markup Language）というマークアップ言語で記述されたテキストファイルです。
つまり、HTMLのようにタグで構造が定義されています。
そのため、テキストエディタ（Visual Studio Codeなど）でファイルを開くことで、その中身を直接確認できます。

例えば以下のSVGファイル（クリップボード）をテキストエディタで読み込むと

使用素材【SVG】

以下のようなXMLコードが表示されます。

<!--?xml version="1.0" encoding="utf-8"?-->
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://ww
w.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" 
style="width: 256px; height: 256px; opacity: 1;" xml:space="preserve">
<style type="text/css">

        .st0{fill:#4B4B4B;}

</style>
<g>
        <path class="st0" d="M449.891,87.953c-3.766-8.906-10.031-16.438-17.922-21.781c-7
.891-5.328-17.5-8.469-27.719-8.469h-42.656
                v-7.359h-61.828c0.281-2,0.438-4.063,0.438-6.141C300.203,19.828,280.375,0,256,
0s-44.203,19.828-44.203,44.203
                c0,2.078,0.156,4.141,0.438,6.141h-61.828v7.359H107.75c-6.813,0-13.359,1.391-1
9.281,3.906
                c-8.906,3.766-16.453,10.031-21.797,17.922c-5.328,7.906-8.469,17.5-8.469,27.719v3
55.219c0,6.781,1.391,13.344,3.906,19.281
                c3.766,8.906,10.031,16.438,17.922,21.781c7.906,5.344,17.5,8.469,27.719,8.469h29
6.5c6.797,0,13.359-1.375,19.281-3.906
                c8.922-3.75,16.453-10.031,21.797-17.922c5.328-7.891,8.469-17.5,8.469-27.703V10
7.25
                C453.797,100.438,452.422,93.891,449.891,87.953z M256,27.797c9.047,0,16.406,7.35
9,16.406,16.406c0,2.172-0.438,4.234-1.203,6.141
                h-30.391c-0.781-1.906-1.219-3.969-1.219-6.141C239.594,35.156,246.969,27.797,25
6,27.797z M424.328,462.469
                c0,2.813-0.563,5.406-1.578,7.797c-1.5,3.578-4.063,6.672-7.281,8.859c-3.219,2.156
-7,3.406-11.219,3.406h-296.5
                c-2.813,0-5.422-0.563-7.813-1.563c-3.594-1.516-6.672-4.094-8.844-7.297c-2.156-3
.219-3.406-7-3.422-11.203V107.25
                c0-2.813,0.563-5.422,1.578-7.813c1.516-3.594,4.078-6.688,7.281-8.844c3.219-2.15
6,7-3.406,11.219-3.422h42.656v6.141
                c0,11.531,9.344,20.875,20.891,20.875h169.422c11.531,0,20.875-9.344,20.875-20.8
75v-6.141h42.656c2.813,0,5.422,0.563,7.813,1.578
                c3.578,1.5,6.672,4.063,8.844,7.281s3.422,7,3.422,11.219V462.469z" style="fill: rgb(7
5, 75, 75);"></path>
        <rect x="156.141" y="170.672" class="st0" width="31.625" height="31.625" style="fill: rg
b(75, 75, 75);"></rect>
        <rect x="225.516" y="170.672" class="st0" width="130.359" height="31.625" style="fill: rg
b(75, 75, 75);"></rect>
        <rect x="156.141" y="264.125" class="st0" width="31.625" height="31.625" style="fill: rg
b(75, 75, 75);"></rect>
        <rect x="225.516" y="264.125" class="st0" width="130.359" height="31.625" style="fill: rg
b(75, 75, 75);"></rect>
        <rect x="156.141" y="357.594" class="st0" width="31.625" height="31.625" style="fill: rgb
(75, 75, 75);"></rect>
        <rect x="225.516" y="357.594" class="st0" width="130.359" height="31.625" style="fill: rg
b(75, 75, 75);"></rect>
</g>
</svg>

XMLコード

コードの中には、図形の形を定義する<path>タグ、色を指定するfill属性、テキストを記述する<text>タグなどが含まれています。この構造をAIに読み解かせることで、正確な情報を引き出します。

VS CodeでSVGのコードを表示する手順

VS Codeの拡張機能により、SVGが自動で画像として表示されることがあります。その場合、以下の手順でコード表示に切り替えられます。

画面上部のファイル名が書かれたタブを右クリックします。
表示されたメニューから「Reopen Editor With...」を選択します。
次の選択肢で「Text Editor」を選びます。

注意！SVGでも情報が取れない"訳あり"ケース

SVGはコードベースであるため正確な情報を得やすい形式ですが、万能ではありません。
実務では、SVGファイルからでも直接情報を読み取れない「訳あり」ケースが存在します。

注意

SVGファイルを受け取ったからといって、必ずしも全ての情報がコードから読み取れるとは限りません。以下の2つのケースには特に注意が必要です。

ケースA：テキストが「アウトライン化」されている
ケースB：SVG内に「画像が埋め込まれている」

ケースA：テキストが「アウトライン化」されている
アウトライン化とは、フォント情報を持つ「文字」を、形だけのデータである「図形（パス）」に変換する処理です。
これにより、どの環境でファイルを開いても同じ見た目を保てますが、元々のフォント名やサイズといったテキスト情報は失われます。

ケースB：SVG内に「画像が埋め込まれている」
SVGファイルの中に、`<image>`タグを使ってJPGやPNGなどの画像（ラスター画像）を埋め込むこともできます。この場合、SVGは画像の「額縁」の役割しか果たしておらず、SVGコード自体には、埋め込まれた画像の色やフォントの情報は含まれていません。
これらの"訳あり"SVGの対応策
これらのケースでは、SVGであってもコード解析は有効ではありません。
そのため、次のセクションで学ぶJPG/PNGと同じアプローチ、つまりAIの画像認識能力を使って「推測」する方法で攻略します。

AIに"理想的な"SVGコードを解析させる方法

テキスト情報が保持されている、いわば「理想的な」SVGファイルであれば、AIのコード解析能力を最大限に活用できます。
最も確実な方法は、SVGファイルのコードを全てコピーし、AIのプロンプトに貼り付けて解析を依頼することです。

応用事項：長いコードを分割して送信する方法

万が一、SVGコードがAIの入力文字数制限を超えるほど長い場合の代替案です。

まず、「これから非常に長いSVGコードを複数に分けて送信します。全てのパーツを送り終えたら合図するので、それから全体を解析してください。」のように、AIに事前通告します。
コードを複数に分割し、「SVG Part 1/3」のようなヘッダーを付けて、順番に送信します。
最後のパーツを送り終えたら、「全てのパーツを送信しました。解析を開始してください。」と指示します。

この方法は手間がかかりますが、非常に複雑なSVGファイルを扱う際に役立つことがあります。

この方法を使えば、テキスト情報が残っているSVGからは、1pxの狂いもない正確な情報を手に入れることができます。

入力例

このSVGファイルを解析して、使用されている色とフォントサイズを教えてください。


<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g id="BACKGROUND">
        <rect x="0" style="fill:#FFFFFF;" width="499.999" height="500"/>
</g>
<g id="OBJECTS">
        <g>
                <g>
                        <polygon style="fill:none;" points="274.376,151.378 274.377,151.378 274.376,151.378                         "/>
                        <polygon style="fill:#434A5B;" points="274.376,151.378 261.43,133.221 232.48,173.629 190.585,115.149 118.19,216.202 
                                144.144,216.202 153.229,216.202 148.686,209.861 148.686,209.861 190.585,151.378 219.503,191.743 201.98,216.202 
                                227.935,216.202 232.481,209.857 237.026,216.202 262.98,216.202 245.458,191.743                         "/>
                </g>
                <polygon style="fill:#2C2E33;" points="232.48,173.629 245.458,191.743 274.376,151.378 261.43,133.221                 "/>
                <g>
                        <polygon style="fill:#FF2424;" points="381.81,216.202 355.855,216.202 346.771,216.202 351.313,222.542 309.415,281.026 
                                280.497,240.66 298.019,216.202 272.065,216.202 267.519,222.546 262.974,216.202 237.02,216.202 254.542,240.66 
                                225.623,281.026 148.706,173.606 135.714,191.753 225.623,317.254 267.52,258.774 309.415,317.254 364.291,240.656 
                                364.294,240.66                         "/>
                        <polygon style="fill:#991A5A;" points="267.519,258.775 254.542,240.66 225.623,281.026 238.57,299.182                         "/>
                </g>
                <polygon style="fill:#2C2E33;" points="219.503,191.743 201.98,216.202 237.02,216.202                 "/>
                <polygon style="fill:#991A5A;" points="262.974,216.202 280.497,240.66 298.019,216.202                 "/>
                <polygon style="fill:#FF2424;" points="227.934,216.202 201.98,216.202 249.999,283.229 262.977,265.115                 "/>
                <polygon style="fill:#434A5B;" points="272.065,216.202 298.018,216.202 250,149.175 237.02,167.285                 "/>
                <polygon style="fill:#434A5B;" points="274.376,151.378 274.377,151.378 280.497,159.96 274.377,151.378 350.046,260.539 
                        364.294,240.66 274.376,115.149 261.43,133.221 274.376,151.378                 "/>
        </g>
</g>
<g id="TEXTS">
        <g>
                <g>
                        <text transform="matrix(1 0 0 1 135.0597 361.6685)"><tspan x="0" y="0" style="fill:#3B4051; font-family:'Outfit-ExtraBold'; font-size:41.7059px;">brand</tspan><tspan x="125.783" y="0" style="fill:#FF2424; font-family:'Outfit-ExtraBold'; font-size:41.7059px;">logo</tspan></text>
                        
                                <text transform="matrix(1 0 0 1 174.0441 378.9282)" style="fill:#2C2E33; font-family:'Lato-Regular'; font-size:12.9752px; letter-spacing:2;">tagline goes here</text>
                </g>
        </g>
</g>
</svg>

入力例

出力例

■ 使用色（fill）
#FFFFFF：背景
#434A5B：図形
#2C2E33：図形・タグライン文字
#FF2424：図形・「logo」文字
#991A5A：図形
#3B4051：文字「brand」
none：線なし

■ フォントとサイズ
「brand」：41.71px、Outfit-ExtraBold、色 #3B4051
「logo」：41.71px、Outfit-ExtraBold、色 #FF2424
「tagline goes here」：12.98px、Lato-Regular、色 #2C2E33、字間2px

出力例

練習問題：SVGコードを解析して正確な情報を抽出しよう

問題

提供されたロゴファイル `logo_ac.svg` があります。
このSVGファイルはアウトライン化されておらず、テキスト情報がコード内にそのまま保持されています。

このSVGのコードをAIを使ってコード解析を行い、以下の情報をすべて正確に抽出してください。

オブジェクト（図形）で使われている全ての色
テキストで使われている全ての色
各テキスト要素のフォントファミリー (font-family) とフォントサイズ (font-size)

素材

https://jp.freepik.com/free-vector/flat-design-ac-logo-design_28542127.htm#fromView=keyword&page=1&position=2&uuid=3dbe7c2a-a14b-4904-94f0-6ec2c51ef216&query=%E3%83%AD%E3%82%B4

url先のロゴをSVG形式でダウンロードして使用しましょう。

解答・解説

このSVGはテキスト情報が保持されているため、「コード解析」が最適な方法です。
SVGのコードをすべてコピーし、AIに貼り付けて解析を依頼します。

プロンプト例：

以下のSVGコードを解析し、図形とテキストで使われている全ての色（fill）、
および各テキスト要素のフォントファミリーとフォントサイズをリストアップしてください。

（ここにコピーしたSVGコードを貼り付ける）

プロンプト例

抽出結果
以下が、AIがコードから抽出した正確な情報です。

使用されている色（HEXコード）

オブジェクト:
- #FF2424 (赤)
- #991A5A (紫)
- #434A5B (濃い青灰色)
テキスト:
- #3B4051 (name)
- #FF2424 (logo)
- #2C2E33 (tagline goes here)

フォント情報

"name logo" の部分:
- フォント名 (font-family): Outfit-ExtraBold
- サイズ (font-size): 41.7059px
"tagline goes here" の部分:
- フォント名 (font-family): Lato-Regular
- サイズ (font-size): 12.9752px

テキスト情報

AIアシスト実装の準備 2-1

【2-3】ケース2：JPG/PNG（と"訳あり"SVG）から"賢く"情報を推測する方法

目安の学習時間：30分

AIの「眼」で画像をスキャンする基本

次に、JPG/PNGのようなラスター画像や、先ほど学んだ「訳あり」SVGから情報を抽出する方法です。
こちらでは、AIの画像認識能力を活用します。
このアプローチは、コードを読むのではなく、人間が絵を見るのと同じように、画像に何が描かれているかをAIに「見せて」判断させます。
サイト全体のデザインカンプ画像や、特定のコンポーネントだけを切り取ったスクリーンショットをAIにアップロードして、対話を開始します。

入力例

このWebサイト画像で使われている主要な色とアクセントカラーを推測し、
それぞれのHEXコードを教えてください。

入力例

出力例

推測される主要な色とアクセントカラー、およびそれぞれのHEXコードは以下の通りです。

主要な色:

背景色（白）: #FFFFFF

ヘッダー/フッター/サイドバーの背景色（暗い赤）: #B12D2D (近似値)

アクセントカラー:

オレンジ色（「チュートリアル」や「環境セットアップ」の見出し背景など）: #F7931E (近似値)

テキスト色（黒）: #333333 (近似値)

サイドバーのアクティブな項目やアイコンの赤色: #E53935 (近似値)

これらのHEXコードは画像からの視覚的な推測であり、
正確なコードはWebサイトのCSSなどから取得する必要があります。

出力例

色・フォント・余白を"推測"させるプロンプト術

画像認識は非常に強力ですが、AIが提供する情報はあくまで「推測」であるという点を理解しておくことが重要です。
ミリ単位の正確さではなく、実装の指針となるおおよその値を得ることを目的とします。

以下に、部位ごとのプロンプト例を示します。

色を抽出したい場合：
このWebサイト画像で使われている主要な色とアクセントカラーを推測し、それぞれのHEXコードを教えてください。
フォント情報を知りたい場合：
この画像の見出しと本文のテキストについて、フォントサイズとフォントの太さ（font-weight）を推測してください。
余白やレイアウトを知りたい場合：
このカードコンポーネントの内部の余白(padding)と、角の丸み(border-radius)の値をピクセル単位で推測してください。

重要：推測値の扱い方

AIが提示した値は、絶対的な正解ではありません。
例えば、AIが余白を「23px」と回答した場合、デザインの意図はキリの良い「24px」である可能性が高いです。
このように、AIの回答を鵜呑みにせず、デザインの原則（8の倍数ルールなど）に照らし合わせて人間が最終判断を下すことが、品質を高める上で非常に重要です。この「判断力」こそが、AI時代に求められるスキルです。

【2-4】章末課題 - AIの「眼」でデザイン意図を読み解こう！

目安の学習時間： 15分

問題

あなたはWeb制作の途中、デザイナーから「急ぎなので、まずはこの画像のデザインでボタンを実装しておいてください！」と、以下の画像ファイルだけを受け取りました。

このボタンを実装するために、まずはAIの画像認識能力を使って必要なCSSの値を推測し、最終的なコードを完成させましょう。

使用素材（button_design.png）

解答手順

STEP 1: ボタンの画像を用意する
上の青い「詳しくはこちら」ボタンのスクリーンショットを撮り、`button_design.png`などのファイル名でPCに保存します。

STEP 2: AIに画像をアップロードしてCSSの値を推測させる
保存したボタンの画像をAIにアップロードし、実装に必要な値を包括的に質問します。

プロンプト例：
このボタンの画像から、以下のCSSプロパティの値を推測してください。

背景色 (background-color)
文字色 (color)
角の丸み (border-radius)
内側の余白 (padding)
フォントサイズ (font-size)

STEP 3: AIの回答を元に最終的なCSSを記述する
AIはあくまで「推測」した値を返します。（例：`padding`が「11px 23px」など）
その回答を元に、「キリの良い数字にしよう」「デザインの原則（4や8の倍数）に合わせよう」といったあなた自身の判断を加えて、最終的なCSSコードを完成させてください。

STEP 4: 「判断」の理由を説明する
なぜそのCSSの値にしたのか、あなたの判断の根拠を記述してください。
この「なぜそうしたか」を言語化する癖をつけることが、スキルアップの鍵となります。

解答例

AIからの回答（推測値の例）

背景色: #007BFF
文字色: #FFFFFF
角の丸み: 7px
内側の余白: 11px 23px
フォントサイズ: 15.5px

あなたの最終判断とCSSコード

.button {
  /* 色はAIの推測が正確そうなのでそのまま採用 */
  background-color: #007BFF;
  color: #FFFFFF;

  /* AIの推測値「7px」を、キリの良い「8px」に修正 */
  border-radius: 8px;

  /* AIの推測値「11px 23px」を、デザイン原則（4の倍数）を意識して「12px 24px」に修正 */
  padding: 12px 24px;

  /* AIの推測値「15.5px」を、標準的な「16px」に修正 */
  font-size: 16px;

  /* その他のスタイル */
  font-weight: bold;
  text-decoration: none;
  display: inline-block;
}

CSS

判断理由の記述例
AIが推測した値は、角の丸みが7px、余白が11px 23pxなど、少し不規則な数値でした。
Webデザインでは4や8の倍数で数値を設計することが多いため、デザイナーの意図は最も近いキリの良い数値だと判断しました。
そのため、角の丸みは8px、余白は12px 24px、フォントサイズは16pxにそれぞれ修正しました。

お疲れ様でした！
「2章 AIでデザイン情報を”丸ごと”スキャン」の解説を終わります。

前の章に戻る次の章に進む