GPT-6 Astraで、Webデザインはどこまでできる？ 海外9事例と、デザイナーのための指示のコツ

Astraの海外作例を集めてたんですが、
途中から普通に参考サイト探しになってました。

これいいな。これもいいな。
これ、次の案件でやりたいな。

……記事を書くために開いたんだったwwww

YETISのガリです！

いや、今回のAstra、デザイナー目線でも気になる作例が多いんですよ。

写真と余白がきれいなLPもあれば、商品を3Dで回せるサイトもある。ポートフォリオがゲーム機になってる人までいる。

そこまでやっていいなら、こっちもいろいろ考えちゃうじゃないですかww

ということで今回は、海外のWebデザイン事例を9つ集めました。

「これすごい！」で終わらず、自分の仕事なら何に使えそうか、Astraにどう頼めばよさそうかまで、デザイナー目線で見ていきます！

本記事は2026年9月7日時点の公開情報をもとにしています。
制作方法は基本的に投稿者本人の報告で、全工程をこちらで再現したものではありません。

公開デモは一部でページの表示を確認していますが、すべての操作やスマホ表示まで検証したわけではありません。

各事例の「仕事に取り入れるなら」という話と、後半の指示例は、ここから考えた応用案です。

まず見てほしい、9つのWebデザイン事例

今回の事例は、普段のWeb制作に近いものから、少し踏み込んだ表現へと並べました。

事例：見るポイント

• ペット預かりサービスのLP：親しみやすさと、料金・FAQの情報設計

• 宿泊施設風のLP：写真、文字、余白で作る静かな雰囲気

• Workser Codeのリデザイン：商品情報と参考サイトを渡す指示

• ゲーム機型ポートフォリオ：作品を見ること自体を体験にする

• スノーボードの商品ページ：色・サイズ・形状を選ぶUI

• Figmaデザインと3Dマスコット：自分のデザインを出発点に表現を広げる

• 深海・クラゲのLP：光と動きを含むアートディレクション

• 映像が切り替わるWeb UI：動画と選択操作の組み合わせ

• LPとアプリのデザイン統一：既存の複数画面へ共通ルールを反映する

1. ペット預かりサービスのLP：身近なサービスのページにも

Tanzil Chowdhury氏は、AstraとHiggsfieldを用いたペット預かりサービスのLPを紹介しています。

動画には、クリーム色の背景とオレンジの差し色、
料金プラン、FAQのセクションが登場します。Tanzil氏の投稿

こういう事例は、自分の案件へ置き換えて考えやすいですね。

ペットを預ける人は、かわいい写真を見るだけでは予約できません。

どんな場所で過ごすのか、何をしてもらえるのか、料金はどう違うのか。

ページを読みながら、いくつもの疑問を解消していく必要があります。

このLPを制作の参考にするなら、配色と一緒に、サービスの説明から料金、FAQへどう読ませているかを見たいところです。

たとえば、初めて利用する人向けの店舗サイトなら、「予約する前に知っておきたいこと」を整理してからAstraに渡す。

そこから、情報の順番と見た目を一緒に提案してもらう使い方が考えられます。

ただし、この投稿ではAstraとHiggsfieldの詳しい役割分担までは確認できません。

ページも素材もすべてAstra単独で作った、という紹介にはしないでおきます。

2. 宿泊施設風のLP：写真と余白の使い方を見る

Thomas A氏が紹介しているのは、山の宿泊施設を思わせるLPです。

公開動画の一場面では、露天風呂の写真と見出しを左右に置き、淡い背景と広い余白でゆったり見せています。

本人はAstraで制作したと説明しています。Thomas氏の投稿

ここで見たいのは、写真の選び方と、画面の中での扱いです。

写真が同じでも、全面に広げるか、小さく置くかで印象は変わる。

文章が同じでも、見出しを短く切るか、説明を詰め込むかで、ページを読む速度が変わります。

自分の案件なら、「高級感を出して」のあとに、もう少しだけ説明を足せそうです。

「施設の写真を大きく見せたい」「一度に見せる情報を絞りたい」「割引より、滞在する時間の魅力を伝えたい」。

こうした判断を渡せると、出てきた案を評価する基準にもなります。

画像がきれいだから採用するのか、その施設の魅力が伝わるから採用するのかを、自分で説明しやすくなる。

投稿にはプロンプトを案内する返信もありますが、リンク先の内容は未確認です。ここで書いた指示の考え方は、公開動画から考えた応用案です。

3. Workser Codeのリデザイン：実際に何を渡したかが見える

今回、指示の参考として特に取り上げたいのが、Gognumb氏によるWorkser CodeのLP改修です。

