「声」という新しいUI--Alexaボイスデザインガイド いろはの「い」

CAMPHOR- Advent Calendar 2017 の 18日目 の記事です。
CAMPHOR-で運営メンバーの @tomokortn です。

我が家にGoogle Home Miniが届いた!

前までカレンダーや音楽再生などちょっとしたことでスマホを触っていましたが、
今はスマートスピーカーの操作は楽すぎて、ちょっとしたことでスマホ触るのが億劫になります。
コンピュータ→スマートフォンウェアラブル端末の「小さくして持ち運べるようにしました!」というリニアな流れとはまた違う体験があるので、ぜひ買ってください!!!

そしてそして、新しい端末が届くとデザインガイドラインが気になってしまいますよね><
はやくもAmazon Alexa Voice Design Guideが公開されています!

「スマートスピーカーってめっちゃ聞くけど、ゆうてあんま知らん」「ガイドラインの読み方わからん」「年の瀬だし、時間ない!」って言う方向けに、基礎の基礎からまとめてみました。

Faster, easier, and more fun

まずは、Alexaが目指している世界観について。

1. Faster

料理中に3分測りたいときに、汚れた手を洗って、タイマー探して、そこまで歩いて、タイマー操作して3分セットする・・・ああ1分くらい経ったんじゃない?
Alexaなら、鍋の前で「Alexa, 3分測って」

2. Easier

「Alexa, 音楽をかけて」でAlexaは曲を選び、再生し、アーティストについて学習します。
Alexaはメニューやスクリーンの代わりとなり、ユーザーから手と目を解放します。

3. More Fun

ユーザとAlexaの対話の中にゲーム性やユーモア、ストーリーを加えることによって、ユーザがやりたいことをより楽しく実現できるようにする。

れっつ Voice Design!

スキル設計するときには、ユーザーとAlexaの対話(dialog)の台本(script)を作成します。

スキル(Skill) …スマートスピーカーの機能・能力のこと。スマホでいうネイティブアプリにあたるようなもの。

書き言葉ではなく、話し言葉で作るようにしましょう!

Voice Designの3ステップ

  1. Dialog Sketch(対話の下書き)
  2. User Flow
  3. Interaction Model

f:id:tomokortn:20171213194400p:plain

1. Dialog Sketch

ユーザハッピーにつながるシナリオをラフに描いてみます。
シンプルでOK!
その後、書いたシナリオをもとにユーザのペルソナやスキルのコアバリューを整理します。

2. User Flow

体験全体のフローを書きます。
ユーザとAlexaの対話を映画の台本のように書いていきながら、
スキルの起動方法、ユーザからAlexaに入力してほしい情報やWebサイトなど他の媒体から入手すべき情報なども整理します。

3. Interaction Model

2で作ったユーザフローに、分岐やエラーケースを加えて拡大します。
ユーザは長く話すかもしれないし、短く話すかもしれない。
ユーザは想定外のことを話すかもしれないし、黙り込んでしまうかもしれない。
いろんなパターンを人間同士で対話しながら、どんどん枝を増やしていけば、最終的には長くて深い、網羅的なフローチャートになっているでしょう!
人間同士で対話しながら作ることは、Alexaの話す言葉が 自然な言い回しか/適切な長さか長さ/程よい情報量か/明瞭か… に貢献するので、どんどん声に出して改良していきましょう!!

話し言葉と書き言葉の違い

書き言葉では冗長な表現を避けますが、VUIではユーザと同じ言葉をAlexaの発言の中に混ぜて、ユーザに安心感を与えます。
このテクニックは landmarking といいます。
ex)
User「午前10時に何がある?」
Alexa「午前10時には部署会議があります」

また、Alexaの話し方を調整するのに、Speech Syntesis Markup Language(SSML)というマークアップ言語があります。
概要はこちらのブログで!

dev.classmethod.jp

ユーザの話をAlexaが聞き取れるように設計する

台本ができたら、インテント(Intent)を決定します。

Intentは直訳すると意図という意味ですが、Alexaの場合は以下の意味になります。

