ストーリー主導型ウェブサイトコンセプト

ストーリー主導型ウェブサイトコンセプト は何をしますか？

目的

十分に理解されたビジネス課題を、一連の汎用的な機能やインターフェースセクションではなく、意味、変容、ナラティブ、エビデンスを中心に構築された個性的なウェブサイトコンセプトに変換します。

このスキルは、主にビジュアルの前に言葉で機能します。

以下の項目を決定します：

• ウェブサイトが本来何を伝えるべきか
• それを伝えるのに適したストーリーやナラティブレンズは何か
• 訪問者の理解をどのように進行させるべきか
• その進行を裏付けるエビデンスは何か
• コンセプトが方向性レベルでコンテンツ、ボイス、イメージ、レイアウト、モーション、インタラクションにどのように影響を与えるべきか
• ナラティブがユーザーの次のアクションをどのように支援するか

結果は、評価とその後のビジュアルシステム開発の準備が整った、複数のコンセプトの方向性です。

このスキルは、最終的なコピー、最終的なレイアウト、詳細なワイヤーフレーム、デザインシステム、または実装コードを生成しません。

---

核となる原則

強力なウェブサイトコンセプトは、以下を結びつけます：

ビジネス課題
→ オーディエンスのニーズ
→ 意味のある変容
→ 中心アイデア
→ ナラティブの進行
→ 裏付けとなるエビデンス
→ ユーザーアクション

ビジュアルに関する決定は、後でこの連鎖を強化する必要があります。

以下は避けるべきです：

興味深い美学
→ 巧妙な見出し
→ 恣意的なセクション
→ 装飾的なインタラクション

コンセプトは、何のように見えるかを説明する前に、なぜ体験が存在するのかを説明するべきです。

---

ストーリーは装飾ではない

「ストーリー主導」とは、すべてのウェブサイトが以下を必要とすることを意味しません：

• 劇的な主人公
• 映画的なスクロールシーケンス
• 創業者の経歴
• 感情的な推薦文
• 起承転結の脚本
• 架空の物語

ストーリーは単に、情報が意図的に構造化され、訪問者が理解のある意味のある状態から別の状態へと移行することを意味します。

有効なナラティブ構造の例：

問題
→ 結果
→ 解決策
→ 証明
→ 行動

原材料
→ プロセス
→ 完成品
→ 能力

旧来の方法
→ 緊張
→ 新しい方法
→ エビデンス

顧客の状況
→ 課題
→ 体験
→ 成果

ミッション
→ 障害
→ 方法
→ インパクト

疑問
→ 調査
→ 発見
→ 示唆

適切なナラティブの強度はプロジェクトによって異なります。

---

このスキルを使用するタイミング

以下の場合にこのスキルを使用します：

• ウェブサイトのブリーフがすでに十分に理解されている。
• ユーザーがウェブサイトコンセプト、クリエイティブディレクションコンセプト、中心アイデア、ナラティブの方向性、ストーリーテリング構造、またはストーリー主導のランディングページを求めている。
• ページが現在、デジタルパンフレットや、関連性のない機能セクションの連続のように感じられる。
• ホームページに情報はあるが、明確な進行や視点が欠けている。
• 複数のメッセージが優先順位を競っており、一つの中心的な意味に基づいて整理する必要がある。
• ブランドに、体験を構造化できる強力な創業者、顧客、プロセス、製品、ミッション、変容に関する素材がある。
• グラフィックユニバースリサーチが存在し、実際のウェブサイトのアイデアに結びつける必要がある。
• ユーザーがビジュアルの方向性を選択する前に、いくつかの真に異なるクリエイティブコンセプトを求めている。
• 製品が単に機能を列挙するのではなく、使用法、変容、またはエビデンスを通じて価値を実証する必要がある。
• デザインチームが、ウェブサイトが実際に何を伝えようとしているのか合意する前に、ビジュアル実装に進み続けている。
• コンセプトが、見出し、画像、コンテンツ構造、行動喚起、最終的なインタラクションを、一つの一貫した方向性に結びつける必要がある。

