UXデザインの普遍的な原理 Part 3: ナラティブデザイン（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

しっかりとした土台の上にスキルを構築できるように、『UXデザインの普遍的な原理』シリーズの第1部では点と線と面を使った視覚的な文法について、第2部では言語とタイポグラフィについてお話しました。最後の第3部では、UXデザインにとって大変重要なナラティブデザインの概要を紹介します。

ナラティブデザイン

◎ 訳注：ナラティブデザイン

動的なコンテンツの分野におけるナラティブデザインは、コンテンツに予め用意されているストーリーと、ユーザーが主体的に解釈しコンテンツに参加することで成立する体験との差異（とその結果生まれる価値）に着目し、ユーザーに体験への積極的な関わりを促す要素や構造（＝ナラティブ）をデザインすることを指すのが一般的。

ユーザー体験の普遍的な原理の紹介は、ナラティブデザインの重要性を強調せずに終わることはできません。デザイナーである私たちは、本質的にはストーリーの語り手であり、ストーリーを効果的に伝えるために、それがどのような仕組みになっているのかを理解する必要があります。何より、UXデザイナーの役割は体験につながります。そして、体験は、時間とともに展開していくものです。

デスクトップ向けであれモバイル向けであれ、また、Web向けであれネイティブであれ、UXデザイナーとして作り出すすべてのものは、一連の画面の展開です。画面を単独にデザインすることはまずありません。

そのため、時間の特性を理解し、それをデザインの不可欠な部品として使えるようになることが非常に重要です。ナラティブが展開する速さまたは遅さ、すなわち進行のペースと、リズム、すなわち一連の画面や画面上の要素の抑揚の、両方に配慮することが大切です。ペースとリズムは引き込むようなストーリーをつくり、ユーザーの心をつかむ上で、共に重要な役割を果たします。

ペース設定

ナラティブを学ぶのに最適の場所のひとつは映画の世界です。ジェームス・ボンドを思い浮かべてください。ショーン・コネリーの元祖ボンドも、ダニエル・クレイグのボンドも、ボンド映画はたくさんのことを教えてくれます。ボンド映画から『スカイフォール』と『スペクター』の2作品を取り上げてみます。両作品とも監督はサム・メンデスです。どちらの作品も、冒頭のシーンには壮大なセットが使用され、テンポの速いアクションが繰り広げられます。ここには、ペースを速め、シーンを盛り上げ、期待を抱かせるという重要な目的があります。

アクションシーンは観る者を興奮させ、注意を集めます。しかし、メンデスは、このオープニングシーンが終わると、ペースを落とします。メンデスは、監督として、最後まで速いテンポを維持することが映画では（実際はどんなナラティブでも）できないことを理解しています。ペースのの速い遅いを対比させることも重要なのです。この理屈は、単にスクリーンが小さくなっただけのデザイナーの世界にも、ぴったりと通じるものです。

デザイナーは、よくペースについて考える必要があります。速すぎるペースで多すぎるコンテンツを提供すれば、ユーザーを圧倒してしまうでしょうし、逆に、遅すぎるペースで少なすぎるコンテンツを提供すれば、ユーザーを飽きさせてしまうことでしょう。このバランスを正しく取ることに注力するべきです。構築するサイトやアプリが、ページ1枚だけなのか、複数のページなのかに関係なく、ユーザーがどのようにコンテンツ内を移動して、それはどのようなペースで行われるべきなのかということを、十分に考慮する必要があるのです。

デザインが、1ページ構成のナラティブ (左) か、複数ページ構成のナラティブ (右) かは、コンテンツによって決まる。いずれのケースにせよ、画面に投入される要素のペースと各画面間の関係を吟味することが重要。

コンテンツ構成の逆ピラミッド

ペース設定は重要ですが、同様に、コンテンツの構成順を考えることも必要です。私たちは、情報が爆発的に拡散するような時代に生きており、ついていくのがやっとの状態にあります。そのため、デザイナーには、ユーザーが求めているものをできるだけ素早く提供するという役割もあるのです。

通常であれば、物語の構造は、旧来から受け入れられてきた「起承転結」で展開されるでしょう。この構造は、数世紀に渡って使われてきたもので、現在でも有効です。しかし、時間的な余裕がない場合は、この構造を逆さにして、少しでも早く要点にたどり着くことに価値が生まれます。

そのために使用できるテクニックのひとつは、ジャーナリズムの世界でよく利用される逆ピラミッドです。この逆ピラミッドは、コンテンツの優先順位付けと文章の構造化を目的に、記者によく使われています。簡単に言うなら、逆ピラミッドとは、結末から始まり、その結末を裏付ける情報が続き、最後にその周辺の細かな情報へとつながる構造です。

基本にある考えは、たとえユーザーがコンテンツの最後に至らなくても、伝えたい重要なメッセージに触れられるべきである、という点です。ピラミッドの階層を下に向かって進むごとに、追加情報を得ることはできますが、それは主要なポイントが伝えられた後です。

ジャーナリズムの世界から転用された逆ピラミッドの考えを適用することで、ユーザーが必要とする順に情報を提供することができる。

