160810_p01

ご要望に合わせて自動でご案内するmotionAIを設置してみました

この画面の右下にある「BOT」ボタン。お問い合わせフォームの代わりとして、自動で会話しながらお客様のお問い合わせをサポートするものです。

もちろん本物のAI(人工知能)でしたら予想外な会話も自動でしてくれそうですが、あくまでボット機能ですので、予め会話の流れを設定してあげる必要があります。

今回、使ったサービスはmotion.ai。
https://www.motion.ai/

motion.aiでは複数のボットを作成できます。

160810_p02

お問い合わせフォームでは「項目」と「入力欄」という組み合わせですが、「項目」をボットからのお声かけにして、それに対してご回答をいただくという流れが設定しやすいと思います。

160810_p03
160810_p04

もちろん、お客様のご回答にあわせて次の会話を変化させることができます。

160810_p05

会話はあくまでボットが自動で行いますが、後からmotion.aiの画面で会話の履歴を確認できます。また、デフォルトで通知機能がありませんでしたので、少しブログラムを追加しました。

160810_p06

お問い合わせ窓口としての機能だけでなく、例えば種類の多い資料をお客様のご要望に合わせて自動でご案内するなど、工夫次第でお客様にとってさらに便利な機能をウェブに追加できそうです。

配信画面

自社サーバー、社内サーバーで映像ライブ配信

社内LANでライブ映像を一斉配信する案件がありましたので、nginxとrtmp-moduleを組み合わせて構築してみました。

映像のライブ配信ではYouTube LIVEやUSTREAMなどがありますが、それを社内や自社のサーバーに設置しよう、ということになります。

16080201_a01

社内向けに配信したり、ユーザーのデータベースと併用して、視聴できるユーザーを映像ごとに細かく管理したりとライブ映像の配信管理が簡単になります。

映像を配信するPCでカメラや動画ファイル、画像をスイッチングしたりしてサーバーに配信します。配信するPCは普通のノートPCでOKです。また、スマホのアプリからの配信も可能です。

配信画面

配信画面

視聴者はブラウザを利用してライブ映像を視聴します。フルスクリーンにすることで大画面への出力もできます。今回はスマホでも見られるようにRTMPとHLSで同時配信してみました。

配信元の映像

配信元の映像

配信後の映像

配信後の映像

ライブ映像の画面は通常のHTMLで作成できますので、ライブ映像の横にチャット機能を追加したり、資料を表示させたり、フルスクリーンだけでなく自由にレイアウトが可能です。

16072901_p04

Adobe Character Animatorでアニメーションを作ってみた

動かないキャラクターを簡単に動かしたい。今回は「簡単に」ということで、Adobe Character Animatorでアニメーションを作ってみました。

まず、用意したのが動かないキャラクターデータ。Illustratorファイルです。

16072901_p01

これを、Photoshopで各レイヤー分けします。このレイヤーの作り方には決まりがあります。
下記のページなどを参考にしました。
https://helpx.adobe.com/jp/adobe-character-animator/using/prepare-artwork.html

16072901_p02

できあがったPhotoshopデータをAdobe Character Animatorで開くと、
こんな画面に。

16072901_p03

右上の部分にはPC内蔵カメラで撮影される自分の顔が。口の動きや視線の動きを認識して、同じようにキャラクターが動きます。

16072901_p04

キャラクターに動いて欲しい動きを自分で動いて、これを録画するとアニメーションの完成です。
出力したファイルはPremiereなどの動画編集ソフトに背景が透明な状態で配置できます。

できあがった動画はこんな感じ。

817

GC的なランディングページ原稿の書き方

何かのご案内を作るとき、どのようにして作り始めていますでしょうか。

今回はGCで採用している2つのリストから作る方法をご紹介します。
それは印刷物でもウェブ(ランディングページ)でも基本は同じです。

まず、紹介したい商品やサービス、イベントの特長と思われるところをリストにします。

16072601_p01

次に2つめのリストを作成します。 先ほど書いた箇条書きの中から一番「売り」と思われるものを1つを選び、一番上に書き込みます。

16072601_p02

ここで視点の転換です。提供側としての自分から、この「売り」を初めて見た人としての自分に転換します。

先ほどの「売り」を見て疑問と思えること、気になること、知りたいことを何でもよいので、その下に書いていきます。

16072601_p03

書けましたら、それに対して「これが答えになるかも」というものを最初に書いたリストから選び、その下に答えとして追加します。

16072601_p04

答えが無かった部分はどうするか?そこに、自分勝手な答えを書きこみます。自分の理想の答えです。

そして、要望に合わせた詳細な答えがほしいというところには、矢印を書き込みます。

16072601_p05

自分の理想の答えと現実が違う場合はどうするか?商品やサービスの改善ポイントが見えたとも言えます。

あと、最初の箇条書きの中で答えに記載できなかったものがある場合は、それは「売り」ではなく「仕様」ということになります。

それぞれの「疑問」を疑問形ではなく魅力的なコピーに書き換えて、ワイヤーフレームの完成です。矢印の部分はお問い合わせにつなげるコピーを配置します。

完成したワイヤーフレーム

完成したワイヤーフレーム

もし、デザイン会社に制作を依頼する場合はこのワイヤーフレームを送ります。

LPデザインの料金表を見る

GCの場合はワイヤーフレームではなく、リストの状態からでももちろんOKです!

1607250308

ポケモンGOの影響でARのお問い合わせ

最近あまりそのワードを聞かなくなってきていたAR(拡張現実)ですが、ポケモンGOの影響でARのお問い合わせをいただきましたので、さっそく簡単なサンプルを作成してみました。

1607250308

専用のソフトで元の画像と、画像の上に表示させる素材を設定します。載せられるのは画像や動画、音声、3Dデータになります。今回は動画とキャラクターの3Dデータを用意しました。

1607250306

専用のアプリで見られるようにウェブ上で登録をすると、作業完了です。

1607250307

閲覧する側のアプリはiOSとAndroidに対応していて無料です。アプリで元の画像を表示させると、先ほど設定しました動画や3Dキャラクターが表示されました。

3Dのほうは角度を変えると立体的に表示されていることがわかります。

1607250309

1607250304

1607250303

1607250302

施設や設備のご案内をする場面で、iPadでその設備を見ると説明動画が流れるようにするのも簡単です。

また、展示会で商品をiPadで見ると商品紹介が表示されたりなど、まだまだ活用できるシーンはありそうです。