ノート

NovaTrend プレミアム eコマースウェブサイト UI/UX デザインブリーフ

フリーのプロンプト百科事典 Wikiprompt より

abbasi
投稿者abbasi出典

2026年6月7日

NovaTrend プレミアム eコマースウェブサイト UI/UX デザインブリーフ Shopify スタイルの高級 eコマースサイト向けの、セクション、色、インタラクションを網羅したページごとの完全な仕様書。デザイン生成用。

関連メディア

プロンプト内容保存

🌐
COMPLETE ECOMMERCE WEBSITE UI/UX DESIGN PROMPT トレンドのオンラインブランド「NovaTrend」向けに、世界クラスのプレミアムeコマースウェブサイトをデザインする。 そのデザインは、Apple、Nike、Zara、Gymshark、Dyson、そして現代のShopify Plusストアを組み合わせたような、卓越したUI/UX、豪華なビジュアル、スムーズなアニメーション、コンバージョン重視のレイアウトを備えている必要がある。 CANVAS SETTINGS 幅: 1440px 高さ: 自動 / 長尺スクロールレイアウト デスクトップ、タブレット、モバイル対応のレスポンシブデザイン 12カラムグリッドシステム 最大コンテンツ幅: 1320px クリーンなスペーシングと視覚的階層 DESIGN STYLE ビジュアルディレクション モダンラグジュアリー ミニマリストプレミアム Apple風UI 高級感のある商品プレゼンテーション クリーンなホワイトスペース グラスモーフィズム効果 ソフトシャドウ スムーズなアニメーション インタラクティブ要素 マイクロインタラクション コンバージョン重視 カラーパレット プライマリー: #111111 セカンダリー: #FFFFFF アクセント: #FF6B35 ライトグレー: #F8F9FA サクセス: #22C55E テキスト: #1A1A1A TOP ANNOUNCEMENT BAR ナビバーの上に配置する全幅通知バー。 例: 🚚 50ドル以上で世界送料無料 🎉 夏のセール最大70%オフ ⚡ 期間限定フラッシュディール NAVIGATION BAR スティッキープレミアムナビバー 左 ブランドロゴ 中央 ホーム ショップ 新着商品 ベストセラー カテゴリー アバウト ブログ コンタクト 右 検索アイコン ウィッシュリストアイコン アカウントアイコン バッジ付きショッピングカートアイコン 機能 スクロール時のスティッキー メガメニュー ホバー効果 検索モーダル モバイルメニュー スムーズなトランジション HERO SECTION 大型シネマティックヒーロー レイアウト 左側: 見出し サブ見出し コールトゥアクションボタン 右側: プレミアム商品ショーケース フローティング商品カード 3D商品ディスプレイ 見出し 「Discover Products You'll Love」 サブ見出し モダンなライフスタイルに合わせて厳選された最新トレンド商品を購入。 ボタン プライマリー: 今すぐ購入 セカンダリー: コレクションを見る 効果 パララックスモーション フローティング要素 スムーズなエントランスアニメーション プレミアムライティング TRUST BADGES SECTION 4つのフィーチャーカード 機能 ✓ 送料無料 ✓ 安全な支払い ✓ 簡単返品 ✓ 24時間365日サポート アニメーションアイコン ホバー効果 FEATURED CATEGORIES モダングリッドレイアウト カテゴリー ファッション エレクトロニクス ビューティー フィットネス ホームデコレーション アクセサリー 各カードの内容: カテゴリー画像 オーバーレイテキスト ホバーズーム CTAボタン NEW ARRIVALS SECTION モダンな商品グリッド 各商品カードの内容: 商品画像 商品名 価格 セール価格 評価 ウィッシュリストボタン クイックビューボタン カートに追加 ホバーアニメーション: 画像の切り替え スケール効果 フローティングボタン BEST SELLERS SECTION プレミアム商品ショーケース 機能 大型商品カード ベストセラーバッジ レビュー クイック購入ボタン TRENDING PRODUCTS CAROUSEL 横型商品スライダー 機能 自動スライド 矢印コントロール スワイプ対応 商品ラベル バッジ: トレンド ホット 在庫僅少 FLASH SALE SECTION 大型プロモーションセクション 内容 カウントダウンタイマー 時間 分 秒 割引商品 セール率 CTAボタン 「セールを購入」 WHY CHOOSE US ラグジュアリーフィーチャーセクション 機能 プレミアム品質 迅速な配送 安全なチェックアウト 顧客満足 デザイン モダンアイコン グラデーションバックグラウンド ホバーアニメーション FEATURED COLLECTION SECTION 大型コレクションショーケース 例 サマーコレクション ラグジュアリーコレクション フィットネスコレクション テックコレクション 各コレクションの内容: バナー画像 コレクション説明 ショップコレクションボタン VIDEO SHOWCASE SECTION 全幅ビデオセクション 機能 自動再生バックグラウンドビデオ 再生ボタンオーバーレイ 商品ストーリー ブランドストーリーテリング CUSTOMER TESTIMONIALS プレミアムレビュースライダー 内容 顧客画像 名前 評価 レビューテキスト 購入済みバッジ 効果 カルーセルアニメーション ガラスカード SOCIAL PROOF SECTION 統計情報の表示 例 50,000人以上の 満足している顧客 4.9★ 平均評価 100万点以上 販売された商品 100か国以上 サービス提供国 INSTAGRAM SHOP SECTION ショッピング可能なInstagramフィード 機能 画像グリッド 商品タグ ホバー効果 いいね数 ショップボタン NEWSLETTER SECTION ラグジュアリーなメール登録 見出し 限定セールと新着情報をゲット 入力 メールアドレス 登録ボタン 特典 限定割引 早期アクセス 特別オファー BLOG SECTION 最新記事 カードレイアウト 注目画像 タイトル 抜粋 続きを読むボタン FAQ SECTION アコーディオンスタイルのFAQ 質問 配送情報 返品ポリシー 返金プロセス 支払い方法 注文追跡 MOBILE APP SECTION アプリプロモーションエリア 内容 電話モックアップ アプリスクリーンショット ダウンロードボタン App Store Google Play FINAL CALL TO ACTION 大型コンバージョンセクション 見出し ショッピング体験をアップグレードする準備はできましたか? ボタン ショッピングを始める コレクションを見る FOOTER プレミアムマルチカラムフッター カラム1 ロゴ 会社概要 ソーシャルメディアアイコン Facebook Instagram TikTok Pinterest YouTube カラム2 ショップ メンズ ウィメンズ アクセサリー 新着商品 ベストセラー セール カラム3 サポート お問い合わせ FAQ 配送 返品 注文追跡 カラム4 会社情報 アバウト 採用情報 アフィリエイトプログラム プレス ブログ カラム5 ニュースレター メール入力 登録ボタン フッターボトム 著作権 プライバシーポリシー 利用規約 クッキーポリシー 対応支払い方法 Visa Mastercard PayPal Apple Pay Google Pay セキュリティバッジ ADDITIONAL PAGES ホームページ 完全なランディングページ ショップページ 商品グリッド 高度なフィルター 並べ替え 検索 ページネーション 商品詳細ページ ギャラリー ズーム バリエーション レビュー 関連商品 最近閲覧した商品 ウィッシュリストページ 保存した商品 カートページ カート概要 クーポン 送料計算ツール チェックアウトページ マルチステップチェックアウト 決済ゲートウェイ 注文概要 アカウントダッシュボード 注文 住所 プロフィール ウィッシュリスト 設定 アバウトページ ブランドストーリー ミッション チーム コンタクトページ お問い合わせフォーム 地図 サポート情報 ブログページ 記事 カテゴリー 検索 FAQページ 検索可能なナレッジベース ADVANCED INTERACTIONS スムーズなページトランジション メガメニューナビゲーション スティッキーカートに追加 商品クイックビューモーダル AI商品レコメンデーション ダイナミックショッピングカートドロワー ライブチャットウィジェット エグジットインテントポップアップ 最近閲覧した商品 無限スクロール スクロールトリガーアニメーション ローディングスケルトンスクリーン スマート商品検索 FINAL GOAL 幅1440px、豪華なビジュアル、卓越したUX、コンバージョン重視のレイアウト、モダンなアニメーション、レスポンシブデザイン、そしてApple、Nike、Zara、世界最高のオンラインストアに匹敵するショッピング体験を備えた、プレミアムShopify Plus品質のeコマースウェブサイトを作成する。

ログインして完全なプロンプトを表示

次で続行:

ログインすると、次に同意したことになります: 利用規約 と プライバシーポリシー

使い方

このプロンプトは creative 向けに設計されています。上の内容をコピーして、お好みの AI ツールに貼り付けてください。

最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。

参考資料

カテゴリ:creative| meigen| ecommerce-design| ui-ux

ノート