株式会社コプロシステム

お問い合わせ

2014年4月23日

思わず使いたくなる!クオリティの高いプロモーション動画をデザインに活用してるWebサービス・アプリ

  • このエントリーをはてなブックマークに追加

こんにちは、コプロシステムWebデザイングループのディレクターの石川です。

先日、Facebook広告で、「Crevo(クレボ)」という"アプリやサービスを紹介するアニメーション動画をクオリティ高く・安価で作れる"クラウドソーシングサービスを見つけました。
このサービスは、アプリやWebサービスなどデジタル系に限らず、ワインメーカーや、不動産会社、配送サービスなどなど、国内・海外問わず様々な"サービス"の紹介動画の実績を持っているサービスです。
サービス紹介動画やアプリ紹介するための動画制作を手軽に | Crevo[クレボ]

私はWebディレクターなのでWebサービスやアプリに焦点を当てると、たしかに最近たちあがるWebサービスやアプリのランディングページでは「動画」がアツくて、サービス紹介動画をYoutubeやVimeoにアップするのは珍しくなくなってきていますし、TOPページの1stビューに動画そのものや再生ボタンを配置したり、Webページの背景に動画を配置するデザイン手法も増えてきたり、様々な表現方法で使われています。


テキストや画像の説明ではなかなか伝わりにくいサービス内容も、動画で見ればその魅力や世界観までも伝えられますよね。まさに「百聞は一見に如かず」というやつです。
カッコよかったり、おしゃれな動画でデザインを彩るだけでなく、それでユーザーに「使ってみよう!」と思ってもらえたら、こんなに嬉しいことはないですよね。
ただ、撮影はなかなか素人には敷居が高いし、プロに頼むと高そう...なイメージもあるので、冒頭に紹介したCrevoのようなサービスはかなり需要があるのではないでしょうか。

ということで、今回は「クオリティの高いプロモーション動画をデザインに活用してユーザーを使いたい気持ちにさせているWebサービス・アプリ」というテーマで、国内を中心に事例を挙げてみました。
今まさにWebサービスをたちあげ中のクリエイターの方、是非参考にしてみてください。


note

note」は、今月初旬(4月7日)にリリースされたばかりで、文章・写真・イラスト・音楽・映像などのオリジナルコンテンツを発信することができる新しいWebサービスです。
各コンテンツは有料販売することも可能で、100~10,000円(税込)の範囲で自由に価格設定できるとのこと。

プロモーション動画は、キービジュアルエリア内にある再生ボタンをクリックすると、モーダルウィンドウ内で閲覧可能。
かわいいアイコンなどを使用してnoteの世界観が伝わってきますし、メイン機能のイメージがすんなり頭に入ってくるように作られています。

note の動画


STARted

STARted」は、イラストをアップロードするだけでオリジナルの服が自由に作れてしまう、というすごいWebサービス。服作りの専門知識がない人でもアパレルブランドを立ち上げられてしまうんですね。
現在はクローズドベータ版で、今夏に正式オープンを予定されているとのこと。

プロモーション動画は、TOPページの1stビューにYoutubeの動画がドーーーンと埋め込まれています。
今回あげた事例の中では、一番でかでかと設置されていたかな。
サービスイメージ、利用シーン、実際の画面操作の様子などが短い時間にまとめられています。

STARted の動画


bento.jp

"今すぐ注文する"ボタンを押した20分後に指定の場所へ、美味しいお弁当(日替わり)を届けてくれるアプリ「bento.jp」。
今は渋谷区の一部エリア限定ですが、順次拡大していく予定とのこと。がんばってほしい面白いサービスですね。

プロモーション動画は、キービジュアルエリア内ではありませんが、やはりページ上部に再生ボタンを配置。
「テキストよりまずは動画を見て!」という作り手のメッセージが聞こえてきそうです。
こちらは、実写ではなくアニメ動画。「20分後に(スピーディーに)届ける」サービスなので、疾走感がある動画です。
イラストのタッチがオリジナリティがあっていいですね。

