動画を使ったWEBサイト3

・201

201d.jp

文字に動画が透過していて、カーソルの部分も透過している

クリックすることで動画全体が見れる。

スマホだと見せたいところだけ断ち切って表示している。

 

NIKE

www.nike.com

写真と動画を合わせて、テロップも入っている。

スマホもちゃんと人が正面に来るように作りこまれている。

カラーコレクションについて

①読み込み→タイムライン→ファイルを読み込む

 

②色を整えるのにはスコープが必要です。

 

ベクトルスコープ

こちらは、ベクトルスコープです。

ベクトルスコープは、映像内の色相彩度を測定・表示したモニターです。「色相」とは色の種類で、「彩度」とは色の濃さのことです。円が色相を示し、中心からの距離が遠いほど彩度が高くなります。

f:id:japanprint1819:20220119182326j:plain

 

 

波形モニター

一方こちらは、波形モニターで映像の水平ラインの輝度信号と色信号を波形で表示させ、合成させて表示させることができるスコープです。

縦軸が輝度を表し、横軸は画面と対応しています。

 

下の波形はRGBそれぞれを合わせたものです

※RGBの3成分が重なった部分は白く表示する

f:id:japanprint1819:20220119180702j:plain

 

下の波形はパレードと呼ばれ、RGBのそれぞれの輝度成分の分布を表示するf:id:japanprint1819:20220119180651j:plain

 

 

2種類の違い

・色をあらわす信号(色信号・クロミナンス)の方向量(ベクトル)を計測するのがベクトルスコープ

 

・明るさを表す信号(輝度信号・ルミナンス)を計測するのが波形モニター

(ウェーブフォームモニター)です。

波形が縦に長いとコントラストが強く、短いほどコントラストが弱くなります。

 

 

カラーホイール

③上記スコープの見方がわかったら、こちらのカラーホイールで色を整えていきます。

 

それぞれ

・リフト→暗部

・ガンマ→中間

・ゲイン→ハイライト

の調整になります。

 

f:id:japanprint1819:20220119182511j:plain

 

 

 

その他

カラーチャートを使用した色補正について調べた結果、

下図の赤枠のようなツールを見つけました。

f:id:japanprint1819:20220112101429p:plain

カラーマッチというコマンドがあり、使用しているカラーチャート、

ソースガンマ【Slog3】

ターゲットガンマ【Rec709】

ターゲットカラースペース【Rec709】設定

f:id:japanprint1819:20220112101915j:plain

カラーチャットの色がすべて正方形の枠内に収まるように設定して、マッチすると

f:id:japanprint1819:20220112102315j:plain

色が補正されました。

 

彩補正を保存してグレードを適用すると、

f:id:japanprint1819:20220112102537j:plain

他のクリップにも適用されますが、

日陰で行った場合、色補正がうまくいきませんでした。

色温度入力の設定を間違えたのだと思います。

 

補足ですが、カラーページの編集はグラフィックボードへの負荷がとても大きいということです。

メモリがすぐに満杯になってしまうので要注意です。

動画をつかったWEBサイト2

 

  • JAPAPO

japapo.co.jp

シンプルでとても見やすい構成になっている。

備考:動画はYoutube のリンクを張り付けている様子

  • グラスト

www.grust.co.jp

スタイリッシュな動画の展開が良い。

備考:ファイル形式:mp4の動画を埋め込んでいる

  • 201°

201d.jp

うっすらと動画が見えている場面からクリックすると、しっかりと見えるよう

になる。

備考:スマホ版だと、PCの画角のまま一番見せたい部分を優先に断ち切っている

co.hellolife.jp

HELLOlifeの文字に背景の動画が抜けているのが不思議

備考:ファイル形式mp4の動画を埋め込んでいる

   PCと比べスマホはHELLOlifeの文字の位置固定、動画両サイド断ち切り

www.nhk.or.jp

VRのような体験で発想がユニーク

recruit.creatures.co.jp

ポリゴンを使った動画が面白かったので載せました

実現は難しい・・・

動画をつかったWEBサイト

動画を使用したお気に入りWEBサイト
制作・運用実績 | W3G

 

選んだ理由

・パッと目に入った時の最初のインパクトが印象に強く残ります。

・映像は常に動き続けているもののwebサイトの内容を読み進めていくにあたって

 映像に気が散ってしまうなどはあまりなく、しっかりと内容に目が行くので

 とても秀逸なデザイン性を個人的に感じました。

・動画の内容に関しても、生き物を扱うなどとても発想力の高いWebサイトだと思いま      

 す。