1.0UX TIMEShttps://uxdaystokyo.com/articles大本 あかねhttps://uxdaystokyo.com/articles/author/akaneohmoto/rich600338<blockquote class="wp-embedded-content" data-secret="yGJ9qK45JC"><a href="https://uxdaystokyo.com/articles/chatbot/">会話型デザインの技術的の実験で見えた9つのポイント</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://uxdaystokyo.com/articles/chatbot/embed/#?secret=yGJ9qK45JC" width="600" height="338" title="“会話型デザインの技術的の実験で見えた9つのポイント” — UX TIMES" data-secret="yGJ9qK45JC" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); //# sourceURL=https://uxdaystokyo.com/articles/wp-includes/js/wp-embed.min.js </script> https://uxdaystokyo.com/articles/wp-content/uploads/2018/01/chatbot02.png6451316Adrian Zumbrunnen（エイドリアン・ザンブルネン） 現在Googleでデザインをしているスイスのチューリッヒ出身のフリーランスUXデザイナー。 Twitter：@azumbrunnen_。 翻訳元記事：Technical and social challenges of conversational design 僕は数週間から自分のWebサイトを会話型（chatbot＝以下bot）にする実験を行いました。フィードバックや反響、メディア取材には、本当に驚かされています。公開24時間で300通あまりのメールも頂きました。僕のサイトでたくさんの素晴らしい会話をしてくださった皆さんに、この場を借りてお礼を申し上げます。 今回は、この実験で気付いたことについてお話したいと思います。全ては会話から始まったので、この記事でもそんなスタイルで進めてみたいと思います。それでは、始めていきましょう！ 未来の会話型デザインへ漠然とした不安 母はいつも僕に「失敗を恐れていては何も始まらず、失敗を多く経験することで大きな武器にもなるのよ」と言っていました。恐怖や不安を克服するためには、大きな変化と成長をする必要があるからです。 僕がwebサイトを会話型にしてみるという発想にいたったきっかけは、数週間前にTwitterとLinkedlnで共有した些細や質問からです。 もし、botがデザイナーの仕事ができるようになったら、あなたはどうしますか？ 冗談のつもりで聞いたので、以下のようなストレートな返答をボスからもらうとは思ってませんでした。 「解雇だ！」―ラファエル・ライテリッツ氏　（Googleプロダクトマネジメントディレクター） ボスのラファエル氏はとっても素晴らしい人です。彼は明らかに（たぶんね！）冗談を言っていましたが、彼の言葉から漠然とした不安が生まれました。 会話型デザイン時代において、デザイナーはどのように対応したらよいでしょう？ そして、より重要なこととして、 このことは、UX設計全体にどのような影響を与えるのでしょうか？ この流れは、大企業だけに関係あるものなのでしょうか？それとも、誰もに関係することなのでしょうか？ ここ数年のプッシュ通知騒ぎは、そもそも会話型インターフェイスについての話なのでしょうか？ …疑問はつきません。 僕は、いくつかの実験的な体験を実行し、この不安を払拭することを決めました。そして、自分のWebサイトをチャット形式に変えたのです。 実際のサイトはこちらで見れます。。（ネタバレ注意：もしあなたが鏡の前で自分自身と話すことがあるなら、自分のbotを作ることはすごく楽しい体験になるかもしれません。） それでは、今回の実験を通して得られた９つの考察について紹介していきます。 Webサイトを会話型にして得られた９つの考察 1. 文章を書くことが技術の中でさらに重要になる この実験を始めたとき、おそらく最も時間を割くのはデザインとプログラミングになるだろうと思ったのですが、それは間違っていました。 「文章の作成にはデザインとプログラミング両方を掛け合わせるよりも時間がかかるのです」 会話型体験を作る上で重大なパートは、“会話”そのものです。言い換えるなら、“言葉”そのものです。それゆえに、文章作成に多くの時間を費やすことは驚くべきことではありません。 僕は、iA Writerで会話のラフを作成しました。 そして、他のメッセージへのトリガーとなる、ごく一部のチャットメッセージ“会話パス（conversation paths）”のコンセプトを開発しました。この会話パスによって、僕は理想とした多くの会話をデザイン、作成することができました。 これらのことは滑り出しとしてはよかったのですが、充分ではありませんでした。 2．繋がりのない文のやり取りには、ロボット的なものを感じてしまう 実生活で人と話をするとき、どのように始まり、どのように展開していったかという流れによって会話の印象の良し悪しは大きく変わります。 例えば、（展開がなくて）同じ話題が繰り返されると違和感を覚えますよね？また、あなたが天気についての話題を切り出したとして、次はもっと別の興味がある話題に持っていきたいと思うはずです。天候予報についてのさらに詳しい議論はしたくないですよね？ そういった繰り返しやロボット的な文のやり取りを避けるために、僕は確認方法を変えなくてはいけませんでした。 “会話パス”が適切かどうかを機能面からのみではなく、（より人間らしい）自然な会話がどういうものなのかという観点から、ひとつひとつをチェックしていきました。 その結果、ある違いに気づき、それにびっくりしました。ちょっと妙な言葉の繰り返しや少しおかしな文章の繋がりがあるだけで、自然な会話とは言えないシナリオがたくさん見つけたのです。 それぞれに繋がりのない文が積み重なったものでは、僕たちは自然な会話の流れを感じることが出来ません。コミュニケーションが自然だと感じるためには、僕たちは話の流れを捉える必要があるのです。 3．文脈にあった言葉の選びが大切 文脈にあった言葉の選び、ユーザーとふざけあってみましょう！ 文脈にあった言葉選びは、自然な会話を成立されるための大切な要素だと考えています。 ページを更新するときのbotのセリフを例に挙げると常に「こんにちは！」というよりは、たまには「また来たね！」といったほうが自然に見えませんか？ 言葉選びは些細なことかもしれませんが、話のシナリオを変えていきます。 ─詳しくは「会話の文脈での学び」の中でお伝えしますね！ ところで、botのあいさつを変えることで何が起こったと思いますか？ 初めてこのような機能を見たとき、ユーザーはbotの機能が想定していたよりもずっと優れているということに驚きました。彼らはインターフェースに関する知識を改め、次にこんな疑問を抱くようになったのです。 「このbotは他に何が出来るのだろう？」 一つお伝えすると、実験的なインターフェースを提供した時に、最も多かった人々の行動は「botで遊ぶ」ことでした。 僕の目的の一つに従来の連絡フォームをbotの一部として統合することがありました。 “連絡したいことがあります。（Get in touch!）”と表示されたボタンをタップすると、ユーザーがメッセージを書くことができるようにしたのですが、これによってこの対話型の連絡フォームはいたずらされる回数が増えていきました。 間違ったメールアドレスを入力したり、下ネタを入力してみたり。僕のbotは会話の手助けをするよう設計しました。いたずらのためではないのです。 これだけではいけないとメールアドレス認証チェックを実装しました。 「入力されたメールアドレスはうんちの絵文字を想像しちゃう。なにか違うみたいですよ。」 このメールアドレス認証といたずらへの切り返しは、思いのほか多くの人にウケたようで、ツイートもされました。いたずらして、逃げようと思っていた人たちはbotに仕返しされてさぞや驚いたことでしょう。 この経験から、大切なことを学びました。 ユーザーがあなたのインターフェースでいたずらし始めたら、いたずら仕返してください。それは「文脈にあった、言葉の選び方」であり、立派なコミュニケーションの一つになります。実際にどう楽しむかは、ぜひご自身の目で確かめてください。 4.会話の文脈は切り出し方によって変わる あなたはデザイナーで、デザイナーが集まるイケてるカクテルパーティに出席するとします。そこにいる人全て同じ職種だと知っていたら、切り出す話題はどうやって選びますか？ 大半の人は、同じ職種の人と話すならこんな話題がいいのではないか？と考えるのではないでしょうか？ 少なくとも会話のきっかけに「ここのバナナシェイク、新鮮ですね。」とは言わずに、「こんにちは！あなたもデザイナー？どんな仕事しているの？」と、もっと「デザイナー」から連想できる話題を切り出すでしょう。そのほうがもっと楽しい時間が過ごせそうではないですか？ 会話のきっかけとして文脈にあっているほうが、印象づけられるとわかっていても平凡な質問から会話を始めたりすることもありますよね。 特に「ネットワーキング」イベントなどに出席した人がいたら、もしかしたら「天気」の話題で一日終わってしまったなんてこともあったりするかもしれません。 このように文脈に沿った会話の切り出しや、感情に沿った切り替えしが自然な会話に大事なのではないか？と考えた僕はbotとの会話に自然に盛り込める方法を考えてみました。 この文脈を理解し設定することで、話の切り出しは飛躍的に改善されました。 メディアやTwitterで記事から、僕のWebサイトに来る人はデザインに興味を持った人がほとんどでしょう。僕はこの考えをbotからの会話に盛り込んでみました。 ケニー・チェン氏のUXニュースレターから僕のサイトにアクセスした人へは「ケニーのニュースレターから来てくれてありがとう。君もUXデザインに興味があるのですか？ 」と切り出しました。 この小さな調整は会話の流れを改善して、より人間的にするだけでなく、他の改善点をみつけるきっかけになりました。ほかの改善点については次のセクションで詳しくご説明します。 5.興味に沿った「特別感」を演出する 僕のWebサイトではQuartzというメディアのインターフェースに似たような形でUX記事を勧めることができるのですが、ユーザーがUXに興味がない限り、むやみに勧めたりはしません。 だって、興味がないのに道端で全く知らない人に、「モバイルデザインにおけるハンバーガーメニューを撤廃するべきではないか」という論争を突然始めているようなものだからです。 それは、「特別」ではなく「迷惑」ですよね。 しかし、Mediumから来たユーザーと判定できれば、文脈に沿って以下のような質問を出してみます： あなたもUX業界の人なの？ 「はい」と答えると、僕の最近のUXの記事を話題に出します。しかし、繰り返すことで不自然になりそうなので、同じ記事を二度お勧めすることはありません。 一度始まってしまったUXの会話を終わらせるにはどうするのかって？ …それはまた別の機会にしましょう。 6．時間が言葉の背景を変える 僕は以前、プレゼンテーションで「時間の長さ」が僕たちの行動や環境、そして知覚に対して大きな意味合いを持つということを取り上げました。時間という概念はほかの要素に与える影響が一番強いのかもしれません。 あなたが本当に好きな人に出会ったと想像してみてください。連絡先を交換し、次に会えるまでドキドキして待ちきれません。 あなたはすぐにその人へメッセージを送るべきでしょうか？ それとも待ったほうがいいのでしょうか？ 待つとしたらどれくらい待てばいいのでしょう？ 時として、時間は僕たちにとって良くも悪くも働くのです。 具体的にどうやって僕たちに影響を与えるのか見てみましょう。 さて、ボブはアンナと運命的な出会いをしました。もう会いたくてたまりません。たまらず、アンナへメッセージを送ります。 アンナ、あなたに会えて本当によかった！ - ボブ さて、ボブはアンナから即座に返答をもらうのと、3日以内に返答をもらうのと、どちらが嬉しいでしょうか？ ボブの望みは置いておいて、一つだけ確かなことがあります。返答にかかった時間は「言葉の背景」を色濃く映します。 即答のほうがポジティブな印象を与えますが、遅れてきた返答のほうが「期待」という魔法の追加成分がかかって、とても大切な思い出になるかもしれません。 詳しく見ていきます。期待と返答の速さはコミュニケーションにおいて大きな影響を及ぼします。僕は会話経験において4つの異なる段階の時間差があると思っています。 時間における４つの段階 即答<10秒 即時に返答を得られる場合です。通常、会話をしているときのスピード感ですね。 ... : 30秒以上 少し考えて、返答する場合ですね。例えば、上司と話していて、「どうして遅刻したの？」と聞かれたとしましょう。あなたは気が利いた返答をしようとちょっと考えたりしませんか？まさにその状態です。ですがチャットなどで会話している場合、タイピングの早さもあるので、このような間合いはほぼ伝わらないかもしれません。 ブレイク: １時間以上 会話が途切れてしまい、タイミングをみて再開するような場合のことです。この時間は日常の忙しさを表しています。ビジネスでもプライベートでも、この時間の取り方で期待が膨らんだり、しぼんだりしませんか？その分、届いた返事により大きく一喜一憂したりしますよね。 キャッチアップ：３日以上 途切れた会話をどちらから、再開するか全く新しい話題に切り替えて、話し始める場合です。 一度途切れてしまっているので、ボブなら、返答が来るか来ないか毎日ハラハラしているのではないでしょうか？ 今回の実験は文章がシンプルだったため、初めのカテゴリにのみ、時間に応じて変化するタイピングアニメーションを入れてみました。 メッセージの長さ 画面上で占めるスペースの量 この２つに気を付け、アニメーションをつけると以下のような効果が得られます。 １つはこの方が人間らしくなります。長い文章を読んだり、入力するには時間がかかりますよね。 もう1つはユーザー側が各メッセージを消化する時間を持てるということです。ですが、botがたくさんの動画を次々送ればととたんに、消化できず「こちらのことを考えない」ロボットと話しているような感覚をになるはずです。 自然に言語処理できる複雑なbotでは時間を置くことで「戸惑い」のような心理学的要素を取り入れることも可能でしょう。 「ヘイ！Siri!今晩デートしない？」 タイピングがとまる（戸惑い） 「さあ…どうしましょう？」 どうです？タイミング（時間）の演出は、「自然な会話」をつくるために大切だと思いませんか？ 7.アニメーションは自然な会話の要素 アニメーションは、自然な会話を形作るためにとても大切な要素です。従来の情報設計では不可能な動きを可視化し、説明することができます。 僕はこの実験の中で、多くの時間モーションを調整することに使いました。一番好きなのはアニメーションの実装だと考えています。アニメーションなしでは自然な会話は成り立たないのです。 どうしてそう思うのか見ていきましょう。 アニメーションはインターフェースに動きを加えます。 動きは自然な会話を形作る一つの要素です。わずかに弾むようなアニメーションはマンガにおける吹き出しの役割をします。（マンガの種類にもよりますが、ここではまじめなマンガのことを言っています） アニメーションは視線を誘導するのに有効です。 チャットボットの会話が終了すると、2つのオプションが下から表示されます。僕は最後のメッセージと、次に現れる最初のボタンの間のタイミングを調整することに注力しました。その結果、ユーザーがきちんと下部のボタンに目線を向けてくれるような、ちょうどいいタイミングで実装することができました。 アニメーションからは自然に会話しているような感覚を得られます。 ボタンを少し動かすことで、画面に遊びが出て、ユーザーを惹きつけます。そして今回はボタンを押すとそのまま返答としてメッセージになるように演出しました。 実際、このアニメーションが一番重要な要素です。 なぜだと思いますか？ それはアニメーションによって、botとの会話が生き生きとした印象に変わってくるからです。 多くの人に「こんなに自然に言葉を交わせるようにするにはどのような仕組みをつかったのか」と聞かれました。最初、僕にはなにを指してそういわれているのか理解できなかったのですが、皆さんの意見をお聞きしてこの事だと理解しました。 ユーザーは自分の選択したものが、会話の一部になることで、あたかもこちらで用意した選択肢が自分自身が答えたような錯覚に陥るのです。ですがアニメーションがなければ、このような体験はできず、会話もただのシナリオをなぞるように感じたことでしょう。 アニメーションは僕の実験において、「自然な会話体験」を強化する大事な要素だったのです。 8.botはWebサイトが伝えられないものが伝えられる 気の利いたコピーやひと工夫ある見出しで、広告代理店とWeb代理店は差別化を図ろうとしています。僕も同じ様なことをしていて、僕は自分のことを”熱狂的なコーヒーオタク”だと自称しています。 ただ、他と違うことをしようとすることは必ずしも良いことではありません。行き過ぎてしまえば、理解を得れず、奇をてらうあまり逆に凡庸になってしまうこともあると思います。 僕の会話型UIの実験は、僕のWebサイトの上の方にあります。 下にスクロールすると、僕の古いサイトがあります。 テストしてみて、会話型UIをスキップした時、最初はショックをうけたんだよね。でも、 従来型のサイトと会話型のサイトの2つの体験には全く関係は存在しないんだ！と気が付きました。 僕の従来のWebサイトはスペースが多く、必要な要素のみで構成されている非常にシンプルなデザインです。ですが会話型のサイトは絵文字を送り、ジョークを言い、常に笑いが溢れています。つまりとても人間らしいのです。この２つのデザインは僕の異なる人格を表しているような気がします。一つは合理的な側面、もう一つは感情的な側面です。 僕にとってデザインとは常に自分自身を反映しています。自然な会話を作るという体験は僕自身をより鮮明に浮かび上がらせたように思いました。 9. 既存の枠組みの外にあるもの（リフレーミング） 会話インターフェースを考えるとき、僕たちは四角い画面の中に吹き出しがある画面をまず思い浮かべると思います。ですが、もし突然この会話インターフェースが、当初設計された枠組みから逸脱したらどうなるでしょうか？ 僕の体験したことなのですが、House of Cards（ドラマ）を初めて見たとき、不思議な感覚を覚えました。突然ドラマの登場人物であるフランクアンダーウッドが僕と話を始めたのです。 彼は彼の計画について僕に語り、さらに汚い小さなジョーク言いました。最初は違和感を感じましたが、僕自身が登場人物の一人であるような感覚は、すぐにこのドラマの最も象徴的な要素のひとつなのだと納得しました。 映画制作では、この「枠組みを超える」ようなコンセプトを「第4の壁を破る」と言うそうです。会話型インターフェースにこのアイデアを盛り込むと、どうなると思いますか？ プッシュ通知を送信したいとしましょう。どうすればより多くの人にPUSHをおくれるか、 UXの研究では、ユーザーに許可を求めることがより効果的であることを繰り返し示しています。 僕の場合、このように取り入れてみようと思います。 「こんにちは。最近よく来られますね。なにか新しい更新情報があれば貴方にお知らせできるよう、PUSH通知の受け取り許可をしてくださいませんか？」 ユーザーは「いいね、そうしよう」か「今はいいや」のいずれかを選択することになります。ユーザーが前者を選択すると、会話は続きます。 「わあ！うれしい！ブラウザの右上にポップアップダイアログが表示されます。許可ボタンを押すと設定が完了しますよ！」 許可ボタンが押されるとこんなメッセージが現れます。 「ありがとう！これから僕たち、仲良くやっていけそうですね！」 これが会話型デザインにおける「第四の壁の破り方」のイメージです。 会話型デザインは既存のやり方ではできなかった情報設計ができます。 例えば、上記のように、PUSHを設定しただけで、親しくなれたような感覚が得れるなんて、想像できましたか？ただし、これはあくまで一例で枠組みの変え方は一部で、他にももっとあるかもしれません。 まとめ 会話型デザインには人々の期待が多く寄せられています。その期待を全て叶えるのはとても難しい仕事になるでしょう。もし少しでも間違えれば、どんなに些細なことでも不自然に感じてしまうからです。 サイトにbotを追加することは会話型デザインの限定的なアプローチの１つです。会話型デザインの本来の姿はこんなものではないでしょう。 FacebookメッセンジャーやWhatsApp、LINEなどのメッセージング系のサービスがサードパーティのサービスと本格的に連携しだせば、会話型デザインはより重要になってきます。 それに、会話型インターフェースを構築することは、技術的にも社会的にも大きな挑戦になるでしょう。 だから、チャットの吹き出しだけが会話型インターフェースのすべてではありません。 今後、コンテンツと連携して日常の中に「自然に」息づいていくでしょう。 さあ、僕たちも既存の概念にとらわれず、従来の枠組み─マンガの吹き出しみたいなものを乗り越えて、新しく考えチャレンジし始めましょう！