5秒の演出は、終わった後まで作る

5秒の演出は、5秒後にページを使えるところまで作って完成する。動く文字や作品画面がきれいに並んでも、終わったあとに本文へ進めなければ入口で止まる。2026年9月7日、MON-AIのトップに動きを加えた作業で、最後まで確認したのはその境目だった。

入口に何を置くかを決めた

今回のサイトは、MON-AIが何を作れるかを紹介するページだ。作品の特徴と実際の画面を見てもらう。入口には強い印象を残す動きを置き、約5秒でメインページにつなげる。この目的と長さを人間が決め、構成、実装、画面の検査、修正をGPTで進めた。

演出は、文字から始まり、作品の画面が現れ、最後にMON-AIのロゴを見せる。そこから画面が開いて本文へ続く。短い演出でも、入口だけで作業を区切ると、後ろにある作品紹介まで確認が届かなくなる。

工程分解表：トップの演出を公開するまで

できる側——終わった状態まで検査に渡す

約5秒で演出が消えることは、時間を測って確認できる。ただ、それだけでは足りない。演出中に止めていたスクロールが戻るか。本文のリンクを押せるか。見出しから読み進められるか。終了後に成立してほしい状態も、検査の対象にした。

スキップボタンを押した場合も、同じ本文へ進める必要がある。途中で終えた人だけ操作できない状態が残れば、スキップを付けた意味がなくなる。通常の終了と、途中からの終了をそれぞれ確かめた。

さらに、作品の場所へ直接つながるリンクや、前のページから戻ってきた場合には、入口の演出を省く。端末側で動きを減らす設定を使っている場合も省く。サイトに来る人が全員、同じ入口から同じ順番で見るとは限らない。その条件を先に分けておけば、GPTに渡す確認も具体的になる。

難しい側——動きと読みやすさを両立させる

検査項目が通っても、見た目に直す場所は残った。スマホの幅で確認したとき、「MAKE.」の最後の点が画面の外へはみ出していた。画面を見て文字の大きさを調整し、もう一度確かめた。時間どおりに終わる検査だけでは、この修正には届かない。

確認した画面幅では読める状態になった。すべての端末での読みやすさや、実際に作品まで進む人が増えたかは未確認だ。

もうひとつ残るのが、何のために動かすかという判断だ。MON-AIの紹介が目的なら、演出の先で作品を見られる必要がある。印象を強くする指示だけで終えると、入口を作り込むほど、本文へ渡す条件が抜けやすくなる。

自社の実例——公開先で確かめて区切った

2026年9月7日の公開後には、実際のMON-AIのURLでも切り替えを確認した。PCとスマホ幅で、約5秒後にメインページへ進み、操作できる状態に戻るところまで見た。スキップした場合も確かめた。

この確認は、手元で作った画面だけを見ていた段階とは分けている。手元で完成していても、公開先に同じ内容が届いているとは限らない。配信された内容を照合し、公開ページで動かす。その工程を通して、この作業を区切った。

導入までの手順

1. 入口で伝えることと、演出のあとに利用者がする操作を、一緒に決める。
2. 通常終了、スキップ、動きを省く場合について、それぞれ本文へ進める条件を書く。
3. 公開先でも画面と操作を確認し、確認できた範囲と未確認の効果を分けて記録する。

動きを作る指示に、終わったあとの状態まで含める。今回の制作でGPTに渡した仕事は、そこまでだった。強い入口を作ったら、その先の作品へきちんと渡せるかを見る。ページの完成を決めるのは、そのつながりだ。