できること
- フォントと写真を埋め込んだオフライン HTML 1 ファイル。または Next.js、React、Vue、Astro への移植版
- 流れるテキストのリボン、商品レール、コラージュ、ストーリーのタイムライン、ニュースレターを備えたキャンペーンのトップページ
- 商品ページ、コレクション、好みの組み合わせを選ぶケース作成ツール、バッグ、デモ用チェックアウト
- 地図投影スクリプト付きの取扱店検索、配送エリアの確認、ジャーナル、FAQ、お問い合わせ、ポリシーのページ
- 任意:PopNow による商品写真の清掃と生成した静物写真。各実行の前に価格を提示
向いている用途
- ジュース、スムージー、ソフトドリンク、コンブチャのブランド
- 直販するコーヒーの焙煎所、お茶やスナックのブランド
- 店頭受け取りや地域配送を行うパン屋やカフェ
向いていない用途
- 年齢確認が必要なアルコールのブランド
- コマースのバックエンドが必要な大規模なカタログ
- ダーク、ミニマル、またはコーポレートな雰囲気の見た目
使い方
Claude・ChatGPT で
PopNow のスキル「飲料ブランドのウェブサイト テンプレート」(beverage-brand-website)を使って、次のことをしてください:Sunfold のサイトを作って。330 ml 缶で 5 つのフレーバーがある炭酸のお茶ブランド。ドイツ国内に EUR で配送し、12 本の詰め合わせと、ベルリンとハンブルクの取扱店も入れて。
コーディングエージェントで
/popnow-beverage-brand-website Sunfold のサイトを作って。330 ml 缶で 5 つのフレーバーがある炭酸のお茶ブランド。ドイツ国内に EUR で配送し、12 本の詰め合わせと、ベルリンとハンブルクの取扱店も入れて。
次はこれ
5 つの缶の写真を切り抜いて、光を揃えて。まず価格を見せて。
瓶のデポジットの説明を缶のリサイクルに変えて、地域配送の範囲は削除して。
用意しておくもの
- 価格、容量、フレーバーやブレンドのある商品
- 買い方:配送、配送エリア、取扱店、ショップの有無
- ブランドのストーリーと、実際のお客さまの声
- 商品写真、またはスマホの写真、あるいは PopNow API キー
似ているスキル
すべて見る →- Web
3D アバター作成ツール
+25ぬいぐるみのようなかわいい 3D キャラクターをブラウザで作り、透過 PNG や 3D ページとして保存できます。
- Web
カレンダーヒートマップ
+251 年分の日々の活動を濃淡付きのカレンダーで表示。連続記録、合計、キーボード操作にも対応します。
- Web
AI SaaS ランディングページ
+25温かみのある砂色の紙に細い罫線とハッチングの溝を配し、AI アシスタントがタスクを計画するライブのかんばんボードを置きます。
- Web
アニメーション付きヒーローセクション
+25見出しの一語がゆるやかに切り替わり、ボタン 2 つと横長の画像枠を備えた LP のヒーローセクションです。
- Web
シェーダーのヒーロー付きの代理店サイト
+25下に固定された宣言文の後ろで、ライブのオレンジの熱をしたシェーダーのヒーローが動き、ピルのナビと、ずらして並ぶ事例のグリッドが続きます。
- Web
ダークモード SaaS ランディングページ
+25動きの多いダークトーンのソフトウェア製品向けマーケティングサイトを、自己完結した HTML ファイル 1 つで届けます。
- Web
デザイナーのポートフォリオサイト
+25落ち着いたグレーの上で、フェードする見出しの周りを 6 枚の傾いたカードが漂い、赤いポートレートのカードと、雑誌風の事例が続きます。
- Web
エンジニア向けポートフォリオサイト
+25事例紹介、執筆、登壇、履歴書、問い合わせフォームを備えた、エンジニア向けのダークな個人サイトです。
- Web
雑誌風の SaaS サイト
+25ネイビーの分割ヒーロー、ドキュメンタリー写真の横に並ぶ 5 行のセリフの見出し、斜めの帯、コバルトのアクセントひとつ。
- Web
フリーランスデザイナーのサイト
+25定額パッケージを売る、大胆な 1 人スタジオのサイト。プランのページ、事例、依頼フォーム付き。
- Web
グラスモーフィズムのサイトテンプレート
+25ほぼ黒のフィルムの上の、すりガラスのピル形ボタン。斜体の 1 語を含む大きなセリフの見出しと、メールの登録欄。
- Web
ハードウェア製品のサイト
+25銀色のスタジオ写真の上に、極細の巨大なモデル名。すりガラスのスペックカード、実寸比のラインアップ、ハードウェアのベントー。
- Web
インタラクティブなアーキテクチャ図
+25検証済みの JSON モデルから作る、オフラインでクリックできるシステム構成図。各ボックスの根拠も確認できます。
- Web
インタラクティブなグリッドのヒーロー
+25ほぼ黒の上の細い線のダークなグリッドが、カーソルの方へ曲がり、クリックのたびに光る輪が広がります。
- Web
ナレッジグラフ エクスプローラー
+25プロジェクトのメモを、すべての記述が出典の行にリンクする、オフラインで検索できるグラフに変えます。
- Web
KPI ダッシュボードのテンプレート
+25変化のチップ付きの 4 つの KPI タイルの下に、光る折れ線グラフ、内訳の表、目標のバー。温かい紙の上で。
- Web
AI モックアップからのランディングページ
+25まず 3 つのフルページのデザインを見て、ひとつを選ぶと、エージェントがきれいでレスポンシブなコードに組み上げます。
- Web
Web マガジンサイト テンプレート
+25記事、トピック、小さなショップ、定期購読を備えた、紙の雑誌のような質感のサイトを HTML ファイル 1 つで。
- Web
パーティクルアニメーションのヒーロー
+25温かい紙の上の文章の横で、インクとティールのドットの回転する球体が、アイデアごとに形を変え、スクロールで散ります。
- Web
個人ブランドのウェブサイト
+25細い枠の中で、温かい紙にやわらかくなじむ肖像。両側には、軽めと太字の言い切り。
- Web
ペットショップのウェブサイト テンプレート
+25カタログ、バリエーション、カート、補充プランナー、デモ用チェックアウトを 1 つの HTML ファイルに収めた、動くペット用品ショップ。
- Web
ポッドキャストのウェブサイト テンプレート
+25再生できるヒーロー、エピソードのアーカイブ、ゲストのページ、ページをまたいでも再生が続くプレーヤーを備えた番組サイト。
Web手描き風の料金表セクション
+25傾いたインクのカード、年額切り替え、ダークモードを備えた、ノートのような料金表。1 つのオフラインファイル。
- Web
シネマティックな製品ローンチページ
+25映画の光に照らされたほぼ黒のページ。ゆっくり流れる光の上のセリフの表題カード、レターボックスの夜のシーン、予約フォーム。
- Web
論文のウェブサイト
+25論文のプロジェクトページ。インタラクティブな図 1、結果、限界、ワンクリックの引用つき。
- Web
管理画面ダッシュボード テンプレート
+25グラフ、表、カンバン、カレンダーを備えた、実際に動くバックオフィス画面を、オフライン HTML ファイル 1 つで。
- Web
SaaS ランディングページ テンプレート
+25実際に動く製品コンソール、料金、登録フォームを備えた、落ち着いた明るいトーンのソフトウェア製品向けマーケティングサイトです。
- Web
スクラップブック風ポートフォリオサイト
+25紙の小物で作る複数ページのオンライン履歴書。事例紹介と印刷できる履歴書付きです。
- Web
スニーカーショップ サイトテンプレート
+25カタログ、商品ページ、カート、デモ決済を備えた、靴・アパレルのショップ一式を HTML ファイル 1 つで。
- Web
スポーツクラブのウェブサイト テンプレート
+25時間割、コーチのページ、会員制度、コートの配置図、予約を 1 つのファイルにまとめた、クラブ、ジム、スタジオのサイト。
- Web
お客さまの声の壁セクション
+25お客さまの声を組石のように並べるか、ゆっくり流れる壁にするセクション。掲載の了承を得た声だけを出します。
- Web
旅行会社のウェブサイト テンプレート
+25ツアー、ガイド、ロッジのための写真中心のサイト。旅の検索、予約リクエスト、旅選びのクイズつき。
- Web
ワークフロー自動化のランディングページ
+25グラファイトのページ。小さく左寄せの見出しと、その下で実行、再試行、ログの流れるライブのノードグラフ。
よくある質問
うちの商品は瓶ではなく缶です。それでも使えますか?
はい。パックに依存する部分(デポジットの一行、ケースのカウンターの絵、アイコン、404 ページの絵、サイズの表記)は適応ガイドに一覧があり、缶、瓶、パウチ、箱などに差し替えられます。
実際の商品写真を使えますか?
使えます。価格の見積もりを確認して承諾いただければ、PopNow が各パックを切り抜き、映り込みやテーブルの影を消して光を揃えます。その上で、フレーバーのタイルに置くか、実際のラベルを残したままの静物写真にします。
ショップで実際に注文を受けられますか?
まだです。バッグ、ケース作成、チェックアウトは動き、確認画面を表示しますが、決済サービスとご注文のバックエンドをつなぐまで、課金も送信も行われません。
取扱店を地図にのせるにはどうしますか?
緯度と経度つきで店舗を一覧にし、付属の投影スクリプトを実行して、出力された x と y の値を取扱店のデータに貼り付けます。
ジュース、炭酸飲料、コーヒーのブランドサイトにも合いますか?
合います。ショップではフレーバーごとに缶、瓶、袋を売り、ケース作成ツールでフレーバーを 1 つの箱にまとめられ、取扱店マップにはあなたの商品を置くカフェや店が並びます。明るい配色は、1 か所の設定でブランドカラーに置き換えられます。

