見出し画像

【デザインとAI】20260907〜08

デザインとAI

Astraの前には驚き屋にならざるを得ないが、コンテキスト最重要論は揺るがない。


GPT-6 AstraがFigmaを実際に操作し、BIからページデザインまで一気に作れると報告。

issui.txt（@issui_ikeda）

カテゴリ：UI/UX・プロダクトデザイン

GPT-6 AstraがFigmaを実際に操作し、BIからページデザインまで一気に作れると報告。従来のFable5／Opus5／GPT-5.6では「デザイナーとして負けない」と思っていた品質が覆された、と動画付きで検証を公開し評価を求めている実演投稿。

反響: いいね7,000超、保存6,000超。「失業より“使える／使えない”の格差が開く」「Figma Plugin API経由でネイティブレイヤーまで出せた」など追試が拡散。中国語圏でも再現報告が出た。

示唆: 生成の綺麗さより「Figma上で編集可能な成果物を出す」ことが分水嶺になっている。デザイン品質の競争はツール操作そのものへ移り、デザイナーは出力を批評し、制約と意図を渡す側に回る必要がある。まずは小さく1画面をAstra／Codex経由で作らせ、手直しコストを測るのが実務的。

Astra時代のスライド量産の最適解として「0から作らせるな、お手本を真似させろ」と手順を公開。

ふぇね | 山中裕貴（@0xfene）

カテゴリ：グラフィック／プレゼンテーション

Astra時代のスライド量産の最適解として「0から作らせるな、お手本を真似させろ」と手順を公開。社内テンプレPDF→Claude Code/Codexでpptx化→Figma/Canva投入→Computer Useでズレ修正→中身だけ差し替え、仕上げは人間、という実務フロー。

反響: いいね約1,450、保存約1,640。「型は人間、中身はAI」が引用され、品質低下は“デザインをAIに考えさせた瞬間”という指摘に共感が集まった。

示唆: 生成AIは空のキャンバスより「既存の型の中身入れ替え」が強い。社内テンプレとブランドルールを先に固定し、AIには複製・流し込み・微修正を任せる。Computer Useでの後処理まで含めたパイプライン化が、見た目の安定と量産の両立につながる。

FigmaデザインをPNG書き出ししてAstraにHTML化させたところ、ほぼそのまま再現され修正が少ないと報告。

sogitani / baigie inc.（@sogitani_baigie）

カテゴリ：WEBデザイン／フロント実装

FigmaデザインをPNG書き出ししてAstraにHTML化させたところ、ほぼそのまま再現され修正が少ないと報告。データファイルを渡さなくても画像だけで実装品質に近い出力が出た、という驚きの検証。

反響: いいね約1,000。@mochitaro_deが「オートレイアウトをゴリゴリ使う必要が減る」と引用し、実装前工程の簡略化として議論が広がった。

示唆: デザインデータの厳密な構造化より、見た目の意図が伝われば実装まで一気に進む局面が出てきた。一方でアクセシビリティやコンポーネント再利用は後工程に残る。画像プロトタイプ→HTMLの往復を短縮し、人間は情報設計と例外処理に時間を割く方が投資対効果が高い。

AstraにFigmaのWebデザインを実装させたところ一発で再現し、レスポンシブまで付いてきたと報告。

もち | 経営・デザイン・AI（@mochitaro_de）

カテゴリ：WEBデザイン／UI

AstraにFigmaのWebデザインを実装させたところ一発で再現し、レスポンシブまで付いてきたと報告。オートレイアウトをほとんど使っていないファイルでも精度が出たため、ChatGPTをProへ上げると明言した実践ログ。

反響: いいね約450。現場デザイナーから「画面を見ているのか」という驚きと、課金判断の参考にする声が中心。

示唆: 有料プラン投資は「綺麗な画像」ではなく「実装可能な再現」で回収する発想が現実的。Figmaの作り込みを減らしても通るなら、コンポーネント設計の目的を“人間の編集しやすさ”から“AIへの意図伝達”へ再定義するタイミング。

学習ダッシュボードUIでAstra×Figmaを試用。

ken｜旅するデザイナー（@ken_tbdz）

カテゴリ：UI/UX

学習ダッシュボードUIでAstra×Figmaを試用。ChatGPTから直接Figmaへ書けなかった壁がAstraで消え、Codex経由も不要になったと動画で示す。オートレイアウト付き、ライブラリ参照も可能と具体的に報告。

