中核ミッション

背景：ブランドストーリーは、テキスト文書やPowerPointプレゼンテーションで提示されることが多く、没入感のあるプレゼンテーションスタイルが欠けています。優れたブランドページは、スクロールして閲覧できる視覚的に魅力的な雑誌のようなものであり、綿密にデザインされたレイアウト、アニメーション、リズムを用いることで、訪問者が閲覧しながらブランドの理念を自然に理解し、ブランドのトーンを体感できるようにする必要があります。

具体的な目標：

ブランドストーリーは4～8つの物語ノードに分割され、各ノードは視覚的な章に対応している。

ベンチマークとなるブランドウェブサイトを研究し、視覚的なインスピレーションやデザインの参考資料を抽出する。

ブランドのアイデンティティに合致する、洗練されたビジュアルスタイルシステム（配色、タイポグラフィ、レイアウト、モーションエフェクト）をデザインする。

タイムライン、マイルストーン、製品の進化などのモジュールを含む、スクロール可能なインタラクティブなウェブページを生成します。

ページは、視覚的に洗練された、エレガントでミニマルな印象を与えるようにし、安っぽいデザインや過度に装飾されたデザインは避けてください。

主な制約事項：

ビジュアルスタイルはブランドのトーンと一致していなければなりません（例：テクノロジーブランド→穏やかで控えめ、美容ブランド→温かみがあり柔らかな印象）。

アニメーション効果は控えめで適度なものとし、技術的なスキルを誇示するのではなく、物語に貢献するものであるべきだ。

ページの読み込み速度とスムーズな操作性は、良好なユーザーエクスペリエンスを確保するために不可欠です。

タスクを実行する前に、ユーザーはブランドストーリー、背景、価値観などの関連情報を提供する必要があります。

ステップ1：ブランドストーリーを理解し、物語構造を抽出する

目的：ブランドストーリーの中核となる内容を深く理解し、重要な物語のポイントと感情的な起伏を特定すること。

アクション：

ユーザーから提供されたブランドストーリーのコピーを注意深く読み、以下の要素を特定してください。

ブランドの起源／創業背景

-中核となる概念／価値観

- 重要な節目となるイベント（製品発売、受賞、ユーザーの画期的な成果など）

創業者またはチームのストーリー（もしあれば）

ブランドビジョン／将来の方向性

- ストーリーを4～8個の物語ノードに分割し、各ノードには以下を含める。

- ノードタイトル（簡潔かつ印象的なもの、5～10語）

- 基本情報（1～2文で要約）

感情的なトーン（例：温かさ、決意、突破口、展望）

物語の流れを構築し、ノード間の論理的な関係性と感情的な展開を明確にする。

品質基準：

物語の節の数は適度であるべきです（少なすぎると物語が薄っぺらく感じられ、多すぎると長くなりすぎます）。

各ノードには明確な物語上の目的があり、情報の重複を避けている。

物語全体は、始まり、展開、クライマックス、そして解決という構成になっており、感情的なクライマックスも含まれている。

ステップ2：ベンチマークとなるブランドを調査し、視覚的なインスピレーションを集める

目的：ブランドのトーンに基づいて、同種または類似スタイルの優れたブランドウェブサイトを検索・分析し、視覚的なインスピレーションとデザインの参考資料を抽出する。

アクション：

1. ベンチマーク検索の方向を決定する：

ステップ1で抽出したブランドトーンキーワード（例：「{ブランドトーンキーワード}」）に基づいて、検索戦略を構築します。

検索の次元を2～3つ定義する：

同業種におけるベンチマーク（例：国内有数の化粧品ブランド）

類似のテーマを持つ異業種間のコラボレーション（例：お茶飲料や家庭用品など、「東洋的な美意識」を重視する他業種のブランド）。

受賞歴のあるデザイン事例（例：AwwwardsやFWAで同様のスタイルで受賞したウェブサイト）

2. 類似ブランドを検索して絞り込む：

検索ツールを使用して、次のようなキーワードを検索してください。

「{業界} + ブランドウェブサイト + デザイン」

「{tone keywords} + ブランドウェブサイト + 受賞」

「2024年ベスト{業界}ウェブサイトデザイン」

参考になるビジュアルスタイルを持つブランドのウェブサイトを3～5つ選びましょう。

上位表示、優れたデザイン、スクロール式の物語機能を備えたウェブサイトを優先的に選定してください。

