第7回 web 動画 編集講座 〜編集して web にアップしてみよう - namo (nagoya movie...
Post on 24-Jan-2017
103 Views
Preview:
TRANSCRIPT
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
第7回 Web 動画 編集講座編集して Web にアップしてみよう
2016/10/1 (土) NAMO@ ベースキャンプ名古屋
http://namo758.com
1
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
祝 公式サイト
http://namo758.com
3
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
connpass に移行します
http://namo.connpass.com/次回告知を行うので
メンバーになったください
4
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
自己紹介
Katz Uenoコンクリートファイブジャパン株式会社
Chief Communications Officer
TW: @katzuenoBlog: http://katzueno.com
5
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
自己紹介
● 1999年〜2007年 アメリカに居ました● インディーズで映画作ってました● Amazon Prime で過去の遺産が・・・● 今まで、ラブコメ、ホラー
サーフィンドキュメンタリーいろんな映画を作ってきました
6
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
コンなごconcrete5 名古屋 ユーザーグループ
7
http://concrete5nagoya.doorkeeper.jp
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Mautic Meetup Nagoya
8
http://meetup.com/Mautic-Meetup-Nagoya/
オープンソース・マーケティングオートメーション勉強会!
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
WCAN 2016 AutumnKatz が Web 動画を!!
http://wcan.jp/9
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
本日のアジェンダ
● 10分:NAMO について (復習)● 30分:編集の基本● 150分:ワークショップ
○ 15分:説明&チーム分け○ 75分:編集しよう○ 15分:キャプチャー○ 45分:レビュー
10
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 1. Web ページの素材○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム■ 映像単体がコンテンツ
■ 例:ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立
17
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 1. Web ページの素材○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム■ 映像単体がコンテンツ
■ 例:ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立○ Web動画はそのサイトでしか成立しない
18
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 2. スペースの節約○ 写真だと複数枚必要○ 動画だと一個でOK○ というか、画面いっぱい使える
20
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 3. 表現・説得力UP○ 動きがある!
■ 動作がわかる■ 感情を伝えられる
※ 音声は、ちょっと別の話
22
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
28
● カメラ○ iPhone○ 一眼レフカメラ
= プロ並みの画質。しかもWebの人持ってる
● ソフトウエア○ スマホアプリ○ iMovie○ Adobe CC -> Adobe Premiere (プロ用ソフト!)
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
29
● HTML5○ Flash の縛り
○ <video> タグ = 自由度UP○ 例:デジタルサイネージ
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
30
● HTML5○ <video> タグ = 自由度UP○ 動画は 4:3 or 16:9
である必要がない
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
悪い Web 動画の例
● 長い● 映像がブレてる● 音声が要る● 動きがない● 感情が伝わらない
34
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
= NAMOちゃんと Web 動画を作るための勉強会
よろしくお願い致します!
http://namo.doorkeeper.jp
37
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
夏目さん「編集の基本」
c/wt.fabrics.http://www.slideshare.net/cwtfabrics/15-10-03nano3
こちらのスライドをご覧ください
38
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
41
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
42
今日はこちらを中心に解説
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP○ 利点・欠点
■ YouTube や Vimeo の制限に囚われたくない■ サイズを自由に決めたい■ 自分でビデオをエンコードできる■ プレイヤーが要らない or カスタマイズしたい
43
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP○ 気をつけないといけないこと
■ サーバーが動画ファイルをサポートしているか
■ サポートしなくても .htaccess で設定を加えれば追
加可能か■ データ転送量に上限がある場合は注意
44
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ .htaccess で動画ファイルをUPできるようにする方法
.htaccess サンプルコード
AddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
45
レンタルサーバーによっては設定済み or 設定できない場合があります。できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう対応をお願いするのはタダです!
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● YouTube や Vimeo などにアップロード○ エンコードの必要なし○ 簡単○ プレイヤーやブラウザ判定を勝手にしてくれる
○ WordPress でデフォルトで対応していたりプラグインが
豊富にある
46
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
動画形式の基礎知識
● Web で使える動画HTML5で主にサポートしている動画形式は下記の3つ
47
mp4 Apple が開発したMPEG-4動画。H.264エンコーディングが主。IE8 を含めて多くのブラウザで使える
ogv オープンソースの動画形式。Theoraエンコーディングが主。
webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポート
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
動画形式の基礎知識
● Web で使える動画HTML5で主にサポートしている動画形式は下記の3つ
48
mp4 Apple が開発したMPEG-4動画。H.264エンコーディングが主。IE8 を含めて多くのブラウザで使える
ogg オープンソースの動画形式。Theoraエンコーディングが主。
webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポート
2016年10月時点では、mp4 で動画を用意する。ただ WebM はファイルサイズが小さくパフォーマンスが良く、Google が作っているので、将来的には WebMになるだろうと多くの人が予測。なので mp4 と webm
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
49
<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>
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
50
<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」は音声ミュート
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
51
<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>ビデオの素材ファイルを読み込むところ。
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
52
<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
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に掲載:注意点
● ビデオをページに埋め込んでみる● 埋め込んでから確認
○ 埋め込みが多すぎないか○ ページロードが遅くなってないか○ 動きが派手すぎないか○ めまいがしないか○ そもそも、本当に動画の必要があるか
54
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 編集講座
● 自己紹介● チーム分け● お題● 休憩&ネタ考える ( ̄ー ̄)ニヤリ● ワークショップスタート● 編集披露
57
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 今まで撮影した素材を元に Web に載せるビデオを編集
しよう
66
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう○ 条件:
■ 複数回シリーズの3回目■ 前回撮影した素材を使います■ 映像を編集します■ Web 用に出力します■ Web にアップロードします■ 音は無視(また違う次元の話になるので)
67
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ クライアント:安井先生からの説明
リンク
68
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう○ 何を編集?
■ 苔玉のメンテナンス・剪定・トップページ
69
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 主旨:
ナツメさんの実際の編集の基本を実践しよう
( ̄ー ̄)ニヤリ
70
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう○ 素材
■ 本当は、自分でショットリストや脚本を作るべきだけ
ど、まずはこちらでつくりました。
■ 前回で撮影した素材を使用
■ 編集して Web サイトに掲載しよう
71
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 素材・編集リストは Google Docs にhttps://docs.google.com/document/d/1rSUwyiWVvxlzD22yqUwcK8CJKIvtDh99JhOWE2NGtJU/edit?usp=sharing(本日参加者は Doorkeeper よりメールを送ります)
72
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
本日のアジェンダ
● 15分:Web 動画とは● 40分:映像制作の基本● 120分:ワークショップ
○ ~15:00 - 15分:企画○ ~16:00 - 60分:撮影 & アップロード○ ~16:30 - 30分:キャプチャ○ ~17:00 - 30分:レビュー
73
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
さあ実践!
● ワークショップスケジュール○ ~14:45 - 15分:プラン○ ~15:30 - 45分:撮影 & アップロード○ ~16:00 - 30分:Web アップロード○ ~17:00 - 60分:レビュー
74
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
お疲れ様でした!
次回は「企画 講座」
http://namo.doorkeeper.jp
75
top related