📌 この記事のポイント

• Astraは制作ツールと組み合わせて使うAIモデル

• Figma実装・着色・3Dなど7つの制作例を紹介

• もちもFigmaデザインの実装とレスポンシブ対応を体験

• 制作時間と修正のしやすさまで確認して活用する

2026年9月8日更新

GPT-6 Astraは、デザインを動く形にする工程で試せる

GPT-6 Astraは、デザイナーが考えたものを制作ツールやコードを使って形にする工程で活用できるAIモデルです。Xでは、Figmaでのデザイン制作、手描き線画への着色、Blenderでの3D制作など、実際の制作画面を伴う報告が公開されています。

もち自身も、FigmaのWebデザインを実装してもらい、見た目の再現度とレスポンシブ対応に驚きました。本記事では、その実例を含む7件を紹介します。何が作られたかに加えて、渡した素材、作業したツール、制作者の評価に注目すると、自分の仕事で試す工程を見つけやすくなります。

Astraとは？ChatGPT・Codex・制作ツールの関係

GPT-6 Astraは、複雑な推論、コーディング、コンピューター操作などに対応するOpenAIのAIモデルです。ChatGPTやCodexは、そのモデルを使って仕事を進めるためのサービス・作業環境に当たります。OpenAIのモデル仕様

記事で登場する名前は、次のように分けると理解しやすくなります。

モデルを選ぶことと、制作アプリを操作できる状態にすることは、別の準備です。たとえばComputer Useは、アプリの画面を見て操作する機能で、対応環境でのプラグイン設定やアクセス許可が必要です。専用の連携があるアプリでは、その連携を使う方法もあります。Computer Useの公式ガイド

また、Astraが画像を参照すること、画像生成ツールを使うこと、ペイントソフトで描くことも異なる工程です。以下の事例では、最終画像だけでなく、どのツールでどのように作ったかを見ていきます。

事例1｜もちがFigmaのWebデザインをAstraで実装

もちが試したのは、Figmaで作ったWebデザインを、ブラウザーで表示するページとして実装してもらう使い方です。2026年9月6日のX投稿で、その結果を紹介しています。

もとのFigmaデザインでは、オートレイアウトをほとんど使っていませんでした。オートレイアウトとは、要素の間隔や並び方をルールに沿って調整するFigmaの機能です。

そのデザインをAstraに実装してもらったところ、もちの評価では、最初の出力からもとの画面に非常に近い仕上がりになりました。さらに、画面幅に応じてレイアウトを変えるレスポンシブ対応も含まれていました。

この実験から、オートレイアウトが不要になるとは判断できません。ただ、自分のデザインを題材にすると、余白や文字の大きさ、画像の配置を比較でき、狙った見た目に近づいたかを確かめやすくなります。

Xで見るAstraの制作事例6選｜Figma・イラスト・3D

ここで紹介するのは、制作者本人がXで公開した、制作画面のある6つの実験です。制作内容や所要時間は各投稿者の報告として記載し、記事のための再現実験は行っていません。

事例2｜Figmaでブランドからページデザインまで作る

issui.txt氏は、2026年9月6日に、AstraがFigmaを使ってブランドアイデンティティからページデザインまで作成した事例を公開しました。ブランドアイデンティティとは、ロゴや配色など、ブランドらしさを表す要素のことです。

動画のFigma画面には、「OFFAIR」の太いロゴ、白系の背景に黒とオレンジを使った配色、金属の結び目のようなビジュアルが並んでいます。ブランドの要素とページ全体を関連づけて見ることができる事例です。

デザイナーが試すなら、「ロゴを作って」と単独で頼むだけでなく、ブランドの特徴、使いたい色、必要なページを一緒に渡す方法が考えられます。複数の制作物を並べると、統一感のある部分と、方向性がずれた部分を比較しやすくなります。

事例3｜金属やガラスの質感を持つWeb UIを作る

小澤昂大氏は、2026年9月8日の投稿で、Astraによる30種類のWeb UIを紹介しています。金属の反射やガラス、ホログラム、カードの回転などを挙げ、押す・引く・回す操作にも言及しています。

確認できる画面の一つは、銀色の円形ダイヤルにオレンジの目盛りと数値を置いた「クローム・ダイヤル」です。デザインを説明する際に、素材の質感と操作したときの動きを一緒に見せられます。

この事例から試せるのは、動きのある部品を小さく作って、触り心地まで検討する方法です。「金属らしく」だけでなく、「回転中に数値を更新する」「選択状態を色でも示す」といった振る舞いまで指定すると、確認したい点が具体的になります。

事例4｜手描き線画をCLIP STUDIO PAINTで着色する