インテントはあなたのスキルが実行可能な特定の物事を指します。例えば旅行プランニングのスキルは、PlanATrip(旅行の計画)やBookTheTrip(旅行の予約)、Stop(停止)、Cancel(キャンセル)、Help(ヘルプ)の5つのインテントを持つでしょう。

インテントと発話の関係について

f:id:tomokortn:20171213202935p:plain What Users Say | Amazon Alexa Voice Design Guideから画像をお借りして、インテントと発話の関係について軽く触れます。

Utterance - 発話: ユーザーが自分の要望をAlexaに伝えるため、またはAlexaからの質問に答えるために話す言葉のことです。

Wake word - ウェイクワード: ユーザーがAlexaに話しかけたいときに発するコマンドのことです。

Invocation name - 呼び出し名: スキル利用時にユーザーが呼びかけるカスタムスキルの名前です。

Slot - スロット: インテントの引数でリクエストに関する追加情報をAlexaに与えます。

ユーザが言いそうな様々な文章やフレーズ、単語を設計に盛り込み、すべての対話が心地よく進むようにしましょう。

VUIで留意すべきこと

ユーザから承諾を得たい場合を考えます。
GUI(Graphic User Interface)の場合、call-to-actionボタンによって入力が一意に定まりますが、
VUI(Voice User Interface)の場合、はい/オッケー/よさそう/いいよ…など同じ意味を表す言い回しが多数存在しています。
このように、インテントを起動させるべき発話(utterance)は複数存在しているので、会話シミュレーションを活用するなどして丁寧にリストアップしてあげる必要があります。
1インテントに対し、30以上のサンプル発話 を用意することが推奨されています。

デザインが完成したら

チェックリストがあるので、チェックしてみましょう!

おまけ

Voice Design Guideを読んでみた感想

デザインプロセスに関して、1インテントにつき30以上のサンプル文が要求されることなど、発話の抜け漏れのなさや発話の要素分解が求められ、かなりロジカルで地味な印象を受けた。ユーザ調査がめっちゃ好きなデザイナーにとってVUIデザイナーは天職になりうると思う。

また、以下の3点から、日本で海外製スキルが流行するのは時間がかかると考える

  1. 英語版スキルの上陸はネイティブのスピードについていけるリスニング・スピーキング能力が求められる。
  2. VUIは、GUIのようにアイコンなどの非言語情報でユーザ理解をサポートできない。
  3. Slot(変数)に関して、英語や中国語、フランス語などの語順の自由度の低い言語はSlotの設定が比較的楽そうだが、日本語やロシア語のような語順の自由度が高い言語は開発がつらそう...

我が家のGoogle Home活用法

我が家のGoogle Home MiniはUS英語に言語設定しています。 UK英語に設定して見たのですが、US英語の方がスキルが多かったので、US英語にしています。
適当に英語喋っても結構聞き取ってくれるので、自信になります。
毎朝「Hey Google, good morning!」っていうと天気やニュースを返してくれて、ちょっとずつ聞こえる英語が増えてきて嬉しいです。
寝る前は「Hey Google, tell me some story」といって、眠れる森の美女など適当な寓話を聴いています。

参考リンク

Amazon Alexa Voice Design Guide (日本語)
Amazon Alexa Voice Design Guide
Alexa Skill Testing Tool - Echosim.io (Alexaをブラウザでお試しできるサイト)

ノンデザイナーでもできる!イケてるロゴの作り方

CAMPHOR- Advent Calendar 2017 の 1日目 の記事です。
CAMPHOR-で運営メンバーの @tomokortn です。今日22歳になりました

大学2回生のときにひょんなことからデザインを始めて、何度かロゴの受託制作をしました。
今までの知見をまとめて、「ノンデザイナーでもできる!イケてるロゴの作り方」としたいと思います。
ハッカソンやサービス起案の場など、今チームにデザイナーいないけどシュッとロゴ作んないといけないの!って時にお役立てください。

いいロゴってどんなもの?

Evernoteのロゴの由来をご存知ですか?
象は「Elephants never forget」ということわざに由来します。
そして象の耳がちょっと折れているのはnoteを表しています。
「すべてを記憶する」を掲げるノートサービスであるEvernoteらしいロゴで、大好きです!

f:id:tomokortn:20171130234720p:plain

