TCDテーマのデモサイトはリアルに実在してるんじゃないか、と思わせられるレベルにまで高めて作り込まれています。トップページや記事本文の文章も一から自作、使っている画像もこだわっています。サイトを見た瞬間のリアルな印象をユーザーに体感してもらいたいからです。
また、TCDのデモサイトでは時々ファーストビューの背景に動画が設定していることがあります。それがどういう効果を及ぼしているのか、静止画スライダーとどう違うのか。本稿ではTCDの実例を踏まえ、細かいところに踏み込んでいければと思います。
ユーザーにどういう印象を与えるか
動画をファーストビューにもってくることで何が生まれるのか。それは「リアリティ」です。そこに尽きます。
「百聞は一見にしかず」というところが動画を使う最大のメリットで、情報伝達の観点から見ても文字情報や静止画よりも動画（映像）の方が情報伝達の速度やボリュームは圧倒的に早いのが特徴です。
リアリティが生まれる構造
静止画と動画の相違性で言うと、静止画の場合、見る側が受け取る情報は「美しい」「キレイ」などの画角内に対しての評価値にとどまります。その画に含まれる情報の内容や奥行きを一瞬で探ることなどできませんよね。その為にキャッチコピー等の文字情報が必要になってきます。
それに対して動画の場合は「時間軸」が存在します。さまざまなシーンが繋ぎ合って重なることで、ストーリーというリアリティが生まれます。静止画では伝えられない、シズル感や情緒感、やさしいのか、強いのか、そういう印象を動画ではリアリティをもって伝えることができるのです。
リアリティがあるということは、それだけ多くの情報を伝えているということ。だから、静止画と動画では伝わる情報量が圧倒的に違うし、動画は情報が多い分、感覚的な共感意識も生まれやすい。サービスやイメージを一瞬にして伝えることができるわけです。
ファーストビューだけは手を抜くな！
極端なことを言えば、もしファーストビューでユーザーを引き込ませることが出来れば、サイト内コンテンツの中身が微妙でもリカバーできるほどの説得力があります。交渉事においても最初の掴みがいかに肝心であるかは言うまでもありません。「ファーストビューは手を抜いてはいけない」とはそういうことです。
最初の掴みができていればファーストビューの役割としては成功です。これは動画に限らず、静止画やスライダーでも同様です。
もし動画を使う場合、自分たちのサービスや企業・個人の在り方、社会貢献などといった思いを動画に起こして、そこからコンテンツ作りをするのもありです。動画で伝えた多くの情報を、文字情報にセグメントして置き換え、コンテンツに落とし込めばいいわけですから。
というわけで、次はTCDで使用しているデモサイトでの実例からみていきましょう。
TCDテーマでの実例集
ファーストビューに動画を盛り込んだデモサイトだけ選んでいます。デモサイトを一つずつご覧になってみてください。
Cherie
画面右側に動画を使用。
FALCON
ヘッダー固定幅で背景に動画を使用。
meets
ヒーローヘッダー背景に動画を使用。独自のアイコンを四隅に表示可（デモでは雲）。
ANTHEM
ヘッダー固定幅で背景に動画を使用。
HAKU
ヒーローヘッダーの背景に動画を使用。白い枠で和の雰囲気を表現。
FORCE
ヘッダー固定幅で背景に動画を使用。
EVERY
ヒーローヘッダー背景に動画を使用。
FAKE
ヘッダー固定幅で背景に動画を使用。
MIKADO
ヘッダー固定幅で背景に動画を使用。動画上に縦書き見出しを表示。
TOKI
ヒーローヘッダー背景に動画を使用。動画上に見出しと検索フォームを表示。
Switch
動きのある展開でストーリーを演出。イメージコピーが効いてきます。
BIRTH
動画とヘッダーバーだけのシンプルなファーストビュー。
KADAN
他のテーマとは違い、ヘッダーバー、サイドボタン、縦書きコピーなど情報量が多めなヘッダーをスッキリ見せました。
VOGUE
4分割したヘッダーの2枚目と4枚目に動画を使用。
SKIN
スライダー2枚目に動画を使用。
ORION
これから何が始まるのか、という期待感。
まとめ
回線速度や撮影機器にまつわる周辺環境の変化によって、動画は私たちにとって以前よりずっと身近なものとなりました。動画を撮影するにしても、今は高いコストをかけることなくできますし、自分で撮影することも可能です。そして、それらをつなぎ合わせる編集も誰にでもできるようになりました。また、その際には「ShutterStock」などの動画素材も組み合わせれば、より楽に動画制作が可能となっています。
「ファーストビューは手を抜くな」を格言に、今一度ファーストビューについて見直してみるというのもありかもしれません。
