ブランドサイトやLPに最適な、ストーリーフレームを取り入れたページ作り

Webサイトやアプリを作るとき、まずはじめに何をしますか？ 多くのデザイナーはワイヤーフレームを作りはじめるでしょう。クライアントの意思決定を効率的に促し、全体の枠組みを固めるのに欠かせない工程です。

しかし、そのワイヤーフレームで十分でしょうか。

すべての製品やWebページ、アプリにはストーリーがあります。その世界観をきちんと伝えられていますか？ 私は、インターフェイスに触れた途端に物語に引き込まれるような感覚をユーザーに与えたいので、デザインプロセスに「ストーリーフレームを作る」という工程をいれています。

画面上で灰色のボックスを動かして時間を費やすワイヤーフレームを作る前に、あるいは紙にスケッチしたものをブラッシュアップする前に、ひと手間を加えてみてください。

テキストエディタからはじめるデザイン

ストーリーフレームは、ストーリーとワイヤフレームを組みあわせたドキュメントです。特別なソフトウェアは必要ありません。私が使っているのは、テキストエディタです。

『Google Docs』や『Microsoft Word』、『Apple TextEdit』など、本当にどんなものでもかまいません。ストーリーを構築するとき、テキストエディタを使わずにデザインソフトで作業をはじめるとかなりのエネルギーと時間を消耗します。

製品がもつメッセージを整理し、シナリオを作る

訪問したユーザーが簡単にストーリーを理解できるよう、丁寧なシナリオを書き、シナリオに基づいてデザインや制作をすすめていきます。

まずは製品やサービス、Webサイトが伝えようとしているのはどんなことか、考えてみましょう。

• 伝えようとしていることは何か
• どんな点がトピックなのか
• 製品やストーリーを友人にどのように説明するか

ストーリーはただの文章ではなく、整理された台本です。整理することで視覚的な混乱を取り除き、伝えたいメッセージの核心に焦点をあてます。たとえ、あなたがデザインソフトを上手に操れても、初っ端から視覚的なカタチを定めようとしてはなりません。何を伝えるべきか明確に理解していないまま作ったデザインでは人の心を動かせないし、生産性も低いままですから。

デザインソフトを使用しているときや紙にスケッチを描いているときのあなたは、「2カラム、いや、3カラム？」などと考えながら手を動かしています。しかしその段階では、あなたはそのデザインに100％の自信をもてないまま作業に取り掛かっていることでしょう。

もちろん、ストーリーの影響力だけが強く、視覚的なデザインは意味をなさないということではありません。
視覚的なデザインは確かにストーリーを知らせる術だし、ときにはストーリーより先行することもあります。

Dropboxを題材にストーリーフレームを作ってみよう

ストーリーフレームは、デザインやレイアウトがされたものではなく、階層やページ構造に焦点を当てた台本のようなものです。Dropboxを例に、ストーリーフレームを考えました。

次の項目からは、具体的な書き方についての説明をしていきます。

1. すべてを書き出す

最初のステップは、新しいテキストファイルに頭の中に浮かんだことを書きだします。
段落はひとつのモジュールとして考えます。

その製品に関するすべてのことを書ければ、最も重要なポイントが明確になり、話しあいをはじめる前に自分の考えを整理するのに役立ちます。

この段階で、何度も最初の質問に立ち返ります。

• このデザインで伝えようとしていることは何か
• どんな点がトピックなのか
• 製品やストーリー自体を友人にどのように説明するか

私は15分の時間と、コップに半分のコーヒーがあれば、この作業を終わらせることができます。

2. ストーリーを短くする

すべてを書きだすことができたなら、ユーザーへ訴求したいポイントを絞ってストーリーの長さを調整しましょう。
あなたは製品をデザインしているチームの一員なのですから、文章の中で必要な要素がすぐにわかるでしょう。

煮詰まってしまったときは、一度休憩して深呼吸をし、ユーザーのコンテキストについて考えてみてください。

• 彼らはどのようにして、このページまで来ていますか？
• その時点で製品について、どのような知識がありますか？
• 目的とする行動を促すために最低限必要なことはなんですか？

3. 複数の物語を試す

最初の下書きが完成したら、ドキュメントのコピーを複数作成し、再編集します。
要素を並べなおしてみると、まったく異なるストーリーができあがります。段落を交換したり、一度削除した要素を再導入するなど、推敲を重ねましょう。

4. チームでストーリーを検討する

作成したストーリーをチームメンバーに見せてください。このとき、ストーリーフレーム自体の説明を忘れずに。デザインの最終版ではなく、ページの組み立てをまとめたものだと相手が理解しているか確認しながらすすめてください。

そこで得たフィードバックを、ワイヤーフレームとビジュアルモックアップに反映させます。

より洗練されたストーリーに仕上げて、次のフェーズに自信をもってすすむために大事なことは、ヒヤリングを徹底することです。具体的な質問を投げかけてください。

• その情報を表示するためにとる最善の方法はなんですか？
• テキストのどこをモジュールとして、グループ化できますか？
• ストーリーのどこをイメージや、ビデオ、または短いアニメーションで置きかえることができそうですか？
• 同じリソースでストーリーのどこかを補完できますか？
• あなたの考えを具体的に裏付ける証拠は、どのようなものですか？
• ストーリーをめぐったあと、ユーザーはどのように行動すると思いますか？

最後に

私は制作中に、ストーリーフレームの良さをたびたび実感しています。さほど時間を費やさなくても、戦略、流れ、ストーリーについて、濃く考えられるからです。

この方法は、一貫性のあるストーリーを伝えたい場合、たとえばLP、ロングスクロールのページなどで、非常に効果を発揮しており、需要はますます高まっています。

あなたも一度、実践してみてはいかがでしょうか。

（翻訳：Yuri Tanaka）