たい焼き太陽氏は、自分で描いた線画を渡し、ペイントソフトをマウスで操作して着色するようAstraに依頼しました。2026年9月5日の投稿では、レイヤー作成、拡大、ペンの選択までAstraが行ったと説明しています。

動画では、CLIP STUDIO PAINT上でキャラクターに着色する制作画面が見られます。別の投稿には、入力した線画、Astraの着色、本人の着色という3つの比較画像もあります。自分が描いた線を起点に、着色という工程を渡したことが特徴です。

ただし、作業速度には注意が必要です。本人の補足によると、約1分のタイムラプスにまとめられた作業は、実際には80分かかっています。品質も本人が塗った方が高いと評価し、実用上は専用モデルで線画を自動着色する方法の方が現実的だと述べています。時間・品質についての補足

この例は、アプリを操作できることと、仕事の時間を短くできることを分けて考える材料になります。着色を任せるなら、仕上がりに加えて、待ち時間と手直しの量も比較したいところです。

事例5｜Asepriteでドット絵を制作する

すえまる氏は、2026年9月5日に、Asepriteを使った初音ミクのドット絵制作を公開しています。Asepriteはドット絵を制作するためのツールで、投稿には描画途中の画面と完成画像が示されています。

注目したいのは、ドット絵を扱う制作ツールの中で作業していることです。小さなキャラクターやゲーム素材を作る場面では、完成時の印象に加えて、拡大したときの輪郭や色の配置も確認対象になります。

自分で試すときは、キャンバスの大きさ、使う色、背景の有無を先に決めると、結果を評価しやすくなります。ゲームへの組み込みやアニメーションは、別の工程として確認します。

事例6｜参考画像から3Dの街と構成説明の動画を作る

Hirokazu Yokohara氏は、2026年9月7日に、画像を渡してBlenderで背景の街を作成し、その構成を見せる動画まで編集した事例を公開しました。

動画では、「JADE CANAL」と題したパステル色の街や、建物の部品を上下に分けて見せる表現が確認できます。このように制作物の構成を分解して見せる映像は、ブレイクダウンと呼ばれます。

デザイナー向けには、制作物を作る工程から、提案相手に説明する工程までつながる例として見ることができます。参考画像を立体化できれば、平面では分かりにくい奥行きや、異なる角度からの見え方を検討する材料になります。

一方で、本人は完成度がまだ不十分だと評価しています。完成した商用背景として紹介するのではなく、3Dの試作と見せ方を試した実験として読むのが適切です。

事例7｜図面から部品に分かれた蒸気機関車のモデルを作る

Tom Krcha氏は、2026年9月4日に、古い蒸気機関車の図面からBlenderモデルを作った事例を公開しました。本人によると、モデルには3,295個の編集可能なオブジェクトが含まれています。

車輪や配管のある細かなモデルに加え、追加投稿では部品を分離する様子も紹介しています。あとから部品を選び、変更を加えられるかという視点で見ると、3D制作の実務に近い関心につながります。部品を分離する追加動画

制作方法については、本人がPythonコードでモデルを生成すると説明しています。すべての形をマウスで描いた事例ではありません。Astraが制作ツールを扱う方法には、コードを使う方法もあると分かります。生成方法についての説明

Astraの料金と利用条件｜契約とモデルの表示を確認する

Astraの利用条件は、契約プランに加えて、使うアプリや提供状況によって確認する必要があります。以下は2026年9月8日に確認した公式ページの米ドル表示です。

出典：ChatGPT Work・Codexの料金、AstraのAPI料金

上表は契約方法の整理であり、「Plusに入れば、どの画面でもAstraが使える」という意味ではありません。公式のモデル案内でも、利用可否は提供状況、サインイン方法、クライアントに依存すると説明されています。課金前に、自分が使う画面のモデル選択とプラン説明を確認してください。モデルの提供条件

ChatGPT WorkとCodexは利用枠を共有します。長い制作を複数回試す場合は、作業の途中で利用状況を見るようにしましょう。日本円での請求額や税などは、契約画面の表示を確認してください。

APIのトークンは、モデルが処理する情報量の単位です。長い入力や追加ツール、処理モードなどで料金条件が変わるため、上表を「Webページ1枚の制作費」に直接換算することはできません。

Astraを試すなら｜FigmaのデザインをWebページにしてみる

事例を見て「自分でも使ってみたい」と思ったら、Figmaで作ったデザインを、ブラウザーで開けるWebページにしてもらうところから試してみましょう。ここでいう「実装」とは、デザインをもとにコードを書き、実際に表示・操作できるページを作ることです。

以下は、Astraを選べるChatGPT WorkやCodexの環境で試すための依頼例です。まずはページ全体ではなく、見出し・画像・ボタンがある最初の1画面を対象にします。

1. Webページにしたいデザインを渡す

