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

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

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

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

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

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

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

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

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

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

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

UIとストーリーは別物？

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

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

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

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

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