広告の限界を超える|セールス
広告の限界を超える|セールス
2017.11.21
#5
LIGのWeb制作舞台裏

動画を贅沢に使ったブランディングサイト「intelligent HOME」制作の裏側を聞いてきました

ぐっさん

「LIGって、なにをやってる会社なの?」と聞かれることがよくあります。編集部門があったり、コワーキングスペースやゲストハウスを運営していたり……、要するにいろいろやっているわけですが、メインの事業はなんといってもWeb制作

そんな制作の様子を実際に見て、知ってもらいたい! というわけで、今回ご紹介するのは、動画をフルに活用して制作された、「intelligent HOME」のブランディングサイト。

WEBサイトはDesignAwards.AsiaのDesign Of The Monthなど各賞を受賞。動画制作のプロ・エレファントストーンとタッグを組んで制作した動画は、現在渋谷QFRONTの大型ビジョンでも公開中です。

その制作はどのように分担し、どんなところに注意して行われたのか、また、Web用の動画制作は、PV制作の過程とどう違うのかなどを聞いてきました。それではさっそく制作の工程・裏側をご紹介します!

payan LIG WEBディレクター/プランナー・パーヤン
CM制作、演劇制作、ソーシャルゲーム制作を経て2015年よりLIGにてWEBサイト制作に従事。
tommy LIG デザイナー・トミー
広告プロダクションのWeb制作部門にてデザイン領域だけでなく幅広く活動。2015年よりデザイナーとしてLIGにJOIN。
zawa LIG フロントエンドエンジニア・ザワ
2016年よりLIGにてフロントエンドエンジニアとして従事。フルスタックエンジニアを目指し精進中。
tsurume エレファントストーン プロデューサー・鶴目さん
動画制作会社エレファントストーン代表取締役。今回の案件ではプロデューサーを担当。スチュアート・マードックとジョニー・マーと小山田圭吾が神様。
yamabe エレファントストーン ディレクター・山部さん
WEB映像やMVを中心に映像制作を行う。2016年株式会社エレファントストーン入社。TVCM、WEBプロモーション映像、大手メーカーのPR映像など、様々なジャンルの作品を手がける。

今回紹介するプロダクト

intellhome
https://www.intelligent-home.jp/

intelligent HOME(インテリジェントホーム)
イッツ・コミュニケーションズ株式会社が提供するIoTスマートホームサービス。 IPカメラ、スマートロック、センサー、家電コントローラーなどのデバイス(機器)一式を、 専用ホームゲートウェイを介して、専用アプリやLINEから遠隔でコントロールできる。
Google Home を利用した音声コントロールも可能。
ico
今回の依頼は、「ブランディングのためのプロダクトサイトを作りたい」というものでした。
既存のサイトでは、ブランディングの際に大切な「情緒の訴求」ができていませんでした。つまり、「使ってみたい」という感情を喚起できていないということです。消費者が最初に知りたいのはその商品の性能ではなくて、「それを使ったときに何がどう変わるのか」という感覚的な部分です。
ico
そこから僕たちが考え出した制作コンセプトは、「テクノロジーと暮らし」。ストレートに、デジタルが実際の生活を便利にする、という部分に焦点を当てました。そこを起点にして、クリエイティブの方向性として「デジタルのかっこよさと、家の清潔感・あたたかさを打ち出していきましょう」と提案していきました。

動画制作の裏側、こだわったポイント

イッツコムさまから「動画を撮りたい」と依頼があり、サイトにはいたるところに動画が使われています。

https://gyazo.com/c8ae8af82a4dd5a1f49393ca5df70bd4

動画の制作は、その道のプロであるエレファントストーンさんに依頼。「旅と音楽」プロジェクトでもMV撮影でお世話になったり、先日「bacter」というポートフォリオサイトをLIGで作らせていただいたりもしています。

今回は、動画のコンセプトづくり・構成の部分までをLIGが担当し、その後の制作の部分をまるっとお任せしました。

 

2_DSC_5422

動画のコンセプトはLIG側で作ったとのことですが、どの部分まで決めてからエレファントストーンさんに依頼したんですか?

ico
大きな部分だと、家の外から家の中をコントロールできる点を表現するため、画面を「2分割」することに決めました。また、動画全体のイメージを固めたあとは参考映像をいくつか用意して、クライアントに「この映像のこの色味でいきたいです」「この映像のこの動きでいきたいです」など、要素を細かく分けて確認しました。感覚的な部分は言語化して伝えづらいので。

 

撮り直しってなると時間もコストもかかるし、キツいですもんね…

ico
そうなんです。LIGがパートナーと仕事をするときに一番気をつけているのは、クライアントとのイメージの摺り合わせ。だから、撮影当日は僕らもイッツコムさまも同行させてもらって、逐一画面を確認させてもらいながら進めました。
ico
制作側である僕らも同じ意識でした。カメラマンと色味や雰囲気を握った上で撮影し、普通は色味の加工は編集時に行うのですが現場のモニター上で色味まで確認できるようにしました。
ico
僕たちがイメージしやすいように画面幅もモニター側で調整してくださり大変ありがたかったです。

 

