無料で始める

ライブプレビュー · 無料プロンプト / motion template

AI対応テンプレートギャラリーデッキ

短いタイトル、プレミアム/無料状態、素早いプレビュー判断を備えた、ダークでメディア中心のカード。

テンプレートカードメディア中心プレミアム状態プレビューCTA
AIプロンプトを見る
THE EDITDiscover
AN ORIGINAL RUKTER SAMPLE 01

Find your next direction

Dark media-first template cards with short titles, premium/free states and fast preview decisions.

RUKTER / PREVIEW01 — 03
操作できるサンプルサンプルの画像を切り替えられます

これはRukterのローカルメディアを使ったオリジナルの動作サンプルです。WebGL対応プリセットでは実際のRukterレンダラーを表示します。生成されるサイトは、入力した内容によって変わります。

使いどころ

このパターンを使う場面

豊富な選択肢、強いサムネイル、すぐ使えるプレビューと適用を求めるサイトに。

サンプルの方向性

THE EDIT · Find your next direction

ランタイム

DOM / CSS / 2D

導入方法

  1. 1下のプロンプトをコピーしてCodexやClaudeに貼り付け、ブランドとメディアを指定します。
  2. 2Rukterで使う場合は「Rukterで使用」を開き、プリセットIDがジェネレーターに渡されたことを確認します。
  3. 3生成した下書きをテーマデザイナーで確認・編集し、準備ができたら公開します。

AIで使う

このプレビューをCodexやClaude用のプロンプトに

プロンプトにはレイアウト、動作、ランタイム、アクセシビリティ、編集可能な構成を含めています。ブランドとメディアはご自身のものに置き換えてください。

Rukterで使用 

Build an original responsive website experience for [your brand or product], using the Rukter "AI-ready template gallery deck" pattern as direction.

Visual example: THE EDIT — "Find your next direction"; compose a media-first gallery with readable captions and deliberate visual rhythm. Replace the example content with my own brand copy and supplied media.

Behavior: Dark media-first template cards with short titles, premium/free states and fast preview decisions. Best for: A generated site needs a premium prompt-library feel: abundant choices, strong thumbnails and immediate preview/apply actions.

Implementation: Use lightweight CSS, DOM, or Canvas 2D for the visual behavior; do not add WebGL unless the design needs it. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: hero3d, tiles, velocity, magnetic. Motion settings: textReveal: block; parallaxDepth: medium; hoverEffect: lift; entranceRhythm: staggered; loopMotion: none.

Make the preview usable on touch and keyboard, give controls visible focus, reserve media space to avoid layout shift, and respect prefers-reduced-motion.

When using Rukter Generate my site, preserve this exact selection: Library item ids: motionsites-template-gallery-deck.

RukterプリセットID

motionsites-template-gallery-deck

編集可能な構成

このプリセットが指定するもの

セクション
hero3d · tiles · velocity · magnetic
ヒーローレンダラー
DOM / CSS sample
シネマティック効果
—
動き
textReveal: block · parallaxDepth: medium · hoverEffect: lift · entranceRhythm: staggered · loopMotion: none