灰色ハイジの観察日記

サンフランシスコで学生生活やり直し中のデジタルプロダクトデザイナー

プロダクトデザインの訓練に、ホワイトボードチャレンジをしてみよう!

f:id:haiji505:20180109043542j:plain

こんにちは、灰色ハイジです。

私が在籍しているサンフランシスコにあるプロダクトデザイナー養成所「Tradecraft」では、座学だけでなく手を動かして問題解決に挑むカリキュラムがたくさんあります。そのうちの1つがこの「ホワイトボードチャレンジ」です。

目次

ホワイトボードチャレンジって?

ホワイトボードチャレンジは、選ばれたお題に沿って、「クライアント役」からのヒアリングからスケッチまでを、「デザイナー役」の人が20分間で行うUX/UIデザインの訓練方法です。 デザイナーだけでなく、プロダクトに関わる人全員の問題発見能力とヒアリング、デザインについて伝えるスキルを鍛えるのに役立ちます。また、デザインをする人の思考プロセスを可視化する訓練になります。

新人デザイナーの訓練に良いのはもちろんのこと、私は実際にやってみて、チームでプロダクトについてディスカッションする際にも用いると効果的だと思いました。ホワイトボードを使う利点は、書くプロセスを他の人も見ることが出来ることです。紙の上に書いても、もちろん良いのですが、手や頭に覆い隠されてしまっていたり、アングルの問題でなかなか見づらくなってしまいます。

ぜひ、デザイナー以外の人もチャレンジしてみてください!

全体の流れ

f:id:haiji505:20180109183934p:plain
時間の配分は目安です。トータルの20分間に注意しながら、なるべく2番に時間を割けると良いでしょう。

「デザイナー役」と「クライアント役」の2人1組が、20分間で以下のことを行います。

デザイナー役

  • クライアント役に何が必要なのかを質問して課題を整理する

  • 課題に対するアイデアを考え、ワイヤーフレームなどのデザインスケッチを行い、プロダクトを提案する

クライアント役

  • 「誰の何のためのアプリ、機能」が書かれたお題をピックアップする

  • お題に沿った自分が欲しいものを想像して、デザイナーからのヒアリングに回答する

タイムキーパー

  • タイムキーパーも兼ねて、上の2人以外の人もいると良い

  • 上記の様子を見て気付いたことがあったらメモをとっておき、終わった後にフィードバックする

Step0: 準備

f:id:haiji505:20180109044330p:plain

お題を書いたカードを用意しましょう。

f:id:haiji505:20180108190034p:plain
Tradecraftではさまざまなお題が書かれたカードが箱に入ってホワイトボードの前に置かれています。クリスマスの時期にはサンタの為のアプリと言ったお題も入れられていました :D

お題の例

  • 大学生のためのレシピアプリ

  • 大家さん用ToDoアプリの新規登録/ログイン画面

  • 親と子どものための本検索アプリ

お題カード作りました

印刷して使えるお題のPDFを用意しました。こちらからダウンロードできます。

f:id:haiji505:20180108185832g:plain:w300

自分の作ってみたいアプリや、現在取り組んでいる課題があれば、それを題材にするのも良いでしょう。もしあなたが新人デザイナーだったらランダムに選ぶことをオススメします!思いがけないお題が来て、頭が真っ白になるかもしれませんが、きっと良い訓練になります。

クライアント役の人は、最初はあなたの上司や先輩にやってもらうと良いかもしれません。クライアント役になった人は、選ばれたお題のイメージを膨らませておきましょう。(あなたがユーザーだったら何が欲しい?実際に作るならどんな目的で作る?)

Step1:問題を理解する(5分)

f:id:haiji505:20180109050129p:plain

まず、クライアントの持つ問題を理解して、ホワイトボードに書き残します。(Step2は広いエリアを必要とするので、ホワイトボードの左半分より大きくならないように注意します) デザイナー役の人は、クライアント役の人にまずは質問してみましょう!方法は自由ですが、以下にいくつかのフレームワークを紹介します。

ユーザーストーリー

ホワイトボードの左側に「Who」「What」「Why」と書いて、上から順番にクライアント役の人に質問してメモしていきましょう。

f:id:haiji505:20180108185037p:plain

クライアント役の人はお題に沿いながら「一人暮らしの大学生 (Who)がレシピを探したい(What)。友だちとホームパーティーをするために(Why)…」といったように即席でそのアプリにまつわるストーリーを創作して答えてあげてください。

上記を基本としながら、どんな大学生?どんなレシピ?と深堀して聞いていきましょう。どんなシチュエーションで欲しているのかを、より詳細に特定するために、「いつ使う?(When)」を私はよく聞いています。

クライアント役の人は、「授業の合間にレシピは検索して保存しておきます」「スーパーに行ってから使う」など具体的なシーンを思い浮かべて答えましょう。

ペルソナ

ペルソナは、その製品を使う人物像を定めたものです。趣味や習慣を、細かく定めます。(例えば、旅行好きというだけでなく、1年間に何回くらい行くのか、など)

Needs & Goalsに、そのペルソナが必要としているものを記載します。クライアント役の人に聞いてみましょう。この項目がStep2であなたが解決し考えるべきアイデアの元になります。

