GPT Image 2.6 用スケルトン読み込みアニメーションのプロンプト
グレーのスケルトンが左から右へきらめき、アバターとテキスト付きの本物のカードがフェードインする、カードリスト読み込みのループ GIF。
プロンプト
カードのリストが読み込まれるループアニメーション：グレーのスケルトン表示が左から右へきらめき、その後アバターとテキスト付きの本物のカードがフェードインする。すっきりしたライトな UI。
- 対応モデル
- GPT Image 2.6
- 収録セット
- GPT Image 2.6 プロンプト
このプロンプトについて
スケルトン画面は、動くところを見られると合意しやすくなります。プロンプトはカードのリストの読み込みを描きます。グレーのプレースホルダーが左から右へきらめき、そのあとアバターとテキスト付きの本物のカードがフェードインします。すっきりしたライトな UI です。GIF なら、誰かが実装する前に、読み込みがどう感じられるべきかをチームに見せられます。
自分のリストが実際に持つカードを説明してください。商品グリッドなら画像のブロックと価格の行、フィードならアバター、2 行のテキスト、画像です。プレースホルダーをいくつ出すか（3 つか 4 つで通常は十分）と、画面がモバイルかデスクトップかも書きましょう。プロンプトでは指定されていません。
スケルトンは最終的なレイアウトを映すべきなので、まず読み込み後の状態を静止画で生成し、アニメーションの参照画像として添付してください。作る段階では、同じ形を使ったきらめきを CSS アニメーションにするよう Codex に頼みます。
同じセットのほかのプロンプト
- GPT Image 2.6 用トグルスイッチのアニメーションプロンプト設定のトグルがオンに切り替わる、つまみが右へスライドし、トラックが緑に満たされ、ラベルが「オフ」から「オン」に変わるループ GIF。
- GPT Image 2.6 用引っ張って更新のアニメーションプロンプトモバイルのフィードで引っ張って更新する、リストが下に引かれ、スピナーが回転し、新しい項目が上から入ってくるループ GIF。
- GPT Image 2.6 用参照画像でスタイルを変えるプロンプト現在のアプリ画面を、参照画像の色、タイポグラフィ、角の半径でスタイル変更しつつ、レイアウトと文字はそのままに保ちます。
- GPT Image 2.6 用マークアップ編集でボタンを 1 つ変えるプロンプト透明なオーバーレイでボタンを 1 つ丸く囲み、そのボタンだけを濃い緑のベタ塗りで「続ける」と書かれたプライマリのスタイルに変えます。
- GPT Image 2.6 用マークアップ編集でセクションを差し替えるプロンプトデザインの一部を丸で囲み、その部分だけを既存のスタイルに合わせた推薦の声のカードに差し替え、それ以外はそのままにします。
- GPT Image 2.6 のモックアップを HTML にする Codex 用プロンプトGPT Image 2.6 のモックアップを Codex で自己完結した HTML ファイル 1 つに。レイアウト、余白、色、文字を合わせ、アイコンはインライン SVG にします。