反響: いいね約170、保存約190。「ようやく書き込みできた」という実務者の安堵と、デザインシステム参照の可否を確認する返信が目立つ。

示唆: エージェントが既存ライブラリを読む前提でファイルを整えると、生成物のブレが減る。新規キャンバスよりトークン・コンポーネント名・バリアントを先に渡す運用が効く。まずはダッシュボードのような構造化された画面で試験し、手直し箇所をチェックリスト化するのがよい。

AIコーディング前に使うDesign Markdown生成サイトを9つ紹介。

Harshil Tomar（@Hartdrawss）

カテゴリ：UI/UX・デザインシステム

AIコーディング前に使うDesign Markdown生成サイトを9つ紹介。色・余白・半径・コンポーネント状態を.mdにし、Claude CodeやCursorの制約として渡すと「premiumに」といった曖昧指示より一貫したUIになる、という実務手順。

反響: いいね約400、保存約785。同様ツールを作っている開発者から「サイトを.md化する」補足が付き、ブックマーク用途として広がった。

示唆: 2026年の差別化はプロンプトの上手さより「制約ファイル」の質。視覚方向を先に言語化し、エージェントに守らせる。クライアントワークでは参照画像5〜6枚＋DESIGN.mdを着手前セットにするだけで、スロップ化をかなり防げる。

UI/UX向けインスピレーションサイト一覧。

Abraham John（@Abmankendrick）

カテゴリ：UI/UX

UI/UX向けインスピレーションサイト一覧。通常の画面・ナビ・CTAに加え「AI agent Design .md Files」を独立項目として挙げ、エージェント前提の資料収集を推奨するブックマーク投稿。

反響: いいね約1,700、保存約3,000。リスト保存が主目的で、「.mdを最初に探す」層が visua inspo と同じ棚に置き始めたことが反応から分かる。

示唆: 参考サイトの役割が「人間が見て盗む」から「エージェントに渡す素材」へ拡張している。ムードボードとDESIGN.mdを同じフォルダで管理し、画面生成前に必ず読ませる運用が、ブランドのばらつきを抑える最短ルート。

海外でバズったAstra事例の日本版として、国内勢がFigma・動画・ゲーム・Blenderまで作らせた10事例と再現プロンプト…

ラッキー｜AIを武器に。（@lucky_note_lab）

カテゴリ：総合（UI／モーショングラフィック／3D）

海外でバズったAstra事例の日本版として、国内勢がFigma・動画・ゲーム・Blenderまで作らせた10事例と再現プロンプト付き記事を紹介。「すごい」で終わらず手順まで落とす実践まとめ。

反響: いいね約330、保存約430。有料級という評価と、自分の領域で追試する indies の反応が中心。

示唆: モデル名の興奮より、領域別の「何を入力し何を直したか」が資産になる。社内では成功事例をプロンプト付きで10本ストックし、失敗パターンも残す。ツール比較より再現手順の共有がチームの学習速度を上げる。

スライド生成ではClaude・ChatGPTよりKimi AIが抜けていると実感 based に報告。

ふじくるり｜AI×スライド制作（@fujikururi）

カテゴリ：グラフィック／スライド

スライド生成ではClaude・ChatGPTよりKimi AIが抜けていると実感 based に報告。コンサル級のグラフ表現が可能で、手順を踏めばデザインもコントロールできると動画付きで試用を促す。

反響: いいね約140、保存約190。「グラフが実用レベル」への関心が高く、特定モデル固定ではなく用途別の使い分け議論になった。

示唆: 万能モデル信仰より、成果物タイプでツールを分ける方が早い。スライドは構造とデータ可視化、UIはFigma操作、世界観は画像生成、と役割分担する。自社の「勝ちパターン手順」を1本文書化しておくことが再現性の核。

Computer Use型の「画面を操作するAIデザイナー」を紹介。

こはく（@Kohaku_NFT）

カテゴリ：グラフィック／デザインオペレーション

Computer Use型の「画面を操作するAIデザイナー」を紹介。「文字を大きく」「配色を統一」と伝えると、画面を見てクリックしながらCanva等を編集する様子を動画で示す。設定作業への応用も示唆。