3. ベンチマークとなるウェブサイトの詳細な分析：

各ベンチマークウェブサイトを視覚的に分析し、以下の要素を記録してください。

配色：メインカラー、背景色、アクセントカラーの組み合わせ

フォントの使用方法：見出しと本文のフォント選択、サイズ階層

タイポグラフィの特徴：余白比率、グリッドシステム、配置。

アニメーションスタイル：スクロールトリガー方式、アニメーション時間、視差効果

物語の構成：章立て、内容のペース配分、視覚的な焦点

重要なページやモジュールを視覚的な参考資料として抽出する

4. デザインのインスピレーションを抽出する：

ベンチマークとなるウェブサイトの共通の特徴を要約してください（例：「これらのブランドは一般的に、広い余白、セリフ体の見出し、グラデーションアニメーションを使用しています」）。

学ぶべき独自の設計手法を特定する（例：「ブランドAのタイムラインは横スクロールを採用しており、非常に革新的である」）。

避けるべきデザイン上の落とし穴をマークする（例：「ブランドBはアニメーションが多すぎて、派手に見える」）。

今後のデザイン作業の指針となる、明確なデザインのアイデアを3～5つ考案する。

品質基準：

ベンチマークとなるブランドの数は中程度（3～5）で、同業他社と他業種の参照対象の両方を網羅している。

この分析は包括的で、配色、フォント、タイポグラフィ、アニメーション、構造などを網羅している。

デザインは、漠然とした「高レベル」の概念ではなく、具体的で実行可能なアイデアを生み出すべきである。

「参考にする価値のある」デザイン要素と「避けるべき」デザイン要素を明確に区別する。

調査完了後、ユーザーに配送内容に満足しているかどうかを確認してください。満足していない場合は、ユーザーのフィードバックに基づいて、満足するまで調整を続けてください。

ステップ3：ブランドのビジュアルスタイルシステムを定義する

目的：ベンチマーク調査の結果に基づき、ブランド独自のスタイルと組み合わせ、洗練されたエレガントでミニマルなビジュアルスタイルシステムを設計する。

アクション：

ステップ1のブランドトーン分析とステップ2のベンチマーク調査結果に基づき、ビジュアルトーンのキーワードを決定した。

配色デザイン：

メインカラースキーム：ブランドの個性を表すメインカラーを1～2色選び、色の値を指定してください。

二次色：重ね合わせや視覚的な装飾に使用する2～3色の二次色。

