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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2. 短くしてみる

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

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

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

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