多くの場合、ホームページを作成するときに真っ先に取り掛かるのが「ワイヤーフレーム」の作成です。
具体的なデザインに入る前に、この部分にロゴを置いて、ナビゲーションはこのような設計にして、とラフにでも決めながら議論を進めていくことで、設計の全体像を把握できます。

しかし、いきなり設計に入るべきなのでしょうか。

ワイヤーフレーム作成前に要件定義などを行うチームは多いと思いますが、前提となる「ストーリー」の作成に時間をかけたほうがいいでしょう。
ストーリーが、全体のワイヤーフレームやUIの仕様に大きく影響を与えるからです。

今回は、サイトの全体像を決める「ストーリーフレーム」について、その概要から作り方までをご紹介します。
ワイヤーフレームでは方眼紙などにスケッチを行ったり、Illustratorなどを使うケースが多いと思いますが、ストーリーフレームで使うのはテキストエディターです。
実際に、どのようなもので、どんな風に作っていけばいいのか、詳しく見てみましょう。

サイトの全体像を決める「ストーリーフレーム」とは?

ストーリーフレームとは、UXDesign.ccのUXデザイナーであるFabricio Teixeira氏が提唱している考え方で、ホームページのアイデアをまとめるスクリプト(原稿)とワイヤーフレームの中間にあるようなハイブリッド文書であると述べています。

実際のところ、ランディングページであっても、ホームページであっても、ロングスクロールのホームページは増えてきたので、一貫したストーリーにまとめる必要があります。

そのような前提に立った時、自分たちが今から作るホームページに対して、以下のことを問いかけてみてください。

友だちや関係者に、このホームページをどう説明するだろうか・・・?

マネジメント学の父と言われるピーター・ドラッカー氏は「何によって記憶されたいか」という根源的な問いを残しています。
つまり、自分がどのような存在として記憶されたいか、という問いです。

「自分のホームページがどのように記憶されたいか」という根源的な問いに対する答えを見つけ出すことができれば、自然とUIもどのような設計にしたらよいのかが決まってきます。
その問いを発見する作業こそが、ストーリーフレームを作成する作業に他なりません。

UIとストーリーは別物?

そのように言うと、異論を持つかもしれません。
つまり、全体のストーリーを決めるものと細かいデザインはまた別物である、と考える方もいるでしょう。

しかし、デザインを設計するのに時間をかけたあとに、今度はその中に差し込むマイクロコピーや本文にまで時間をかけていくのは、むしろ無駄な時間を過ごしてしまうようなものです。
全体を束ねるストーリーがあれば、その考え方に従って、ワイヤーフレームも、UIも、コピーも、自ずと決まってくるからです。

ストーリーに関しては、できる限りテキスト形式でまとめたほうがうまくいきます。
写真やイラストなどのパーツをあえて差し込むのをやめると、ホームページがどのようなメッセージを伝えたいか、そのコア部分にスポットライトを当てることができるからです。

そのために、テキストエディターはストーリーフレームをまとめるための有効なツールとなります。
シンプルで余計な機能がなく、スマートフォンからデスクトップまでデザイナーが使っているデバイスには基本的に内蔵されているからです。

最初にSketchやPhotoshop、InDesignなどを開いていたデザイナーからすれば、テキストエディターを最初に開くという行為は少々面食らってしまうかもしれません。
しかし、しっかりと時間やエネルギーを費やしてストーリーフレームを作り上げることができれば、それこそのちのデザイン作業の時間が節約できるというものです。

ストーリーフレームとはどのようなものか

それでは、具体的にストーリーフレームについて確認していきましょう。

ストーリーフレームはスクリプト形式になっていて、レイアウトや最終的な本文のような形ではなく、ページ全体の情報構造(ヒエラルキー)やページ自体の構造に焦点を当てたものです。