f:id:haiji505:20180108184809p:plain

他にも…

Job Story: 動機・背景について考えるジョブストーリー

Step2: アイデアを具体化しよう(14分)

f:id:haiji505:20180109050101p:plain

さて、ここからが本番です。真っ白なホワイトボードに何から描き始めれば良いのか不安で、タイマーが切れるまでクライアントに話を聞き続ける方が楽だと思うかもしれません。でも、ここがデザイナーとして一番鍛えられる場面です。

下手なスケッチを人前で披露することには緊張するかもしれませんが、綺麗に作り込むよりも、雑でも良いので素早くたくさんのスケッチを描くことがより多くのアイデアを生み出します。

f:id:haiji505:20180108185114j:plain
これは私が「ヘアカタログアプリ」というお題でチャレンジしたときのもの。英語が不自然なのはご愛嬌…

アイデアをスケッチしている間は、あなたの考えを大きな声でシェアしてください。 「最初に髪の長さを選んで、その後に顔の形を選ぶことが出来て、さらにシチュエーションをフィルター出来る…」といったように。 声に出しながらスケッチを描くことは、出来上がったデザインを提出するのと同じくらい重要なので絶対やりましょう。クライアントやあなたの上司は、何故そのデザインに至ったのか?というあなたの考えを知りたがっていると思ってください。

「どう思う?」と途中でクライアント役の人に質問してみるのも良いかもしれません。クライアント役の人も自分の想像していたものと同じかどうか、もっとこんなものを望んでいた、という意見を伝えてください。

「ヘアカタログアプリ」にチャレンジした私の例だと、最初に髪型を選ぶシチュエーションを書いたのですが「私は自分の長さと同じ髪型かどうかを最重要視している」というコメントをもらったので、その場で描き直しました。

アイデアを具体化するフレームワーク

ワイヤーフレーム以外にも以下のようなものがあります。

  • タスクフロー: ユーザー登録など特定のタスクにおいてのユーザーの行動を記したフローチャート

  • ユーザーフロー: タスクフローと似ていますが「ユーザーのWant」と「Goal」を定めて作るフローチャートです。行動が分岐することもあります。

  • サイトマップ: ウェブサイトやアプリの画面遷移の構造をまとめたものです。既にあるサイトなどを改善する際に用いると良いでしょう。

組み合わせるのも効果的で、これらを先に描いてから、ワイヤーフレームを描こうとすると、「何故その画面をデザインするのか?」という目的がハッキリします。

参考サイト: フローチャート設計の最新UX用語と、4つの役立つツール | Workship MAGAZINE(ワークシップマガジン)

Step3: まとめる(1分)

f:id:haiji505:20180109050115p:plain

深呼吸してクライアント役の子にあなたのスケッチを説明します。

やってみると分かるのですが、思っていた以上に早く時間切れになってしまい、大抵はStep2の途中でタイマーが鳴ってしまいます。20分という時間内にホワイトボードチャレンジを終わらせることは難しいです。でも心配しなくても大丈夫です。それこそが、このチャレンジを繰り返す行う理由です。このStep1から3を何度も行うことで、素早くニーズをキャッチし、たくさんアイデアをスケッチする訓練が出来ます。

とにかくこのチャレンジでは、急いでスケッチを描いてください。このまとめの時間をとることが出来ると、クライアントがあなたのアイデアを理解し、それがどのようにプロダクトに役立つのか確認することが出来ます。

もし時間が余ったら

アイデアを改善したり、拡張したり、他のシチュエーションについても考えてみよう。

「プロダクトの規模が拡大した場合には、デザインはどのように変更しないといけなくなる?」 「アイテムが1つもない場合に、どのように表示される?」

参考記事&便利ツール

Tradecraftに私とほぼ同時期に入ったデザイナーの2人が、ホワイトボードチャレンジについてまとめた記事です。英語の記事ですが、さらに詳しく知りたい方はぜひ。日本語のこの記事を書くにあたって参考にしています。

Tradecraftの講師が制作したホワイトボードチャレンジ用のウェブアプリです。タイマー機能付きでお題をランダムに出題してくれます。

チャレンジジェネレーター

最後に

f:id:haiji505:20180108193307j:plainf:id:haiji505:20180108193904j:plain

このホワイトボードチャレンジのプロセス自体はUX/UIデザインを行うための基本的なものですが、20分という短い時間でヒアリングからスケッチまで行うため、スポーツでいうところの基礎体力をつけるトレーニングにあたります。業務であれば、時間をかけて参考資料を探したりしながらデザインを行っているかもしれません。しかし、このホワイトボードチャレンジでは瞬発力が求められます。デザイナー役は、ヒアリング力とスケッチ力が鍛えられますし、クライアント役は企画力と、どんな人が製品を使うのか、という想像力を鍛えることが出来ます。

Tradecraftでは毎週水曜日の午前中に1時間ホワイトボードチャレンジの時間があります。毎回同じ人とやるよりは、違う人とやる方が対話スキルも鍛えられます。繰り返し色んなテーマや色んな人とチャレンジしてみてください。

ぜひチャレンジしたらハッシュタグ「#ホワイトボードチャレンジ」で投稿してみてください。

関連記事