プロトタイプストーリー作りから始めるWebサイト設計：ノーコードにも活かせる準備術（1）基本編
「ノーコードツールを使えば、すぐにWebサイトが作れる！」
そう思って制作を始めたのに、画面の前で立ち止まってしまった経験はありませんか。どんなページが必要なのか、この情報をどこに置けばいいのか、どのデザインテンプレートを選べばいいのか。気づけば悩む時間が増え、完成が遠のいていく...。
実は私も同じ経験があります。
ノーコードツールで作ったものの、後から「あれも必要、これも必要」と修正を重ね、結局時間がかかってしまったWebサイトがいくつもありました。
でも、UXリサーチャーとして様々なWebサイト制作に関わる中で、大切な気づきがありました。
Webサイト制作は、ツールを触り始める前に「ストーリー」を用意することで、制作の負担がぐっと変わるのです。
この記事では、自分自身の失敗経験とUXリサーチで得た知見を活かし、Webサイトを作る方に向けて「プロトタイプストーリー」という方法をご紹介します。これは、サイトを完成させるまでの効果的な戦略となるはずです。
このアプローチを使えば：
必要なページや機能が明確になる 情報の優先順位が決めやすくなる
デザインの選択に確かな基準ができる 修正作業を最小限に抑えられる
といった、迷いがグッと減ります。
それでは、具体的な手順を見ていきましょう。
プロトタイプストーリーとは何か
プロトタイプストーリーは、一般的にはユーザーシナリオとも呼ばれています。
私は当初、人間中心設計の中でのストーリーの役割は比較的小さいと考えていました。しかし、実際にUXリサーチャーとして様々なプロジェクトに関わる中で、「ストーリーを作ることを前提でユーザーインタビューを行う」ことで、Webサイトや新規事業の開発に、より具体的で実践的な示唆を得られることに気づきました。そのため、ここではあえて「プロトタイプストーリー」と命名しています。
ひょっとしたら、「ワイヤーフレームのような設計図を作るの？」と思われるかもしれません。でも、この2つには大きな違いがあります。
ワイヤーフレームは「どこに何を配置するか」という設計図です。一方、プロトタイプストーリーは「誰が、なぜ、どのように使うのか」を描く物語です。そして、この「物語」という言葉を使うのには深い意味があります。
なぜ「ストーリー（物語）」という言葉を使うか
それは、Webサイトを通じて起こる「人の変化」を描きたいからです。映画や小説のように、主人公（ここではユーザー）が課題に直面し、それを乗り越えて変化していく。この「変化の連なり」こそが、Webサイト作りでも大切な視点なのです。
一見、単なる会社案内のサイトや、商品を売るためのサイトに見えても、その根底には「信頼できる会社を見つけたい」「自分に合った商品を選びたい」といった人々の想いに応える必要があります。
コンセプトとストーリーの違いについて
ここで、コンセプトとストーリーの違いについても触れておきましょう。
コンセプトは、サイトの存在意義を端的に表現するものです。「ターゲット
」「インサイト（隠れたニーズ）」「ベネフィット（提供価値）」「RTB(提供価値を信じられる理由)」の4つの要素で構成されます：
一方のストーリーはというと。
このコンセプトを「使う人の体験」として具体的に描いていきます：
コンセプトが「何を提供するか」を示すのに対し、ストーリーは「どのように使われ、どう役立つか」を具体的に描くのです。どちらか一方があればいいわけではなく、両方があってこそサイトの価値が明確になります。
このように、プロトタイプストーリーは単なる設計図以上のもの。それは、あなたのWebサイトを使う人の「体験」と「変化」を描く物語なのです。この物語があるからこそ、後からワイヤーフレームを描く時も「このボタンは本当にここでいいのか」「この情報の順番は使う人にとって自然か」といった判断ができるようになります。
プロトタイプストーリーを作る準備
プロトタイプストーリーを作る前に、物語の重要な要素について理解を深めましょう。
私たちが普段見ている映画やドラマには、必ず「誰が」「どんな問題を抱えているか」「どう解決するのか」「その結果どうなるのか」という要素が含まれています。実は、Webサイトのストーリーにも、同じ4つの要素が必要なんです。
物語の４つの要素
誰が
これは単なる属性の羅列ではありません。
30代の会社員、というだけでなく、朝は7時に起きて、電車で1時間かけて通勤する。土日は趣味の写真撮影を楽しむ。そんな、その人の暮らしぶりが見えてくる描き方が大切です。
どんな課題を抱えているか
課題は人が抱えている悩みや問題・欲望を示します。ですが、人が意識している行動にまつわる悩みを把握するだけではなく、その裏側にある気持ちを押さえることが必要です。なぜなら、人は行動を起こす前に、気持ちが動くからです。
例えば、アマチュア写真家のポートフォリオサイトを作る場合、「自分の作品を見せたい」という悩みの裏には、「自分で営業しないで撮影の依頼を増やしていきたい」という気持ちが隠れている可能性もあります。
このような気持ちにこそ、より良いサイト作りのヒントが隠されているのです。
どう解決されるか
例えばアマチュア写真家のポートフォリオサイトなら、「昼休みの時間、人からの評価が良さそうな写真を手際よく探してアップロードする」といった、具体的な使用シーンを思い描きます。同じ「写真を載せる」でも、使う場面によって求められる機能は変わってきます。
その結果どうなるか
ここでも気持ちの変化が先にきます。「人からの人気がある写真を手早くアップロードできたから、撮影依頼のチャンスがちょっと増えたかもと期待と持てた」という気持ちの変化があって、初めて「毎日コツコツと写真を整理する習慣ができた」という行動の変化が生まれるのです。
なぜこの4つの要素が大切なの？
これらの要素は、バラバラに存在するのではありません。
まず、「誰が」を深く理解することで、その人の本当の課題が見えてきます。表面的な「時間がない」という課題の裏に、「もっと写真を撮る時間を作りたい」という本質的な想いが隠れているかもしれません。
課題が明確になれば、解決方法も具体的になります。「いつでもアップロードできる」という漠然とした機能ではなく、「通勤電車で片手でもアップロードできる」という具体的な解決方法が見えてきます。
そして、具体的な解決方法があれば、それによってユーザーの生活がどう変わるのかも想像できます。サイトの存在価値が、はっきりと見えてくるのです。
４要素を描く時の心得
４要素を書く順番にルールはありません。
思いついた要素から書き始めていいんです。ただし、書いた要素同士のつながりは意識しましょう。「誰が」を変更したら、その人の「課題」も変わるかもしれません。
大切なのは、具体的に描くこと。「働く女性」ではなく「山田さん」として描く。「課題を解決」ではなく「空き時間に写真が整理できるようになる」と書く。実際の場面が目に浮かぶように描いていきます。
もちろん、技術的な制約も意識は必要です。でも、それは物語を縛るものではありません。例えば、複雑な機能が実装できなくても、きめ細かいサポートで補完することもできます。メールマガジンでの使い方のコツの配信や、実際のユーザーの声を紹介するブログなど、技術以外の方法で価値を提供することも可能なのです。
プロトタイプストーリーの情報源
「誰に向けてWebサイトを作ればいいんだろう？」 「どんな悩みを解決すれば喜んでもらえるんだろう？」 Webサイトを作ろうと思った時、まずこんな疑問が浮かびます。
せっかく作るなら、本当に必要とされるサイトにしたい。でも、ユーザーの声をどこで見つければいいのでしょうか。 実は、ユーザーの声は意外と身近なところにあります。
ユーザーの声の見つけ方
同業他社のサイトのレビューやコメントを読む：
例えば、あなたが美容室のサイトを作ろうとしているなら、他の美容室のサイトへの感想を探してみましょう。Googleマイビジネスのレビューには、「予約がしづらい」「メニューが分かりにくい」といった具体的な不満が書かれていることがあります。 また、美容師のブログやSNSのコメント欄にも、お客様の生の声が隠れています。「インスタの写真は可愛いのに、サイトの写真が古い」「スタイリストの得意分野が分からない」といった声は、あなたのサイトづくりのヒントになるはずです。
業界特化型のSNSやコミュニティをチェック：
FacebookやX（旧Twitter）で業界関連のハッシュタグを検索してみましょう。例えば、#美容室予約 #美容室探し などのハッシュタグには、お客様が実際に感じている課題が表れています。 また、美容師向けの専門SNSやコミュニティサイトにも、「お客様からこんな要望があった」「サイトの予約システムについてよく聞かれる」といった話題が上がっています。
競合サイトのUIやUXを分析する：
ライバルとなる美容室のサイトを実際に使ってみましょう。予約ページまでの動線は分かりやすいですか？スタッフ紹介は探しやすいですか？メニューや料金は見つけやすいですか？ そして、それらのサイトのスマホ表示も確認してください。パソコンでは見やすくても、スマホだと使いにくい...というケースは少なくありません。
お客様と直接話す機会を作る：
もし可能なら、実際の美容室に行って、お客様の会話に耳を傾けてみましょう。「サイトで見た髪型の写真を見せながら」「インスタの投稿を参考に来店した」といった会話から、情報収集の実態が見えてきます。
また、美容師さんに「お客様からよく聞かれること」を聞いてみるのも効果的です。「予約の時によく確認される項目は何ですか？」「初めてのお客様が不安に思うことは？」といった質問から、サイトに必要な情報が見えてきます。
気をつけたいポイント
ただし、これらの情報を集める際は、いくつか注意点があります。
1つは、否定的な意見に振り回されすぎないこと。レビューには不満の声が集まりやすいものです。それらは参考にしつつも、全体のバランスを見ることが大切です。
2つ目は、トレンドに流されすぎないこと。「今流行りのデザイン」を取り入れることは大切ですが、それが本当にユーザーのニーズに合っているのか、立ち止まって考えることも必要です。 最後に、生の声は断片的だということ。「使いにくい」という声の裏には、様々な要因が隠れています。表面的な言葉だけでなく、その背景にある本質的な課題を探ることを心がけましょう。
次の（２）準備編では、具体的なストーリーに落とし込んでいくための材料集めについてご紹介していきます。