Figmaで対象のフレームを選び、そのURLと、ページで使う画像・原稿を渡します。最初に「このFigmaのデザインを読み取れますか？」と確認してください。Figmaの連携が使えず読み取れない場合は、対象フレームを書き出した画像を渡して、見た目の再現を試す方法もあります。

2. 何を作ってほしいか、文章で伝える

素材を渡したら、作りたいものと、どの状態まで仕上げてほしいかを伝えます。たとえば、次のように依頼できます。

このデザインをもとに、ブラウザーで開けるWebページを作ってください。
対象は、ページの最初に表示される見出し・画像・ボタンの部分です。

文字、配色、画像、余白を、元のデザインにできるだけ近づけてください。
スマートフォンの幅でも、文字や画像が重ならず読めるようにしてください。
足りない素材や、読み取れないファイルがあれば教えてください。
完成したら、ページを開いて確認する方法も教えてください。

3. 完成したページを、元のデザインと見比べる

案内された方法でページを開き、Figmaのデザインと並べて確認します。まずは、次の3点を見ると違いを見つけやすくなります。

• 文字の大きさ、配色、余白が元のデザインに近いか

• スマートフォンの幅にしたとき、文字や画像がはみ出していないか

• ボタンやリンクが、意図したとおりに動くか

4. 気になる部分を具体的に直してもらう

違いがあれば、どの部分をどう変えたいか伝えます。たとえば、スマートフォン表示で見出しが読みづらければ、次のように依頼します。

スマートフォンでは見出しが細かく折り返されて読みにくいです。
原稿は変えず、文字サイズと左右の余白を調整してください。

修正後にもう一度ページを開き、狙った見た目になったか確認します。自分のデザインがどこまで再現され、どのくらいの手直しが必要かを見ることが、この実験の目的です。AIに実装を依頼する流れは、デザイナーのためのClaude Code実践ガイドでも紹介しています。

Astraの限界と注意点｜時間・修正・完成条件まで見る

制作に使えるかを判断するには、見た目に加えて、制作時間、手直しの量、実際の使用場面での動作を確認することが必要です。今回の投稿にも、その判断材料が含まれています。

動画の短さを制作時間と取り違えない

たい焼き太陽氏の着色は、約1分の動画にまとめられていても、本人によると実際には80分の作業でした。待つ時間だけでなく、確認や手直しも含めて、自分で作る場合と比べると実用性を判断できます。本人による時間の補足

編集できることと、修正しやすいことを分ける

Figmaなら文字や余白を変更できるか、3Dなら必要な部品を選べるかを確認します。制作画面にレイヤーが見えていても、引き継ぎやすい構造になっているかは、実際にファイルを開いて確かめる必要があります。

Tom Krcha氏も、別の機関車では前面の丸みの修正が必要だったと補足しています。最初に形ができた段階から、個別の形状を詰める作業まで見ておくことが大切です。形状修正についての追加投稿

デモの完成度を、そのまま納品の基準にしない

Hirokazu Yokohara氏は、街の3D制作について完成度がまだ不十分と述べています。紹介動画で可能性が見えても、実際の用途に必要な品質を満たすかは別に確認します。

GPT-6 Astraについてよくある質問

Astraは無料で使えますか？

ChatGPT WorkやCodexに無料の利用枠があることと、Astraを選べることは別です。無料利用を前提にせず、使う画面のモデル選択と契約条件を確認してください。提供状況はアカウントや利用環境によって異なります。公式のモデル案内

ChatGPTの画面にAstraが出てこないときは？

使っているサービス・アプリ、サインインしているアカウント、契約プランを確認します。公式案内では提供が段階的に行われることも説明されています。別の利用者の画面と同じモデルが表示されるとは限りません。モデルの提供条件

Astraを選べばFigmaやBlenderをすぐ操作できますか？

モデルの選択に加えて、対象アプリを扱える連携や操作環境が必要です。Computer Useを使う場合には、プラグインとアプリへのアクセス設定を確認してください。連携が利用できるかを確かめてから、その環境で扱えるファイルを渡します。Computer Useの公式ガイド

画像生成と、Astraに絵を描いてもらうことは同じですか？

同じではありません。AstraのAPI仕様では画像は入力に対応し、画像生成は対応ツールとして別に示されています。今回の着色例は、ペイントソフトの操作による制作です。試すときは、画像生成ツールを使いたいのか、既存の制作ファイルをアプリ上で編集したいのかを伝えてください。Astraの入出力・ツール仕様

コーディングができなくても試せますか？

自然な文章で、作りたいものや修正したい点を伝えるところから試せます。最初は自分で表示を確認できる小さなページに範囲を絞り、完成物の開き方も説明してもらうと進めやすくなります。コードの正しさまで確認できない場合は、公開前のレビューを制作工程に含めてください。