動画を使ったwebサイト2選
①Do it Theater
videoタグ、mp4
映画関係のサイトなのでトップの動画も映画のような雰囲気になっている
途中に差し込まれている動画がフィルムのような加工でおしゃれ
canvasタグが使われている
②enzo
youtubeリンク before、afterで配置してある?
classにpopupがついているのでjsが使われているのかもしれない
リンクに飛んで卵を割る映像が出てくるのは印象的だと感じた
【動画制作メモ】
画像を保存する際に一緒にする部分と別に保存する箇所の見分けが難しい
文字は基本打ち文字の方がモーションを付ける時に使い勝手が良い
素材は1980×1080のアートボードに素材を広げて書き出していった
【完成した動画について】
A
物が多いので素材を整理するのに時間がかかる
B
一度完成させてみたところしっくりこない感じがした
何がよくないのかよくわからなくて、ブラッシュアップするのが難しいと感じた
C
野暮ったくならないためにはどんな点に気を付けた方が良いと思いますか
ファーストビューに動画を使用しているサイト3選
①伊藤農園
pc版 videoタグで動画埋め込み
初回アクセス時のみ中央から左へ文字ブロックが動くモーション(js)
sp版 動画は無くなりSVG設置されている
②ビーミング by ビームス
videoタグ mp4
sp版は縮小してそのまま再生される
動画や全体のサイズ的にsp用に作られているようにも思える
③名古屋マリオットアソシアホテルレストラン&バー
videoタグ mp4
動画slider-background
料理はslider
カラーコレクションについて
今回は動画を編集する前に行う、カラーコレクションについて説明していきます。
[編集ソフト Davinchi Resolve17]
カラーコレクションとカラーグレーティングの違いについて
カラーコレクション
撮影した映像の明るさやカラーバランスの調整
(ホワイトバランスや正確な色味で表現するカラー補正)を行います。
また、複数の映像の色彩を統一させるような補正もカラーコレクションといいます。
出典 https://www.too.com/support/faq/term/ka/24437.html
カラーグレーティング
カラーコレクションを含め、ある映像を希望するカラーの状態に加工する作業も含めています。
例えば、特定のカラーのみ鮮やかに色調補正する場合や、昼間に撮影した映像に対して補正を加え、夜間に撮影した映像のように加工する場合です。
出典 https://www.too.com/support/faq/term/ka/24436.html
カラー編集画面について
プレビューモニター
編集を反映した動画が表示されます。
ノード
レイヤーの役割をしています。
数字の部分を押すと編集したカラーを付けたり消したりできます。
右クリックをしてノードを追加で増やすことができます。
カラーホイール
左下のホイールです。今回はツールの左から3番目、プライマリー・Color Wheelsを使用していきます。
ホイールは左から順番に
①「リフト」 シャドー領域
②「ガンマ」 中間調領域
③「ゲイン」 ハイライト領域
④「オフセット」 全体
を編集することができます。
スコープ
色や明るさのグラフです。
今回はパレードというグラフを見ながらホイールの値を調整していきます。
グラフの左側に数字が書かれており、上部(1023)はハイライト、下部(0)はシャドー部分を表しています。
カラーコレクションの手順
1.カラーマネージメントの変更
編集画面の右下にある設定マークからプロジェクト設定の変更を行います。
カラーマネージメントのカラーサイエンスをDavinchi YRGB Color Managedに変更します。
2.リニア
映像をリニアの状態にします。
リニアとは直線という意味で、カメラが取り込んだエネルギー(光)を一直線の状態にすることを表します。調整したいクリップを右クリックし、入力カラースペースで一番下のリニアを選択します。
リニアにすると見た目が白っぽくなります。
3.ホイールで明るさを調整していく
右上を右クリックし、ノードを追加します。
スコープをパレードにします。
下記のような画面になったら左下のホイールで明るさを調整していきます。
まず初めに、リフトとゲインでシャドウとハイライトを調整します。
スコープを見ながらリフト(シャドウ)で波形を0の少し上に合わせます。
次にゲイン(ハイライト)で波形を1023を超えないように合わせ。
ゲインを調整するとリフトがすれるのでスコープを見ながら上下に飛び出ないようリフトとゲインを交互に調節していきます。
リフトとゲインを調整しながら、ガンマ、オフセットも適当に使っていきます。
パレードにパレットの色が点のように現れているので、中央(512付近)の密度が一番高くなるように調節していきます。
調整した後の数値はこのようになりました。
ノードを追加して、ガンマとオフセットを調整していきます。
こちらではホイールの下のカラーを1つずつ調整していきました。
さらにノードを追加して、彩度とコントラストを調整していきます。
ホイールの上下にあるコントラスト、彩度の数値をスコープを見ながら合わせていきます。
4.スチルを保存する
最後に、ここまで調整してきたカラーコレクションのスチルを保存します。調節した値をテンプレートとして保存し、他のクリップにそのまま反映することができます。
プレビュー画面を右クリックし、スチルを保存を選択します。そうすると左上のギャラリーに保存されます。
反映させたいクリップを選択し、保存したスチルを右クリックしてグレードを適用を選択します。
以上、カラーコレクションの手順を説明しました。
スコープを見ながら調整していてもなかなか思い通りの色にするのは難しいと感じました。完成形のイメージが無いと途中で迷走してしまいます。
参考サイト
【DaVinci Resolve17の使い方】カラーコレクションの基本的なやり方 | 株式会社InnoRise
【DaVinci Resolve】カラーページの操作基本を学びカラーグレーディングをする – 山田どうそんブログ
【カラーの基礎/DaVinciResolve】カラーグレーディング前のカラーコレクションのやり方! - YouTube
メモ
【LUT】
LUTはカラープリセットのファイルで、ワンクリックで映像の色味を変更できる設定のようです。
【.drtデータの読み込み方法】
ファイル→プロジェクトマネージャー
右クリックしてプロジェクトマネージャーの復元
.drtファイルをクリック
【メディアオフラインの場合】
フォルダに素材をまとめる
メディアプールで素材を選択し右クリック
素材をまとめたフォルダに再リンクする
DaVinciResolve プロジェクトとデータベースのバックアップを別のコンピューターに移動する方法・やり方手順 – げむログ-ゲーム実況者になるための情報ブログ
動画を使ったWEBサイト5選
②フジ在宅
トップだけでなくスクロールした先まで何種類も動画が配置されている
③神戸元町辰屋
videoタグ mp4
④つなぎ美術館
pc版 videoタグ mp4
sp版 jpg slider
トップがドローン撮影の動画
メニューにマウスオーバーすると動画が背景で流れ出したり、サイト全体で動画が多用してある