【サンプル集】背景動画の上に網掛け処理を行う

背景動画に網掛け処理を行う理由

Webサイトの背景に動画や画像を利用する場合、気になるのはファイルサイズ。撮影したままの動画ファイルは Web ブラウザ上で再生するには大きすぎます。モバイル端末ならば通信量の問題があるため、さらに軽量化が必要。画像についても事情は同じです。

背景として使う動画や画像のサイズは小さければ小さいほど望ましいですが、サイズを小さくするほど画質が悪くなるというトレードオフがあります。また、動画や画像を背景として使う場合には、ブラウザの全画面表示やリサイズを行うと、それに追従して背景の動画や画像もリサイズされるため、劣化具合がさらに目立ってしまいます。この対策として、背景の動画や画像全体にぼかしや網掛けを行い、目の錯覚を利用して劣化を目立たないようにします。

今回は動画や画像の上にオーバーレイさせるための網掛け画像をいくつか紹介。実際の利用例も提示しますので、気に入ったものがあればダウンロードの上でご利用ください。

まずはベンチマークとして、網掛け処理を行っていない状態の動画と画像を以下に提示します。

動画(網掛け画像なし)

画像(網掛け画像なし)

網掛けパターン 01

動画(網掛け画像の透明度 0.5)

画像(網掛け画像の透明度 0.5)

網掛けパターン 02

動画(網掛け画像の透明度 0.5)

画像(網掛け画像の透明度 0.5)

網掛けパターン 03

動画(網掛け画像の透明度 0.3)

画像(網掛け画像の透明度 0.3)

網掛けパターン 04

動画(網掛け画像の透明度 0.3)

画像(網掛け画像の透明度 0.3)

網掛けパターン 05

動画(網掛け画像の透明度 0.4)

画像(網掛け画像の透明度 0.4)

網掛けパターン 06

動画(網掛け画像の透明度 0.4)

画像(網掛け画像の透明度 0.4)

網掛けパターン 07

動画(網掛け画像の透明度 0.3)

画像(網掛け画像の透明度 0.3)

網掛けパターン 08

動画(網掛け画像の透明度 0.2)

画像(網掛け画像の透明度 0.2)

網掛けパターン 09

動画(網掛け画像の透明度 0.4)

画像(網掛け画像の透明度 0.4)

お知らせ

【美容院向け】集客を実現するためのホームページデザインをリリース

美容院のためのホームページデザインをリリース。シンプルかつ柔軟なデザインを採用しているため、時間が経っても古臭さを感じさせません。集客に必要なインターネットマーケティング施策(コンテンツマーケティング・SNS・Google Map・リスティング広告)も提供します。

ブログ

【SEO事例】Google で1位を獲得・流入とお問い合わせが増加

SEO案件の成果を紹介。Google においてビッグワードの検索結果で 1 ページ目(10 位以内)に表示させることがご依頼内容。ロングテールでのコンテンツマネージメントにリソースを投入した結果、3 カ月ほどで 1 位を獲得し、ページビューとお問い合わせ件数が急増しました。

ホームページ戦略

インターネットマーケティングの重要性をデータから読み解く

インターネットマーケティング(Webマーケティング)とは、ホームページやウェブサービスを用いて行われるマーケティングのこと。インターネットマーケティングが重要な理由を、各種の調査データを利用しながら解説します。

ホームページ戦略

ホームページ戦略としてのキーワード分析

ホームページを活用して効率よく集客するためには、検索回数が多いキーワード、コンバージョン(購入・お問い合わせ・資料請求など)につながりやすいキーワードを選んだ上で、そのターゲットキーワードを中心にホームページを構成する必要があります。キーワードを選ぶ前段として、そもそもどのようなキーワードが誰によって、どれくらい検索されているかを調査する必要があります。