Upload
katz-ueno
View
512
Download
2
Embed Size (px)
Citation preview
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
第 3 回 Web 動画撮影講座iPhone や一眼レフでマスターする撮影術
2015/10/2 (土 ) NAMO@ ベースキャンプ名古屋
http://namo.doorkeeper.jp
1
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
自己紹介
Katz Uenoコンクリートファイブジャパン株式会社Chief Communications Officer
TW: @katzuenoBlog: http://katzueno.com
2
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
自己紹介
1999年〜 2007 年アメリカに居ましたインディーズで映画作ってました最新作「 Isolated」今まで、ラブコメ、ホラーサーフィンドキュメンタリーいろんな映画を作ってきました
3
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
コンなごconcrete5 名古屋ユーザーグループ
4
http://concrete5nagoya.doorkeeper.jp
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
CMS Fun 名古屋で CMS を勉強しよう
5
http://cmsfun.doorkeeper.jp
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
本日のアジェンダ10分: NAMO について (復習 )40分:編集の基本120分:ワークショップ
15分:説明&チーム分け60分:編集しよう15分:キャプチャー30分:レビュー
6
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web 動画の特徴1. Web ページの素材
YouTube・ニコ動・ Ustream との違いウェブページはあくまでもフレーム映像単体がコンテンツ例:ニコニコ動画に YouTube動画を転載してもコンテンツとして成立
Web動画はそのサイトでしか成立しない
13
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web 動画の特徴2. スペースの節約写真だと複数枚必要動画だと一個で OKというか、画面いっぱい使える
14
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web 動画の特徴3. 表現・説得力 UP動きがある!動作がわかる感情を伝えられる
※ 音声は、ちょっと別の話
15
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
20
カメラiPhone一眼レフカメラ
= プロ並みの画質。しかもWebの人持ってるソフトウエアスマホアプリiMovieAdobe CC -> Adobe Premiere (プロ用ソフト !)
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
21
HTML5Flash の縛り
<video> タグ = 自由度 UP例:デジタルサイネージ
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
22
HTML5<video> タグ = 自由度 UP
動画は 4:3 or 16:9である必要がない
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
= NAMO ちゃんと Web 動画を作るための勉強会
よろしくお願い致します!
http://namo.doorkeeper.jp
29
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
夏目さん「編集の基本」
c/wt.fabrics.http://www.slideshare.net/cwtfabrics/15-10-03nano3
こちらのスライドをご覧ください
30
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ まず、そもそも動画をどこに保存?
動画ファイルをサーバーに UPYouTube や Vimeo などにアップロードし埋め込みだけで可能か
33
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ まず、そもそも動画をどこに保存?
動画ファイルをサーバーに UPYouTube や Vimeo などにアップロードし埋め込みだけで可能か
34
今日はこちらを中心に解説
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ まず、そもそも動画をどこに保存?
動画ファイルをサーバーに UP利点・欠点
YouTube や Vimeo の制限に囚われたくないサイズを自由に決めたい自分でビデオをエンコードできる
プレイヤーが要らない or カスタマイズしたい35
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ まず、そもそも動画をどこに保存?
動画ファイルをサーバーに UP気をつけないといけないことサーバーが動画ファイルをサポートしているか
サポートしなくても .htaccess で設定を加えれば追加可能かデータ転送量に上限がある場合は注意
36
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ .htaccess で動画ファイルを UPできるようにする方法.htaccess サンプルコード
AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
37
レンタルサーバーによっては設定済み or 設定できない場合があります。できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう対応をお願いするのはタダです!
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に動画を掲載■ まず、そもそも動画をどこに保存?
YouTube や Vimeo などにアップロードエンコードの必要なし簡単プレイヤーやブラウザ判定を勝手にしてくれるWordPress でデフォルトで対応していたりプラグインが豊富にある
38
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
動画形式の基礎知識
Web で使える動画HTML5で主にサポートしている動画形式は下記の 3つ
39
mp4 Apple が開発したMPEG-4動画。 H.264エンコーディングが主。 IE8 を含めて多くのブラウザで使える
ogv オープンソースの動画形式。 Theoraエンコーディングが主。
webm Google が開発した動画形式。 IE9+, Chrome, Firefox 4+ でサポート
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
動画形式の基礎知識
Web で使える動画HTML5で主にサポートしている動画形式は下記の 3つ
40
mp4 Apple が開発したMPEG-4動画。 H.264エンコーディングが主。 IE8 を含めて多くのブラウザで使える
ogg オープンソースの動画形式。 Theoraエンコーディングが主。
webm Google が開発した動画形式。 IE9+, Chrome, Firefox 4+ でサポート
2015年 10月時点では、mp4 で動画を用意する。た だ WebM はファイルサイズが小さくパフォーマン
スが良く、 Google が作っているので、将来的にはWebM になるだろうと多くの人が予測。なので mp4
と webm
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
video タグの基本HTML5 ビデオタグはこんなに便利
41
<video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像 "></video>
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
video タグの基本HTML5 ビデオタグはこんなに便利
42
<video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像 "></video>
「 autoplay loop」にすると自動ループ再生に「 control」はブラウザのコントロールが開く「muted」は音声ミュート
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
video タグの基本HTML5 ビデオタグはこんなに便利
43
<video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像 "></video>ビデオの素材ファイルを読み込むところ。
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
video タグの基本HTML5 ビデオタグはこんなに便利
44
<video width="640" height="360" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <img src="movie.jpg" alt="読み込む画像 "></video>
videoタグをサポートしていない古いブラウザが表示する部分。ここでは画像を読み込んでいるが普通のテキストなどでも OK
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web に掲載:注意点ビデオをページに埋め込んでみる埋め込んでから確認埋め込みが多すぎないかページロードが遅くなってないか動きが派手すぎないかめまいがしないかそもそも、本当に動画の必要があるか
46
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
Web 動画撮影講座
自己紹介チーム分けお題休憩 & ネタ考える ( ̄ー ̄ ) ニヤリワークショップスタート編集披露
49
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
お題ベースキャンプ名古屋 ( ̄ー ̄ ) ニヤリ「紹介ウェブ動画をつくろう」
55
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」第 1 回 http://namo.katzueno.com/
57
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」 条件:
複数回シリーズの 2回目前回撮影した素材を使います映像を編集しますWeb 用に出力しますWeb にアップロードします音は無視(また違う次元の話になるので)
58
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」何を編集?ベースキャンプの紹介サイト
59
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」主旨:ナツメさんの実際の編集の基本を実践しよう( ̄ー ̄ ) ニヤリ
60
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」素材本当は、自分でショットリストや脚本を作るべきだけど、まずはこちらでつくりました。第 2回で撮影した素材を使用
編集して Web サイトに掲載しよう
61
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
ベースキャンプ名古屋「紹介ウェブ動画をつくろう」作成するビデオ
62
1. 施設紹介 (練習 )a. ベースキャンプの施設を紹介
2. チェックイン方法a. 月額会員のチェック員方法を紹介
3. トップページイメージ
Web 動画撮影講座
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
本日のアジェンダ15分:Web 動画とは40分:映像制作の基本120分:ワークショップ
~15:00 - 15分:企画~16:00 - 60 分:撮影 & アップロード~16:30 - 30分:キャプチャ~17:00 - 30分:レビュー
63
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
さあ実践!ワークショップスケジュール
~14:45 - 15分:プラン~15:30 - 45 分:撮影 & アップロード~16:00 - 30分:Web アップロード~17:00 - 60分:レビュー
ショットリスト
64
1. 外観2. 入り口
a. 人が入る3. 受付
a. ワイドb. iPad のチェックイン画面クロースアップ
4. 着席して作業するa. ワイドショットb. ラップトップの画面を開く
5. グループショットa. 会議室b. 図書スペース
6. イメージショット (なんでも良い )a. 例:オフィスグリコ
2015.10.2 (土 ) 第 3 回 Web 動画編集講座〜 Web サイトに掲載してみよう
お疲れ様でした! 次回は「企画講座」
http://namo.doorkeeper.jp
65