ChatGPT・OpenAI / ピクセルアート
使う場所から、描き方を選ぶ。
読了時間の目安
- しっかり読む
- 約37分
- 要点を読む
- 約13分
文字量と図表からの目安です。操作・実践の時間は含みません。
ChatGPTでピクセルアートを作るなら、画像ファイルが必要な場合は画像生成、SVG・CSSを掲載できるWebで形や動きを調整する場合はコード描画を選ぶのが、僕の判断基準です。
どちらも出力後に確認し、ドット数や色数に指定がある素材は、その規格に合うか確かめます。
この使い分けは、画像生成の機能とSVG・CSSの仕様を踏まえた筆者の判断で、適性の推測を含みます。ChatGPT Images公式ヘルプ / W3C：SVGの座標と表示領域 / W3C：CSSアニメーションと停止
僕の方法は、題材・マス目・配色・表示サイズ・動きをまとめて指定することです。用途別判断表と、同じ「港の小船」を題材にした依頼文・SVGの単体コードを使い、制作から確認・修正までの進め方を紹介します。
こんな人におすすめ
- ブログや資料で使うピクセルアートを作りたい人
- 画像生成と、SVG・CSSのコードを受け取る方法の違いを知りたい人
- 輪郭のぼやけ、表示の欠け、動きの止め方まで確認したい人
公式情報の最終確認：
静止表示（端末の設定）
画像生成とコード描画、どちらを選ぶ？
ChatGPTでピクセルアートを作るときは、掲載先が受け取る形式と、セル数・色数・動きの必須条件を先に整理すると、制作方式と確認する点を選べます。
使う場所と必要な形式を決める
| 用途・掲載先 | 守りたい条件 | 方式・次の作業 | 選ばない条件 | 依頼文・手順 | 確認点 → 修正先 |
|---|---|---|---|---|---|
| ブログ・資料の静止画像 | 画像ファイルを受け取り、構図や見た目を選びたい | 画像生成 | 条件：厳密なセル数・色数の適合まで生成だけに任せたい場合 | 画像生成への依頼文 | 形・配色・保存結果 → 画像への再指示、必要に応じた仕上げ |
| Web上の形・動きを管理する図 | SVG・CSSを掲載でき、単体表示を確認できる | SVG＋CSS | 条件：コード掲載不可、または画像ファイルだけが提出条件 | 描画への依頼文 / 単体コード | 格子・倍率・動作範囲 → 図形、CSS、掲載条件 |
| ゲーム等の規格がある素材 | 指定セル数・色数・形式を満たす必要がある | 仕上げ・適合確認を別工程にする | 条件：生成画像やSVGを未確認のまま納品する使い方 | 規格の確認 / 提出形式 | 実寸・パレット・形式 → 規格に合う編集・書き出し |
| 生成画像の一部を直す | 変更箇所と残す箇所を分けたい | 画像を編集し、周囲も確認 | 条件：選択範囲外が変わらないことを前提にする場合 | 修正依頼文 | 修正箇所・周囲・全体 → 画像への追加指示 |
| SVGが掲載先で崩れる | 単体表示と掲載後の違いを調べたい | 表示条件を切り分ける | 条件：見た目だけでコードの原因を断定する場合 | 表示条件の確認 | 幅・親要素・保存後のコード → CSSや掲載先の条件 |
公式の機能・仕様：ChatGPT Images公式ヘルプ / W3C：SVGの座標と表示領域 / WordPress公式：カスタムHTML
寸法・色数の指定を出力後に確かめる
「32×32セル・16色以内」のような条件がある素材は、生成後に規格へ合っているか確かめる工程を設けます。「ドット絵風に見えること」と、指定した格子・色数を満たすことは分けて考えてください。
確認した画像生成の公式資料には、任意のセル数やパレットを守る保証は明記されていません。画像の縦横ピクセル数、見た目のマス目、使われている色を確認し、必要なら提出規格に対応した編集・書き出しで仕上げる方針です。ChatGPT Images公式ヘルプ
今の契約と掲載先で制作を始められる？
ChatGPTの画像生成には無料枠もありますが、利用上限や選べるモデルは契約・利用面で異なり、コード描画では掲載先のSVG・CSS対応も確認が必要です（2026年9月13日確認）。まず手元の利用条件を確認し、使えない機能を前提に依頼しないようにします。ChatGPT無料枠の公式FAQ / ChatGPTのモデルに関する公式ヘルプ / WordPress公式：カスタムHTML
ChatGPTはOpenAIが提供するサービスです。機能全体から用途を見直したい場合は、ChatGPTの機能を目的別に選ぶ案内も参照できます。OpenAI利用規約
画像機能と利用枠を確認する
画像生成は、まず現在のプランで使える範囲から始められます。公式案内ではFreeにも制限付きの画像生成があり、有料プランとの違いには利用枠が含まれます（2026年9月13日確認）。ChatGPT無料枠の公式FAQ / ChatGPT公式料金ページ
文章の会話枠と画像生成枠は同じではなく、全員共通の「1日何枚」という固定値は今回確認できていません。上限に達したときは画面の制限通知を読み、必要な頻度で作れるかを判断してください。契約を見直す場合は、画像生成の利用枠と課金の判断基準へ進めます。ChatGPT無料枠の公式FAQ
モデル名と利用する画面を分けて確認する
画像機能の名前と、会話やコード作成で選ぶモデル名は分けて確認します。現行の画像機能はChatGPT Images 2.5の案内があり、通常の会話とWork・Codexでは選べるモデルや利用条件が異なります（2026年9月13日確認）。ChatGPT Images公式ヘルプ / ChatGPTのモデルに関する公式ヘルプ / Work・Codexの公式モデル案内
本記事では開発者向けAPIを使いません。ChatGPTの月額契約とAPIの利用料金は別なので、記事の単体コードを表示するためにAPI契約を追加する必要はありません。ChatGPTとAPIの請求に関する公式ヘルプ
掲載先と入力素材の条件を確かめる
制作前に、掲載先が受け取れる形式と、ChatGPTへ送ってよい素材を確認します。コード方式では、SVG・CSSの掲載権限があるかを先に調べると、作った後の行き違いを減らせると考えられます。
- 掲載形式：画像ファイルだけか、SVG・CSSを記述できる場所かを確認する。
- 保存後の表示：WordPressでは権限等により入力HTMLが除去される場合があるため、保存後のページも確認する（2026年9月13日確認）。WordPress公式：カスタムHTML
- 入力素材：自分が使用できる画像・コードを用意し、未公開情報を含める必要があるか見直す。OpenAI利用規約
個人向けChatGPTでは内容が学習に使われる場合があり、有料契約だけで学習対象外になるわけではありません。新しい会話の学習利用を止めたい場合は、公式ヘルプの「Settings → Data Controls → Improve the model for everyone」を確認します。日本語の画面表記は環境による違いも確認してください（2026年9月13日確認）。学習利用に関するOpenAI公式説明 / データコントロールの公式FAQ
会話の削除と、別に保存されたファイルの削除も分けて確認します。会話を削除しただけで保存ファイルまで消えるとは限らないため、未公開素材を扱った後は保存先も確かめてください（2026年9月13日確認）。会話の削除に関する公式ヘルプ / 保存ファイルに関する公式ヘルプ
画像生成には何を伝えればよい？
ChatGPT Imagesは、文章や参照画像から画像を作り、変更内容を伝えて編集できる機能で、部分編集では選んだ範囲の外にも変更が及ぶ場合があります。最初の依頼では絵の目的を絞り、生成後の確認と修正を一続きにします（2026年9月13日確認）。ChatGPT Images公式ヘルプ
題材・用途・残したい特徴を依頼文にする
依頼文には、題材、掲載用途、主役の特徴、構図、避けたい表現をまとめます。小船なら「船体・2つの窓・旗」を残したい特徴にすると、出力後に依頼との違いを確かめやすくなります。
日本語で依頼できます。画像機能の入口は日本語の公式ヘルプでは「その他」「画像」と案内されていますが、実画面の表記や配置は利用する端末で確認してください（2026年9月13日確認）。ChatGPTの言語設定に関する公式ヘルプ / 画像機能の日本語公式ヘルプ
画像生成への依頼文
ブログの説明に使う「港の小船」のピクセルアートを1点作ってください。 用途：Web記事へ静止画像として掲載します。 主対象：青緑の小船。船体、2つの窓がある船室、小さな銅色の旗を見分けられるようにしてください。 構図：小船を主役に、桟橋と水面を控えめに添えてください。上下左右に余白を残してください。 表現：四角い色面と階段状の輪郭。ぼかし、発光、強い影、文字、ロゴは加えないでください。 配色の希望：白、濃い輪郭、青緑とその明暗、銅色、淡い水面。色数をむやみに増やさないでください。 この依頼は見た目の方向性を伝えるものです。厳密なセル数・色数を満たしたと保証する説明は付けないでください。
この依頼文は、見た目の方向性をそろえるためのものです。色数や格子の希望を書いても、出力がその規格に適合したという証明にはならないため、生成後に確認します。
生成後に形と保存結果を確かめる
生成画像は、画面上の見た目と保存したファイルの両方を確認します。まず船体・窓・旗の形と余白を見てから保存し、掲載する場所でも開いてください。
画像の保存方法は、利用画面のダウンロード・保存操作を確認します。必要なファイル形式や寸法は、保存後のファイルで確かめてください。画像を作った画面と提出先の要件は別です（2026年9月13日確認）。ChatGPT Images公式ヘルプ
直したい場所があれば、画像を示して「旗の色を変える」「窓と船体は維持する」のように変更点を分けます。部分編集は周囲にも影響する場合があるので、修正箇所だけでなく全体を見直します。ChatGPT Images公式ヘルプ
SVGとCSSではどう描いて動かす？
SVGは図形の位置と寸法を指定する形式で、ChatGPTへSVGとCSSを依頼する本記事の方法では、マス目・配色・動きの条件をコードで管理します。CSSとは、見た目や動作の規則を指定する仕組みです。小船を部品ごとに配置し、動かす単位をまとめます。W3C：SVGの基本図形 / W3C：SVGの座標と表示領域 / W3C：CSSアニメーションと停止
マス目・配色・動作の条件を指定する
僕の方法では、最小のマス目、使う色、表示する幅、動かす距離を先にそろえます。これは本記事の制作設計であり、OpenAIの公式推奨値ではありません。
この見本は最小単位を2、描画範囲を192×128にします。表示幅が192・288・384pxなら、最小のマスはそれぞれ2・3・4pxです。SVGの描画範囲を定めるviewBoxと、画面での表示幅を分けるのが確認のポイントです。W3C：SVGの座標と表示領域
動きも同じ単位に合わせます。たとえば16単位の移動をsteps(8,end)で8段階に分ければ、1段階の移動は16÷8＝2単位です。待機と移動を別の区間にし、船体・窓・旗を同じグループで動かします。W3C：CSSの段階的な変化 / W3C：CSSアニメーションと停止
SVG・CSS描画への依頼文
「港の小船」のピクセルアートを、ブラウザーで表示できる単体HTMLとして作成してください。画像生成ではなく、インラインSVGとCSSで描いてください。 描く対象：青緑の船体、2つの窓を持つ船室、銅色の小さな旗。背景は控えめな桟橋と水面。 格子：viewBox="0 0 192 128"、最小単位g=2。座標、図形の幅・高さ、輪郭、隙間、移動先を2の整数倍にしてください。 輪郭：2単位。rectまたは直交・階段状の塗りpathを使い、stroke、曲線、ぼかし、回転、skewは使わないでください。 配色：#FFFFFF、#202725、#146B57、#0E4F40、#A4C8B7、#9A521D、#FFF2DE、#E7F1ECの8色以内。光は左上、明部・主色・陰部をそろえてください。 表示：縦横比3:2。実コンテナに収まる192・288・384pxから幅を選び、セル幅を2・3・4pxにします。狭い環境の保護段階は96pxとし、端数幅への無条件な引き伸ばしはしないでください。 動作：10秒周期。0〜1秒は待機、1〜2秒は船体内面、2〜3秒は船室内面、3〜4秒は旗内面を明色で示します。4〜6.4秒に船全体を右へ16単位・steps(8,end)で動かし、8.2秒まで待機。8.2〜9.8秒に同じ8段階で戻り、10秒まで待機します。 固定位置と動作は別のg要素に分け、陰影・窓・旗を船と一緒に動かしてください。全軌道をviewBox内へ収め、外周から4単位以上の余白を確保してください。 停止：ネイティブcheckboxとCSSで一時停止・続きからの再開を実装してください。JavaScriptがなくても図を表示し、停止操作を使えるようにしてください。 動きを減らす設定・印刷：船を右へ16単位移動した完成状態で静止させ、内面を通常配色へ戻してください。 納品：省略のない単体HTML。短いキャプションを図の下へ付け、外部画像・フォント・CSS・JavaScriptの読込みはしないでください。
単体コードをブラウザーで表示する
下の単体コードは、書式のないテキストとしてHTMLファイルに保存し、ブラウザーで開いて確認します。ChatGPT内の特定のプレビュー機能を使えることは前提にしていません。
- 「港の小船を表示する単体コード」のコピーを押す。
- テキストエディターへ貼り付け、UTF-8の
cpa-boat.htmlとして保存する。末尾が.html.txtになっていないか確認する。 - 保存したファイルをブラウザーで開き、船の形・動き・一時停止を確認する。
- 掲載できる環境へ移した後、保存後のページでも幅・輪郭・停止を確かめる。
次の図が、単体コードと同じ小船です。船体・船室・旗の内面を順に示した後、船全体が段階的に移動します。10秒の周期は説明用の動作で、ChatGPTの生成時間を表しません。
港の小船を表示する単体コード
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>港の小船｜SVGとCSS</title>
<style>
.cpa-sample{--cpa-bg:#FFFFFF;--cpa-text:#202725;--cpa-accent:#146B57;--cpa-accent-2:#9A521D;--cpa-warn-bg:#FFF2DE;--cpa-accent-tint:#E7F1EC;--cpa-art-light:#A4C8B7;--cpa-link-hover:#0E4F40;--cpa-art-cycle:10s;color:var(--cpa-text);background:var(--cpa-bg);font-family:sans-serif;line-height:1.7;max-width:432px;margin:0 auto;padding:16px}
.cpa-sample,.cpa-sample *{box-sizing:border-box}
.cpa-sample label{display:inline-flex;align-items:center;min-height:44px;padding:8px;cursor:pointer}
.cpa-sample input:focus-visible{outline:3px solid var(--cpa-accent-2);outline-offset:3px}
.cpa-sample .cpa-art{margin:16px 0}
.cpa-sample .cpa-art-stage{container-type:inline-size;container-name:cpa-sample-art}
.cpa-sample .cpa-art-svg{display:block;width:96px;height:auto;max-width:none;aspect-ratio:3/2;margin:0;overflow:hidden;shape-rendering:crispEdges}
.cpa-sample .cpa-art-caption{font-size:13px;margin-top:8px}
@container cpa-sample-art (min-width:192px){.cpa-sample .cpa-art-svg{width:192px}}
@container cpa-sample-art (min-width:288px){.cpa-sample .cpa-art-svg{width:288px}}
@container cpa-sample-art (min-width:384px){.cpa-sample .cpa-art-svg{width:384px}}
.cpa-sample #cpa-sample-stop:checked~.cpa-sample-content .cpa-motion{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.cpa-sample .cpa-motion{animation:none!important}.cpa-sample input,.cpa-sample label{display:none}}
@media print{.cpa-sample .cpa-motion{animation:none!important}.cpa-sample input,.cpa-sample label{display:none}}
.cpa-sample .cpa-build-boat{transform:translateX(16px);animation:cpa-build-sail var(--cpa-art-cycle) infinite}
.cpa-sample .cpa-hull-focus{fill:var(--cpa-accent);animation:cpa-focus-hull var(--cpa-art-cycle) steps(1,end) infinite}
.cpa-sample .cpa-cabin-focus{fill:var(--cpa-warn-bg);animation:cpa-focus-cabin var(--cpa-art-cycle) steps(1,end) infinite}
.cpa-sample .cpa-flag-focus{fill:var(--cpa-accent-2);animation:cpa-focus-flag var(--cpa-art-cycle) steps(1,end) infinite}
@keyframes cpa-build-sail{0%,40%{transform:translateX(0);animation-timing-function:steps(8,end)}64%,82%{transform:translateX(16px);animation-timing-function:steps(8,end)}98%,100%{transform:translateX(0)}}
@keyframes cpa-focus-hull{0%,20%,100%{fill:var(--cpa-accent)}10%{fill:var(--cpa-art-light)}}
@keyframes cpa-focus-cabin{0%,30%,100%{fill:var(--cpa-warn-bg)}20%{fill:var(--cpa-art-light)}}
@keyframes cpa-focus-flag{0%,40%,100%{fill:var(--cpa-accent-2)}30%{fill:var(--cpa-art-light)}}
</style>
<div class="cpa-sample">
<input id="cpa-sample-stop" type="checkbox"><label for="cpa-sample-stop">動きを一時停止</label>
<div class="cpa-sample-content">
<figure id="cpa-art-body-1" class="cpa-art cpa-scene" data-article-art="body-1" data-readtime-visual><div class="cpa-art-stage"><svg class="cpa-art-svg cpa-build-scene" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" width="192" height="128" preserveAspectRatio="xMidYMid meet" shape-rendering="crispEdges" aria-hidden="true" focusable="false"><g class="cpa-build-fixed"><rect x="48" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="56" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="64" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="72" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="80" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="88" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="96" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="104" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="112" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="120" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="128" y="38" width="2" height="48" fill="var(--cpa-accent-tint)"/><rect x="48" y="38" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="48" y="46" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="48" y="54" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="48" y="62" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="48" y="70" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="48" y="78" width="88" height="2" fill="var(--cpa-accent-tint)"/><rect x="12" y="78" width="168" height="28" fill="var(--cpa-accent-tint)"/><rect x="12" y="84" width="32" height="6" fill="var(--cpa-text)"/><rect x="16" y="90" width="6" height="26" fill="var(--cpa-accent-2)"/><rect x="34" y="90" width="6" height="26" fill="var(--cpa-accent-2)"/></g><g transform="translate(56 42)"><g class="cpa-build-boat cpa-motion"><rect x="32" y="0" width="2" height="14" fill="var(--cpa-text)"/><rect x="34" y="0" width="16" height="8" fill="var(--cpa-text)"/><rect x="36" y="2" width="12" height="4" fill="var(--cpa-accent-2)" class="cpa-flag-focus cpa-motion"/><rect x="12" y="14" width="26" height="14" fill="var(--cpa-text)"/><rect x="14" y="16" width="22" height="10" fill="var(--cpa-warn-bg)" class="cpa-cabin-focus cpa-motion"/><rect x="10" y="12" width="30" height="4" fill="var(--cpa-text)"/><rect x="16" y="18" width="8" height="8" fill="var(--cpa-text)"/><rect x="18" y="20" width="4" height="4" fill="var(--cpa-art-light)"/><rect x="26" y="18" width="8" height="8" fill="var(--cpa-text)"/><rect x="28" y="20" width="4" height="4" fill="var(--cpa-art-light)"/><path d="M0 28H52V32H48V36H44V40H8V36H4V32H0Z" fill="var(--cpa-text)"/><rect x="2" y="30" width="48" height="2" fill="var(--cpa-art-light)"/><rect x="6" y="32" width="40" height="4" fill="var(--cpa-accent)" class="cpa-hull-focus cpa-motion"/><rect x="10" y="36" width="32" height="2" fill="var(--cpa-link-hover)"/></g></g></svg></div><figcaption class="cpa-art-caption">船体・船室・旗を同じマス目に配置し、船全体を段階的に動かしたSVG・CSSの見本です。</figcaption></figure>
</div>
</div>
</html>見本を基準に題材を差し替える
題材を変えるときは、格子・表示幅・停止条件を残して、主対象と動きの意味を差し替えます。一度に全部を変えず、「小船を別の乗り物に変える。マス目と表示幅は維持する」と依頼すると、変更を照合しやすいと考えられます。
保存済みのコードを土台にすることと、同じ指示で新しく生成し直すことは別です。新しい出力が前の形や条件をそのまま保つとは扱わず、変えた部品と接続・余白を確認してください。
仕上がりのどこを確認・修正する？
ChatGPTで作ったピクセルアートは、本記事では形・色の違いと表示サイズ・余白・停止の問題を分けて確認し、画像への再指示かコードの修正かを選びます。見える現象と、その原因の推測を分けておくと、修正依頼の範囲を絞れます。ChatGPT Images公式ヘルプ / W3C：SVGの座標と表示領域 / W3C：CSSアニメーションと停止
形や配色の違いは生成・描画内容を見直す
窓の数、旗の位置、船体の色が依頼と違う場合は、まず絵の内容を見直します。画像生成なら対象画像と変更点を示し、SVGなら該当する図形・色の指定を修正候補にします。
画像の部分編集では、残したい窓や船体まで変わっていないかを確認します。コードでも部品の変更後に全体のバランスや接続を見直し、「一部を直したので他は未確認」の状態を残さない方針です。ChatGPT Images公式ヘルプ / W3C：SVGの基本図形
ぼやけ・欠け・停止不良の確認点
単体ファイルでは表示でき、掲載後に崩れる場合は、表示幅や親要素、保存後のコードから確認します。「SVGだから無条件にくっきり見える」とは考えず、実際に使う大きさで見てください。W3C：SVGの座標と表示領域 / W3C：SVGの描画 / WordPress公式：カスタムHTML
- 輪郭と倍率：実際の図幅が96・192・288・384pxのどの段階かを確認する。
shape-rendering="crispEdges"は描画ヒントで、全環境のにじみを防ぐ保証ではありません。W3C：SVGの描画 - 余白と全軌道：待機中だけでなく、移動中と折り返しで旗・窓・輪郭が欠けないかを見る。
- 停止と再開：一時停止で位置と色が止まり、再開で続きから動くかを確認する。
animation-play-state:pausedの対象と、停止操作がつながっているかを見ます。W3C：CSSアニメーションと停止 - 静止状態：端末の「動きを減らす」設定でも対象が見えるかを確認する。
prefers-reduced-motionを検知するだけでなく、読める静止状態を用意します。W3C：動きを減らす設定
下図は、小船の輪郭・余白・動く範囲を目視で確かめる場面です。拡大鏡が出てきても自動検査を行うわけではなく、確認結果は自分の画面で判断します。
形・寸法・動作に不適合が残る場合は、使用を保留します。ブラウザーの拡大率や掲載先の条件でも表示は変わるため、通常表示と必要な拡大表示の両方を確認してください。原因が分からないときは、見える現象と発生条件を添えて修正を依頼します。
変える点と残す点を修正依頼にまとめる
修正依頼には、制作方式、観察した現象、発生条件、変更点、維持点を記入します。「崩れています」だけでなく、「単体では動くが、掲載後は旗が右端で欠ける」のように観察を分けると、確認する範囲を伝えやすくなります。
次は記入して使うテンプレートです。例文の現象を自分の結果として扱わず、実際に確認したことと、対象の画像または単体コードを添えてください。
変更点と維持点を分ける修正依頼文
ピクセルアートの修正をお願いします。以下を記入したうえで、対象の画像または単体コードを添付します。 制作方式：画像生成／SVG＋CSSのどちらか 見える現象：形・配色・余白・ぼやけ・欠け・停止など、確認できたこと 発生する条件：画像を開いたとき／単体HTML／掲載後のページ、画面幅、拡大率 変えたい点：対象の部位と、どのような状態にしたいか 維持したい点：構図、他の部品、色、サイズ、動作など 確認してほしい範囲：修正箇所、その周囲、全体の輪郭と余白 観察内容だけで原因を断定しないでください。変更点と維持点を分けて対応してください。 画像生成の場合は、指定箇所以外へ変更が及んでいないかも確認対象にしてください。 SVG＋CSSの場合は、同じ格子を維持し、固定位置と動作の分離、全軌道の余白、一時停止・再開、動きを減らす設定の静止像を確認してください。 コードを修正する場合は、貼り直せる単体HTMLの全文と、変更した箇所を短く示してください。
FAQ｜作った作品を公開・配布できる？
ChatGPTで作ったピクセルアートを公開・配布する前に、本記事では利用規約と第三者の権利、提出先が求める形式を確認し、作品を渡せる状態か判断します。
無料プランで作った作品も商用利用できる？
ChatGPTの出力は、無料プランで作ったものも規約等の条件に従って商用利用できますが、第三者の権利を確認する責任は利用者にあります（2026年9月13日確認）。ChatGPT公式FAQの商用利用条件 / OpenAI利用規約
有料契約をすれば、個別作品の著作権成立や権利上の問題が保証されるわけではありません。他者のキャラクター・ロゴ・参照画像を使う場合は、作品に含まれる要素と利用条件を確認してください。
PNG・GIF指定にSVGコードを渡せる？
SVGのコードはPNGやGIFの画像ファイルとは異なるため、提出形式が指定されている場合は、その形式のファイルを用意して確認します。
ブラウザーで絵が動いても、GIFファイルが作られたことにはなりません。提出先の形式・寸法・動作条件を確認し、対応する編集・書き出しの工程を選んでください。本記事の単体HTMLは、SVG・CSSを表示する見本です。W3C：SVGの座標と表示領域 / W3C：CSSアニメーションと停止
まとめ｜次の1点は何から始める？
ChatGPTでピクセルアートを作る次の一歩は、選んだ方式で一作品を作り、形・寸法・動きを確認して、残したい部分を伝えながら修正することです。まずは自分の現在地に合う行動を一つ選んでください。
まだ作っていなければ、用途別の判断表から方式を選び、対応する依頼文を使います。試作があれば掲載先で確認し、不適合が残っていれば修正依頼に進みます。新しい方法を増やす前に、最初の1点を使える条件まで整えましょう。
利用枠、使う画面、掲載先のSVG・CSS対応、提出形式が変わったときや、表示が崩れたときは、この判断表と公式の条件を再確認してください。
コメント