本人の投稿に加えて、返信には実際の指示画面が掲載されています。

商品情報、既存のページ、参考にするMacBook Proのサイト、後から本物の素材へ差し替えるために仮素材を使ってよいという条件を渡していました。制作投稿、指示画面の投稿

この例で持ち帰りたいのは、依頼に必要な材料の組み合わせです。

何の商品なのか。どのページを変えるのか。
どんな印象を目指すのか。素材はどこまで用意できているのか。

「いい感じのLPにして」と頼むとき、こちらの頭の中には、その商品の強みや参考にしているサイトがあります。

でも、それを渡さなければAstraの作業材料にはなりません。

一方で、最初からCSSの書き方まで全部決める必要があるとは限らない。

目指す見た目と商品の意味を伝えて、具体的な実装を提案してもらう余地は残せます。

この投稿の「20分で改修した」という時間は本人の報告です。
注目するなら、まずは速さより、依頼の中にどんな情報が入っているか。

そこは自分の制作でも試せます。

画面を作るところから、触れる体験へ

ここからは、ページに操作や立体を取り入れた事例です。

デザイナーとして気になるのは、頭の中にある動きや見せ方を、どこまで具体的な試作品にできるのかという点です。

提案時に「ここが動きます」と説明していた部分を、実物で相談できるなら、試す価値があります。

4. ゲーム機型ポートフォリオ：作品の入口に個性を持たせる

Manuel Sainsily氏は、自身のポートフォリオをGame Boy Advance SP風の体験にしたと紹介しています。

ページ制作、3Dモデル、開くアニメーション、ボタン操作までAstraが担当したという報告です。Manuel氏の投稿

公開デモでは、紫の折り畳みゲーム機と、機内の作品メニューを確認できます。周囲の文字や操作案内もドット風の表現でそろっていて、通常の文章でポートフォリオを読むための入口も用意されています。

この例の面白さは、作品を見せる人の趣味や世界観が、ページの使い方にまで表れているところです。

自分のポートフォリオに取り入れるなら、最初に考えたいのは「どんな自分を覚えてほしいか」。

写真家なら写真のめくり方、音楽に関わるデザイナーなら音との関係、パッケージデザイナーなら箱を開く動作。自分の仕事とつながる体験を考えられそうです。

そして、作品へ迷わずたどり着けるかも同時に見る。面白い入口を作るほど、中身を読むための導線も大切になります。

この公開デモは表示を確認しましたが、
すべての操作を検証したわけではありません。
ゲーム機の外観をそのまま自分の商用案件へ流用する提案でもありません。

5. スノーボードの商品ページ：選ぶことをデザインする

joye氏は、GPT-6で作ったWebGLのスノーボードLPを公開しています。
商品カスタマイズとリアルタイム3Dプレビューを備えたページとして紹介されています。joye氏の投稿

公開デモのVANTAには、配色、長さ、幅、形状、表面の仕上げ、ゴーグルなどを選ぶUIがあります。

選択した内容をまとめて表示する欄も確認できました。サイト自身がコンセプトデザインと明記しているので、実際に購入できるECサイトとしての紹介ではありません。

Webデザインの仕事に引き寄せると、「商品を選ぶために、何が見えればよいか」を試せる例です。

たとえば、家具の色違い、照明の仕上げ、パッケージの仕様。
選択肢を文字で並べるだけでは想像しにくい商品に、見た目が変わる試作品を用意する。

そのときの指示には、選べる項目と、選んだ結果をどう見せるかが必要です。色を変えたらどの部分が変わるのか。
大きさを比べたいのか。最後に選択内容をまとめたいのか。

ここまで考えると、Astraへの依頼が、そのまま体験の設計にもなります。
なお、今回はUIとページの表示までを確認しており、各選択が正しく反映されるかは未検証です。

6. Figmaデザインと3Dマスコット：自分で作った案を広げる

Ferry氏は、自分で作ったFigmaデザインを出発点に、AstraによるBlenderの3D制作を組み合わせた例を紹介しています。

投稿では、Web上の3D表示にThree.jsやSplineにも言及しています。Ferry氏の投稿

これは、すでにデザインを仕事にしている人にとって、取り入れ方を想像しやすい例だと思います。

自分で決めたレイアウト、書体、色、情報の順番がある。そのデザインに、マスコットや商品モデルの動きを加える。

最初から全部をAIに提案してもらう使い方に加えて、自分が決めた案の続きを作ってもらうことも考えられます。

依頼するときは、元デザインのどこを維持したいかを伝えたい。
余白や文字の位置まで動かしてよいのか、今回足したいのは3Dだけなのか。担当してほしい部分が決まれば、結果の確認もしやすくなります。