以下の場合にはこのスキルを使用しないでください：

• ビジネス課題やオーディエンスがまだ不明確である。
• ユーザーがビジュアルインスピレーションやグラフィックリサーチのみを必要としている。
• ユーザーが成熟したコンセプトをすでに持っており、それらの中から選択するだけである。
• タスクが最終的なコピーライティングである。
• タスクが複雑なアプリケーションのための詳細な情報アーキテクチャである。
• タスクがUIコンポーネントデザインである。
• タスクが最終的なレイアウト構成である。
• タスクがデザインシステムの仕様化である。
• タスクが実装またはコードである。
• インターフェースが主にユーティリティまたは操作ツールであり、ナラティブフレーミングが不必要な摩擦を追加する場合。

プロジェクトが十分に理解されていない場合は、まず問題フレーミングワークフローを実行します。

---

調査するインプット

利用可能な限り多くの以下を調査します。

戦略的素材

• ビジネス課題
• プロジェクトブリーフ
• ビジネス目標
• オーディエンス
• ジョブ・トゥ・ビー・ダン
• ユーザーニーズ
• 望まれるアクション
• ポジショニング
• バリュープロポジション
• 差別化要因
• 競合状況
• 制約条件

変容のエビデンス

• カスタマーアウトカム
• ビフォー・アフターの状態
• 解決された問題
• 節約された時間
• 低減されたリスク
• 獲得されたスキル
• 改善された体験
• 感情的な成果
• 業務改善
• 社会的または文化的影響

ストーリー素材

• 創業者のストーリー
• 会社の成り立ち
• カスタマーストーリー
• 推薦文
• ケーススタディ
• 製品使用例
• 舞台裏の素材
• 製造またはサービスのプロセス
• 歴史的なマイルストーン
• ミッション
• リサーチ
• データ
• 結果
• 製品開発

ブランド素材

• ブランド戦略
• トーンオブボイス
• 既存のメッセージング
• キャンペーン言語
• ネーミング
• 用語
• 既存のビジュアルアイデンティティ
• 写真
• アーカイブ素材

コンテンツ素材

• 既存のページコピー
• サイトマップ
• セクション一覧
• 製品説明
• サービス
• FAQ
• レビュー
• 統計
• 行動喚起

上流のデザインリサーチ

利用可能な場合、以下からの出力を調査します：

• design-problem-framer
• graphic-universe-builder

有用なグラフィックユニバースのインプットには以下が含まれます：

• プロジェクトボキャブラリー
• リサーチクラスター
• プロジェクトが所有する機会
• ビジュアルアトム
• メタファーの候補
• 候補となるグラフィックユニバース
• カテゴリーのクリシェ

プロジェクトにすでに強力なコンセプト素材が含まれている場合は、グラフィックユニバースリサーチを必須としないでください。

---

前提条件

コンセプト生成の前に、以下の質問に回答できるかどうかを判断します：

組織は何を提供しているか？

主要なオーディエンスは誰か？

そのオーディエンスは何を必要とし、望み、恐れ、または苦労しているか？

提供物はどのような意味のある変化を生み出すか？

なぜこの組織は信頼されるべきか？

訪問者は何を理解すべきか？

感情が関連する場合、訪問者は何を感じるべきか？

訪問者は何をすべきか？

このプロジェクトを、明白な代替案と区別するものは何か？

いくつかの回答が不明な場合は、それらを未解決の質問としてマークします。

コンセプトを完成させるために戦略的事実をでっち上げないでください。

---

ワークフロー

1. デザイン問題を言い換える

ブリーフをコンセプト準備済みのステートメントに凝縮します。

以下を使用します：

ウェブサイトは、<オーディエンス>が <主要な障壁>を克服しながら、
<意味>を理解/信じ/体験し、
<望まれるアクションや成果>を実行できるように支援する必要があります。

構造例：

