
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- どのブラウザでも開けてオフラインで動く、フォントと画像を内蔵した自己完結型の Web サイトファイル 1 つ。フレームワークプロジェクトがある場合は、そこへの移植にも対応。
- 実際に動くコマースのフロー:パックサイズ付きの商品ページ、定期便のクレートビルダー、カートのドロワー、配達エリアチェック付きのチェックアウトプレビュー、取扱店マップ。
- 象徴的な Hero、リボン、波形、写真コラージュを 17 枚の画像と 28 ページの作例で。ストーリー、生産者、ジャーナル、配送、FAQ、ポリシーの各ページも含みます。
向いている人
- オンライン販売をしていて、明るく楽しいストアフロントがほしいジュース、コーヒー、紅茶、スナックのブランド。
- 決まったエリアに配達したり、サブスクリプションボックスを運営したりしている地元のつくり手。
- ショップをメニューに、店舗案内を 1 つの来店案内ブロックに置き換えられるカフェやベーカリー。
向いていない人
- 実際の決済や注文処理。チェックアウトは入力内容を検証しますが、誰にも課金しません。
- グラデーションやリボンではなく、ダーク、ミニマル、コーポレートな見た目が必要なブランド。
- 架空の Halcy の商品を販売したり、そのボトルのアートワークを自社のものとして使ったりすること。
ブランディング・ビジュアルシステムWeb デザイン・デジタル体験ブランドサイト作成スタイル固定編集可能な出力ジュースコラージュジュース Heroジュースリボンジュースウェーブ
この Skill について

Gradient Juice ブランドサイトは、ドリンク、フード、ライフスタイルブランド向けの楽しげなブランド&ショップサイトを作ります。あなたのボトルから飲む人物を写したフルブリードのグラデーションのキャンペーン写真、曲線に沿って流れるクリーム色のテキストリボン、セクション間の波打つ境目、明るい写真タイルが特徴です。作例は、カリフォルニア州ベンチュラにある架空のコールドプレスジュース店 Halcy。動作するショップ、クレートビルダー、チェックアウトのプレビューを含む 28 ページがつながっています。

手に入るもの
- フォントと画像を内蔵し、どのブラウザでも開けてオフラインで動く、自己完結型の Web サイトファイル 1 つ。既存のフレームワークプロジェクトがある場合は、そちらにデザインを移植します。
- 本格的なショップ:パックサイズとリアルタイム価格のある 6 つの商品ページ、コレクション、毎週のクレートビルダー、カートのドロワー、配達エリアチェック付きのチェックアウトプレビュー、正直な完了ページ。
- ブランドページ:ストーリー、月切り替え付きの生産者紹介、4 本の記事があるジャーナル、地図付きの取扱店検索、配送と返品、検索付きの FAQ、お問い合わせ、ニュースレター、各種ポリシー、デザインされた 404 ページ。
- すべての画像に共通するアートディレクション:同じボトルと光で撮った統一感のある商品の静物写真と、明るいライフスタイルシーン。
- テキストがゆっくり流れるリボン、素早い Hero の登場演出、落ち着いた表示アニメーション。いずれも「視差効果を減らす」設定では停止します。

使い方
- ブランド、価格とパックサイズ付きの商品、配達エリアと時間、ストーリー、連絡先を伝えます。足りないコピーはそれらしいプレースホルダーとして作成され、確認用に一覧で示されます。
- ボトルにあなたのブランド名が入った新しい Hero 写真と、同じ光で撮った商品ごとの静物写真をエージェントに生成させるか、ご自身の写真を送ります。パッケージ内の中立的なドリンクシーン 2 枚はそのまま使えます。
- すべてのページをデスクトップとスマートフォンで開き、カートに商品を入れ、クレートを組み、チェックアウトのプレビューを試してから、修正を依頼します。

書体は Bricolage Grotesque、Figtree、DM Serif Display で、ファイルに埋め込まれます。新しい画像はエージェント自身の画像ツールで生成するため、その利用料金がかかる場合があります。チェックアウトで実際の支払いが行われることはありません。
始める前に必要なもの
- 用意するもの
- ブランド名、価格とパックサイズ付きの商品、短いストーリー · 市場の詳細:通貨、配達エリアまたは配送方法、連絡先 · ご自身の商品写真とチーム写真、または新しい画像の生成への同意
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · Hero と商品画像用に、エージェントの画像ツールまたはご自身の写真
- 外部コスト
- Hero 写真と商品の静物写真はエージェント自身の画像ツールで生成するため、利用料金がかかる場合があります。ツールがない場合はご自身の写真を用意してください。中立的なドリンクシーン 2 枚はそのまま使えます。作例の閲覧は無料で、チェックアウトで課金されることはありません。
- 最終検証
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…