bento.jp の動画


Streetacademy

"まなぶ・おしえる・つながる"がキャッチコピーの「Streetacademy」(以下、ストアカ)は、教えたい人と・学びたい人を結びつけてくれるスキル共有コミュニティサービスです。
schooやドットインストールなど、スクール系Webサービスを最近よく見かけますが、ストアカは「教えたい!」と思ったら自分ですぐ募集をかけられるところが特徴的。

プロモーション動画は、キービジュアルエリア内にある動画のキャプチャ画像をクリックすると、モーダルウィンドウ内で閲覧可能。
前述のnoteと同じくキービジュアルエリア内に再生アクションが仕込まれていますが、
noteでは、○に三角マークの再生ボタンのみにしてシンプルにかっこよくきめているのに対し、
ストアカでは、動画のキャプチャ画像を配置し、「ここをクリックすると動画が見れる」ということがよりわかりやすいデザインにしています。
どちらも動画が見れることはすぐわかりますが、表現の仕方が違いますね。

Streetacademy の動画


tixee

"NO MORE PAPER TICKETS, SMART ENTRANCE STYLE"というキャッチコピーの「tixee」。スマホやPCでチケットが購入できる まではどこにでもありそうですが、そのチケットをアプリにダウンロードできて、そしてそのまま入場手続きまでできるという、スマート・エントランス・システムです。

キービジュアルエリア内に設置されたプロモーション動画は、他事例と比べて30秒という短さですが、↑上述のシステム内容の説明がわかりやすくまとまっています。
こんなに手軽なら使ってみたい!と思っちゃいますね。

tixee の動画


Questant

誰でも簡単に高機能でおしゃれなアンケートフォームを作ることができる「Questant」。

最近のトレンドの、Webページの背景に動画を使ったページデザイン!いいですね。
若干表示の遅さが気になりますが、インパクトとかっこよさが印象的です。
動画の内容ですが、他事例と比べて、"サービスのイメージ"というよりも、ショップの店員・アーティストのマネージャー・カフェの店長・企業のマーケターなど"このサービスを使うであろうユーザーが実際に使っているシーン"により焦点を当てて動画が作られているなぁと感じました。

Questant の動画


CREATIVE SURVEY

前述のQuestantと同様、アンケートフォームを作成できるASPサービス「CREATIVE SURVEY」。

利用しているシーンやイメージなどではなく、字幕付きの画面操作方法をメインに作られた動画だったのが印象的でした。
実際の画面を見ることができるので、より具体的にサービスを知りたい方にはもってこいのプロモーション動画なのではないでしょうか。

CREATIVE SURVEY の動画


VideoShader

VideoShader」は、特殊な機材や高価なソフトを使わなくても、簡単な操作で映画やアートのようなクリエイティブな動画を撮影することができる無料のiOSアプリです。(一部フィルタは有料)
写真加工のアプリなら山のようにありますが、動画撮影で、しかもこんなに高機能なアプリは今までなかったのではないでしょうか。

動画系アプリ、特にこのVideoShaderは冒頭に書いた「百聞は一見に如かず」というのがまさにあてはまるアプリで、言葉で説明するよりも動画で見るのが一番。
前述のbento.jpと同様に、ページ上部にYoutubeからの埋め込み動画を設置。
また、その下のエリアにも各フィルターの使用中動画を小さめに複数配置していて、クリックではなく、マウスオンだけで閲覧することができます。
こういう小さな気配りも嬉しいですね。

VideoShader の動画


Spark Camera

Spark Camera」は、少しずつ撮影した動画を、最終的に1つの動画としてまとめてくれるiOSアプリです。
"Vineの長い時間撮影できるバージョン"というとわかりやすいかもしれません。旅の思い出などをサクッと作るにはもってこいですね。