ウェブサイトは、技術的なバイヤーが、この会社が単に
部品を製造しているだけでなく、原材料から完成された
精密部品までの全プロセスを管理していることを理解し、
高リスクな生産業務をこの会社に任せても大丈夫だと
信じられるようにする必要があります。

問題が明確に表現できるようになるまで、コンセプト作成を開始しないでください。

---

2. 本質的な意味を定義する

問いかけます：

訪問者がこの体験からたった一つのアイデアだけを覚えているとしたら、それは何であるべきか？

一文で書きます。

これは以下ではありません：

• スローガン
• 見出し
• 機能のリスト
• ビジュアルスタイル

コンセプトが伝えなければならない意味です。

例：

この会社は、予測不可能な工業プロセスを、正確で、
可視化され、信頼できるものに変えます。

ステートメントをテストします：

• オーディエンスにとって意味があるか？
• ビジネスに関連しているか？
• 「私たちは革新的です」よりも具体的か？
• 利用可能なエビデンスで裏付けられるか？
• コンテンツの決定を導くことができるか？

---

3. オーディエンスの変容を定義する

望まれる変化を説明します。

以下を使用します：

ビフォー：
訪問者は、次のように考え/感じ/信じている...

アフター：
訪問者は、次のように考え/感じ/信じている...

アクション：
訪問者は、今や...する準備ができている。

考えられる変容には以下が含まれます：

不確か → 確信
知らない → 知っている
懐疑的 → 確信
圧倒されている → 明確
好奇心 → 関与
無関心 → 感情的に繋がっている
問題認識 → 解決策認識
機能重視 → 成果重視
一般的な認識 → 独自の認識

理解の実用的な変化で十分な場合に、感情的な変容を作り出さないでください。

---

4. エビデンスの目録を作成する

利用可能なストーリー素材を仮定から分離します。

以下を使用します：

エビデンス	種類	証明すること	強さ
...	顧客 / 創業者 / プロセス / データ / 製品 / 歴史	...	高 / 中 / 弱

素材を以下に分類します：

検証済み

提供された素材によって直接的裏付けられている。

推測

もっともらしい解釈だが、検証が必要。

欠落

現時点では存在しない有用なエビデンス。

コンセプトは、でっち上げられた推薦文、捏造された歴史、事実として提示される仮説の顧客成果、または存在しない制作素材に依存すべきではありません。

---

5. 可能なナラティブレンズを特定する

どのレンズがプロジェクトの意味を自然に引き出すかを評価します。

可能なレンズには以下が含まれます：

変容

顧客のために生み出される意味のある変化を示します。

ビフォー
→ 介入
→ アフター

成果が最も強力な差別化要因である場合に最適。

製品使用

孤立した機能ではなく、実際の状況を通じて提供物を示します。

コンテキスト
→ 使用
→ 結果

製品が機能しているのを見ることが信頼を生む場合に最適。

プロセス

何かがどのように作成、提供、変容、または解決されるかを明らかにします。

インプット
→ ステージ
→ アウトプット

プロセス、クラフト、透明性、または専門知識が組織を差別化する場合に最適。

創業者または起源

組織が存在する理由を構成するナラティブとして使用します。

フラストレーション
→ 決断
→ 新しいアプローチ
→ 現在のミッション

起源が製品やブランドを意味のある形で説明する場合に最適。

創業者素材が存在するという理由だけで、創業者ナラティブを使用しないでください。

カスタマーストーリー

実際の顧客の状況に関連性を示させます。

状況
→ 問題
→ 体験
→ 成果

社会的証明と実際の体験が製品の主張よりも強力な場合に最適。

ミッションとインパクト

組織が生み出したい変化を中心に体験を構成します。

現状
→ 課題
→ 介入
→ インパクトのエビデンス

慈善団体、文化機関、ミッション主導型組織、公共的利益活動に有用。

対比

従来の代替案の弱点を明らかにすることで提供物を定義します。

古い前提
→ 矛盾
→ より良いモデル

