2015年06月05日14時00分

『PhotoCinema』でカッコいい動画をサイトに組み込む|いまどきWEB10

  • この記事をはてなブックマークに追加
  • Pocket

これからのサイトはダイナミックに動画で魅せる

 こんにちは。ライターの松下です。これまで、“いまどきのサイトはビジュアルで魅せる”というテーマのもと、サイトをつくってきました。しかし、1枚のビジュアルですべてを伝えるなんてできないよ! というのが正直なところ。1枚の写真と一言の文章で伝えるには、やはり相当なセンスが問われます。

 だからこそ、テレビCMが動画なのですね。食べ物もおいしそうに見えるし、赤ちゃんもペットも動いてるほうが断然可愛いのです。

BiNDクラウドの新機能“背景動画”ってなに?

 『BiNDクラウド』に、動画を背景に敷く“背景動画デザイン”機能が追加されることになりました。6月11日より無償でアップデートされるとのこと。これは、YouTubeに公開した動画を、ページの背景のサイズに拡大して、その上にテキストや画像などの情報を載せることが簡単に設定できる機能。つまり、サイトのトップページの背景に、会社や商品のプロモーションビデオを流せちゃうのです。

 このアップデートに併せて、背景動画に対応した追加テンプレート集『BiND Site Box(バインド・サイト・ボックス)』vol.9、10がダウンロード販売されます。

いまどきWEB10 いまどきWEB10

↑背景動画を採用したトレンドデザインのテンプレート2 種類。vol.9はカフェショップのテンプレート『Cafe Robin』。料理やキッチン、店内の様子を撮影して作ったプロモーションビデオを背景に貼り、お店の世界観を表現している。もうひとつのvol.10『MITABA CC』は、中小企業のサイトを想定したテンプレート。

プロモーションビデオを『PhotoCinema』で簡単制作

 テンプレートをそのまま使うのもいいけれど、せっかくならオリジナルのプロモーションビデオがつくりたいですよね。テンプレート集に収録されている背景動画は、5月28日に新登場した動画作成ソフト『PhotoCinema』で作成されているそうです。

  PhotoCinemaは、ウェブ向けのカッコいい動画が簡単につくれる動画制作ソフト。タイトルのデザインやBGMなどが組み込まれたテンプレートが用意されているので、動画や写真を入れ替えるだけで、CMみたいな本格的なプロモーションビデオがつくれます。PhotoCinemaの概要についてはこちらの記事を御覧ください。

 もちろん、背景用動画だけでなく、商品紹介やマニュアルの動画制作などいろいろ使えます。複数メンバーで1本の動画をオンラインで共同制作する“コラボ機能”などもあり、昨年、話題になった伊勢丹のPV『ISETAN-TAN-TAN』のような全社員参加ムービーもつくれるかも!?

イベント案内のショートムービーをつくってみた

 今回使用したソフトは開発バージョンのため、製品版とは違う部分があるかもしれないことをご了承ください。

 まず本稿執筆時点では背景動画機能は使用できなかったため、ここではBBQパーティーのイベントへの招待ムービーをつくることにしました。

 ムービーの作成方法は、“おまかせモード”、“じぶんでモード”、“シナリオモード”の3とおり。 今回は“じぶんでモード”を選んでみました。

いまどきWEB10
↑“新規作成”をタップし、モード選択画面で“じぶんでモード”をタップ。

 次に音楽ファイルを選択します。『PhotoCinema』にはBGM用の音楽が50曲近く収録されているので、著作権フリーで使える適当な曲をもってなくても大丈夫。

いまどきWEB10
↑『PhotoCinema』付属の音楽ファイルを選択。もちろん、手持ちの音楽や録音した音声を使ってもいい。

 『PhotoCinema』の目玉機能のひとつが、タップによるテンポの設定機能。音楽のリズムに合わせてボタンをタップすると、BMP(拍子)が検出され、動画の切り替えのタイミングを自動調整してくれるのです。

いまどきWEB10
↑再生しながら“TAP”ボタンをタップしてテンポを設定。適当にタップすると、「一定のリズムで!」と叱られるのが、ゲームみたいでおもしろい。

 続いて、メインとなる動画素材を追加していきます。用意されている“フレーズセット”の中から、イメージに近いものをドラッグ&ドロップ。

 フレーズを並べて、それぞれに動画やテキストを入れ替えれば、もう完成です。

いまどきWEB10
↑“フレーズ選択”でタイトルや写真などのテンプレートをドラッグ&ドロップ。
いまどきWEB10
↑“フレーズ設定”で写真や動画の素材を入れ替え。レイアウトも変更できる。
いまどきWEB10
↑“テキスト”タブでフレーズに重ねるテキストを入れる。効果の種類もいろいろ。
いまどきWEB10
↑“エフェクト”タブで背景を入れ替えればできあがり。動画にフィルターも掛けられる。

 フレーズが揃ったら、ムービーは完成。プレビューして問題なければ、編集を終了します。

いまどきWEB10
↑再生ボタンをタップすると、レンダリング処理が行なわれて、プレビューできる。編集が終わったら“編集を終了”ボタンをタップ。

 思いのほか簡単で、あっという間でした。今までいろいろな動画制作ソフトを使ってきましたが、それらと比べてもずいぶん楽です。その違いは何だろう? と考えてみました。

 通常の動画制作ソフトは、動画素材を並べて、そこにBGMやタイトルを加えていきます。

 PhotoCinemaは、最初に音楽をベースにムービーの長さを決めて、写真や動画を追加し、フレーズごとに文字を載せていきます。そのため、音と映像のタイミングが合わなかったり、タイトルの表示がずれたりすることがなく、何度も微調整しなくても、最初からうまい具合に仕上がるわけです。

 そのうえ、カスタマイズ性もしっかりあるので、ほとんど自動なのに、思いどおりのムービーがつくれます。ポイント、ポイントの指示を出せば、うまいこと仕上げてくれる、いわば腕のいいデザイナーを抱えているような感覚ですね。

完成したムービーをFacebookでシェア

 今回は、できあがった動画は、フルHD動画として保存し、Facebookページに投稿してみました。

 開発バージョンのためシェア機能が未搭載でしたが、製品版では、YouTubeやFacebook、Vimeoなどに直接投稿できるようです。

いまどきWEB10
↑“書き出し”をタップ。
いまどきWEB10
↑“ムービー書き出し”をタップして、フォーマットと解像度を選択して書き出す。
いまどきWEB10
↑Facebookページに投稿してみた。

 動画編集から投稿までの手間がかからないので、小さなカフェやショップのセール告知などにも気軽に使えてアップできそう。これまで、商品説明ムービーなどの動画を寝る間も惜しんで制作してウェブにアップしていた方、時短とクオリティーのアップにおススメの1本です!

※WordPressのページはこちらから。サンプルサイトはこちらで見ることができます。

いまどきWEB 松下 典子(編集者、ライター)
パソコン雑誌編集者をへて、2000年に有限会社オフィス加減を設立。おもにIT関連書籍・雑誌の企画・編集・ライターとして、週刊アスキーなどで活動中。

 

提供:デジタルステージ

■関連サイト
BiNDクラウド(初年度無料、月額480円から)
BiNDクラウドの使い方をマスター
動画作成ソフト『PhotoCinema』

関連記事

あわせて読みたい

最新のニュース

アスキーストア人気ランキング

アクセスランキング

Like Ranking