協業支援サービス Collabos 紹介動画 01
クライアントの情報
企業・チーム
- 株式会社PULL-NET
- http://www.pull-net.jp
- 株式会社PULL-NETは、ECサイトの構築やランディングページの制作など、Web関連の制作やサービスを展開している会社です。今回、協業支援サービスのコラボス（Collabos）という事業を始めたということで、アニメーション動画の制作を依頼くださいました。
商品・サービス
- Collabos（現在は協業支援サービスコラボワーク）
- https://www.collabo.work
- コラボワークはお仕事を発注したい方と、受注したい方、様々な登録メンバーと仲間になりたい方、それぞれが仕事の種類に応じて最適な形でマッチングするサービスです。コラボワークには、メッセージ機能、受注発注確認機能、スマホアプリなどの機能もあります。また、クリエイターは、ライブラリに自分の実績を公開することもできます。
クライアントの要望
Collabosは、クリエイター同士やクリエイターと企業の担当者を直接つないで、協業（コラボレーション）を支援するためのWebサービスです。2016年に生まれたばかりのサービスで、現在のところ、登録してくれるクリエイターや企業の担当者を増やしているところです。
そこで、今後の展開のために、Collabosのことを広く知ってもらい、サービスの中身を理解してもらうために、アニメーション動画を制作してほしいという依頼をいただきました。アニメーション動画の目的は、イラストで描いたキャラクターを使って、実際にCollabosでの操作を見せながら、協業支援サービスの便利さを理解してもらうことです。
Collabosさんの話では、クリエイター同士をつなげることはもちろん、クリエイターと企業の担当者をつなげることも想定しているとのこと。そこで、クリエイターとクリエイターがつながるA編と、クリエイターと企業の担当者がつながるB編を制作してほしいという依頼の要望でした。
アニメーション制作の課題
キャラクターとCollabosの実際の画面を見せて、操作の手順を描いてほしいという要望だったので、そこは絶対に外せないポイントでした。その上で、いかにCollabosというサービスの全体像を描いて、視聴する人に理解してもらうかが課題となりました。加えて、CollabosのWeb上での画面を見せて、実際の操作を描いていくパートは手順が多くて、退屈に感じられる可能性があったので、そう感じられないように工夫するのも課題となりました。
また、アニメーション動画で使うことになるイラストは、Collabosからリクエストがあった別のクリエイターさんに描いてもらうことが決まっていました。そのクリエイターさんは、キャラクターにアニメーションを加えるのに必要なレイヤー分けをしたことがなかったので、クリエイターさんの負担を最小限に抑えながら、スムーズにレイヤー分けをしてもらうために、どんな指示を出すべきなのかも課題となりました。
課題克服の考え方
Collabosの全体像をいかに理解してもらうかという課題は、登場するキャラクターが悩みを持っているところからスタートして、Collabosを利用することで、悩みを解決してゴールするまでを、一つ一つ丁寧に描くことで克服しようと考えました。実際に操作を描いていくパートの課題については、アニメーションの展開を早くして、どんな操作をしているか認識できれば充分だと考えて、時間割をしました。
別のクリエイターさんへのレイヤー分けの指示は、まず相手の負担を最小限にすることが重要でした。負担を軽くすれば、それだけ創造することに時間や労力を使えるし、そのため、まず制作するアニメーション動画で必要となる動きをシミュレーションして、どうしても必要ななるレイヤー分けだけをお願いしました。
そのクリエイターさんにとっては、普段と違う制作スタイルになったようで、キャラクターの線や色にわずかに透明になっていたりするのを修正してもらったり、実際にCollabosというサービスでメッセージを交わしながら、試行錯誤することもありました。
アニメーションのコンセプト
| クリエイターと直接つながり、コラボレーションして新しい価値を創る！ |
|---|
アニメーションのアプローチ
| クリエイターとつながり、コラボレーションすることを、楽しそうに見せる。 |
|---|
アニメーションのキャラクター
Collabosのアニメーション動画で、キャラクターのイラストを描いてくれたのは、近畿に在住のイラストレーターであるKopyo（こぴょ）さんです。Kopyo（こぴょ）さんと打ち合わせを行なって、表情に動きが必要なキャラクターだけ、レイヤー分けをお願いして、動きが必要のないキャラクターは普段通りに描いてもらいました。
Webデザイナーのキャラクター
漫画家のキャラクター
企業担当者のキャラクター
カメラマンのキャラクター
モデルのキャラクター
アニメーションのデザイン & レイアウト
レイアウト & デザインは、まずクライアントさんから渡された言葉だけの構成図をもとにして、絵コンテを創るところから始めました。ウゴモーションが創った絵コンテをもとにして、クライアントさんとの意見交換をして、次に動画コンテを創って、さらに意見を交換していくという制作の流れとなりました。
制作の進展状況から、Kopyoさんのイラストが完成する前に、アニメーションを加える作業を始めておく必要がありました。そこで、絵コンテ段階で使わせていただいていたダミー画像を使って、アニメーションを加えていき、Kopyoさんのイラストが完成するたびに、レイヤーを追加してアニメーションにさらに加えていくことしました。
ロゴマークとアイコンのレイアウト
登場するキャラクターたちのレイアウト
キャッチコピーのデザインとレイアウト
アニメーションの制作
アニメーション動画の制作には、Adobe After Effects（略称 : AE）を使いました。Collabosさんから提供されたイラストをもとにして、オリジナルの図形やマークなどをAEで制作して、アニメーションを加えています。
アニメーションを加えていく上で、もっとも注意したのが時間の使い方でした。今回のアニメーション動画では、当初から全体で2分ぐらいにしてほしいというCollabosの要望がありました。なので、2分間ですべての内容を描くためにも、早いテンポで場面を展開していく必要がありました。
同時に、早いテンポで場面を展開させることに集中すると、見せたいアニメーションの動きが平凡になってしまう可能性もあったので、部分的なタイミングの調整と、全体的な時間の調整を同時にしていくのがとても大変でした。
今回は、CollabosのWeb上での画面を見せる場面など、制約の多いアニメーション制作でしたが、全体としてアニメーションがうまく機能して、楽しくて分かりやすいアニメーション動画になったと感じています。
Collabosのアニメーション01
Collabosのアニメーション02
Collabosのアニメーション03
Collabosのアニメーション04
Collabosのアニメーション05
Collabosのアニメーション06
アニメーションのスケジュール
今回のアニメーション動画の制作では、CollabosのWebサイトの修正やリニューアル作業に合わせて、制作のスケジュールが進んでいきました。ですので、制作の依頼をいただいてから、準備するところに大きな時間が必要となりました。
スケジュールの日程
- 2016年07月 = 企画、課題克服、コンセプト創り
- 2016年08〜09月 = レイアウト & デザイン
- 2016年10〜11月 = 動画制作から動画完成
アニメーションの成果
2017年2月現在のところ、制作したアニメーション動画はCollabosで使われておらず、成果がない状態です。依頼していただいたCollabosさんには、大変に喜んで満足してもらったので、CollabosのWebサイトやアプリのリニューアルに合わせて、今回のアニメーション動画が、動画広告やプロモーションなどで使われるのではないかと思います。成果などが分かりしだい、報告する予定です。
Copyright 2018 - UGO MOTION. All Rights Reserved.