反響: 再生・閲覧は多いがいいねは少数。ただし「既存ツールを捨てずにエージェント化できる」点に実務者の関心が向いている。

示唆: 新ツール移行より、使い慣れたCanva／Figmaの操作をエージェントに委譲する方が導入摩擦が低い。指示は結果（大きく、揃える）でよく、手順はAIに任せる。一方で誤クリックリスクがあるため、重要ファイルは複製してから試す運用が必須。

【全体的な傾向】

この24時間の「デザイン＋AI」タイムラインは、抽象的な「デザイナー終了論」より、GPT-6 AstraのFigma操作と実装再現、Design Markdown、お手本スライドの型流し込み、Computer Useによる既存ツール操作、という検証ログが中心だった。
日本圏ではissui氏のAstraデモが震源になり、PNG→HTMLの再現、オートレイアウトなしでも通る、ライブラリ参照が可能、といった「現場で明日試せる」粒度の投稿が保存されやすい。
英語圏では「inspiration site」と「DESIGN.md generator」が同時にブックマークされ、視覚の収集と制約の言語化がセットで語られている。

共通する実務メッセージは三つある。
第一に、ゼロから美しい画面を生ませるより、型・トークン・参照画像・既存ファイルを先に渡す方が品質が安定する。
第二に、競争軸はピクセルの上手さから「編集可能な成果物を正しいツール上に残すこと」と「何を残し何を捨てるかの判断」へ移っている。
第三に、モデル単体の優劣議論は薄れ、スライドはKimi、UIはAstra×Figma、制約は.md、修正はComputer Use、というツールチェーン設計が主戦場になっている。

リスクも同時に可視化された。
平均的に綺麗な出力は増えるが、ビジネス文脈・可読性・優先順位は人が定義しないと「それっぽいだけ」になる。
バナー添削やWebディレクション側の投稿は、生成量が増えるほど訴求設計と批評の価値が上がると繰り返し指摘している。
またIllustratorでWebを組むような旧来フローを笑う投稿が高エンゲージメントを取る一方で、完全自動化を信じ切る声は少なく、「型は人間、中身はAI、最終確認は人間」が現実的な合意になりつつある。

組織視点では、デザインシステムの置き場がFigmaファイルだけでなく、エージェントが読めるテキスト（DESIGN.md、コンポーネント説明、禁止事項）へ広がっている。
採用や育成の話も「作れる人」から「AIの出力を切り、プロダクト判断できる人」へ寄っている。
直近で試すなら、
(1) 既存1画面をAstra等で再現し差分を記録する
(2) ブランドのDESIGN.mdを1枚作る
(3) 社内テンプレをAIに模倣させる
の3点セットが、ニュース消費で終わらせない最短の実務接続になる。

【関連ハッシュタグ】

#デザインとAI
#AIxデザイン
#FigmaAI
#GPT6Astra
#DESIGN_md
#ClaudeDesign
#生成AIデザイン
#UIUX
#デザインシステム
#ComputerUse

今日のプロンプト

【全人類パステロイド化計画】なんてやってみてもいいでしょうか？

城野ぱすてる

カテゴリ：グラフィック／キャラクターデザイン（メカ・イラスト）

【全人類パステロイド化計画】なんてやってみてもいいでしょうか？ 好きな画像と⬇️のプロンプトをChatGPTに投げるとそれを反映したパステロイドを生成するプロンプトを作りました！ 武器とポージングは予め入れてありますが、衣装と装飾はわりと個性でるかも？ まぁお遊びだと思ってやってみてください🙏✨️

