ワイヤーフレームの前にサイトの全体像を決める「ストーリーフレーム」を作ってみよう

更新日: 2018年01月31日

CMS・サイト制作

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

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

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

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

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

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

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

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

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

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

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

UIとストーリーは別物？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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