例えば、UXDesign.ccでFabricio Teixeira氏が紹介しているDropboxのホームページのストーリーフレームの例をご紹介しましょう(もちろんこれはDropboxの正式なストーリーフレームではありませんが、どのような感じかは掴めると思います)。

こんにちは、Dropboxです。
私たちが行っているのは、チームでの働き方を変えることです(そのために必要なツールやソフトウェアも配信しています)。

私たちがデザインしているのは、一人ひとりの働き方です。

いつでもどこでも文章を書くことができ、スマートフォンや道路の上でもできます。
また動画を素早くアップロードしたり、動画を誰かに送ったりすることだってできます(もちろん相手がDropboxを使っていなくても大丈夫です)。

写真を管理するのも非常に簡単です。
まとめたり、整理したりするのも、本当に簡単にできてしまいます。

そして、仲間とリアルタイムで同時に作業をするツールもご用意しています。
プレゼンテーションを一緒に作ったり、フォルダーの中身を継続的に編集していくこともできます。

もちろん、セキュリティ面も安全です。
ファイルを無くしてしまう心配もありません。

興味がありますか?
それでは今すぐ始めましょう。

サービス提供者がユーザーに書く手紙のような形式がとられています。
どのように伝えるかが決まってくれば、どこにどんなUIを置いて、どんなコピーにすればいいかも自然と決まってきます。

ストーリーフレーム作成の注意点

ストーリーフレームを作成するという行為はまだあまり一般的ではないので、どのように作成すればいいのかまだ分かりにくいところがあるかもしれません。
もしそうであれば、以下の3つの点に気をつけてみるとよいでしょう。

1. 全てを書き出すことから始める

最初のステップは、真っ白で空っぽなテキストエディタを脳内にあるもやもやとしたイメージを吐き出して埋めていくことです。
デザインで言えば、それぞれの段落が各モジュールのようになっていて、それぞれの文がデザインに付け加えるべき要素となります。

頭の中に思い描いているものを全て書き出すという作業によって、思考を整理することができ、何に一番重きを置いて伝えるのかをすばやく決定し、優先順位をつけることができます。

最初の質問に戻りますが、「自分のホームページがどのように記憶されたいか」という問いの答えを考えるようにしましょう。

慣れてくれば、大抵15分くらいで書き終わるのではないでしょうか。

2. 短くしてみる

すべての考えを1つの文書に書き出したら、今度はストーリーフレームにまとまるような長さまで短くしていきます。
プロダクトをデザインするということは、どの部分を強調してどの部分を削るのかを考える作業でもあります。

全てのことを出し終わったら、一息ついて、ユーザーが本当に知りたいと思っていることを見つけ出しましょう。
ユーザーがどのようにしてそのページにたどり着き、どんな点を知りたくて、最低限どのようなことが分かれば次に進めるかどうかを検討してみましょう。

3. 複数のストーリーを考えてみる

最初の原稿が出来上がったら、情報構造(ヒエラルキー)に注意して複数のストーリーを考えてみましょう。
同じストーリーであっても、段落の順序が変わるだけでも印象がずっと変わってきます。
また、小さな部分でも言い回しを変えるだけで改善されたりするものです。

ストーリーフレームをデザインに落とし込む

最後に、作成したストーリーフレームを、ワイヤーフレームやデザインに落とし込んでいきます。
先ほど作成したDropboxでは、このような形になります。

dropbox.png

あとは、マイクロコピーを調整したり、必要な部分を変更していくだけです。

まとめ

ストーリーフレームの醍醐味は、単なる物語を作ることではなく、最初に挙げた「自分のホームページがどのように記憶されたいか」という問いの答えを見つけ出す作業です。
これこそがそのサービスの付加価値であり、他のサービスと差別化する重要な部分です。

最初の全体像をストーリーフレームで掴むことができれば、そのあとの工程の時間の短縮にもつながります。
ぜひストーリーフレームの作成をWebページ制作のステップに組み込んでみてください。