添付の人物を、獣耳型フルフェイスを持つ精密な人型メカへ再設計し、全身画像を1枚生成してください。説明文は不要です。 ■ 元人物の継承 人物の配色、衣装、髪、特徴的なモチーフを抽出。衣装の特徴を一部布として残し、モチーフの曲線や重なりを肩・胸郭・腰などの装甲形状へ反映してください。単に模様を貼り付けず、立体構造へ翻訳します。元絵の画風、筆跡、背景は継承しません。 ■ 頭部と身体 人物に似合う獣を一種類選び、耳を頭部一体型の硬質センサーに変換。本物の耳や、蝶の羽による代用は不可。 顔は完全に不透明な、滑らかで無地の仮面。目・口・鼻・発光眼・文字・模様・顔の凹凸は一切なく、素顔も見せません。機構は側頭部や首に配置します。 成人体形の優美な人型。陶磁器質の装甲と、大腿部・上腕部などの柔らかな肌を共存させ、関節や装甲の隙間に精密な金属フレーム、配線、駆動部を見せてください。胸部と骨盤部は衣装または装甲で覆います。 ■ 兵装 次から似合うものを一種類だけ選択： 日本刀、大剣、スナイパーライフル、アサルトライフル、バズーカ、拳銃、片腕装着の巨大メカハンド、背部の巨大サブアーム二本、ダガー、直剣と盾、大鎌、弓、薙刀、ウォーハンマー、バトルアックス、槍、ショットガン。 武器本来の輪郭、刃・銃身・柄・握りを明確に保ち、その内側を精密メカ化。異種武器の合体や部品の増殖は禁止。大型兵装は大胆に巨大化し、拳銃・ダガー・日本刀・直剣は扱える比率を維持。装着型の場合は手持ち武器を追加しません。通常の手と巨大メカハンドは五本指、弓は引かずに保持します。 ■ 控えめな装飾変化 スネは一枚曲面・分割装甲・重なった装甲から、手は磁器手甲・分節装甲・金属フレームから、ブーツは細い補強ヒール・ブロックヒール・ウェッジ・低い厚底から選択。 元人物の特徴に合わせ、細い金属縁や小さなジョイントを少量追加。全身の造形を統一し、左右の関節構造と踵の高さは揃えます。 ■ 質感と照明 高級製品広告のようなフォトリアルCG。 主装甲は厚みのある施釉磁器で、広い滑面に大きな照明が映り込む艶。副装甲は深い地色の高光沢ラッカー。金属は鋭い反射、内部機構は暗く精密、肌は柔らかな陰影、布は自然なドレープとして描き分けてください。 錆、ひび、塗装剥離、筆跡、玩具的な質感は不要。白〜淡いグレーのスタジオと穏やかな反射床。大きな斜め上の面光源と側面光で曲面を見せ、暗部と地色を残します。 ■ 構図とポーズ 視点は「膝の高さから軽く見上げる」「横から」「やや上から見下ろす」から一つ選択。 ポーズは半歩前の構え、戦闘直前、歩行の一瞬、横向きの振り返り、重量物を支える姿勢、片腰へ重心を移す姿勢から選び、兵装に合わせて調整してください。 自然なパースと身体のひねりで迫力を出し、極端な歪みは避けます。接地と重心を成立させ、仮面・衣装・ボディの特徴を隠さず、耳・足先・兵装の先端まで収めてください。文字やロゴは不要です。

示唆: 参照画像の「配色・衣装・モチーフ」だけを継承し、画風や背景は捨てて立体メカへ翻訳する指示が明確。禁止事項（素顔、発光眼、異種武器合体、玩具質感）と選択リスト（兵装・視点・ポーズ）で再現性を上げている。キャラのアイデンティティを保ったまま別メディア化するときの型として、ブランドキャラのメカ化やフィギュア広告にも転用しやすい。

美術館のポスターみたいな1枚を、自分のアイコンで作ってみました！

ミヤマ

カテゴリ：グラフィック／広告・エディトリアルデザイン

美術館のポスターみたいな1枚を、自分のアイコンで作ってみました！🐼 ChatGPTにプロフィールのスクショを渡すと、色やモチーフを使った架空の企画展に。わたしのパンダは、見上げるほど巨大な展示になりました〜😂 自分なら何が飾られる？ コピペ用プロンプトは次へ！👇

