Interactions / UI Components / Websites
ORZR — インタラクティブ・クロージングラック・キット
服を手に取って選ぶ感覚を、Webサイトに。ドラッグでラックを巡り、気になる一着を引き出して、着用イメージやディテールまで探索できるReact製UI Kitです。商品画像・配色・間隔・動きを、自分のブランドに合わせて調整できます。
再現ツール
KKNOWLEDGE- Codex
- OpenAI ImageGen
作品の、その奥に。ORZR – Webの中に、実店舗のような発見と体験を。実店舗で服を選ぶときの偶然の発見や、手に取って確かめる感覚をWebへ。ORZRの制作背景と、商品との出会いを体験として設計する考え方を紹介します。記事を読む（別タブで開きます）
音声なし
Complete Kit
完成コードのパッケージ
デモで動いている洋服ラックを、Reactサイトに組み込める形で収録しています。服の画像や商品名、配色、動きの速さを変更して、自分のブランドのラックとして使えます。
- 収録内容
- Reactコンポーネント、スタイル、サンプル画像、導入ガイド
- 使い方
- 同梱デモで動作を確認し、商品データと画像を差し替えます。
¥7,980参考価格
ZIPに含まれるファイル
src/ClothingRack.tsx洋服ラックのReactコンポーネントsrc/styles.cssラックと商品詳細のスタイルdemo/ · examples/next-app/ViteデモとNext.jsへの導入例QUICK_START.md導入と商品画像の差し替え手順
Prompt Pack · 構成例
AIに渡す指示文と参考画像
指示文のテキストと、ラックの配置や動きを伝える参考画像をまとめたファイルセットです。画像をAIに添付し、指示文を送って、似た表現の洋服ラックを制作します。
- 収録内容の例
- 指示文のテキスト、参考画像、AIへの送り方
- 使い方
- 指示文の商品や配色を書き換え、参考画像と一緒にAIに送ります。
価格未定構成例
AIに渡すファイルの例
指示文.txt「服の画像を手前から奥へ重ねてください。ホバーすると、ハンガーを支点に一着が手前へ開くようにします。」
THE IDEA
この作品について
服を手に取って選ぶ感覚を、Webサイトに。ドラッグでラックを巡り、気になる一着を引き出して、着用イメージやディテールまで探索できるReact製UI Kitです。商品画像・配色・間隔・動きを、自分のブランドに合わせて調整できます。
機能・表現
- 透明な2D商品画像を重ねた、奥行きのある疑似3Dラック
- 左右ドラッグ・マウスホイール・キーボードでの商品探索
- ハンガーを支点に服を引き出すホバープレビュー
- 選んだ商品の位置まで滑らかに進むGSAPアニメーション
- 1回目でプレビュー、2回目で移動するクリック式操作への切り替え
- スマートフォンでのドラッグ・2段階タップ操作
- 詳細パネルの拡大と、奥にある商品のフェード表示
- 着用・背面・素材のギャラリー切り替えと画像拡大
- 商品画像・商品情報・商品数・表示順・表示状態の変更
- 背景色・文字色・間隔・奥行き・サイズ・角度・速度の調整
- 独自の商品詳細コンテンツとブランド表示への差し替え
- レスポンシブ表示とOSのモーション軽減設定への対応
次の制作へ、つなげる。
表現の仕組みを知り、あなたのアイデアを重ねる。必要な素材や利用条件を確認して、自分に合ったプランをお選びください。
動作環境
開発にはNode.js 22.12〜24.x、npm、Reactの基本知識が必要です。React・React DOM 18〜19系とGSAPを使用します。
同梱デモはVite製で、Next.js App Routerの導入例も付属します。WebGLや3Dモデルは不要です。
確認環境: Windows、Node 24.14.1、npm 11.11.0、React 19.3.1／18.3.1、GSAP 3.15.0、Next.js 16.4.3。
ブラウザでの操作確認はChromiumのPC表示1280×720、スマートフォン相当表示390×844で実施しました。Safari・Firefox個別検証、iOS／Android実機検証は未実施です。
最終パッケージ動作確認日: 2026年11月2日。
同梱デモはVite製で、Next.js App Routerの導入例も付属します。WebGLや3Dモデルは不要です。
確認環境: Windows、Node 24.14.1、npm 11.11.0、React 19.3.1／18.3.1、GSAP 3.15.0、Next.js 16.4.3。
ブラウザでの操作確認はChromiumのPC表示1280×720、スマートフォン相当表示390×844で実施しました。Safari・Firefox個別検証、iOS／Android実機検証は未実施です。
最終パッケージ動作確認日: 2026年11月2日。
同梱内容
React／TypeScriptコンポーネント、型定義、CSS、ビルド済みESM JavaScript
設定ファイル、依存関係ロックファイル、自動テスト
サンプル商品データ12件と、生成素材12点（服の切り抜き4点・着用／背面8点）
同じコンポーネントを使用するVite／Reactカスタマイズデモ
基本的な組み込み例、Next.js App Router導入例、Vercelデプロイ手順
英語のREADME、QUICK_START、PROPS_REFERENCE、商用ライセンス、素材・第三者ライブラリの権利表示
サンプル商品12件は4種類の服画像を再利用しています。プロンプト集・アクセサリー機能・カート・決済・CMS・ホスティングは含みません。
設定ファイル、依存関係ロックファイル、自動テスト
サンプル商品データ12件と、生成素材12点（服の切り抜き4点・着用／背面8点）
同じコンポーネントを使用するVite／Reactカスタマイズデモ
基本的な組み込み例、Next.js App Router導入例、Vercelデプロイ手順
英語のREADME、QUICK_START、PROPS_REFERENCE、商用ライセンス、素材・第三者ライブラリの権利表示
サンプル商品12件は4種類の服画像を再利用しています。プロンプト集・アクセサリー機能・カート・決済・CMS・ホスティングは含みません。
ライセンス
1回の購入で、案件数・サイト数の制限なく商用利用できます。自社サイト・クライアント案件への利用、コードやデザインの改変、完成したクライアントサイトのソース納品が可能です。
開発・検証・ステージング・本番・翻訳版に加え、別ブランドや独立したWebサイトにも追加購入なしで利用できます。適法な利用に期限はありません。
UI Kit自体の再販売・再配布・転売は禁止です。同梱画像は対象サイト内で利用・改変できますが、素材集としての再配布はできません。第三者ライブラリには各ライセンスが適用されます。
現状有姿で提供し、責任上限は当該購入金額とします。ただし故意・重過失や法令上制限できない責任は除外します。日本法を準拠法とし、第一審はさいたま地方裁判所とします。強行法規上の権利は制限しません。
正式な条件は同梱のLICENSE.mdをご確認ください。販売者・権利者: TSURU KAWAGOE。
開発・検証・ステージング・本番・翻訳版に加え、別ブランドや独立したWebサイトにも追加購入なしで利用できます。適法な利用に期限はありません。
UI Kit自体の再販売・再配布・転売は禁止です。同梱画像は対象サイト内で利用・改変できますが、素材集としての再配布はできません。第三者ライブラリには各ライセンスが適用されます。
現状有姿で提供し、責任上限は当該購入金額とします。ただし故意・重過失や法令上制限できない責任は除外します。日本法を準拠法とし、第一審はさいたま地方裁判所とします。強行法規上の権利は制限しません。
正式な条件は同梱のLICENSE.mdをご確認ください。販売者・権利者: TSURU KAWAGOE。
サポート
購入後30日間、初期導入の質問と再現可能な製品不具合に無料で対応します。個別カスタマイズ、第三者コードの修正は対象外です。
提供されたv1.x修正版は無償です。提供期間・頻度は保証せず、次期メジャー版は別商品となります。
購入後14日以内の申請で、誤操作等による重複購入、商品説明との重大な相違、通常の対応で解決できない重大な製品不具合を返金対象とします。購入者都合は原則対象外ですが、適用法およびLemon Squeezyの返金ポリシーによる権利を制限しません。
窓口: https://tsuru-official-home.com/contact/ の「GENERAL INQUIRY／その他のお問い合わせ」。商品名・注文番号・内容を添えてご連絡ください。
提供されたv1.x修正版は無償です。提供期間・頻度は保証せず、次期メジャー版は別商品となります。
購入後14日以内の申請で、誤操作等による重複購入、商品説明との重大な相違、通常の対応で解決できない重大な製品不具合を返金対象とします。購入者都合は原則対象外ですが、適用法およびLemon Squeezyの返金ポリシーによる権利を制限しません。
窓口: https://tsuru-official-home.com/contact/ の「GENERAL INQUIRY／その他のお問い合わせ」。商品名・注文番号・内容を添えてご連絡ください。
第三者ライセンス
React／React DOM、Next.js、Vite: MIT。
TypeScript: Apache-2.0。
GSAP: GSAP Standard No-Charge License。GSAPをMITとして扱わず、同梱の通知と公式条件を保持してください。
その他の依存関係は各ライセンスが適用されます。詳細はTHIRD_PARTY_NOTICES.mdおよび同梱のthird-party-licensesを参照してください。
サンプル画像は販売者が再配布を許可した生成素材と、その参照から制作した生成画像です。利用条件はASSET_LICENSES.mdとLICENSE.mdに従います。フォントファイルは同梱していません。
TypeScript: Apache-2.0。
GSAP: GSAP Standard No-Charge License。GSAPをMITとして扱わず、同梱の通知と公式条件を保持してください。
その他の依存関係は各ライセンスが適用されます。詳細はTHIRD_PARTY_NOTICES.mdおよび同梱のthird-party-licensesを参照してください。
サンプル画像は販売者が再配布を許可した生成素材と、その参照から制作した生成画像です。利用条件はASSET_LICENSES.mdとLICENSE.mdに従います。フォントファイルは同梱していません。
よくある質問（Q&A）
- 3DモデルやThree.jsは必要ですか？
- 不要です。透明な2D画像の配置・サイズ・重なりとGSAPアニメーションで奥行きを表現しています。
- 自分の商品画像を使えますか？
- 使えます。ハンガーを含む背景透過PNG／WebPを用意し、商品データの画像パスを変更してください。デモでは画像の差し替えも試せます。
- Next.jsに組み込めますか？
- Next.js App Routerの導入例を同梱しています。既存のReactアプリにも組み込めます。
- スマートフォンでも操作できますか？
- ドラッグと2段階タップに対応しています。モバイル幅のChromiumで確認済みですが、iOS／Android実機は未検証です。
- デモの設定変更は保存されますか？
- ブラウザ内のプレビューのため、リロードすると戻ります。利用する設定はコンポーネントの設定値に反映してください。
- カートや決済機能は付属しますか？
- 付属しません。商品を探索・紹介するラックUIのキットです。カート・決済・CMSとの連携は導入先で実装してください。
- クライアント案件に利用できますか？
- 1回の購入で、案件数・サイト数の制限なく商用利用・改変できます。完成したクライアントサイトのソース納品も可能です。
- プロンプト集は含まれますか？
- 現在のComplete Kitには含まれません。コンポーネント、サンプル素材、導入例、マニュアルを提供します。
更新履歴
1.0.0 · 検証日 2026-11-02
2026-11-02 / v1.0.0: 洋服ラック単体のReact UI Kitとして正式版を作成。販売条件を確定し、LICENSE・README等へ反映。購入者ZIPを新規展開してnpm ci・ビルド・自動テスト10件を確認。Next.js導入例、PC／スマホ相当表示の操作、ZIP整合性を検証。
GALLERY 03
クリックで拡大