最終的に、イッツコムさまからの戻しはあったんですか?

ico
商品の角度について、少し戻しがあった程度ですね。商品によっては上から撮ると形が分かりづらかったので……。でも、万が一のことを考えてパターン多めに撮ってもらっていたので差し替えで済みました。イッツコムさまが現場でしっかりと確認してくれたおかげでもありますね。

18_DSC_5563

今回サイトの中に埋めこまれている動画の数がすごく多いなと思ったんですが、全部で何本ですか?

ico
Web用、Youtube用、15/30秒バージョンを含めて30本くらい納品しました。

 
30本も!? 撮影にはどれくらいの時間がかかったんですか?

ico
朝8時から夜8時まで、スタッフ・モデルさん含めて総勢20名で、ギュッと集中して一日で撮影させてもらいました。普段はなかなか撮れない改札のシーンなども撮れて楽しかったですね。

 
なかなかハードですね……。でも、映像ってとって終わり、じゃないですもんね。制作にはどれくらいの期間かかったんですか?

ico
だいたい1ヶ月です。

 
短い……ですよね。

ico
かなり。そうですね。頑張りました(笑)
ico
だいぶ頑張ってもらいました(笑)

19_DSC_5567

今回、Webサイト掲載用・企業のプロモーション用の動画撮影をお願いしましたが、PV撮影と違って気をつけていることなどはありますか?

ico
クライアント企業を知ることですね。イッツコムさまのサイトは堅実なイメージのものが多かったんですが、今回はLIGさんに制作を依頼したというところに、これまでとは違った「スタイリッシュなものを作りたい」という想いが見えたので、その想いに応えられるように制作にあたりました。
ico
「Webサイトのトンマナと合っているかどうか」についてもすごく気を配りましたね。YouTubeやイベント等で流すときよりも、サイトの看板としての要素が大きくなるので。なので、今回、サイト制作を担当するLIGさん、クライアントのイッツコムさまの双方が撮影に同行してくれ、確認を同時に進められるのはありがたかったです。

 

サイトの表現、こだわったポイント

では、サイト自体についてはどうでしょうか? 制作の際に気をつけたポイントはありますか?

ico
もともとプロダクトについていたコピーが「design my life」でした。それだけだと、ガジェット感が強かったので、より「生活」との結びつきをイメージしてもらえるように、「わたしといきるかしこい家」というコピーを追加しました。
ico
生活スタイルは人それぞれありますが、IoTは、スマホやインターネットを使っている人であれば、「生活」に溶け込んでくるものですので、デコレーションよりもシンプルなデザインとしています。

10_DSC_5508

icoあと、プロダクトサイトのときは、インタラクションが特に大事なんです。
Webがサクサク動くと、その商品を使ったときのサクサク感を感じてもらえる。今回のサイトでは、STYLEページの「スクロールすると動画が始まる」であったり、TOPページの「テキストが流れるアニメーション」、下層ページの「視線誘導」など、操作の質感を大切にしました。アニメーションは、ザワさんが力を入れて作ってくれましたね。
ico
そうですね。今回は生活の中で使用されるプロダクトのサイトなので、サイトを訪れた人に「デジタル感」や「ライブ感(生活感)」を感じてほしかったので、サイトを閲覧している間、常に動きが見えるような演出を心がけました。静止画がスクロールによって動画に切り替わったり、繰り返しアニメーションしている要素があったりなどですね。

 

https://gyazo.com/8b767f6e496a2d8da077c8d98e9a0ecb

ico
あと、最初の「わたしといきる、かしこい家」の文字は、アニメーションのスピードを若干ゆっくりにしているんですよ。
ico
たしかに! あの文字、出方がカッコいいですよね。

 

ゆっくりにしているのには、なにか意図があるんですか?

ico
サイトの随所で現れる文字がパラパラする演出は、デジタル感を強く感じられますが、それだけではどうしても印象として冷たくなりがちです。家庭に密着しているプロダクトなので、「温もり」も伝わって欲しいなと思っていたので、所々、アニメーションの時間は意図的に長くしています。

 

なるほど……。動きのひとつひとつに、意味が込められているんですね。

icoそうなんです。画像とテキストだけだと説明っぽくなってしまいますが、動画やアニメーションなら利用シーンがイメージしやすいし、その「わかりやすさ」が「商品の使いやすさ」のイメージにもつながると思っています。なので、Webと同時に動画の発注をいただけたのは本当にありがたかったです。

最後に

LIGでは、コーポレートサイトからキャンペーンサイト、メディアサイト、ランディングページなど、あらゆるWebサイト制作のご相談を承っております。

今回のようなWEB×動画の制作や、今あるサイトに課題を感じている方は、お気軽にご相談ください♪
クライアントに寄り添って、課題解決を支援します