動画を使ったwebサイト2選


①Do it Theater

www.ditjapan.com

videoタグ、mp4

映画関係のサイトなのでトップの動画も映画のような雰囲気になっている

途中に差し込まれている動画がフィルムのような加工でおしゃれ

canvasタグが使われている

 

②enzo

enzo-tsubamesanjo.jp

youtubeリンク before、afterで配置してある?

classにpopupがついているのでjsが使われているのかもしれない

 

リンクに飛んで卵を割る映像が出てくるのは印象的だと感じた

 

 

【動画制作メモ】

画像を保存する際に一緒にする部分と別に保存する箇所の見分けが難しい
文字は基本打ち文字の方がモーションを付ける時に使い勝手が良い

素材は1980×1080のアートボードに素材を広げて書き出していった

 

【完成した動画について】

A
物が多いので素材を整理するのに時間がかかる


B
一度完成させてみたところしっくりこない感じがした
何がよくないのかよくわからなくて、ブラッシュアップするのが難しいと感じた

 

C
野暮ったくならないためにはどんな点に気を付けた方が良いと思いますか

ファーストビューに動画を使用しているサイト3選

①伊藤農園

ito-noen.co.jp

pc版 videoタグで動画埋め込み

初回アクセス時のみ中央から左へ文字ブロックが動くモーション(js)

sp版 動画は無くなりSVG設置されている

 

 

ビーミング by ビームス

www.beams.co.jp

videoタグ mp4

sp版は縮小してそのまま再生される

動画や全体のサイズ的にsp用に作られているようにも思える

 

 

名古屋マリオットアソシアホテルレストラン&バー

www.associa.com

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

 

カラー編集画面について 

プレビューモニター

編集を反映した動画が表示されます。

f:id:mmm15002:20220119164804p:plain

 

ノード

レイヤーの役割をしています。

数字の部分を押すと編集したカラーを付けたり消したりできます。

右クリックをしてノードを追加で増やすことができます。

f:id:mmm15002:20220119165042p:plain

 

カラーホイール

左下のホイールです。今回はツールの左から3番目、プライマリー・Color Wheelsを使用していきます。

ホイールは左から順番に

①「リフト」 シャドー領域

②「ガンマ」 中間調領域

③「ゲイン」 ハイライト領域

④「オフセット」 全体   

を編集することができます。f:id:mmm15002:20220119165452p:plain

 

スコープ

色や明るさのグラフです。

今回はパレードというグラフを見ながらホイールの値を調整していきます。

グラフの左側に数字が書かれており、上部(1023)はハイライト、下部(0)はシャドー部分を表しています。

f:id:mmm15002:20220119165858p:plain

 

 

カラーコレクションの手順

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

編集画面の右下にある設定マークからプロジェクト設定の変更を行います。

カラーマネージメントカラーサイエンスDavinchi YRGB Color Managedに変更します。

 

2.リニア

映像をリニアの状態にします。

リニアとは直線という意味で、カメラが取り込んだエネルギー(光)を一直線の状態にすることを表します。調整したいクリップを右クリックし、入力カラースペースで一番下のリニアを選択します。

リニアにすると見た目が白っぽくなります。

 

3.ホイールで明るさを調整していく

右上を右クリックし、ノードを追加します。

f:id:mmm15002:20220119173139p:plain

 

スコープをパレードにします。

下記のような画面になったら左下のホイールで明るさを調整していきます。

f:id:mmm15002:20220119132359j:plain

まず初めに、リフトとゲインでシャドウとハイライトを調整します。

スコープを見ながらリフト(シャドウ)で波形を0の少し上に合わせます。

次にゲイン(ハイライト)で波形を1023を超えないように合わせ。

ゲインを調整するとリフトがすれるのでスコープを見ながら上下に飛び出ないようリフトとゲインを交互に調節していきます。

リフトとゲインを調整しながら、ガンマ、オフセットも適当に使っていきます。

 

パレードにパレットの色が点のように現れているので、中央(512付近)の密度が一番高くなるように調節していきます。

 

調整した後の数値はこのようになりました。

f:id:mmm15002:20220120102614j:plain

 

f:id:mmm15002:20220120102512j:plain



 

ノードを追加して、ガンマとオフセットを調整していきます。

こちらではホイールの下のカラーを1つずつ調整していきました。

f:id:mmm15002:20220119161417p:plain

 

さらにノードを追加して、彩度とコントラストを調整していきます。

ホイールの上下にあるコントラスト、彩度の数値をスコープを見ながら合わせていきます。

f:id:mmm15002:20220119161428p:plain

f:id:mmm15002:20220120102659j:plain

 

 

4.スチルを保存する

最後に、ここまで調整してきたカラーコレクションのスチルを保存します。調節した値をテンプレートとして保存し、他のクリップにそのまま反映することができます。

プレビュー画面を右クリックし、スチルを保存を選択します。そうすると左上のギャラリーに保存されます。

反映させたいクリップを選択し、保存したスチルを右クリックしてグレードを適用を選択します。

 

 

 

以上、カラーコレクションの手順を説明しました。

スコープを見ながら調整していてもなかなか思い通りの色にするのは難しいと感じました。完成形のイメージが無いと途中で迷走してしまいます。

 

 

参考サイト

【DaVinci Resolve17の使い方】カラーコレクションの基本的なやり方 | 株式会社InnoRise

DaVinci Resolveで始める簡単グレーディング

【DaVinci Resolve】カラーページの操作基本を学びカラーグレーディングをする – 山田どうそんブログ

【カラーの基礎/DaVinciResolve】カラーグレーディング前のカラーコレクションのやり方! - YouTube

 

 

メモ

【LUT】

LUTはカラープリセットのファイルで、ワンクリックで映像の色味を変更できる設定のようです。

 

【.drtデータの読み込み方法】

ファイル→プロジェクトマネージャー

右クリックしてプロジェクトマネージャーの復元

.drtファイルをクリック

 

【メディアオフラインの場合】

フォルダに素材をまとめる

メディアプールで素材を選択し右クリック

素材をまとめたフォルダに再リンクする

 

DaVinciResolve プロジェクトとデータベースのバックアップを別のコンピューターに移動する方法・やり方手順 – げむログ-ゲーム実況者になるための情報ブログ

動画を使ったWEBサイト5選

株式会社エージェント・スミス 

www.agentsmith.jp

 

②フジ在宅

 トップだけでなくスクロールした先まで何種類も動画が配置されている

fuji-ie.com

 

神戸元町辰屋

www.kobebeef.co.jp

videoタグ mp4

 

④つなぎ美術館

www.tsunagi-art.jp

pc版 videoタグ mp4 

sp版 jpg slider

 

日蓮宗大本山

 トップがドローン撮影の動画

 メニューにマウスオーバーすると動画が背景で流れ出したり、サイト全体で動画が多用してある

shikaishodo-myokenji.org