digits

サイネージとタブレットで情報を美しくデザインする

GCは株式会社バック・ステージ様とチームを組んで、展示会や企業エントランス、そして博物館などの展示施設向けに、ディスプレイ、サイネージ、タブレット、スマートフォンへ、企業の情報や資料をデザインしインタラクティブに表示するサービス”digits”を開始しました。

1つの情報でも見せ方は多様です。例えばゲーム性を加えたり。

実現したいアイデアをお聞かせください。すでに東京都内から全国まで多くの場所で実績例をご覧いただけます。

environment

自然環境に根ざさない事業はありえません

どんな事業でも、自然環境から原料を得たり、恩恵を得たりして成り立っています。
その事実を無視しないで、積極的に感謝して恩返しをすることが、事業者の最も重要な行動と考えます。

GCは、サービスとエネルギーと事業計画において、実際に行動をしています。

2002年から、八ヶ岳において自然農法、共生農法のデータ収集を進めています。

自然の中で作物を育てることで多くのことを学ぶことができます。自然のルールから大きく外れないように、自然の仕組みから学ぶことを大切にしています。

2006年から、使用する電力のすべてに自然エネルギーを利用しています。

日本自然エネルギー株式会社を通じて、使用する電力のすべてに自然エネルギーを利用しています。

2016年から、紙の代わりになるサービスを積極的に進めています。

大量に印刷して、配布して、廃棄される。商品を販売するだけために、サービスを紹介するためだけに。でも、代替のサービスは数多く生まれています。ウェブページ、リスティング広告、サイネージ、ショートムービー、電子書籍。GCは熱帯雨林の木を伐採しないでも、紙以上の効果を生むクリエイティブを積極的に提供しています。

美しく調和している自然にそのまま含まれること。それはGCが描く理想的な人間活動の姿です。

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などの動画編集ソフトに背景が透明な状態で配置できます。

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