template preset無料プロンプト
Zentryキャンペーンスタック
WebGLの導入、チャプター型スクロール、ベントグリッド、ベロシティレール、動きのある締めくくり。
ジェネレーター アセットライブラリ
生成サイトを構成するモーション、2D、3Dパーツを選ぶ
これは完成済みストアフロントの一覧ではなく、パーツのライブラリです。ここでプリセットを選ぶと、サイト生成がそれらを使った編集可能なサイトを1つ作成します。セクション、レイヤー、メディア、タイミング、インタラクションはテーマデザイナーで編集を続けられます。
- 1ストアを1行で説明します（任意ですが、文章をあなたのビジネス向けにする情報です）。
- 2パック、または最大8件の個別プリセットを選びます。
- 3サイト生成へ進むと、説明文とプリセットIDが引き継がれます。
3d-scene2dmotion
42
項目
9
3D
5
2D
12
モーション
- 3d-scene3Dシーン6件のプリセット
- 2d2Dアニメーション5件のプリセット
- motionモーションシステム4件のプリセット
- animated-backgroundアニメーション背景3件のプリセット
- template-presetテンプレートプリセット7件のプリセット
- interactionインタラクション3件のプリセット
各タイルはプリセットの動作を示す模式的なCSS/SVGプレビューです。生成ストアフロントのスクリーンショットではありません。
実際に見る
選ぶ前に、各プリセットのサンプルを確認
全プリセットにRukterのローカルメディアを使ったオリジナルのサムネイルと詳細ページがあります。詳細ページでは動作サンプル、使い方、コピー可能なAIプロンプトを確認できます。
42件のサンプル
template preset無料プロンプト
Rejouiceエージェンシーリール
大きなエディトリアル文字、ゆっくりしたシネマティックフェード、メディアレール、控えめなCTA。
template preset無料プロンプト
Appleプロダクト基調講演
オブジェクト中心のヒーロー、正確なスクロール表示、クリーンな購入導線、商品スポットライト。
template preset無料プロンプト
Obys / Cubertoタイポグラフィシステム
特大タイポグラフィ、ダークなエディトリアルリズム、固定トランジション、磁気的な締めのアクション。
template preset無料プロンプト
iPhoneスペックスクロール
ハードウェア品質の余白、オブジェクトヒーロー、スクロールチャプターの仕様、落ち着いた購入導線。
template preset無料プロンプト
Awwwardsポートフォリオインデックス
動きのある導入、選択作品のデプススタック、インデックスグリッド、控えめなコンバージョン。
motion template無料プロンプト
AI対応テンプレートギャラリーデッキ
短いタイトル、プレミアム/無料状態、素早いプレビュー判断を備えた、ダークでメディア中心のカード。
motion template無料プロンプト
SaaSグリッドローンチテンプレート
鮮明なタイトルオーバーレイ、静的フォールバック、高コントラストのローンチ構成によるコンパクトな商品グリッド。
motion template無料プロンプト
ポートフォリオショーケーステンプレート
サムネイルを第一印象に活かし、コピーを最小限にした大きなポートフォリオと代理店向けプレビュー。
section preset無料プロンプト
ソーシャルスタックセクションカード
メディアコラージュ、タイプフィルター、コピー/プレミアムアクション、分かりやすい役割を持つ小さなプロンプトブロック。
section preset無料プロンプト
フォーカスコラージュセクション
ヒーローや機能セクションに絞った、コピー可能な出力を持つコンパクトなコラージュカード。
animated background無料プロンプト
シネマティックループ背景
中央のフレーム、隣接して覗くフレーム、コピー可能なメディア意図を備えた大きな背景プレビュー。
prompt action無料プロンプト
URLコピー / 適用アクション
再利用可能なアセットURLをコピーし、結果をプレビューし、プレミアムメディアへ進める明確な操作モデル。
scroll無料プロンプト
Ramotion / Framerパララックスストーリー
前景・中景・背景のレイヤー、固定チャプター、スケール表示、穏やかなモーション低減フォールバック。
3d model無料プロンプト
iPhoneハードウェアスタック
重ねたデバイスオブジェクト、仕様中心のスクロール、プレミアムハードウェア向けの鮮明なマテリアル照明。
パックを作成
ストアを説明し、ビジュアルランタイムを選んでからサイト生成へ進みます
ここで生成・公開されることはありません。説明文と選択内容はジェネレーターへ渡され、公開を決める前に下書きとして結果を確認できます。
各タイルはプリセットの動作を示す模式的なCSS/SVGプレビューです。生成ストアフロントのスクリーンショットではありません。 実際のランタイムプレビューはサイト生成へ進む
最大8件のプリセット。ジェネレーターがクリエイティブパックに適用する上限と同じです。
テンプレートプリセット
AI対応テンプレート
セクション用プロンプトブロック
アニメーション背景
モーションシステム
スクロールストーリー
2Dアニメーション
3Dシーン
3Dモデル
インタラクション
プロンプトアクション
プリセットは未選択です。パックまたは個別のプリセットを選んでください。
参考情報 — 続行に必要な操作はこの下にはありません
ランタイム別に見る
ライブラリの全グループと、その動作イメージ
template-presetテンプレートプリセット7Zentry、Rejouice、Apple、Awwwards系ポートフォリオに着想を得たページ全体のレシピ。
motion-templateAI対応テンプレート3メディア中心のカード、状態表示、プレビューと適用アクションを備えたMotionSites風テンプレート。
section-presetセクション用プロンプトブロック2AIが編集可能なストアページへ組み合わせられる、再利用可能なセクション用ブロック。
animated-backgroundアニメーション背景3エディターで安全に扱えるプリセットとして表現した、背景ループと雰囲気のあるヒーローメディア。
motionモーションシステム4編集可能なキーフレーム、テキスト表示、パララックス、タイミング、ホバー演出。
scrollスクロールストーリー5固定チャプター、マスク、アイリス表示、ドリー移動、シネマティックなスクロール演出。
2d2Dアニメーション5重い3Dを使わずに、Codrops風のグリッド、トレイル、レール、画像中心の動きを実現。
3d-scene3Dシーン6WebGL/R3F風のヒーロー世界、パーティクル、屈折、空気感のあるシーン。
3d-model3Dモデル3商品パックショット、回転するハードウェア、ステージ上の商品に使えるオブジェクトプリセット。
interactionインタラクション3磁気CTA、発光、拡大、チルト、カーソルに反応するコンバージョン操作。
prompt-actionプロンプトアクション1コピー、プレビュー、適用、プレミアム状態を操作可能にするアクション。
シード済みランダムパック編集可能
未選択です。これはセレクターをスキップしたときにジェネレーターが自動で選ぶ組み合わせの例です。上でプリセットを選ぶと置き換わります。
- 3d-scene01WebGI商品ドリル工具、ハードウェア、楽器、家電、耐久商品の技術的なプレミアムストーリーに。3D商品オービット照明スペックスクロール
- scroll02Ramotion / FramerパララックスストーリーRukterで編集可能な、現代的なパララックスページを作りたいときに。レイヤー式パララックス固定チャプタースクロール連動スケール
- template-preset03Obys / Cubertoタイポグラフィシステム代理店、ポートフォリオ、スタジオ、カルチャーブランド、個性を見せたい創業者ページに。キネティック文字固定スクロール磁気CTA
- 3d-model04ソーダ缶パックショット飲料、サプリメント、スナック、化粧品、パッケージ商品のローンチに。3D缶スクロールステージPackshot
- motion-template05ポートフォリオショーケーステンプレートクリエイティブポートフォリオ、代理店、スタジオのストアページに。Portfolio previewEditorial cardsMotion tags
- interaction06ディストーションホバーヒーロー画像、商品カード、ポートフォリオメディアを上質な面として反応させたいときに。リキッドレンズTilt hoverRGB split feel
- prompt-action07URLコピー / 適用アクションすべてのプリセットをAIに使いやすく、販売者にも理解しやすくしたいライブラリに。URLコピープレビュー操作Premium state
MotionSitesベンチマーク
テンプレート、セクション、アニメーション背景をAIが選べるプリセットに
/templates
AI対応テンプレート
テンプレートカードはメディア中心で、すぐ使える必要があります。
ダークギャラリー、大きな中央見出し、4列のプレビューカード、短いタイトル、明確なプレミアム/無料状態。
静的HTMLを取り込むのではなく、編集可能なヒーロー、タイル、ベロシティ、CTAセクションへ対応づけます。
AI対応テンプレートギャラリーデッキmotionsites-template-gallery-deck
SaaSグリッドローンチテンプレートmotionsites-template-saas-grid
ポートフォリオショーケーステンプレートmotionsites-template-portfolio-showcase
URLコピー / 適用アクションmotionsites-action-copy-url
/sections
セクション用プロンプトブロック
セクションには再利用できる独自のプロンプトカード層が必要です。
価格/タイプフィルター、コンパクトなカード、コラージュプレビュー、コピーとプレミアム操作、セクション単位の命名。
テーマデザイナーで編集可能なfreeform、タイル、チルト、デプス、磁気ブロックへ対応づけます。
ソーシャルスタックセクションカードmotionsites-section-social-stack
フォーカスコラージュセクションmotionsites-section-focus-collage
単語ごとのスクロール表示motion-word-scroll-reveal
磁気グローコントロールinteraction-magnetic-glow
/backgrounds
アニメーション背景
背景は飾りではなく、AIが選べる一級のアセットです。
大きなループプレビュー、隣接フレーム、密な背景グリッド、URLコピーとプレミアム操作。
モーション低減に配慮した、エディター安全なヒーロー背景、WebGLフォールバック、デプス、スクロールプリセットへ対応づけます。
シネマティックループ背景motionsites-background-cinematic-loop
ネオンフラックス背景motionsites-background-neon-flux
ソフトホライズン背景motionsites-background-soft-horizon
スクロール屈折デプスscroll-refraction-depth
続行後の動作
選択内容はプリセットIDとして渡され、サーバーがそこからランタイムを構築します。
続行すると、説明文と選択したプリセットのIDがあらかじめ入力された状態でサイト生成が開きます。このID文はモデルが無視できるヒントではありません。生成ルートが解析し、各IDをこのカタログと照合して、宣言されたランタイムに結果を紐づけます。そのため3Dの選択は実際のWebGLシーンを維持し、2Dの選択はCSSとCanvasのモーションとして残ります。
選択が3Dとして扱われるのは、含まれるプリセットが対応WebGLレンダラーまたは3Dモデルを実際に宣言している場合だけです。パック名、ファミリー名、機能名に3Dと書かれているだけでは判定されません。そのためテンプレートパックでも実際のWebGLシーンを固定できます。セレクターが根拠となるプリセットを示し、ジェネレーターも同じ選択に同じ結果を表示します。
ジェネレーター画面では、どのプリセットがまだ紐づいているかを確認でき、編集で削除された場合は警告が表示されます。セレクターを完全にスキップした場合は、同じプールから決定的な組み合わせを選ぶため、1つのプロンプトでも3D、パララックス、スクロール、ホバー、文字アニメーションの判断が行われます。
プリセットが決めるのはページの見た目と動きだけなので、ストアの説明文も追加してください。生成された文章を汎用デモではなく、あなたのビジネス向けにする情報です。ここで何かが自動変更されることはありません。ジェネレーター画面でプロンプトを送信するまで、アカウントも下書きも生成も作成されません。
プリセットセレクターに戻る編集可能な引き継ぎ
生成ページはテーマデザイナーで引き続き開けます。
プリセットはストアエディター内で、通常の編集可能なセクション、レイヤー、画像、タイミング値、ホバー動作、モーショントークンになります。
サイト生成を試す