サービスを象徴するロゴだからこそ、意味のあるデザインにしたいですよね。
そこで、誰でも意味のあるロゴデザインができるように手前味噌ですが私が以前チームで作った制作物を事例にして、説明したいです。

ロゴ制作のフロー

ざっくり以下のフローを踏みます。

  1. サービスの特徴を整理して、できるだけたくさんキーワード化する
  2. 1.で並べたキーワードを掛け合わせて、造形パターンを出してみる
  3. 質感・配色を考える
  4. (線の太さなど、微調整をかける)

サービスの特徴を整理して、できるだけたくさんキーワード化する

今回は「Liquor」というバイト探しアプリのロゴの事例を使って説明します。
※ロゴは依頼を受けて作ったもので、サービスのアイディアは私のものではないです

Liquorのサービスの特徴

  • 面接なしで働けるバイト探しアプリ
  • 雇用主がユーザー(被雇用者・求人者)をレビューすることによって、ユーザーは信頼を得る
  • 面接がないので隙間時間にフレキシブルに働ける世の中を目指す。サービス名もフレキシブル→流動的→水のイメージで名付けた

キーワード化

  • バイト→履歴書、(採用の)チェックマーク
  • 探す→虫眼鏡、検索ボックス
  • レビュー→星、(レビューの)積み重ね
  • フレキシブル→水、時間
  • Liquor→L(イニシャル)
  • 面接なし→稲妻 (即時性からの連想)

出したキーワードを掛け合わせて、造形パターンを出してみる

先ほどの工程でオリジナリティあふれるモチーフになりそうなキーワードがすっと出れば、それを図案化してロゴにすればいいのですが、たいていの場合はそうはいきません。
そこでキーワードの掛け合わせでロゴのアイディアを広げていきます。

掛け合わせを考える時に便利な道具があります!
そう、マトリックスです!!!
ロゴアイディアのために強制総当たり戦をやってみます

履歴書 チェックマーク 虫眼鏡 検索ボックス 積み重ね 時間 L 稲妻
履歴書 x
チェックマーク x x
虫眼鏡 x x x
検索ボックス x x x x
x x x x x
積み重ね x x x x x x
時間 x x x x x x x
x x x x x x x x
L x x x x x x x x x

こんな感じでいろいろ図形を作ってみます。

f:id:tomokortn:20171130235347p:plain

今回はサービス名が「Liqour」であるように水っぽさが重要なので、一番上の造形に流動感を加えたカタチを採用しました。

図形をきれいに作れないよ><って方は商用可・加工可の素材サイトを活用してみるといいと思います。
ICOOON MONOとか
ただし、その場合は商標は取れないので、そのときはデザイナーさんに改めて依頼するなどしましょう。
ベクターデータの編集にはIllustretorが主流ですが、 INKSCAPEなどフリーのベクターツールもあるので活用してみてください。

配色を考える

色が人間に与える印象が言語化されているものを眺めて合いそうな色を探します。 この記事とかおすすめです。 12色の意味と心理に与えるイメージまとめ!配色のコツも教えます

Liquorでは、信頼の青とブルーカラー/ホワイトカラーから、青の濃淡2色で配色しました。

質感は丸いと柔らかく・幼く、角ばっていると堅く見えるので、サービスに合わせて丸み具合を調整します。

(最後に気の済むまで綺麗に見えるように調整して)完成です!

f:id:tomokortn:20171130235452p:plain

おまけ

ロゴを作る時にCI(コーポレートアイデンティティ)とVI(ヴィジュアルアイデンティティ)の考え方は重要なので、もっと知りたいって方はこのブログとか読んでみてください
https://hataraku.vivivit.com/works/civi

おまけ2

誕生日なのでおねだりさせてください!笑
http://amzn.asia/e1ktfVg

旅程表を高速にプロトタイピングする海外旅行ハック

6日間パリに行ってきました。
模範的女子大生の模範的卒業旅行っぽい写真をあげておく。
f:id:tomokortn:20170913154450j:plain
  

旅程表を高速にプロトタイピングする

