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

iPhoneスペックスクロール

ハードウェア品質の余白、オブジェクトヒーロー、スクロールチャプターの仕様、落ち着いた購入導線。

3D商品仕様表示マスクスクロールミニマルな購入導線

AIプロンプトを見る

Rukterの実レンダラーポインターやスクロールで操作できます

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

使いどころ

このパターンを使う場面

デバイス、アイウェア、時計、アクセサリー、スキンケア機器、単品プレミアムストアに。

サンプルの方向性

FORM / DEVICE · Consider every detail

ランタイム

実際のWebGL 3D

導入方法

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

AIで使う

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

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

Rukterで使用

Build an original responsive website experience for [your brand or product], using the Rukter "iPhone spec scroll" pattern as direction.

Visual example: FORM / DEVICE — "Consider every detail"; compose a product-led hero with a strong object silhouette and a short feature story. Replace the example content with my own brand copy and supplied media.

Behavior: Hardware-grade white space, object hero, specs in scroll chapters and calm commerce handoff. Best for: Devices, eyewear, watches, accessories, skincare tools and premium single-product stores.

Implementation: Use a real WebGL renderer for the 3D layer (three-product-showcase), with a useful static fallback when WebGL or motion is unavailable. Keep the result editable as sections, text, media, colors, and timing. Suggested Rukter sections: hero3d, cinematic, depth, tilt, magnetic. Motion settings: textReveal: block; parallaxDepth: subtle; hoverEffect: scale; entranceRhythm: slow; loopMotion: breathe.

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: preset-iphone-spec-scroll.

RukterプリセットID

preset-iphone-spec-scroll

編集可能な構成

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

セクション: hero3d · cinematic · depth · tilt · magnetic
ヒーローレンダラー: three-product-showcase
シネマティック効果: mask-reveal
動き: textReveal: block · parallaxDepth: subtle · hoverEffect: scale · entranceRhythm: slow · loopMotion: breathe