Figmaのデザインをどう渡せるか、Blenderなどをどこまで操作できるかは、利用環境や連携の設定にも関わります。

この投稿と同じことが、自分の環境でもそのままできるかは確認が必要です。

7. 深海・クラゲのLP：光と動きまで含めて方向を決める

Himanshu Hingorani氏の投稿には、大きな紫のクラゲと暗い背景が印象的なLPが登場します。

本人はAstraとClaude Codeを組み合わせ、3D表示やアニメーションの技術を使ったと説明しています。Himanshu氏の投稿

静止画の配色に加えて、光り方、奥行き、動きまで一つの世界観として考える例です。

こうした表現を試すなら、「幻想的にして」という言葉から、もう一段進めてみたいですね。

どこが光るのか。どのくらいゆっくり動くのか。文字の後ろを動かしてよいのか。最初の画面で、主役と見出しのどちらに先に目が向いてほしいのか。

動きがあると、見る順番にも時間が加わります。読みたい文字の上を主役が通過してしまうなら、その演出は調整したい。画面を眺める楽しさと、サービスを理解する読みやすさの両方を見ます。

なお、この事例は複数ツールによる制作です。
投稿者の高額案件との比較などは、ここでは成果の根拠にしません。

8. 映像が切り替わるWeb UI：ブランドの世界を選んで見せる

Amir Mušić氏は、AstraとLTX-2.5を組み合わせたWeb映像インターフェースを紹介しています。
場面、照明、服装、人物を選び、映像の世界が変化するという制作例です。動画には、それらを選ぶ項目と人物の映像が見えます。Amir氏の投稿

映像のあるWebサイトを考えるとき、背景動画を流す以外にも、ユーザーの選択と映像を結び付ける発想がある。

たとえば、アパレルのシーズン提案で、昼と夜の着こなしを切り替える。空間の提案で、照明による雰囲気の違いを見せる。
そんな用途が考えられます。

この場合、デザイナーが決めたいのは、選択肢を増やすこと自体よりも、何を比べてもらうかです。同じ商品で背景だけを変えるのか、服装も変えるのか。比較したいものが毎回全部変わると、判断しにくくなるからです。

投稿からは、事前に用意した動画の切り替えなのか、操作のたびに生成しているのかまでは確認できません。
Astraが単独で動画を作る事例とも区別して見ています。

9. LPとアプリのデザイン統一：既存の画面にも使う

Michael McLaughlin氏は、Astraでデザインシステムを改善し、LPとアプリ全体へ適用したと報告しています。Michael氏の投稿

この投稿は、具体的な変更前後までは確認できていません。そのため、どれだけ見た目が改善したかの評価はできません。
ただ、Astraをどういう仕事に使ったかという点で、残しておきたい事例です。

Web制作では、一画面を新しく作る仕事だけでなく、すでにある画面をそろえる仕事もあります。

ボタンの形、見出しの大きさ、余白、エラーの見せ方。ページが増えるにつれ、少しずつ違ってしまうところです。

ここに使うなら、まずは現状を見てもらい、どの画面にどんな違いがあるかを整理する。そのうえで、基準にする部品や画面を決めて適用する、という進め方が考えられます。

「統一して」と言っただけで全ページの情報量まで同じにしてしまうと、画面ごとの役割が失われます。

共通にするものと、その画面に必要な違いを分けて伝えたいところです。

この事例群から、Astraの何がすごいと感じるか

ここまでの事例を並べると、僕が面白いと思うのは、デザインのアイデアを、操作や実装まで含む形へ進められる可能性です。

商品を選べるようにしたい。キャラクターを動かしたい。自分の作品を、いつもと違う体験で見せたい。そうした構想が、具体的な制作例として出てきている。

この見方は、OpenAIの公式制作記録にもつながります。

Thomas Ricouard氏による住宅の制作記事では、望む雰囲気を伝えてBlenderのシーンを作り、プレビューを見ながら発展させています。
より大きな住宅へ進む段階では、先に間取りを検討していました。

また、最初の案も一度の依頼に対してAstraが内部で確認と修正を行ったと説明されています。OpenAI公式：Architectural visualization with Astra

同氏のゲーム制作記事では、遊ぶ人に何をできるようにしたいかを伝え、画像で見た目の方向を探り、気に入った案を実装の参考にしています。

色やコントラストなど、人が見て判断した修正も紹介されています。OpenAI公式：Building games with Astra

僕なら、Web制作でもこの往復を試したいです。

作りたい体験を伝える。案を見て、方向を決める。画面や動きを作ってもらう。実際の表示を見て、気になるところを具体的に直す。

