
プレビューギャラリー
類似の Skill
すべての Skill を見る手に入るもの
- ブランドショップ一式:ホーム、商品・コレクション・レシピのページ、ストーリー、地図付きの取扱店、卸売、FAQ、配送、お問い合わせ、ニュースレター、カート、チェックアウト、規約ページ
- 方眼紙のルック:細い方眼線の入ったあたたかい紙、太いコンデンス体の見出し、フレーバーの色を帯びた線画風カード、ステッカー付きの 5 枚の写真による Hero の扇、コバルト色のフッターのワードマーク
- 実際に動くショップの細部:送料無料メーター付きのカートのドロワー、サイズ別・定期便の価格、検索、フィルター、レシピの分量スケーラー、入力検証付きのチェックアウト
向いている人
- ステッカーと紙パックのような明るい個性がほしい、オーツ、ジュース、コーヒー、紅茶、コンブチャ、スナックのブランド
- ショップ、レシピや習慣、取扱店、サポートページを 1 つのファミリーとしてデザインしたい小規模な消費者ブランド
- 実際の決済を接続する前に説得力のあるストアフロントがほしい創業者、または自分のプロジェクトに移植するデザインがほしい創業者
向いていない人
- 控えめなラグジュアリーやコーポレートのブランド:太いコンデンス体、ステッカー、フレーバーカラーは意図的ににぎやかで遊び心があります
- 今すぐ実際の決済、アカウント、注文配送が必要なストア:カートとチェックアウトはページ上で確認を表示し、課金されていないことを伝えます
- 1 画面だけのティーザー:この Skill はつながったサイト全体を作るため、ランディングセクション 1 つだけでは大部分が無駄になります
ブランディング・ビジュアルシステムWeb デザイン・デジタル体験ブランドサイト作成スタイル固定編集可能な出力オーツファンオーツ Heroオーツレシピオーツストーリー
この Skill について

Grid-Paper ビバレッジブランドサイトは、あたたかみのある方眼紙の上に、購入まで完結するブランドサイトを丸ごと作ります。太いコンデンス体の見出し、線画風のカード、ステッカーのアクセント、フレーバーごとに 1 色の遊び心あるカラーが特徴です。すべてのリンクがデザインされたページにつながり、カート、検索、フォームもすべて反応します。作例は架空のオーツドリンクブランド Oat Parade で、34 のページがつながっています。

手に入るもの
- 多彩な構成のホームページ:写真の扇の Hero、フレーバーのマーキー、フィルター付きの商品レール、ストーリーの 2 分割、数値の Bento、畑から冷蔵庫までの道のり、レシピの Bento、お客様の声、FAQ、取扱店検索、ニュースレター
- すべての商品・コレクション・レシピの下層ページと、ストーリー、地図付きの取扱店、卸売、FAQ、配送、お問い合わせ、カート、チェックアウト、プライバシー、利用規約、Not Found ページ
- ショップのインタラクション:数量と送料無料メーター付きのカートのドロワー、サイズ別・定期便の価格、検索、お気に入り、レシピの分量スケーラー、入力検証付きのチェックアウト
- 被写体ごとに 1 枚、統一したアートディレクションで計画した写真を、フォントとともに 1 ファイルに埋め込み、オフラインで動作

使い方
- ブランド名、一言で表す約束、価格とサイズ付きの商品、購入方法、ストーリーを伝えます。
- エージェントがフレーバー、レシピ、取扱店をあなたのビジネスに合わせて割り当て、写真を生成して全ページを埋めます。
- ファイルを開き、デスクトップとスマートフォンでショップ、カート、レシピを一通りクリックして確かめ、普段の言葉で修正を依頼します。

写真はエージェントの画像ツール(そのツールの利用料金がかかる場合があります)またはご自身のライブラリから用意します。実際のサービスを接続するまで、カートやチェックアウトで課金・送信が行われることはありません。
始める前に必要なもの
- 用意するもの
- ブランド名、一言で表す約束、ターゲット · 名前、価格、サイズ、それぞれの違いがわかる商品情報 · 購入方法(オンライン、取扱店、卸売、定期便)、ストーリー、配送と連絡先の情報
- 依存関係
- エージェントのマシン上の Node.js 18 以降。単一のオフラインファイルを構築する同梱スクリプトの実行に使用 · ファイル作成時のインターネット接続(フォントを一度ダウンロードして埋め込むため) · 商品、レシピ、ストーリーの写真用に、エージェントの画像ツール(ご自身の写真を用意する場合は任意)
- 外部コスト
- エージェントは商品、レシピ、ストーリーの写真を自身の画像ツールで生成するため、そのツールの利用料金がかかる場合があります。代わりにご自身の写真を用意することもできます。それ以外に有料サービスは使いません。
- 最終検証
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
ユーザーレビュー
レビューを読み込み中…








