3D Webサイト・フライオーバーの作り方

Webサイトのフライオーバーは、縦長のページを動きのあるプレゼンテーションに変えます。カメラが各セクションを進みながら重要なメッセージに注目を集め、最後に引いてデザイン全体を見せます。この例では、カメラが近づくと3枚のテキストカードが起き上がります。

製品発表やポートフォリオの紹介では、強調するメッセージを3つ選びましょう。カメラの移動がそれらを短いプレゼンテーションとしてつなぎ、起き上がるカードが各メッセージに注目する時間を作ります。

1. ページとカメラの動きを指定する

始める前に、冒頭の見出し、機能を伝える3つの短いメッセージ、ブランドカラーを1色決めます。それらをプロンプトに含めると、アニメーションで示す内容が具体的になります。

iArtをAnimationモードで開き、16:9のキャンバスを選びます。以下の指示文を出発点にして、角括弧の中を自分の内容に置き換えてください。

[製品名]を紹介する15秒のWebサイト・フライオーバーを作成してください。「[メインの見出し]」という見出しと、「[機能1]」「[機能2]」「[機能3]」の3つのセクションを持つ縦長のランディングページをデザインしてください。背景は白、文字は暗い色、アクセントは[ブランドカラー]にしてください。

カメラはページの低い位置を、カットなしの連続したワンショットで進みます。各機能に近づくと、そのセクションのテキストカードを下端から起こしてください。下端はページにつなげたままにし、カードの下に影を落とし、見出しを読める状態に保ちます。カメラが通過したらカードを元の位置に戻してください。

3つ目の機能を通過した後、カメラを上昇させてページ全体を見せます。その後、冒頭の見出しへ戻り、最後までその構図を保ってください。動きは滑らかにし、セクション間でカットを入れないでください。ナレーションと音楽は不要です。

この指示文で重要なのは、カメラの経路とカードの動きです。色や装飾を調整する前に、プレビューでこの2点を確認します。

2. ひと続きの空間をカメラで進む

ページの傾きが遠近感を作ります。フライオーバーの感覚を生むのは前進する動きです。カメラは同じ縦長ページの新しいセクションを次々と通過します。この実装では、近い物体が遠い物体より大きく見えるThree.jsの透視投影カメラを使っています。詳しくは、Three.jsカメラの公式実装とパラメータの説明をご覧ください。

時間	カメラの動き	確認する点
0～7.8秒	ページに沿って低い位置を進む	3枚のテキストカードに順番に注目が集まる。
7.8～9.2秒	ページの上空へ上昇する	レイアウトが見えてくるにつれ、カードが元の位置に戻る。
9.2～9.5秒	短い真上からのショット	縦長のページ全体が画面に収まる。
9.5～10.4秒	冒頭のセクションへ戻る	意図した締めくくりの構図にカメラが到着する。
10.4～15秒	最後の構図を保つ	見出しが読みやすい状態を保つ。

真上からのショットは短くし、最後の見出しを読む時間を長めに取ります。別のデザインに応用する場合は、テンポを調整する前に、各場面で何を見せたいのかを決めましょう。

3. テキストカードを下端から起こす

ヒンジの位置によって、カードがどう接続されて見えるかが変わります。回転の中心を下端に置き、その端をページ上に固定します。パネルの中心を軸に回転させると下端も動くため、カードが起き上がるのではなく、物体が浮いているように見えます。

この例では、各カードが最大68度まで起き上がります。薄い側面とページに落ちる影によって、ページから離れていることが伝わります。前面は明るさを保ち、見出しを読めるようにします。

カードを起こすタイミングをカメラの接近に合わせます。カードが主役になるときに起こし、少し保持してから、カメラの通過に合わせて戻します。通過中でも読めるよう、各カードの内容は短いメッセージ1つに絞りましょう。

4. カメラを変える前に内容を調整する

最初のバリエーションでは、ページ構成を維持したまま、メインの見出し、3枚のカードのメッセージ、アクセントカラーだけを変えます。変更点を絞ると確認しやすくなります。ページの長さ、カードの寸法、カメラの経路を同時に変えると、どの変更が構図の問題を起こしたのか判断しにくくなります。

3枚のカードには「Describe. Or upload.」「Change it by saying so.」「Export. Then share.」と書かれています。それぞれが1つのメッセージを伝え、周囲のページが文脈を補います。製品発表ページなら3つの利点、ポートフォリオなら3つのプロジェクトを紹介できます。編集を依頼する前に差し替える文言を用意し、カメラの通過中に読める短い見出しにしましょう。