この流れが作れるなら、最初の依頼文ですべてを言い当てようとしなくてもよい。最初に渡す情報と、途中で判断することを分けて考えられます。

指示のコツは「材料・判断・完成条件」をそろえること

今回の作例を見て、僕がAstraに仕事を頼むときにそろえたいと思ったのは、「材料・判断・完成条件」の三つです。

商品や参考を渡す。大事にしたい見た目を伝える。
どこまで作って、何を確認して戻してほしいかを決める。
デザイナーとして普段やっている準備とレビューを、
そのまま依頼に入れる考え方です。

材料：Astraが判断に使えるものを渡す

商品の説明、掲載する文章、ロゴ、写真、今のサイト、参考のスクリーンショット。自分の頭の中だけにある情報を、作業に使える状態にします。

全部が完成していなくても、用意できたものと、仮で進めてよいものを分ければ依頼できます。

ただ、材料が足りないときに、実績や顧客の声まで作られてしまっては困ります。「写真は仮でよい」「料金は支給した値を使う」「実績は未掲載にする」など、扱いが違うものを区別したいですね。

判断：どこを大事にしたいかを言葉にする

参考サイトのURLだけでも、こちらが何に惹かれたかまでは確定しません。

写真の大きさなのか。ゆっくりした動きなのか。文字の少なさなのか。商品が主役になっていることなのか。

「この参考の写真の扱いと余白が好き。配色と文字は自分のブランドに合わせたい」と伝えると、残したい性質が具体的になります。

修正のときも同じです。「安っぽい」で止めず、そう感じる理由を一つでも足してみる。

ボタンが多すぎる。見出しの大きさが全部同じ。写真より飾りが目立つ。本文が小さく、余白だけが広い。

この説明は、難しいプロンプト技術というより、普段のデザインレビューに近いと思います。

完成条件：何を確認した状態で戻ってきてほしいかを決める

提案の方向だけを見たいのか。ブラウザで表示できる状態が欲しいのか。スマホで開き、メニューを操作するところまで確かめたいのか。

ここが変わると、任せる仕事の量が変わります。

「完成させて」と書く前に、今回の完成を言葉にしてみる。Webページなら、指定した幅での表示、リンクの行き先、必要な操作などを、その制作に必要な範囲で書けます。

細かな実装方法は任せながら、自分が受け取りたい状態は決めておく。今回の指示例も、その形にしています。

そのまま書き換えて使える、3つの日本語指示例

ここからは、読者向けに作った応用例です。海外投稿の原文プロンプトや翻訳ではなく、この文章での生成結果も未検証です。角括弧の部分を、自分の商品や制作環境に置き換えて使ってください。

例1：新しいLPを、動く試作品まで作る

[商品・サービス名]のLPを作ってください。

見に来る人は[具体的な相手]で、[その人の疑問や困りごと]を持っています。
このページを読んだあと、[相談・予約検討・商品理解など]へ進めることが目的です。

添付した商品説明、掲載文、ロゴ、写真を使ってください。
不足する写真は仮素材で進めてよいので、差し替え箇所を報告してください。
実績、レビュー、料金などの事実は作らず、不足していれば未確定として扱ってください。

参考は[URLまたは画像]です。
特に参考にしたいのは[写真の大きさ・文字の強弱・余白・動きなど]です。
ブランドの色と書体は[指定または添付資料]に合わせてください。
一番目立たせたいのは[商品・写真・見出しなど]です。

この材料から構成を考え、ブラウザで確認できる試作品を作ってください。
実装方法は制作環境に合わせて提案・選択してください。

今回はPC幅1440pxとスマホ幅390pxで、文字と画像が重ならず、
必要な情報が読めて、ナビゲーションとページ内リンクが使えるところまで確認してください。
今回の制作で生じた表示・操作の問題は修正し、確認結果と未確認の点を報告してください。
申し込み部分はデモにし、公開と実際の外部送信は行わないでください。

幅の数値は、この例で置いた確認条件です。

これだけで全端末の確認が済むわけではありません。実際には、読者が使う端末や、ページに必要な操作へ合わせて変えます。

この依頼で受け取りたいのは、方向と操作を確認できる試作品です。
そこから公開するなら、実際の写真や文章、申し込みの仕組みなどを仕上げる工程を別に見積もれます。

例2：既存サイトの雰囲気を整える

[対象URLまたはページ]をリデザインしてください。

今の課題は[具体的な見た目・読みやすさ・情報の伝わり方]です。
今回改善したいのは[対象セクションと目的]です。

