[&] UX Days Tokyo 2016 - Kevin Cheng

UX Days Tokyo 2016
商品のストーリーボード化
Kevin Cheng
-----------------------
Google は Webブラウザを作り始め、
テクノロジー業界の人は、Google が好きで、
それまで、Mozilla があって、なんでわざわざあたらしいブラウザを
作るのか、
ホワイトペーパーが公開されましたが、無味乾燥で長くつまらないものでした。

コミックのゴッドと呼ばれる人が、インタビューを重ね、
20ページのコミックを作りました。
新しいフィーチャーを作りたく、ベースが変わってきているからだ。

JavaScript がブラウザが待たなくてもJSが動き出せたり、
コミックを見ることで、抽象的なことが分かった。
コミックを読んだ人は沢山で、正しく伝わりました。

どうやって、マンガをUXやビジネスで使うのか？
ドラゴンボールが私が生まれて初めて読んだマンガです。

Storyboarding という本も出しています。

なぜマンガなのか？
マンガは子供しか読まないよね？と言われていますが、
日本は違いいます。
たくさんの人達がマンガを読むということで、
海軍が大阪の港に停泊した時、
なぜここにいなければいけないのかをマンガで紹介したと言われています。

日本でこの話しをするのは楽しいです。
普通のコミュニケーションです。

映画ではストーリーボードを作ります。
これはロードオブザリングのストーリーボードですが、
まずはコストをかけず、検討するのです。

どんな製品を作るのか？を書く代わりに、
こういうことをやりたいというのをかき、
何が問題なのかが分かるからです。
実は人にわかってもらうにはシンプルなものしかいらないのです。

Air bnb はアーティストを使って、
コミックを下記、
泊まる時ではなく、泊まるまでの体験が重要で、
どんな経験しているのか、
ユーザーの研究をする時にマンガを使っています。
実際に研究でわかったことをわかりやすいように。

ebay の流れをマンガで示したものです。

どういう要素があるので良いのか？

●Communication
マンガ、コミックというのはコミュニケーションとしては
基本的なものです。
洞窟の中の壁画は、マンガと同じもので基本的なものです。
彼はこういったTシャツを着ています。
この犬が何をしていのかわかりますよね？
一番面白いのは、２歳の子供が笑うんだよ！と。
なにか起こるのかわかっているから。文字も本も読めないのに。

マンガは言語である、文化や言語を超えて分かることができる。

●Immagination
この例はスコットマクナルドの例です。
誰でもの顔から、誰かの顔。
読む人が誰かに当てはめたりして考えているからです。

背景がものすごく細かく書かれていますが、
人はリアリズムが全く違います。
シンプルであるから、自分や知り合いのように見えるからです。

UIにおいても同じことが言えます。
この製品の話しをするために、サーチ結果を見せています。
スクリーンショットをそのまま見せました。
それは全然関係無いのです。
彼女が検索していることが重要。

さらにこれを抽象化すると、
彼女の顔を見せれば、UIを見せる必要は無い、
製品がどうインタラクションしているかが分かり易くなる。
シンプルにメッセージを伝えます。

●EXPRESSION
マンガは言葉や絵よりも表現が豊かです。
I'm sorry と thank you の二つです。
しかしながら、それらの言葉をこれらの違う顔に当てはめると
どうでしょう？
いきなりいろいろな意味を持ち始めます。
信じられないくらい、沢山の表現ができるようになります。

ほんの小さなことでもいろいろなことができ、
優秀なアニメーターであれば、目だけでいろいろな感情が表現できます。

●Motion
そして、マンガの中で気に入っている要素は、
どのような時間軸を表現できるのか？
ということです。

白い空間、空白があるだけで全然違った意味になります。
長い時間を描くことができます。

一つ長いフレームがあったとすると、時間がすぎている
ことがわかります。

同じものが繰り返し見せることで時間がすぎたことが分かると思います。
マンガで動きの経過を伝えることが
小さな紙面でできることがわかります。

コミュニケ−ションで皆が理解するために
マンガを使うことができます。絵だけでできないことが伝えられます。

実際に一番重要な性質としては、面白いということだと思います。

Where are the artists?
皆さんに質問です。
ここで、アーティストの方は、３人ですね。

皆さん、紙を出して頂いていいですか？
名札の裏側に書いてもらってもいいです。
隣りの人と名札を交換してください。
そうしたら、名札の持ち主の似顔絵を書いてください。
２分差し上げます。
では、まだ返さないで下さい。
お隣の方の似顔絵に、スマイリーのような笑顔の顔を書いてください。
それができたら、元々の持ち主に返してください。

名札をかえすときに「ごめんなさい」と謝りましたか？
ゴードマッケンジーという人が居ます。
私たちのプロジェクトについて書いています。
学校、幼稚園で行いました。
私が先ほど聞いた、ように、
幼稚園では皆がアーティストだと言いました。
小学校一年生だと、半分くらいに、
学年があがるとごに少なくなってきました。

成長していくと、アーティストだとは思わなくなってしまうのでしょうか？
何か資格テストがあるのでしょうか？
どういう似顔絵だったとしても、完璧なマンガなのです。
どういうプロセスを経て、特性を製品に活かしたのかを
伝えていきます。

まずスト−リーを作り、レイアウトし、絵を調整していきます。

一番主要となるユースケースは何？
これは誰に見せるためのもの？かを考えます。
一番核となる要素を伝えます。
非常に細かいワイヤーフレーム、人の経験として
どういった道筋、何を出会うのかを決めます。

AirBnBであれば、泊まるところを見つける、
旅行で滞在するのが、道筋なわけです。

物語を核ことになります。
プロの漫画家がやっていることと同じです。

