kun432's blog

Alexaなどスマートスピーカーの話題中心に、Voiceflowの日本語情報を発信してます。たまにAWSやkubernetesなど。

〜スマートスピーカーやVoiceflowの記事は右メニューのカテゴリからどうぞ。〜

Voiceflow: キャンバスのマークアップ&エクスポート機能 βテスト先行レポ

キャンバスマークアップ機能とエクスポート機能のβテストが今日から始まったので早速レポです。ちなみに、有償プラン以上の機能になりますのでご注意ください。

キャンバスのマークアップ

キャンバスのマークアップ機能は、キャンバスを文字や画像で装飾ができる機能です。実際に見るのが一番早いと思うので見てみましょう。

スキルを開いて、右下のエンピツアイコンをクリックします。

f:id:kun432:20200620004627p:plain

こんな感じでマークアップモードに切り替わります。

f:id:kun432:20200620004728p:plain

左にアイコンが2つ見えていますね。これがマークアップ用のアイコンです。上が文字列の挿入、下が画像の挿入ですね。

f:id:kun432:20200620005226p:plain

では文字列の挿入からやってみましょう。

次に画像もやってみます。

はい、こんな感じでスキルの動きに影響を与えずに、説明や装飾用の文字や画像なども配置できるというわけですね。

マークアップモードからエディターモードに戻るには、画面に表示されている通り、ESCキーを押すか、

f:id:kun432:20200620005107p:plain

左下のバツマークのアイコンをクリックすればOKです。

f:id:kun432:20200620011119p:plain

キャンバスのエクスポート

そして、キャンバスのエクスポートです。右上の「Share」をクリックします。

f:id:kun432:20200620015313p:plain

エクスポートは、PNGとPDFが選択できます。とりあえず、「Image」を選択して「Export」をクリックしてみましょう。

f:id:kun432:20200620015331p:plain

クルクル回ります。多分画像を生成しているのでしょうね。

f:id:kun432:20200620015848p:plain

ダウンロードされました。開いてみましょう。

f:id:kun432:20200620015916p:plain

はい、フローと、先程追加したマークアップが出力されています・・・が、

f:id:kun432:20200620020034p:plain

ブロックの中の文字が化けてしまっています・・・ちなみにPDFも同じでした。まだβなので致し方ないかもですね。とりあえずバグ報告しておきました。

f:id:kun432:20200620020308p:plain

まとめ

いかがでしょうか?昨日、私が登壇させていただいた「Voice UI/UX Designer Meetup #5」での資料を一部抜粋しますが、最近のUIアップデートで非常に会話フローが直感的・視覚的にわかりやすくなりました。

f:id:kun432:20200620020720j:plain

VUIデザイナーさんにとってはこのアップデートはとても重要なのですが、それだけではなくて、

  • 上司の方や同僚の方に、作成した会話フロー設計をチェックしてもらう
  • クライアントへの進捗報告やチェックしていただく

というような「他の人が見てもわかりやすくなった」ということも実は大きいと思っていて、今回のキャンバスマークアップ&エクスポート機能は、

f:id:kun432:20200620020939j:plain

というような、VUIデザイナーさんの実務をさらに補完するような機能としてリリースされているのだと思います。

VUIデザインやVUIスキル開発が業務として成り立つにはまだまだ時間が必要だと思いますが、こういった機能が今後も増えていくことにより、VUIでご飯を食べれるようになる日がくればいいなと思っています。

あと、上でご紹介したVoice UI/UX Designer Meetup #5」にて、初心者の方・デザイナーの方向けにVoiceflowの話をしてきました。資料もそちらで公開しておりますので、よろしければご覧ください。