ピンクのパーカーを着た人が、しま模様の影が落ちる地面からカメラへ手を伸ばしている

メンバー限定プレゼント

画像1枚から作るWEBサイト

元のポスター。ピンクの枠に黒い巨大な文字で CREATE と A NEW.、中央にカメラへ手を伸ばす人物の写真
元の1枚(1024×1536)

01元の1枚

はじまりは、
この1枚だけ。

材料は、ポスターの画像が1枚。写真も、文字も、ピンクの枠も、ぜんぶくっついた1枚の絵です。

いま見てきた冒頭の画面は、この1枚だけを元に組み直しました。

02分解

1枚を、4つの層にはがす。

くっついたままでは動かせません。まず、重なりの順にはがします。

  1. 1
    ピンクの地画像は使わず、色の指定だけ。
  2. 2
    地面と影人物を消した写真。いちばん奥に敷く。
  3. 3
    人物背景を抜いた切り抜き。地面の上に重ねる。
  4. 4
    文字画像にせず、キーボードで打ち直した文字。

写真の2と3は、元の1枚をAIの画像生成に渡して、文字と枠を消した版から作り直しています。

03種明かし

動いて見える、3つのしかけ。

A層をずらすと、奥行きになる

重ねた層を、それぞれ違う量だけ動かす。それだけで、平らな写真に奥行きが出ます。冒頭の動きも、これと同じです。

地面、文字、人物の3つの層を重ねた見本

B文字は、画像ではなく文字

大きな CREATE は、絵ではなく打ち直した文字です。だから、あとから一瞬で書きかえられます。下の欄に、好きな英語を入れてみてください。

CREATE

C軽く作る

動画をたくさん置くと、ページはすぐ重くなります。このページは、数枚の画像を動かすだけにしました。

  • 1MB以下ページ全体の重さ
  • 2つだけ動かすのは「位置と大きさ」と「透明度」
  • 見える時だけ画面の外では動きを止める
  • 止められる右下のボタンで、動きをいつでも止められる

04プレゼント

動く資料キットを、
どうぞ。

クリックで1枚ずつ動く「動く資料」の完成見本と、同じ型をAIに作ってもらうためのひな形・指示のセットです。

入っているもの

  • 完成見本「時間の棚卸し」7枚の動く資料。最後の1枚は自分で触れる画面
  • ひな形AIが題材を入れ替えるためのファイル
  • AIに渡す指示AIが読むファイル。あなたが読む必要はありません
  • 見本の表 2つ個人の例と、チームの例(どちらも架空の数字)
  • 使い方開き方から頼み方まで、1枚にまとめた説明

使い方は3つ

  1. 完成見本をブラウザで開いて、触ってみる
  2. ClaudeやChatGPTなどのAIに、ひな形と指示の2つを渡す
  3. 「家計の見直しの動く資料を作りたい」のように、ひとことで頼む

自分の本物の数字をAIに渡す必要はありません。AIには架空の数字で作ってもらい、自分の数字はできあがったページに自分で貼ります。

この型が得意なこと・苦手なこと

得意|時間・お金・回数のように「足し算できる数字」を、合計から内訳、減らせそうな分へと7枚で見せる資料。

苦手|数字のない資料(自己紹介・手順の説明・企画書)、月ごとの推移やAとBの比較、点数や順位、売上のように増やすことが目的の題材。

試した範囲|Claude(Opus 5.5)で、家計の見直し・推し活の予算・チームの会議時間の3つを作って確かめました。ほかのAIでも読める書き方にしていますが、同じ仕上がりになるとは限りません。

使ってよい範囲

メンバーシップのメンバー向けにお渡ししているものです。

できること|自分で使うこと、自分用に作り変えること。自分で調整して作り変えたものは、商用で使えます(仕事で使う・お客さまに渡す・ネットに載せる・売る、のどれもOK)。

できないこと|見本やひな形を、そのまま、またはほぼそのまま、売る・配る・プレゼント企画に使う・公開すること。「自分が一から作った」と言うこと。

迷った時|題材や数字や文章を、自分のものに変えましたか。変えていれば、仕事にも販売にも使えます。