# 架空の企画展・ミュージアム広告生成プロンプト あなたは、一流の広告クリエイティブディレクター、アートディレクター、展覧会デザイナー、エディトリアルデザイナー、ブランドデザイナー、タイポグラファー、UXデザイナー、マーケターです。 添付されたSNSプロフィール、X、Instagram、note、LP、投稿スクリーンショットを読み取り、その人物・ブランド・サービスの本質を、架空の美術館企画展として再構成した高感度なエディトリアル広告ポスターへ翻訳してください。 SNS画面そのものは再現せず、説明や分析も表示せず、完成画像を1枚生成してください。 ## 入力 ブランド名・人物名 {{未入力なら添付画像から読み取る}} 商品・サービス・活動内容 {{未入力なら添付画像から読み取る}} 日本語コピー {{短い1フレーズ。未入力ならAIが補完}} 英語タイトル {{未入力ならブランドの思想から1〜4語に再構成}} 補足情報 {{最大3項目}} サイズ・比率 {{縦4:5}} 用途 {{SNS投稿 / ブランド告知 / note告知 / 講座広告 / サービス紹介}} ## コンセプト 添付画像から、ブランドの思想、ターゲット、温度感、色、提供価値を読み取り、 「もしこのブランドそのものが、美術館の企画展になったら？」 という発想でデザインしてください。 単なる美術館風ポスターではなく、 ブランドの思想 → 展覧会テーマ → 象徴的な展示物 → 空間・サイン・タイポグラフィ まで一貫して設計してください。 説明ではなく象徴。自己紹介ではなく企画展。商品紹介ではなく文化的な体験。 ## メイン展示 中央または視線の焦点に、ブランドの思想を象徴する謎めいた展示物を1つだけ配置してください。 展示物はテーマに応じてAIが自由に発想してください。 仕事内容をそのまま立体化するのではなく、ブランドが与える体験や思想を象徴化してください。 展示物は1つを主役にし、小物を大量に置かないでください。 ## 人物 人物を1〜3人だけ、非常に小さく配置してください。 人物はブランド本人の肖像ではなく、来場者・キュレーター・小さなスタッフのような存在として扱ってください。 顔は描き込みすぎず、人物より展示物と空間を主役にしてください。 ## グラフィックシステム 現代美術館や文化施設の企画展ビジュアルのように設計。使用要素は展覧会タイトル、展示番号、小さなキャプション、会場サイン、チケット、展示ラベル、グリッド、日付などから3〜5種類だけ。ひとつの美術館VIシステムとして統一。 ## タイポグラフィ 英語を主役にし、情報量は少なく。巨大文字と極小文字のジャンプ率を大胆に。現代的なサンセリフ／コンデンス／グロテスク。日本語は小さく端正に。長文や白帯コピーは禁止。 ## 配色 添付から主要カラーを抽出し3〜4色に再構成。大きな色面と小さなアクセント。 ## レイアウト 縦4:5。余白を広く。視線は展覧会タイトル → 展示物 → 小さな人物 → キャプション。 ## 禁止 SNS画面の再現、普通の商品広告、展示物の大量配置、人物を大きく、顔を主役、Canvaテンプレ風、YouTubeサムネ風、情報商材風、ごちゃごちゃしたコラージュ など。

示唆: 「スクショを読む→思想を象徴物に翻訳→VIとして組む」まで役割と禁止事項が設計ブリーフになっている点が強い。商品をそのまま描かせず「企画展」に変換するので、自己紹介バナーや講座告知が安易なポートレート広告になりにくい。余白・ジャンプ率・人物の小ささなど、エディトリアルの判断基準をプロンプトに埋め込んでいるのが実務的。

無料のGemini で「SVGアイコン」を1 度に 40 個生成しました。

KAWAI

カテゴリ：UI／アイコン・グラフィックデザイン

無料のGemini で「SVGアイコン」を1 度に 40 個生成しました。各アイコンの下にダウンロードボタンを付けているので、単体で SVG 形式のアイコンデータを入手可能です。拡大縮小しても画質が荒れることもありません。プロンプトをリプに貼るのでぜひ試してください。

シンプルで汎用性が高いアイコン40種類をSVG形式で生成してください。必ずCanvasに描画してください。色はライトブルー。背景は白。線のアイコン。マテリアルデザイン。SVGアイコンをSVGデータとしてダウンロードできるボタンを付けてください。

示唆: 画像1枚ではなく「Canvasに描画＋個別ダウンロードボタン」まで指定しているため、生成物がそのまま制作アセットになる。色・線・スタイル・点数を短く固定することで、無料Geminiでも量産の再現性が出る。UIキットや資料用アイコンを急ぐときに、ラスタ画像生成→トレース、という手順を飛ばせるのが示唆。短いプロンプトでも「出力形式（SVG＋UI）」を書くと仕事用になる、という実例。

Astraで「ギャラクシアンみたいなゲーム作って」と言ったら、4分21秒で動くものが出てきた・・・Astra、恐ろしい子・・・

STAR SQUADRON — 2Dシューティング
https://star-squadron-arcade.gladdesign.chatgpt.site/

いいなと思ったら応援しよう！