見つけて、触れて。
あなたの表現へ。

作品との出会いから、制作素材の選び方、購入後の使い方まで。ZUFUを自分のものづくりに生かすための、4つのステップをご案内します。

作品を探す

気になる動き、レイアウト、空気感から。まずはコレクションを眺めながら、次の制作で試してみたい表現を見つけてください。

カテゴリーとキーワードで探す: Webサイト、インタラクション、モーション、空間体験など、つくりたいものに近いカテゴリーから絞り込めます。キーワード検索や、おすすめ順・新着順も活用してください。
使いたい技術から探す: CSS、JavaScript、GSAP、Three.js、WebGLなどの技術タグを手がかりに、自分の制作環境や学びたい技術に合う作品を探せます。
Knowledgeで、背景まで知る: Knowledge記事がある作品では、表現に込めた考えや想い、想定したターゲット、設計上の判断も読めます。見た目だけでなく、なぜその表現を選んだのかも制作のヒントにしてください。

作品の閲覧と公開中のライブプレビューは、すべて無料です。一覧のFREE表示や価格を目安に、気になる作品を開いてみてください。

気になる作品を開いたら、公開中のプレビューに触れてみましょう。画面の印象だけでなく、操作したときの反応や、表現が切り替わる心地よさまで確かめられます。

動きや操作感を確かめる: 「Preview」で、動画がある作品には先頭にVideoが表示されます。動画は音声なしで再生・一時停止できます。実サイトのデモでは、スクロールやクリックなど、その作品に用意された操作を試してください。プレビューが準備中の場合は、紹介画像と説明をご覧いただけます。
画面サイズを変えて見る: 実サイトのデモがある作品ではDesktop・Tablet・Mobileで表示幅を切り替えられます。全画面表示や別タブも使いながら確認してください。表示幅の切り替えは端末エミュレーターではなく、実機での動作保証を示すものでもありません。
Code・Promptの公開範囲を見る: 無料で提供するコードやプロンプトは、各タブで全文を確認できます。有料の内容は公開用の抜粋と価格を表示します。「Details」の概要や機能も読み、自分の制作に必要な内容を確かめてください。
AIツールと再現度を確認する: 作品の「再現ツール」には、AIツール名と再現度を表示します。制作者が確認した結果を目安に、自分が使うツールに合うかを見てみましょう。「未検証」は再現性をまだ確認できていないことを示します。

無料・有料の範囲は作品ごと、コード・プロンプトごとに異なります。有料素材を選ぶ場合は、抜粋と「同梱内容」を確認してから購入してください。

無料素材から始めるか、必要な制作素材を買い切りで受け取るか。有料プランはPrompt PackとComplete Kitの2種類です。提供内容と価格は作品ごとに確認できます。

無料素材 — まず手を動かす: 一部の作品では、コードやプロンプトを全文無料で公開しています。Code・PromptタブのFREE表示を確認し、公開されている内容と利用条件を読んでから制作に取り入れてください。
Prompt Pack — AIとつくる: 再現用プロンプト、入力手順、利用ガイドから始めたい方へ。使用するAIモデルや環境に合わせて調整しながら、自分のアイデアを形にしていくプランです。
Complete Kit — 制作素材からつくる: コードを読み解いて改変したい方へ。作品ページに記載された制作素材をまとめて受け取るプランです。コード、プロンプト、アセット、編集用ファイルなど、実際の同梱範囲をご確認ください。
買い切りで、何度でも制作に使う: 購入した素材は、案件数の制限なく、商用利用・改変ができます。月額会員制や利用時のライセンス認証はありません。素材そのものの再販売・無断配布は禁止で、第三者素材にはそれぞれの利用条件が適用されます。

購入前に動作環境、必要なソフトウェア、同梱内容、ライセンス、サポート範囲をご確認ください。AIの出力はモデルや環境によって変わり、デモと同一の結果は保証されません。

無料のコードやプロンプトは作品ページから、有料素材は購入後に受け取れます。有料プランの一回払いの決済とファイル納品はLemon Squeezyが行い、ZUFUへの会員登録は不要です。

決済画面で内容を確認する: 作品ページでプランを選び、決済画面へ進みます。商品・プラン、適用税額などを含む最終金額、受信用メールアドレスを確認して手続きしてください。
購入確認メールからダウンロードする: 決済後は、Lemon Squeezyから届く購入確認メールの案内に沿ってファイルを受け取ります。メールと注文情報は、あとから確認できるよう保管してください。メールが見つからない場合は、迷惑メールフォルダーもご確認ください。
README・利用ガイドから始める: ダウンロードしたZIPを展開し、同梱のREADMEやガイド、ライセンスを読みます。必要なツールを準備し、まずは案内された手順で動作を確認してから、内容や見た目を調整していきましょう。
自分の環境で確かめ、仕上げる: ライセンスの範囲内で、自分のコンテンツや表現を加えます。使用予定のブラウザーや端末で確認し、困ったときは作品ページのFAQやサポート案内をご覧ください。問い合わせの際は、注文情報・利用環境・起きている状況を整理しておくと伝えやすくなります。

最初は小さく動かしてから、少しずつ自分の表現へ。必要な手順や対応環境は、作品に同梱された案内を優先してください。

まずは、気になる作品から。