動画を使用したWEB 3選

動画が使われているサイトで特に気に入ったサイト3選を紹介いたします。

 

NPO法人HELLOlife

f:id:yama-1010:20220107143923p:plain

NPO法人HELLOlife | Create the NEW PUBLIC

 

アイコンと同じ黄色いレインコートを着ている子の映像が流れていて、アイコンの雰囲気と合っていて綺麗。

WEB下部でレインコートの子がくるくる回っているのが好き

 

HP分析

videoタグ・埋め込み

PC・SPの違い:widthサイズのみ

 

 

・W3G

https://w3g.jp/

W3G Webをコアにビジネスの成長を支援するデジタルクリエイティブカンパニー


キツツキ?の動作が自然なのがすごい。

個人的にスマホからキツツキが出てくるシーンが可愛くて好き。

 

HP分析

videoタグ・埋め込み

PC・SPの違い:変更なし

 

・:Data

G20 Japan Digital | :Data

 

カテゴリーごとに動画が表示されるので、トップだけで大まかなカテゴリーを把握できる構成なのがいい。

動画が全体的にセピア調なのも雰囲気に合っていて好き。

 

HP分析

videoタグ・埋め込み

個々で埋め込みをした動画をjsで切り替えてる?

PC・SPの違い:変更なし

 

 

どうなっているのか分からなかったけど好きなWEB

admireamaze.debijenkorf.nl

 

www.q-co.jp

【DaVinci Resolve】 カラーコレクションについて

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

DaVinci Resolveにおいてカラーを変更する基本として以下2種類があります。

 

・カラーコレクション(カラー補正)

・カラーグレーディング(カラー着色)

 

カラーコレクションとは、撮影時に意図した色味に調整することで、「基本の色調」として他の映像と合わせる工程のため一番最初に行う必要があります。

主にカラーコレクションで色の補正を行ってから、カラーグレーディングで色味を加えていくのが一般的な流れになります。

 

今回はその最初の工程の『カラーコレクション』のやり方・保存・他動画の反映までの流れをまとめました。

 

1. カラーマネジメントを変更

右下の「プロジェクト設定(歯車マーク)」カラーマネジメント→「カラーサイエンス」DaVinci YRGB Color Managedに変更する。

※後で行う工程の入力カラースペースがDaVinciオリジナルの機能のため、ここを変更しておかないと調整を行うことが出来なくなるので注意

f:id:yama-1010:20220107110552p:plain

 

 

2. 入力カラースペースの変更

カラーページに移動し、調整をしたい動画のクリップの上で右クリック「入力カラースペース」「リニア」を選択

リニアの設定はカメラの設定関係なく、ある程度一般的な動画のカラーに対応している設定に戻してくれます。

f:id:yama-1010:20220107110555p:plain

 

3. カラーコレクション

リニアを選択した映像は白っぽくなるので、ここでカラーバランスを整えていきます。

⌘+shift+Wで画像の右上にある波形モニターを出し、このグラフを見ながら左下のパラメータを調整していきます。

f:id:yama-1010:20220107110602p:plain

 

調整の仕方は、波形モニターの上に行くほど明るく下に行くほど暗くなります。今の動画ですと白飛びをしているような感じですので、パラメータを調整し波形を下の方に行くような調整を行います。また、カラーバランスが3色とも同じぐらいの値になるよう調整を行いました。

f:id:yama-1010:20220107113133p:plain

最終的なパラメータの数値です。

主に円の下にある黒いバナーで全体の色味を調整し、円のパラメータで足りない色を加えるような感じでしょうかね・・・

f:id:yama-1010:20220107113319p:plain

 

カラーコレクションが終わったら、カラーグレーディングの作業を行います。

新しくノードを追加し、色の着色を行います。

f:id:yama-1010:20220107114301p:plain

便利機能メモ:

ノードに名前をつける(右クリ→ノードラベル)

ノードの非表示(⌘+D)

 

4. スチルの保存

調整したカラーを他の動画にも反映させるとき「スチルの保存」を使用します。

保存したい動画のプレビューの上で右クリックで「スチルの保存」→左側にある□のアイコンをクリック→「PowerGrade」の中に保存されてます。

f:id:yama-1010:20220107114321p:plain

反映させたい動画を選択した状態で、反映元になるスチルを選択・右クリック→「グレードを適用」で反映することができます。

f:id:yama-1010:20220107114329p:plain


以上がカラーの調整から、保存・反映までの流れでした。

 

今回まとめるにあたって参考にさせて頂いた資料元です。

DaVinci Resolve 16 – カラーグレーディングの技術 - YouTube

[DaVinci Resolveで始めるカラーグレーディング]Vol.03 カラー調整の基本(その2) - PRONEWS : デジタル映像制作Webマガジン

 

 

動画を使用しているサイト5選

動画が使われているサイトで特に気に入ったサイト5選を紹介いたします。

 

熊本

料理谷邸葛籠

https://tudzura.jp

f:id:yama-1010:20211221111922p:plain

シックな雰囲気に新しさを感じるサイト

トップ動画の明暗差が綺麗。

 

HP分析

videoタグ・埋め込み

PC・SPの違い:なし

 

 

OPERA

https://www.opera-net.jp/special/2021nov/

f:id:yama-1010:20211221111858p:plain

メイクを際立たせる質感が綺麗。

短い動画なのに、カット割りや人と物の組み合わせで飽きさせないのがいい。

 

HP分析

videoタグ・YouTube貼り付け

PC・SPの違い:別々に貼り付けをしている。動画と他の素材と順番が前後したからかと

 

 

暮らしを自由にするオフィス

https://12-office.com

f:id:yama-1010:20211221111907p:plain

サイトのレイアウトが凝っている。特に文字の配置と使い方が好み。

 

HP分析

 

PC・SPの違い:

 

Nukeml

https://nukmel.com

f:id:yama-1010:20211221111848p:plain

動画と画像の使い方が面白い。

少しレトロっぽさがあるサイトの雰囲気が好き。

 

HP分析

videoタグ・埋め込み

PC・SPの違い:SP用の動画を別で埋め込みをしている

 

 

hyogen

https://hyogen.design

f:id:yama-1010:20211221111823p:plain

横並びに動画を配置させて見せていく構図が面白い。

 

HP分析

liタグにvideoで埋め込み

PC・SPの違い:SP用の動画を別で埋め込みをしている

 

 

動画ではないが気になるサイト

 

NatureMade

https://www.otsuka.co.jp/nmd/50th-anniversary/

f:id:yama-1010:20211221111836p:plain