A層をずらすと、奥行きになる
重ねた層を、それぞれ違う量だけ動かす。それだけで、平らな写真に奥行きが出ます。冒頭の動きも、これと同じです。
01元の1枚
この画面は、
1枚の画像から
作りました。
材料は、ChatGPTで作ったポスターの画像が1枚。それをAIに渡して「この感じで作って」と頼んだら、動くページになりました。
同じことができるキットを、プレゼントします。
02作り方
やることは、3つだけ。
-
1ChatGPTで、1枚つくる
下のボタンを押すと、プロンプトが入った状態でChatGPTが開きます。自分のSNSのスクリーンショットを添付して送るだけで、発信の雰囲気や色を読み取った、ポスターのような1枚ができます。
-
2AIに、画像を渡す
Claude Code や Codex に、できた画像とキットの指示ファイルを渡して、ひとこと頼みます。むずかしい言葉はいりません。
-
3動くサイトが、できあがる
大きな英字は打ち直した文字に、色は1行の指定に、写真は枠の中で動く写真になります。下の3つは、同じやり方で作ったサイトです。
作例の内容は架空です。キットのひな形に、画像を1枚ずつ当てはめて作りました。
04しくみ
1枚を、4つの層にはがす。
このページの冒頭は、もう一歩ふみこんで、写真も層に分けています。重なりの順にはがすと、こうなります。
- 1色の面画像は使わず、色の指定だけ。
- 2地面と影人物を消した写真。いちばん奥に敷く。
- 3人物背景を抜いた切り抜き。地面の上に重ねる。
- 4文字画像にせず、キーボードで打ち直した文字。
写真の2と3は、元の1枚をAIの画像生成に渡して、文字と枠を消した版から作り直しています。キットの基本の作り方では、写真は1枚のまま使います。
05種明かし
動いて見える、3つのしかけ。
B文字は、画像ではなく文字
大きな英字は、絵ではなく打ち直した文字です。だから一瞬で書きかえられて、文字数が変わっても、字の幅が伸び縮みして枠にぴったり収まります。好きな英語を入れてみてください。
C軽く作る
動画をたくさん置くと、ページはすぐ重くなります。このページは、数枚の画像を動かすだけにしました。
- 2MB以下作例3つを含めた、ページ全体の重さ
- 2つだけ動かすのは「位置と大きさ」と「透明度」
- 見える時だけ画面の外では動きを止める
- 止められる右下のボタンで、動きをいつでも止められる
06プレゼント
このサイトの作り方を、
まるごと、どうぞ。
画像1枚からWEBサイトを作るための、プロンプト・AIへの指示・ひな形のセットです。
入っているもの
- 画像を作るプロンプトChatGPTに貼るだけ。SNSのスクリーンショットから、ポスターを1枚作ります。いますぐChatGPTで開く
- AIに渡す指示Claude Code や Codex が読むファイル。あなたが読む必要はありません
- サイトのひな形作例と同じ土台。AIが、あなたの1枚に合わせて書きかえます
- 英字の書体幅が伸び縮みする書体。商用でも使えるライセンスのものです
- 使い方頼み方から直し方まで、1枚にまとめた説明
使い方は3つ
- ChatGPTにプロンプトとSNSのスクリーンショットを渡して、画像を1枚つくる
- Claude Code や Codex に、キットのフォルダと画像を渡す
- 「この画像の感じで、サイトを作って」と、ひとことで頼む
できあがったら、「題名を変えて」「色をもう少し明るく」のように、話しかけて直していけます。
この作り方が得意なこと・苦手なこと
得意｜ポスターのように「色の面・大きな英字・写真1枚」でできた画像から、1ページのサイトを作ること。
苦手｜細かい要素が多い画像、何ページもあるサイト、予約や決済のような機能。このページの冒頭のように写真を層に分けて動かすには、追加の画像づくりが必要です。
試した範囲｜Claude Code（Opus 5.5）で、ひな形に3枚の画像を当てはめて、上の作例を作りました。ほかのAIでも読める書き方にしていますが、同じ仕上がりになるとは限りません。
使ってよい範囲
メンバーシップのメンバー向けにお渡ししているものです。
できること｜自分で使うこと、自分用に作り変えること。自分の画像と文章で作ったサイトは、商用で使えます（仕事で使う・お客さまに渡す・ネットに載せる・売る、のどれもOK）。
できないこと｜キットや見本・ひな形を、そのまま、またはほぼそのまま、売る・配る・プレゼント企画に使う・公開すること。「自分が一から作った」と言うこと。
迷った時｜画像や文章を、自分のものに変えましたか。変えていれば、仕事にも販売にも使えます。