A層をずらすと、奥行きになる
重ねた層を、それぞれ違う量だけ動かす。それだけで、平らな写真に奥行きが出ます。冒頭の動きも、これと同じです。
01元の1枚
この画面は、
1枚の画像から
作りました。
材料は、ChatGPTで作ったポスターの画像が1枚。それをAIに渡して「この感じで作って」と頼んだら、動くページになりました。
同じことができるキットを、プレゼントします。
02作り方
やることは、3つだけ。
-
1ChatGPTで、1枚つくる
下のボタンを押すと、プロンプトが入った状態でChatGPTが開きます。自分のSNSのスクリーンショットを添付して送るだけで、発信の雰囲気や色を読み取った、ポスターのような1枚ができます。
-
2AIに、ひとこと話しかける
キットのフォルダを、ChatGPT（Codex）か Claude（Code）のデスクトップアプリで選んで、「これ使いたい」と送ります。あとはAIが、画像の入れ方から作り方・直し方まで、番号で答えられる質問で案内します。むずかしい言葉はいりません。
-
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の案内・ひな形のセットです。
入っているもの
- はじめに最初に読む1枚。やることは3つだけです
- AIの案内フォルダを選んだAIが自動で読むファイル。画像の入れ方から公開まで、番号で答えられる質問で案内します。あなたが読む必要はありません
- 画像を作るプロンプトChatGPTで、SNSのスクリーンショットからポスターを1枚作ります。いますぐChatGPTで開く
- サイトのひな形と作例3つ上の作例と同じ土台（画面の下の移動用の帯つき）。AIが、あなたの1枚に合わせて書きかえます
- 英字の書体幅が伸び縮みする書体。商用でも使えるライセンスのものです
使い方は3つ
- 受け取ったZIPを解凍する
- ChatGPT のデスクトップアプリ（Codex）か、Claude のデスクトップアプリ（Code）で、解凍したフォルダを選ぶ
- 「これ使いたい」と送る
あとはAIが、元にする画像づくり（ChatGPTのプロンプト）から、作る・見せる・直す・使い方（自分で見る・ファイルで送る・ネットに公開）まで案内します。直したい所は「題名を変えて」「色をもう少し明るく」のように話しかけるだけ。画像がなくても、見本の画像で練習できます。
この作り方が得意なこと・苦手なこと
得意｜ポスターのように「色の面・大きな英字・写真1枚」でできた画像から、1ページのサイトを作ること。ネットに公開する時は、AIが手順を案内します（ChatGPT なら Sites、Claude なら Cloudflare Pages）。
苦手｜細かい要素が多い画像、何ページもあるサイト、予約や決済のような機能。このページの冒頭のように写真を層に分けて動かすには、追加の画像づくりが必要です。
試した範囲｜ChatGPT のデスクトップアプリ（Codex）で作り、ChatGPT Sites で公開するところまでは、作り手が確かめました。Claude（Code）では、初めてキットを読むAIの立場で、作る・直す・公開の準備までを何回か通して試しました。Cloudflare Pages での公開と Windows では、まだ試していません。AIによって、同じ仕上がりになるとは限りません。
使ってよい範囲
メンバーシップのメンバー向けにお渡ししているものです。
できること｜自分で使うこと、自分用に作り変えること。自分の画像と文章で作ったサイトは、商用で使えます（仕事で使う・お客さまに渡す・ネットに載せる・売る、のどれもOK）。
できないこと｜キットや見本・ひな形を、そのまま、またはほぼそのまま、売る・配る・プレゼント企画に使う・公開すること。「自分が一から作った」と言うこと。見本の画像や作例の画像を、自分のサイトに使うこと。
迷った時｜画像や文章を、自分のものに変えましたか。変えていれば、仕事にも販売にも使えます。