最初に対象ページと関連するスタイル・部品を確認してください。
ブランドの色、ロゴ、掲載文、既存のリンク先と機能は維持します。
[特に残したい要素]は変更しないでください。

参考は[URLまたは画像]で、取り入れたいのは[具体的な性質]です。
今あるデザインのうち、目的に合っている部分は残してください。

確認用の環境で実装し、対象ページのPC・スマホ表示と、
今回の変更に関係する操作を確認してください。
対象外のページや新機能への変更が必要なら、その理由を先に説明してください。
最後に、変更点、維持した点、確認結果をまとめてください。
本番への反映は行わないでください。

既存サイトには、見た目だけでは分からない役割があることもあります。予約先のリンク、計測、画面間のつながり。

変えたい場所が明確なら、それを対象に絞って渡す方が、戻ってきた変更を見やすくなります。
実際に、Dmytro Krasun氏は、LPの速度評価を改善する依頼で、関係のない文言や機能の変更まで進んだという体験を投稿しています。

本人は後の返信で依頼が抽象的だったことにも触れています。個人の一例ですが、変更範囲を伝える理由として参考になります。Dmytro氏の投稿

例3：「もっといい感じに」を具体的な修正へ変える

現在の画面を添付します。
全体の方向は気に入っています。今回はファーストビューだけ修正してください。

残したい点：
・写真の選び方とトリミング
・背景色と書体
・次のセクションが少し見える構成

直したい点：
・見出しと本文の強弱が小さく、読む順番が分かりにくい
・主要ボタンが周囲に埋もれている
・スマホでは見出しの改行が不自然

写真と色は維持し、文字の大きさ、行間、余白、ボタンの扱いを調整してください。
実際の画面で修正前後を比べ、上の3点がどう変わったかを報告してください。
ファーストビュー以外の変更は今回の対象に含めません。

気に入った点も書いておくのが、この例のポイントです。

直したいところだけを伝えると、残したかったところまで変わってしまうことがあります。全体の方向が合っているなら、そのことも作業の前提として渡せます。

逆に、まだ全体の方向が決まっていない段階なら、一部分に絞らず「写真を主役にする方向で構成から考え直したい」と頼む方が合っています。

依頼の細かさを、今の制作段階に合わせるわけです。

デザイナーが使うなら、最初にどこから試すか

事例を見ていると、いきなり自分も3Dや映像を全部盛りにしたくなります。見ている間に、企画が二回くらい大きくなる。笑

最初の一本なら、今の自分が品質を判断できる仕事を選ぶと、学びを持ち帰りやすいと思います。

普段LPを作っているなら、手元の商品情報と写真から一つのページを作る。Figmaでデザインしているなら、その案をもとに一画面の実装を試す。

既存サイトを運用しているなら、一つのセクションを直す。

そこで見たいのは、完成までの速さに加えて、次のようなところです。

見るところ：判断したいこと

• 第一印象：最初に何の商品・サービスか伝わるか

• 情報の順番：読み手の疑問に沿って説明が進むか

• 文字と写真：主役が分かり、必要な情報が読めるか

• 操作：選んだ結果や次の行き先が分かるか

• 修正のしやすさ：意図を伝えた修正が、望む場所に反映されるか

この確認を一度やってみると、自分が何を説明し忘れたか、どこを任せられそうかが見えてきます。

そこから、商品カスタマイズや3D、映像へ少しずつ範囲を広げればいい。すでに得意な判断を使いながら、作れる範囲を増やしていく進め方です。

次の制作で、いつもより一歩先まで頼んでみる

今回の9事例で見えてきたのは、きれいな画面、商品を選ぶ体験、作品を巡る仕組み、既存デザインの改善という、いくつもの入口でした。

デザイナーが持っている参考を見る目や、違和感を見つける力は、そのままAstraと作業するときの材料になります。

どの写真を主役にしたいか。誰に何を伝えたいか。

どの動きなら、そのブランドらしく感じるか。そこを決めて渡し、できたものを見て次を考える。

まずは一つ、仕事に近いページで試してみてください。

商品情報と参考を渡して、「この状態まで確認して戻してほしい」と書く。

次の依頼文は、それだけでも具体的になります。

その先で、今まで言葉だけで説明していたアイデアが、画面の中で動き始めたら。そこからまた、作ってみたいものが増えるはずです！

調査・確認日：2026年9月7日。各事例は本文中の制作者の元投稿にリンクしています。作業時間や一度の指示での成功、売上・成果への影響は独立検証していません。複数ツールを使う例は本文に記載しました。公式制作記録はOpenAI Developersを参照しています。本文中の応用案・指示例は本記事用に作成しています。