驚いたことに、20年以上前の1996年に、ヤコブ・ニールセンは、輝かしいWebの世界への逆ピラミッドの適用について執筆していました。『Inverted Pyramid in Cyberspace』 (サイバースペースの逆ピラミッド) と注目を集めるような題名が付けられたニールセンの記事は、今でも一読の価値があります。この中には、次のことが強調して述べられています。

ナラティブデザインの参考書

選択の余地も無く、私たちは時間に追われる時代に生きています。デザイナーはその事実を認識し、物事を素早く効率的に完了したいというニーズを反映したユーザー体験をデザインすることが必要です。優れたナラティブデザインは、言葉と視覚的なデザインの2つを組み合わせることによって、ユーザーを引き込み、更に、コンテンツを進むにつれユーザーを魅了する、適度なテンポの物語を作り上げます。

ナラティブデザインの原理をとても良く説明した書籍を選ぶなら、迷う余地無くスコット・マクラウドの『マンガ学』が最適です。これは、非常に重要な、モノの見方を変えるような一冊で、UXデザイナーの必読書です。本の題名で誤解してはいけません。この本は、漫画の領域をはるかに超えるものです。コミュニケーションに関することを、豊富な情報とともに、面白おかしく、見事に構成した内容です。

ナラティブデザインの事例

第1部で紹介した視覚的な文法、第2部で紹介した言語とタイポグラフィを理解したならば、魅力的な体験を作り出すために必要な要素は揃っています。その次に必要なものは、これらの要素を編み込む「ストーリー」です。

ストーリーはどこにでも存在します。私たちはストーリーから学び、ストーリーから楽しみを得ます。もし、ユーザーを引き込む優れたユーザー体験を作るのであれば、ストーリーを軸にデザインを構築するべきです。

ナラティブ主導のWebサイトはいくつもあります。そのいくつかを分解して確認すれば、印象に残るユーザー体験を生み出せすためのテンポの使い方を理解できるでしょう。

Flat Guitars (左) は、ナラティブWebサイトの代表的な例。各ギターのストーリーを一貫したテンポで順々に展開する、Big Apple Hot Dogs (右) は、色鮮やかな登場人物 (ホットドッグ) を並べてそれぞれにまつわる物語を紹介し、ストーリーテリングをしっかりと体現している。

Flat Guitars

Flat Guitarsは、美しくデザインされた単一ページWebサイトの例で、読み込み画面のグラフィックで文字通りつまみを11まで回し、そのナラティブに焦点を当てています。デイヴ・ナヴァロによるイラストプロジェクトは、ユーザーをクラシックエレキギターとアコースティックギターの歴史へと誘います。

各ギターに様々な色の背景のブロックを使うことで、サイトのテンポが一貫したものになり、リズムが一定に保たれています。このサイトには次のような特徴があります。

Big Apple Hot Dogs

ナラティブデザインを使用したサイトのもう1つの例は、Big Apple Hot Dogsです。大胆で、色彩豊かで、遊び心いっぱいのナラティブデザインが展開されています。様々なホットドッグを登場人物にしたサイトは、デザインにおける個性とユーモアの重要性を前面に押し出しています。

Big Apple Hot Dogsは、自然素材のみを使用したポーランドソーセージの「The Huge Pole」、他にも「The Big Dog」や「The Frank Jr.」などを登場人物として使用することで、簡単に退屈になってしまいそうな題材から、印象的なUXを提供する楽しいサイトを作り出しています。これを実現した秘伝のソースはごく単純なものです。

さまざまなコンテンツが溢れる中で、ナラティブデザインを表面に出したサイトに注目が集まる理由を見つけるのは簡単です。そうしたサイトは、うまくテンポの調整されたたストーリーを介して、私たちの想像力を捉え、そして、昔話のように、口から口へと共有されるのです。

ヒントとテクニック

『UXデザインの普遍的な原理』シリーズのまとめ…

この業界を支える基本原理をおさらいするのに、遅すぎることはありません。不朽の原理は理由もなく「不朽」と呼ばれているのではなく、実際に時の試練に耐えてきているのです。

すべてが常に変化する現代でも、視覚的な文法、言語とタイポグラフィ、そしてナラティブデザインの理解を深めるならば、それは生涯役に立つものとなるでしょう。

17世紀のレンブラントや他の芸術家のアトリエでは、マスターの作品を延々と模写する「師弟」モデルにより学んでいたと言われています。私たちは17世紀には生きているわけではありませんが、このモデルの原理がもう有効ではないということにはなりません。

デザイナーとして向上するための私からのアドバイスは、「とにかく模作し続けること」です。具体的にイメージできるよう、私の生徒の1人であるマルティーヌ・マクグラスによるある例を示しておきます。模作したものを共有する必要はありませんが、もしそうするのであれば、適切な相手の名前を掲示しましょう。なにはともあれ、とにかく模作を続けることです。そうすれば、デザイナーとしての向上につながるでしょう。

これを、BASICで記述された単純なプログラムとして考えてみましょう。

10. 好きなものを見つけ出す
20. それを制作する
30. 10に戻る

このプロセスを繰り返せば、普遍的な原理の理解が深まり、デザイナーとしてだけでなく、思考する力も成長していくことでしょう。

この記事はUniversal Principles of User Experience Design: Narrative Design (Part Three)（著者:Christopher Murphy）の抄訳です