ヨーロッパ旅行は1年前にチェコプラハに行っていたので、今回2度目なのですが、
今回は日常会話レベルの英語もままならない女子2人旅だったし、公共交通機関の治安があまり良くないと聞いていたので、
できるだけ道に迷わないようにあらかじめ準備していきたいなと思いました。

そこで使ったのは、Google My Maps
Google Mapの上に、自分でピンをポチポチつけることができて、
作ったマイマップは、Google Driveと同じように共有リンクやメールアドレスからの閲覧招待ができます。
Google MapをDLしたスマホでマイマップのリンクを開くと、Google Mapアプリ上でマイマップの確認ができてめちゃ便利。

レイヤーごとに連番機能や色を一括設定できるので、私は「ホテルや旅行代理店、両替など重要な場所」+「日にち」でレイヤーを切りました。
f:id:tomokortn:20170913160819p:plain
ドラッグ&ドロップで順番を入れ替えたり、レイヤー間の移動ができたりするので、ほんとに便利です。
旅行への妄想が捗ります。
(ガイドブック買ってきて、旅行マイマップつくるだけでも旅行気分が味わえるんじゃないかってくらい楽しかった)

旅行中、エッフェル塔とか大きな観光地は行き忘れたり、道に迷ったりすることはあまりないと思うのですが、
ガイドブックの雑貨特集ページのの端に載ってたちょっとした雑貨店とかをバンバンこのマイマップの中にぶち込んでおくと、
近くに行った時にちょっと足を伸ばすことができて、いい感じです。

旅程表を完璧に組んだって、旅程表どおりに進まないのが海外旅行。
それでもマイマップ作っておく良さは、事前にパリの位置関係を把握できるので、道関係で悩まなくなることが大きいなあと思います。
私たちは空港からホテルまで思ったより時間がかかったので、初日にいきなりモンマルトルチャレンジに失敗して、
パリに着いてからがっつり計画を組み直したけれど、マイマップで位置関係や所要時間をさくっと確認できるから、すぐに計画を立て直せました👏

今回の旅行で実際に作ったマイマップはこちら↓
drive.google.com

マイマップ作るのに参考にしたもの

パリ (ララチッタ)

パリ (ララチッタ)


jams-parisfrance.com

格安で日本に電話をかける

旅程表は入念に作っていったものの、クレジットカードの上限を初日で迎えてしまう痛恨のミス。
クレジットカード会社に電話したいけど、
私の使っているソフトバンクiPhoneから普通に国際通話をしてしまうと 175〜375円/分とめっちゃ高い ので、
LINE Outを使いました。

LINE Outの料金はシンプルで、電話をかける先がどの国かで決まります。
日本だと、固定電話は3円/分、携帯電話が14円/分!安い!!!
しかも広告を見れば最初の3分は無料です。
音割れしてたらどうしようってドキドキしながらカード会社電話しましたが、
ホテルのWi-Fiでもクリアな音質で、無事クレジットの利用上限を引き上げることに成功しました😂

ひとつ難癖をつけるとしたら、240円ずつあらかじめ課金しておかなきゃいけない点。
240円分のテレフォンカードを買っておいて、それを使う感じかな
使ったぶんだけ、LINE Payから引かれる方式に変えてくれたらもっと便利なのに!
まあ、余った分がなくなるまではしばらく国内でもLINE Outでかけようと思う

海外に電話したいときはぜひ使ってみてください〜〜〜!
line.me

以上海外旅行ハックでした。

最後に写真をいくつか

朝のエッフェル塔
f:id:tomokortn:20170913171313j:plain

一番好きだったサント=シャペル f:id:tomokortn:20170913171322j:plain

サクレ=クール
f:id:tomokortn:20170913171639j:plain

サンマルタン運河沿いも良かった
f:id:tomokortn:20170913171723j:plain

ベルサイユは良い写真がいろいろ撮れた
f:id:tomokortn:20170913171808j:plain
f:id:tomokortn:20170913171814j:plain
f:id:tomokortn:20170913171812j:plain

締めの牡蠣
f:id:tomokortn:20170913171901j:plain

パリはいかんせん物価が高いのですが、 クスミティーとLa Cure Gourmandeのクッキーは高すぎず(=安くはない)、可愛くて、おいしいのでとてもおすすめです。