カテゴリーに根強いデフォルトがある場合に有用。

ジャーニー

訪問者を意味のあるシーケンスで導きます。

ステージ 1
→ ステージ 2
→ ステージ 3
→ 目的地

進行自体が重要な場合に有用。

システム

一見別々のピースがどのように連携するかを明らかにします。

パーツ
→ 関係性
→ システム
→ 成果

プラットフォーム、インフラ、複雑なサービス、エコシステムに有用。

調査

質問から始め、徐々に答えを明らかにします。

質問
→ エビデンス
→ 発見
→ 結論

編集、リサーチ、文化、説明を目的とした体験に有用。

実演

主張を証明することにウェブサイトを構成します。

主張
→ 実演
→ エビデンス
→ 招待

信頼を迅速に獲得する必要がある場合に有用。

複数のレンズが共存することもありますが、各コンセプトには一つ支配的なナラティブメカニズムが必要です。

---

6. 適切なストーリーの強度を選択する

すべてのプロジェクトが没入型のナラティブ体験になるべきではありません。

候補コンセプトを以下に分類します：

ライトナラティブ

ナラティブは主に以下に影響を与えます：

• メッセージの順序
• セクションの進行
• 見出し
• 証明の配置

インターフェースは従来の効率的なままです。

以下の場合に適しています：

• SaaS
• プロフェッショナルサービス
• B2B
• 製品ページ
• コンバージョン重視のサイト

統合ナラティブ

ナラティブは以下に影響を与えます：

• ページの進行
• コンテンツのリズム
• イメージ
• 繰り返される言語
• 選択されたインタラクション
• セクションの遷移

以下の場合に適しています：

• ブランドサイト
• ポートフォリオ
• ローンチ
• 差別化されたサービス企業
• エディトリアルコマース

没入型ナラティブ

体験自体がストーリーのように動作します。

ナラティブは以下に影響を与える可能性があります：

• スクロールの進行
• メディアのシーケンス
• シーンの変更
• インタラクション
• チャプター構造
• リッチなモーション

以下の場合に適しています：

• キャンペーン
• 文化体験
• 製品ローンチ
• ストーリーテリングプロジェクト
• 体験型ブランドサイト

没入型は、以下の場合にのみ提案されるべきです：

• コンテンツがそれをサポートしている
• 価値がそれを正当化する
• 制作予算がもっともらしくそれをサポートできる
• ナラティブが、脆弱なインタラクションを必要とせずに理解可能である

---

7. ビジュアルテリトリーの前に言語テリトリーを生成する

言語を使ってコンセプト探求を開始します。

以下に関連する単語やフレーズを生成します：

• 変容
• 顧客の言語
• プロジェクトボキャブラリー
• プロセス
• オブジェクト
• ドメイン用語
• コントラスト
• 成果
• 文化的連想
• グラフィックユニバースの発見

考えられるアイデア出しの方法には以下が含まれます：

フレーズの組み合わせ

プロジェクトの言語を、予期せぬが正当化可能な方法で組み合わせます。

イディオム

関連するイディオムをひらめきのきっかけとして探求します。

イディオムを最終的なコンセプトに無理に組み込まないでください。

以下は拒否します：

• 使い古されている
• 混乱させる
• 文化的に不適切
• 巧妙すぎる
• 実際のビジネスと無関係

ドメイン言語

オーディエンスがすでに使用している用語を再解釈します。

ダブルミーニング

機能的および感情的な意味の両方を持つ単語を探求します。

対比ステートメント

例：

Xではない。Y。
XからYへ。
Xを超えて。
XがYだったらどうなる？

変容言語

動きや変化を説明する動詞を使用します。

質問

未解決の意味のある質問を使って緊張を生み出します。

プロジェクトが所有するフレーズ

競合他社が簡単に主張できない用語や言語を優先します。

この段階で最終的なウェブサイトのコピーを書かないでください。

目的はコンセプト生成です。

---

8. 収束する前に発散する

複数のルー

…（省略）