ページデザインは、海外ならではの大胆なレイアウト。
情報要素としても、ロゴ/AppStoreのボタン/背景写真/再生ボタンの4つしかなくてとてもシンプル!
動画は全画面にも耐えられる高画質。どこにでもいそうなカップルがとても楽しく旅の思い出を作っている内容で、思わずダウンロードしたくなります。

Spark Camera の動画


Prott

キュレーションアプリ"Gunosy"のUIデザインを担当した、株式会社グッドパッチさんの新サービス「Prott」。
もうすぐオープンする、注目のプロトタイピングツールです。

TOPページのキービジュアルエリアから閲覧できるプロモーション動画、今回あげた事例では唯一の一人称視点の動画です。
サービスの対象は、モバイルアプリ。紙に描いたスケッチレベルのアイデアをカメラで撮影することで、手軽にプロトタイプとして取り込むことができます。
アニメーションも付け加えることができるとは便利すぎる...。正式リリースが楽しみです。

Prott の動画

YoutubeよりVimeoの方が多い理由は?

こうして事例を挙げていくと、何かに気がつきませんか?
そう、YoutubeよりVimeoにアップされている数の方が圧倒的に多いんです。(10事例中、7つ)
調べてみると、Vimeoの運営方針・規約にその答えがありました。
参考ページ:Vimeoを探れ!規約から分かるおしゃれな動画が多い理由とは?

  • 「Vimeo」というサービス名の由来は「Video+me」という造語で、「me(自分自身)」という部分を重要視している。
    そのため、アップロードできる動画は、「自分自身で作ったオリジナル動画」のみ
    著作権についてもかなり厳しい考え方を持っている。
  • ただ、作品に携わったディレクター/編集者/ミュージシャン/グラフィックアーティスト/俳優などはアップロードが許可されている。
    また、間違って運営サイドに削除されないように、その作品にどのように携わったか役割を明記する必要がある。
  • ゲームのキャプチャーは、自分自身で作ったオリジナル動画でもNG
    ゲームそのものの開発に携わっていることが明記されていればOKだが、他社のものはNG。
  • 商用ビデオは、基本的にアップロードNG
    ネズミ講のようなネットワークビジネス、不動産紹介、製品プロモーションなど、特定の業種の動画もNG。
    ただ、制作会社/作家/アーティスト/ミュージシャン/NPO/俳優などは、作品のプロモーションを許可されている。

などの制限を設けて徹底した運営をしているため、クオリティの高い厳選されたアーティスティックな作品が集まり、美観を損ねることなく運営できているのではないでしょうか。
規約以外にも、

  • 高画質
  • 自由なサイズ(アスペクト比)でアップロード可能
  • パスワードロック可能
  • 広告が少ない

などのメリットもあるため、クリエイターが好んで使うことが多いようです。

YoutubeはYoutubeで、

  • 利用者数が多い
  • 検索に強い
  • 集客力の強さ
  • 日本語対応している

などのメリットがあるので、どちらを選ぶかは運営者ごとに変わるでしょう。



いかがでしたでしょうか?
上記事例のように、動画をこれからオープン予定のWebサービスやアプリのページデザインに活用してみてはどうでしょう。
むしろ、これからのWeb制作に動画の用意は必須になってくるかもしれませんね。
参考になれば幸いです:)

  • このエントリーをはてなブックマークに追加

このブログをリーダーで購読

  • RSSフィード
  • feedlyに追加

私たちに何かお手伝いできることはありませんか?

マーケティング・コンサルティング、プロモーション支援、システム開発・Webサイト構築など、何かお困りのことがございましたらお気軽にご相談ください。

電話でのお問い合わせ

03-5424-4050(代表)

メールでのお問い合わせ

お問い合わせ

同じカテゴリ「Webデザイン」の記事

コプロシステムのFacebookページでは、最新のお知らせやブログの更新情報などを配信しています。是非チェックしてください!

PAGE TOP