これはハリーポッターのセリフです。
設定というところ、点との中、いつこの物語が起こっているのか？
その後の動きやアクションが書かれています。
セリフで話されていないことも書かれています。
これがマンガを作るときに考えることです。

何が重要かのかを理解されていて、
そこで重要なのは対話です。
その対話は、できるだけ芸術的にして、説得力のある形にします。
ある方向性に持って行きたいがために描いていきます。

レイアウトということになります。
レイアウトという項目では沢山のことをカバーしなければいけません。
細かいことは割愛しますが、
全体的なコンポジション、つまりコミックの枠、フレームを
どうするのかです。
どうフレームをもうけるのかと同じです。
どの視線で見せるのか？クローズアップか、その人全体を見せるのか？
クローズアップしたい時は焦点を当てたいところ、
何かを見せたい時、
電話のクローズアップや受話器のクローズアップか、
そのシーンで何を起きているのかを示し、
映画の中で、カメラで撮影していると考えてみてください。
そういったプロセスがマンガの中にあるし、
実験やいろんなことを試すことができます。

最後のステップは実際に絵を描いて、洗練されたものにすることです。
笑顔をかけば、マンガを書けるとも言えます。
最初は骨人間です。
いろいろなツールがあり、ツールを使えば洗練されたものが描け、
テクニックもいろいろあります。

最初はトレースして描く。なぞって描くことからです。
例えば、エイリアンとかを書くのではなく
誰かにポーズをとってもらって、写真をとって、
それをなぞるとか。

テンプレートも沢山用意されています。
DesignComics.org が提供されている素材です。
プロのアーティストを使って素材を準備したところからはじまります。
この中のものだけでは限りがありますけど。

それ意外にもリソースがいるから
wally wood 22panel というのがあります。
このコミックはアーティストが考えたもので、
2人の人が話している時に、いろいろなもの。
コンピュ−タを使っている場面など。

MangaStudio というツールもあります。
セリフの吹き出しとか、いろいろ描いてあります。
comiclife というアプリもあります。
マンガを作ることができる使い勝手が良いものです。

bitstrips というオンラインのツールもあります。
Pixton.com というのをよく使っています。
とても使い易いものです。
このツールを使って、ただ単にスケッチするよりも
時間がかかってしまいますが、
製品の使い方を示すことができます。

なぜコミックが素晴らしいのか？
皆さんのデザインのプロセスでどう使うのか？
では、自分の会社、グループに対して、マンガを使うことを
どう許してもらうのか？

それに役立つ、いくつかの情報があります。
これによって、リソースも時間も節約になります。
また、間違った製品を作らなくてすみます。

Yahoo! で仕事していた時に、開発段階の最後で、
駄目だということがわかりました。
ユースケースが間違っていたことがわかったからです。

ダニエルピンクの本、一部が完全にマンガになっています。
戦略的な教訓が欲しかった、もっともわかりやすく、
30時間で読めるものが欲しかった。
作るにも時間がかからず、読み手にとっても時間がかからない。
抽象的な言葉で読むよりも、マンガのほうが、
製品がどのようなものであるのか分かり易くなる。

多くの企業がマンガを活用しています。
Google AirBnB, twitter, lego ikea、UPS
マニュアルにマンガを使っています。
それを全ての言語に訳さなくて良いという理由もあります。

一番良いのは
どうやってプレゼンテーションするのか？
どれだけ良いと自分が思っているのかを説明しやすいからです。

同僚とか上司とかに説明するときにマンガを見せるのは
遠慮がちでした。
自分がどれだけ自信を持って見せられるのか？

製品のストーリーボードを作ったと自信をもって見せられればいいのです。

マンガ、コミックは面白いメディアになる。
コミックはどこでも使って良いわけではありません。
これは、どれでも叩けるハンマーではなく、
いろいろ使える道具の中で使い勝手の良い道具です。

Q：どういうところで使うのはより効果的か？

A：スタートアップで、SNSでマンガを使って説明しようとした。
ゲーム機を持っていない人でも、一緒にゲームを知ることができる。
Webサイトのランディングページに載せて、
非常にマンガを使うことを嫌がっていましたが、
最終的には許可してくれました。
A/Bテストを行うと、マンガを使った方が２倍コンバージョンが良かった。
マンガが良かった例の一つです。

自分のパーソナルアシスタントに話しをした時です。
あまり良く無いとか、決定がしやすくなる。
日常に起きていることを、完全に示すことができる。

Q：マンガを書くということですが、作ったマンガはプレゼンの時に発表したり
他にどういう使い方ができるのか？

A：コミックをトイレに貼ったのか？という話しですよね。
いろんなプレゼテーションの方法があると思います。
プレゼンテーションではなく、一緒に描くことをやってみたり、
ディスカッションのためのツールでした。
もう一つ、マンガを使っていた方法としては、
ユーザーの人達に見せたのです。
こういう感じで使おうと思うのだが、どこが良かった悪かった？
と聞いたわけです。動画を見せているような感じです。
コストは安いし、話している間に書き替えることもできるのです。

なぜレイアウトが大事なのか？
Shazam があります。これに対してのマンガです。
レイアウトを変えて、カメラがどこに設置されているのかを
変えたものです。
ずいぶん印象が変わってきています。

絵を描く前にセリフを描いておくということです。



カメラアングルについてです。
A,B,C のカメラと合わせて考えてもらえば良いでしょう。
このシーンの中に居ると思わせる効果です。

二つのコマの間をどうレイアウトするのか？
関係無いように思えるのだが、コマ同士の関連性がわかります。
レイアウトも重要になってきています。
顔が少し入っていることで関連性がわかります。

もっと面白くするために、人が話している時に
クローズアップしたり、同じ場面でも
違った見せ方で面白くすることができます。