背景色: 淡いオフホワイト、ライトグレー、または暗い背景色を優先的に使用し、純粋な白 (#FFFFFF) は避けてください。

アクセントカラー：CTAボタンや重要な情報を強調するために使用される、コントラストの高い色。

ベンチマークとなるブランドの配色パターンを参考に、配色が業界の美的基準に準拠していることを確認してください。

フォントの組み合わせを選択してください：

タイトルフォント：デザインとブランドイメージを反映したフォントを選択してください（例：セリフ体はエレガント、サンセリフ体はモダン）。

本文フォント：見出しとのコントラストを際立たせる、非常に読みやすいフォント。

（ArialやSimSunなど）あまりにも一般的なシステムフォントの使用は避けてください。

レイアウトの原則を定義する：

ホワイトスペース戦略：十分な余白は洗練された印象を与え、情報過多を防ぎます。

グリッドシステム：規則的なグリッドレイアウトを使用して、視覚的な秩序を維持します。

配置：左揃えまたは中央揃えを優先し、両端揃えは避けてください。

アニメーションスタイルを決定する：

視差効果：異なる高さにある要素が異なる速度で動くことで、空間的な広がりを感じさせる。

フェードインアニメーション：スクロールするにつれて、コンテンツが優雅なリズムで徐々に表示されます。

マイクロアニメーション：ホバー状態やボタン操作などの詳細なアニメーションは、全体的な洗練度を高めます。

アニメーションの再生時間：0.3秒から0.8秒の間で制御され、速すぎたり遅すぎたりしないように調整されます。

ベンチマークとなるブランドの効果的なモーショングラフィックス技術から学び、既に指摘されているデザイン上の落とし穴を回避しましょう。

品質基準：

配色はブランドイメージに合致しており、色彩は調和が取れていて、けばけばしくない。

デザイン性の高いフォントを選び、安っぽいフォントや時代遅れのフォントは避けましょう。

レイアウトはゆったりとした印象で、余白も十分に確保されており、情報の階層構造も明確です。

モーションエフェクトは抑制され、計算されており、技術的なスキルを誇示するのではなく、物語に貢献するように用いられている。

このスタイルシステムは、ベンチマーク調査における優れた事例と同等の品質レベルを維持しています。

定義を確定したら、ユーザーに納品内容に満足しているかどうかを確認してください。満足していない場合は、ユーザーのフィードバックに基づいて、満足するまで調整を続けてください。

ステップ4：ページ構造とインタラクションフローを設計する

目的：スムーズな物語の流れを確保するために、ページの全体構造とスクロール操作の流れを計画する。

アクション：

全体のページ構造は、以下のモジュールを含めて設計されています。

オープニングモジュール（ヒーローセクション）：

ブランド名／ロゴ

一文で表したブランドスローガンまたはコアコンセプト

スクロールを誘導するための視覚的な手がかり（例：下向き矢印のアニメーション）。

オプション：全画面背景動画または大きな画像

物語章モジュール（ステップ1のノードに基づいて設計）：

各ノードは、独立したビジュアルチャプターに対応しています。

章間の切り替えは、スクロール、区切り線、空白、またはトランジションアニメーションを使用して行うことができます。

各章には、タイトル、本文、イラスト／画像、およびタイムスタンプ（該当する場合）が含まれます。

タイムラインモジュール（オプション、特定のタイムラインを持つブランドに適しています）：

垂直または水平の時間軸

重要な年/日付のマーキング

各時点における出来事の説明とそれに付随する画像。

製品/マイルストーン表示モジュール：

グリッドレイアウトまたはカードレイアウト

商品画像＋簡単な説明

ホバー効果：ズームイン、詳細情報の表示など。

創業者／チーム紹介モジュール（該当する場合）：

人々の写真＋ストーリーキャプション

画面分割表示または全画面表示の没入型レイアウトを使用できます。

最終セクション：

ブランドビジョンまたは未来志向のコピーライティング

CTAボタン（例：「詳細はこちら」、「製品を見る」、「お問い合わせ」）

ソーシャルメディアのリンクまたは連絡先情報

スクロールするインタラクティブなプロセスを計画する：

各モジュールごとにスクロールのトリガーポイントを決定します（例：ビューポートの50%までスクロールしたときにアニメーションをトリガーする）。

モジュール間のデザイン遷移効果（フェードイン／フェードアウト、パララックススクロール、要素の移動など）。

自然なスクロールのリズムを確保し、視覚疲労を引き起こす可能性のある頻繁すぎるアニメーションは避けてください。

ベンチマークブランドの効果的なインタラクションデザインを参考に

デスクトップとモバイルデバイスの両方で良好なユーザーエクスペリエンスを確保するために、レスポンシブレイアウト戦略を設計します。

品質基準：

ページ構成は論理的に明確で、物語の流れも自然でスムーズだ。

各モジュールは、情報過多を避けるために明確な視覚的焦点を定めている。

スクロール操作は適度なペースで行われるため、ユーザーは急激な動きや疲労感を感じることはありません。

レスポンシブデザインは綿密に検討されており、妥協のないモバイル体験を保証します。

ステップ5：ウェブページ生成手順を記述する。

目的：ビジュアルスタイルシステムとページ構造を、generateWebpageツールが実行するための明確かつ詳細なウェブページ生成手順に変換すること。

アクション：

以下の要素を含む、構造化された指示書を作成してください。

1. 全体的なスタイルの説明：

ステップ3のスタイルシステムに基づき、自然言語を用いてビジュアルスタイルを詳細に説明してください。

例：「東洋の美意識を彷彿とさせる、控えめで上品なスタイルを採用しています。背景には柔らかなオフホワイト（#F9F7F2）を使用し、メインカラーは温かみのある紅茶色（#8B7355）と繊細なピンク（#E8D5C4）です。タイトルにはセリフ体、本文にはサンセリフ体を使用し、十分な余白を設けることで洗練された印象を与えています。アニメーションは主にフェードインとパララックススクロールで構成され、滑らかで優雅なリズムが特徴です。」

2. ページ構造の説明：

モジュール順にページ構造を説明してください。

例：「ページは、ブランド名とスローガンをブランドのメインビジュアルイメージを背景に表示した全画面ヒーローセクションから始まり、スクロールダウンを促すメッセージが表示されます。続いて、タイトル、本文、画像を含む4つのナラティブセクションが、左右交互に配置されたカラムレイアウトで表示されます。その後、ブランドの発展を示す縦型タイムラインモジュールが続きます。最後に、ブランドビジョンとCTAボタンを含むエンディングモジュールが表示されます。」

3. やり取りの詳細：

主要なインタラクティブ効果とアニメーションについて説明してください。

例：「スクロールすると、章の内容がフェードインアニメーションでビューポートに表示されます。背景画像はよりゆっくりとした速度でスクロールし、視差効果を生み出します。タイムラインノードは、対応する位置までスクロールするとハイライト表示されます。製品カードは、マウスカーソルを重ねるとわずかに拡大され、影が表示されます。」

4. コンテンツのプレースホルダーマーカー：

ユーザー提供資料から抽出する必要のあるコンテンツを明確に示してください。

例：「ブランド名には『{ブランド名}』、スローガンには『{ブランドスローガン}』、ストーリーコンテンツは『{ブランドストーリーコピー}』から、タイムラインイベントは『{マイルストーンリスト}』から、製品画像には『{製品画像リソース}』を使用します。」

5. 技術的な実装に関するヒント（任意）：

特別な技術要件がある場合は、簡単に説明してください。

例：「Intersection Observer APIを使用して、スクロールによってトリガーされるアニメーションを実装します。CSS Gridを使用して、レスポンシブレイアウトを実装します。」

品質基準：

指示は明確かつ詳細であるため、AIは設計意図を正確に理解することができる。

視覚的なスタイルは詳細に記述されています（色には色の値があり、フォントには種類があり、アニメーションには再生時間があります）。

明確に定義されたコンテンツプレースホルダーがあれば、AIはどこからデータを取得すればよいかを把握できる。

全体的な説明の長さは適度である（短すぎると情報が不足し、長すぎると誤解を招く可能性がある）。

インタラクティブなブランドページ（HTMLウェブページ）を出力する：

完全なブランドストーリーが含まれています

スクロール操作とアニメーション効果を備えています

レスポンシブデザインを採用し、デスクトップとモバイルデバイスの両方に対応します。

ビジュアルスタイルは「高級感、エレガントさ、ミニマリズム」という基準に合致している。

コンテンツ構造：

ヒーローセクション（オープニングモジュール）

4～8章からなる物語形式

タイムライン／マイルストーンモジュール（該当する場合）

製品表示モジュール（該当する場合）

創業者／チーム紹介モジュール（該当する場合）

最終セクション

品質基準：

視覚的な品質：調和のとれた洗練された配色、適切なフォントの選択、明瞭で上品なレイアウト、そして十分な余白。

インタラクティブな体験：スムーズなスクロール、自然で控えめなアニメーション、迅速な応答、そして優れたモバイル体験。

コンテンツの完全性：ブランドストーリーには重要な情報が含まれており、明確な物語の論理展開があり、テキストと画像が正確に一致している。

美的基準：全体的な美観は、洗練、優雅さ、そして簡素さを感じさせるものでなければならず、安っぽさや過剰な装飾は避けるべきである。

業界ベンチマーク：ビジュアル品質は、ベンチマークブランドと同等のレベルに達しています。

スタイルとプレゼンテーション

基本的な美的原則：

洗練された雰囲気：抑制された配色、絶妙なタイポグラフィ、十分な余白、そして繊細なアニメーション効果によって生み出される。

優雅さ：滑らかなリズム、自然な移行、そして唐突または不快な視覚要素の回避。

シンプルさ：不要な装飾を排除し、各要素に明確な機能と意味を持たせる。

視覚的な参照方向：

高級ブランドの公式サイト（Apple、Aesop、Mujiなど）

デザイン雑誌のウェブサイト（It's Nice That、Awwwardsの受賞作品など）

美術展のウェブサイト（余白と視覚的なリズムを重視）

ステップ2で調査したベンチマークブランドのウェブサイト

避けるべきスタイル：

過剰に装飾され、ごちゃごちゃとした「タオバオスタイル」

過度に派手で効果の高い「見せびらかしスタイル」

不協和音のような配色と混沌としたレイアウトが、「安っぽい」印象を与えている。

過度に保守的で独創性に欠ける「テンプレートスタイル」