パリは東京並みに地下鉄が発達しているので、あの複雑さに慣れればちょっとした距離も地下鉄でいけます。
あと、25歳以下は土日祝にTicket Jeunes Weekendという1日乗り放題チケットが爆安で買えて便利でした。
パリ市内はどこまでいっても片道2€くらいなのに、乗り放題チケットは4€強くらい。 石畳で足が痛くなるので、ガシガシ使い倒しましょう。
おかげさまで初日に買った回数券がちょっと余ったので、今後パリに行く方は声かけてくださると余った回数券をあげます。

英語の勉強するぞ

3月に1週間、アメリカのイベントに行くことになったので、英語を勉強しようと思います。

 

Goal

  • テクノロジーに関する英語がなんとなく聞き取れて、簡単な感想・意見を述べられる程度にしたい。

 

現状

  • 去年TOEIC 690点だった国立文系大学生。Listening 305、Reading385でリスニングが苦手。
  • 大学生活で、事あるごとに英語の勉強を試みるも、1ヶ月以上続いたことがない。 

 

計画

  1. 大学受験が終わって3年半、ほとんど英語に触れていないので、英単語/英文法の復習をかける。
  2. ビジネス英語に触れる。
  3. 後期が始まったら海外留学から帰ってきた人や学校の留学生いる部屋とか使ってアウトプットの機会を作る。

 

1. について 

英単語は大学受験のときに使っていたものを本棚から取り出してきました。

英単語ターゲット1900 5訂版 (大学JUKEN新書)

英単語ターゲット1900 5訂版 (大学JUKEN新書)

  • 作者: 宮川幸久,ターゲット編集部
  • 出版社/メーカー: 旺文社
  • 発売日: 2011/11/23
  • メディア: 単行本
  • 購入: 3人 クリック: 19回
  • この商品を含むブログを見る
 

 

今回は話す/聞くが目標なので、音声入手のためにアプリを入れました。

720円でアップグレードすると、単語と例文の音声と、よく間違える単語の復習ができるようになります。

ただ、初期設定の学年設定が高3までなのと、進捗カレンダーにセンター試験までのカウントダウンが表示されるのがつらい。

お前は想定ユーザーじゃないぞ!と言われている。

おばさんが使ってごめんね・・・

英単語アプリ  ターゲットの友 for 1900

英単語アプリ ターゲットの友 for 1900

  • Obunsha Co.,Ltd.
  • 教育
  • 無料

 

英文法書は新たに購入しました。 

英文法がフィーリングでわかる感じで、気に入ってます。

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法(東進ブックス)

一億人の英文法 ――すべての日本人に贈る「話すため」の英文法(東進ブックス)

 

 

こっちも音源はアプリから480円でゲットしました 。

クイズがついていて、楽しい。

東進ブックスStore

東進ブックスStore

  • 株式会社ナガセ
  • 教育
  • 無料

 

音源はアプリで入手という世の中になっていて、時代の流れを感じる。

大学受験した時はCD聞いてたぞ。

 

2. について

杉田敏さんがビジネス英語的には有名らしいので、この本を購入。

日本語訳読んでるだけで勉強になりそうな内容でおもしろいけど、それくらいレベルが高い文章なので難しい。

こっちはマイペースに頑張りたい。

NHK CD BOOK 実践ビジネス英語 ニューヨークシリーズ ベストセレクション

NHK CD BOOK 実践ビジネス英語 ニューヨークシリーズ ベストセレクション

 

 

3. について

1. 2. である程度インプットし終わったら少しずつ喋る時間を増やしたいと思っている。

 

お金について 

英単語帳は大学受験のを使いまわしたので、今回かけた費用は5,304円です。

 

最後に 

正直英語を見たり聞いたりするとめちゃくちゃ眠くなって心が折れかけているのですが、

ブレーン6月号のSXSW特集を読んで、オースティンにいる私の妄想をしてがんばっています。

 

 

2年間学生デザイナーをやっていて、

「納期が設定されたら、そこに向かって、どこから湧いてきたのかわからない謎の馬力出して頑張って成果を出すこと」は得意ということに気づいたので、

今回こそちゃんと英語話せるようになりたいです。

 

おしまい。

広告を非表示にする