SNS連携Webドラマ「こころポートレート」のログイン画面SNS連携Webドラマ「こころポートレート」のログイン画面

「こころポートレート」 写真をモチーフにした SNS 連携 Web ドラマ

こころポートレート」は、映像の視聴体験と SNS の世界を連携させることで、効果的なブランディングと、その効率的な拡散を実現した Web コンテンツです。映像と Web が対等に企画を進めることで、これまでは独立して制作されていたコンテンツ同士をシームレスに融合し、また、SNS との連携も自然な形でシナリオに織り込むことができました。

「こころポートレート」の1シーン。映像とソーシャル連家をWebコンテンツとシームレスに統合「こころポートレート」の1シーン。映像とソーシャル連家をWebコンテンツとシームレスに統合

企画/背景

「こころポートレート」は、Web 上での写真を通じたコミュニケーションを提案する「こころシャッター」というプロジェクトの一環として企画された、写真好きな親子の絆を描くWebドラマで、2012 年 9 月から毎週木曜日に公開されています。企画段階から映像と Web の融合を試みたり SNS との連携を取り入れるなど、これまでにない新しいコンテンツを目指して制作されました。例えば「こころポートレート」を Facebook や Twitter のアカウントでログインして視聴すると、ドラマの中で主人公の女の子が入力したメッセージや画像が、自分のタイムラインに送られてきます。また、本来は架空の人物である主人公の Facebook や Twitter ページも公開して、よりドラマの世界を身近に感じられる体験を目指しました。更に、FotoPus と連携することで、会員が投稿した写真の中から、各話の内容に関連する写真の一覧を、もし自分の写真を公開していれば特にそれが強調された形で、楽しむこともできるなど、SNS を使ったコミュニケーションに積極的に取り組んでいます。

ユーザーがログインしたSNSに合わせて、映像が変わるユーザーがログインしたSNSに合わせて、映像が変わる

Twitter(左)、Facebook(右)に投稿されたメッセージ画面Twitter(左)、Facebook(右)に投稿されたメッセージ画面

制作/開発

「こころポートレート」のコンテンツの特徴は、映像とその他の HTML 要素が密接に連携していることです。例えば、映像のシーンに応じてページの背景画像を変化させたりレイヤーの重なりを変えるといったギミックが実装されています。これらの要素の制御には、映像の再生状況を一番扱いやすいという判断から、Flash Player 内のキューポイントをトリガーとしました。また、視聴者がログインした SNS の種類にあわせて、ドラマの中で主人公が PC から入力する画面が Facebook と Twitter で切り替わるのですが、この機能を実現するための画面の合成にも Flash を使っています。Flash コンテンツであれば、再生環境によって要素の表示タイミングがずれることを心配する必要がなくなるためです。
今回の企画は全 46 話のシリーズとしてコンテンツの更新が継続して行われるため、運用しやすい実装の実現も大きなポイントでした。そのため JavaScript ライブラリの設計を入念に行い、MVC 構造を定義して、部品を交換する感覚で毎回のコンテンツ作成を行えるようにしています。可能な限り軽い実装を実現したかったため、jQuery の様な一般的なフレームワークを除き、必要な機能は全て社内で制作したライブラリでまかないました。

Flashを使って、彩(主人公)がSNSに投稿するシーンのアニメーションを制作している画面Flashを使って、彩(主人公)がSNSに投稿するシーンのアニメーションを制作している画面

映像のシーンに応じて背景を変えたりレイヤー重ねたりしている画面映像のシーンに応じて背景を変えたりレイヤー重ねたりしている画面

今後の展望

今回の制作では、映像を Web コンテンツと同等に扱い、映像がページ内の要素と統合されたデザインに挑戦しました。従来の、映像を動画プレーヤーを使用して Web ページに組み込むだけのコンテンツとは異なり、主人公の心境やシナリオに込められた気持ちなどをページの背景の変化としてあらわしたり、Web ページの要素と映像に表示される要素が互いに邪魔にならないようにそれぞれの領域内の配置を調整することで、映像内のシーンから視聴者のインタラクションを誘導して SNS へ連携するという一連の流れも自然に実現することができました。
Web と映像の高度な連携を実現するため、新しい制作ワークフローにもチャレンジしました。企画の最初の段階から、ドラマのシナリオを元に絵コンテをつくり映像と Web コンテンツを調整するなど、各コンテンツの担当者がコンテンツ全体の進行やイメージを共有できる仕組みを用意しました。特に、今回は映像制作も Web 制作も社内のチームが行ったため、初めての試みにも関わらずコミュニケーションがスムーズにできました。今後は今回の経験を生かして、更に新しい企画に挑戦したいと考えています。

撮影風景1撮影風景1

撮影風景2撮影風景2

制作企業

会社名 株式会社ミツエーリンクス (www.mitsue.co.jp)
スタッフ
  • 片野範康(Creative Director)
  • 黄聖實(Technical Director)
  • 水ノ江知丈(Film Director)

クレジット

クライアント オリンパスイメージング株式会社 (olympus-imaging.jp)
(製造業)
page top