NovaTrend プレミアム eコマースウェブサイト UI/UX デザインブリーフ
フリーのプロンプト百科事典 Wikiprompt より
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 ツールに貼り付けてください。
最良の結果を得るには、プレースホルダー(角括弧や大文字で示された部分)を具体的な要件に置き換えてください。
ノート
0 件のコメント