例の構成要素	変更する内容	変更後に確認する点
冒頭と最後の見出し	製品名と中心となる訴求内容。	文字が収まり、最後の静止時間を通して読める。
起き上がる3枚のカード	3つの機能、プロジェクト、またはメッセージ。	不自然な改行がなく、見出しが他の要素の後ろに隠れない。
アクセントカラー	ブランドの配色から選んだ1色。	文字や図と背景のコントラストが保たれる。
ページのビジュアル	自分のデザイン、または用意したWebサイトの素材。	カードの位置とカメラの構図がレイアウトに合っている。

ページのビジュアルを差し替える作業は、文言の変更より手間がかかります。スクリーンショットを使う場合は、起こすカードを別レイヤーにし、ページ上の対応する位置に合わせる必要があります。

5. 動き、構図、読みやすさを確認する

カードが起き上がる場面、真上から全体を見せる場面、最後の見出しで一時停止します。各カードについて、下端がページにつながっていること、見出しがカメラを向いていること、影がページに落ちていることを確認します。

次に全体を再生します。見栄えのよい静止画だけでは、カメラが不自然に止まる、メッセージを見せる時間が短すぎる、急に方向を変えるといった問題は分かりません。最後の構図でタイトルの周囲に十分な余白があり、真上からのショットでページ全体が収まっているか確認します。

見た目の問題	変更する点
スライドショーのように見える。	1つのシーンに1枚のページを置き、カメラをその長さに沿って連続的に動かす。
カードがセクションから離れて浮いてしまう。	下端をページの一定位置に固定し、そのヒンジを中心に回転させる。
カードが見える前に起き上がってしまう。	カードの位置をカメラが通過するタイミングに合わせて起こす。
見出しが読めなくなる。	文言を短くする、カードの角度を調整する、またはその場面を長くする。
真上からのショットでページが切れる。	ページのデザインを変える前に、カメラを高くするか構図を調整する。

この例は動画のフレームを基準に動きを計算しているため、特定の瞬間を確認しやすくなっています。RemotionのuseCurrentFrameドキュメントでは、フレーム単位のタイミングを説明しています。個々のフレームを確認したら、全体を再生してつながりを判断します。プレビューが仕上がったら、書き出した動画も確認しましょう。

Webページを中心にした製品発表では、この動きの構成を具体的な土台として応用できます。1つのUI要素が状態を変えるストーリーなら、UIモーフアニメーションのチュートリアルが別のアプローチを紹介しています。より幅広い発表形式については、製品発表動画の事例をご覧ください。製品全体の紹介には、iArtのプロモーション動画メーカーも参考になります。

FAQ

iArtでWebサイトのフライオーバーを作ると、いくらかかりますか？

この例の最後のHaiku 5.5へのリクエストでは、シーンのコードがすでに用意された状態で、約0.02米ドル分のクレジットを使用しました。これは1回のリクエストの費用で、以前の試行や書き出しは含みません。ゼロから作る場合や追加の修正には別途費用がかかります。新規アカウントには登録時に2米ドル分の無料クレジットが付与され、クレジットカードなしでアニメーションの生成や編集を試せます。MP4のダウンロードには有料プランが必要です。最新のプラン内容は、iArtの料金ページをご確認ください。

Webサイトのフライオーバーとは何ですか？

仮想カメラがWebページの上を遠近感のある視点で移動する動画です。クローズアップや起き上がる要素で特定のセクションを強調した後、カメラを引いて全体のつながりを見せることができます。

Webサイトのフライオーバーのプロンプトには何を含めますか？

ページの見出し、機能を伝える3つの短いメッセージ、ブランドカラー、カメラの経路を含めます。各カードがどこで接続され、いつ起き上がり、カメラがどこで止まるのかを指定すると、プレビューで確認する動きが具体的になります。

自分のWebサイトのスクリーンショットは使えますか？

スクリーンショットはページの表面として使えますが、それだけでカードを動かすことはできません。各カードには、ページ上の位置に合わせた別レイヤーが必要です。カメラの構図とカードの位置を、自分のページのレイアウトに合わせてください。

Webサイトのフライオーバーは画面録画と同じですか？

画面録画は、動作するWebサイトへの操作を記録します。フライオーバーは、動くカメラでデザインを見せ、レイアウトの一部を空間に起こすことができます。正確なクリックや製品の動作を伝えるなら画面録画を、ページと主なメッセージを見せるならフライオーバーを使います。

縦型のReelやShortにできますか？

上の例は16:9のキャンバスを使っています。縦型では構図の調整が必要です。主役のカードと見出しが見えるようにし、カメラとの距離を調整して、ページ全体を見せる場面も確認します。中央だけを切り抜くとカードが切れる場合があります。