第7回 Web 動画編集講座〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)

2016.10.1 (土) 第7回 Web 動画編集講座〜 Web サイトに掲載してみよう
第7回 Web 動画編集講座
編集して Web にアップしてみよう
2016/10/1 (土) NAMO
@ ベースキャンプ名古屋
http://namo758.com
1

お知らせ
2

祝公式サイト
http://namo758.com
3

connpass に移行します
http://namo.connpass.com/
次回告知を行うので
メンバーになったください
4

自己紹介
Katz Ueno
コンクリートファイブジャパン株式会社
Chief Communications Officer
TW: @katzueno
Blog: http://katzueno.com
5

自己紹介
● 1999年〜2007年アメリカに居ました
● インディーズで映画作ってました
● Amazon Prime で過去の遺産が・・・
● 今まで、ラブコメ、ホラー
サーフィンドキュメンタリー
いろんな映画を作ってきました
6

コンなご
concrete5 名古屋ユーザーグループ
7
http://concrete5nagoya.doorkeeper.jp

Mautic Meetup Nagoya
8
http://meetup.com/Mautic-Meetup-Nagoya/
オープンソース・マーケティングオートメーション
勉強会！

WCAN 2016 Autumn
Katz が Web 動画を!!
http://wcan.jp/
9

本日のアジェンダ
● 10分：NAMO について (復習)
● 30分：編集の基本
● 150分：ワークショップ
○ 15分：説明＆チーム分け
○ 75分：編集しよう
○ 15分：キャプチャー
○ 45分：レビュー
10

2016.10.1 (土) 第7回 Web 動画編集講座〜 Web サイトに掲載してみよう 11

NAgoya Movie Obenkyokai
名古屋で Web 動画を勉強する会
12

Web 動画とは？
13

Web 動画とは？
● Katz が勝手に考える Web 動画の定義
14

Web 動画とは？
● YouTube?
● ニコニコ?
● Ustream?
● Facebook
15

Web 動画とは？
● YouTube?
● ニコニコ?
● Ustream?
● Facebook
16

Web 動画の特徴
● 1. Web ページの素材
○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム
■ 映像単体がコンテンツ
■ 例：ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立
17

Web 動画の特徴
● 1. Web ページの素材
○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム
■ 映像単体がコンテンツ
■ 例：ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立
○ Web動画はそのサイトでしか成立しない
18

Web 動画の特徴
● 2. スペースの節約
19

Web 動画の特徴
● 2. スペースの節約
○ 写真だと複数枚必要
○ 動画だと一個でOK
○ というか、画面いっぱい使える
20

Web 動画の特徴
● 3. 表現・説得力UP
21

Web 動画の特徴
● 3. 表現・説得力UP
○ 動きがある！
■ 動作がわかる
■ 感情を伝えられる
※ 音声は、ちょっと別の話
22

素材 + 動き + 感情
23

素材 + 動き + 感情
売上UP
24

なぜ今？ Web 動画
25

なぜ今 Web 動画？
やっと、技術が追いついてきた
26

やっと、技術が追いついてきた
27

28
● カメラ
○ iPhone
○ 一眼レフカメラ
= プロ並みの画質。しかもWebの人持ってる
● ソフトウエア
○ スマホアプリ
○ iMovie
○ Adobe CC -> Adobe Premiere (プロ用ソフト!)

29
● HTML5
○ Flash の縛り
○ <video> タグ = 自由度UP
○ 例：デジタルサイネージ

30
● HTML5
○ <video> タグ = 自由度UP
○ 動画は 4:3 or 16:9
である必要がない

Web 動画
31

Web 動画
やっと「今でしょ！」
32
ガッテンしていただけましたか〜？(￣ー￣)ﾆﾔﾘ

ただし！
作り方を覚えないとダメ！
33

悪い Web 動画の例
● 長い
● 映像がブレてる
● 音声が要る
● 動きがない
● 感情が伝わらない
34

= NAMO
35

= NAMO
ちゃんと Web 動画を作るための勉強会
36

= NAMO
ちゃんと Web 動画を作るための勉強会
よろしくお願い致します！
http://namo.doorkeeper.jp
37

夏目さん
「編集の基本」
c/wt.fabrics.
http://www.slideshare.net/cwtfabrics/15-10-03nano3
こちらのスライドをご覧ください
38

夏目さん
ありがとうございました
39

動画を Web に掲載
どうやってウェブに掲載するか
40

Web に動画を掲載
■ まず、そもそも動画をどこに保存？
● 動画ファイルをサーバーにUP
● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
41

● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
42
今日はこちらを中心に解説

○ 利点・欠点
■ YouTube や Vimeo の制限に囚われたくない
■ サイズを自由に決めたい
■ 自分でビデオをエンコードできる
■ プレイヤーが要らない or カスタマイズしたい
43

○ 気をつけないといけないこと
■ サーバーが動画ファイルをサポートしているか
■ サポートしなくても .htaccess で設定を加えれば追
加可能か
■ データ転送量に上限がある場合は注意
44

■ .htaccess で動画ファイルをUPできるよう
にする方法
.htaccess サンプルコード
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
45
レンタルサーバーによっては設定済み or 設定できない場合があります。
できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう
対応をお願いするのはタダです！

● YouTube や Vimeo などにアップロード
○ エンコードの必要なし
○ 簡単
○ プレイヤーやブラウザ判定を勝手にしてくれる
○ WordPress でデフォルトで対応していたりプラグインが
豊富にある
46

動画形式の基礎知識
● Web で使える動画
HTML5で主にサポートしている動画形式は下記の3つ
47
mp4 Apple が開発したMPEG-4動画。H.264エンコーディングが主。IE8
を含めて多くのブラウザで使える
ogv オープンソースの動画形式。Theoraエンコーディングが主。
webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポー
ト

動画形式の基礎知識
● 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

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>

50
</video>
「autoplay loop」にすると自動ループ再生に
「control」はブラウザのコントロールが開く
「muted」は音声ミュート

51
</video>
ビデオの素材ファイルを読み込むところ。

52
</video>videoタグをサポートしていない古いブラウザが表示する
部分。ここでは画像を読み込んでいるが普通のテキスト
などでもOK

Webに掲載してみよう
53

Web に掲載：注意点
● ビデオをページに埋め込んでみる
● 埋め込んでから確認
○ 埋め込みが多すぎないか
○ ページロードが遅くなってないか
○ 動きが派手すぎないか
○ めまいがしないか
○ そもそも、本当に動画の必要があるか
54

すいません。休憩の前に
55

Web 動画編集講座
ワークショップ
56

Web 動画編集講座
● 自己紹介
● チーム分け
● お題
● 休憩&ネタ考える (￣ー￣)ﾆﾔﾘ
● ワークショップスタート
● 編集披露
57

Web 動画撮影講座
● 自己紹介
58

● チーム分け
59

● チーム分け
3人一組
60

● お題
61

● お題
62

● お題
63

● お題
「苔玉ウェブサイトを作ろう」
64

● 苔玉ウェブサイトを作ろう
65

○ 今まで撮影した素材を元に Web に載せるビデオを編集
しよう
66

○ 条件：
■ 複数回シリーズの3回目
■ 前回撮影した素材を使います
■ 映像を編集します
■ Web 用に出力します
■ Web にアップロードします
■ 音は無視（また違う次元の話になるので）
67

○ クライアント：安井先生からの説明
リンク
68

○ 何を編集？
■ 苔玉のメンテナンス・剪定・トップページ
69

○ 主旨：
ナツメさんの実際の編集の基本を実践しよう
(￣ー￣)ﾆﾔﾘ
70

○ 素材
■ 本当は、自分でショットリストや脚本を作るべきだけ
ど、まずはこちらでつくりました。
■ 前回で撮影した素材を使用
■ 編集して Web サイトに掲載しよう
71

○ 素材・編集リストは Google Docs に
https://docs.google.com/document/d/1rSUwyiWVvxlz
D22yqUwcK8CJKIvtDh99JhOWE2NGtJU/edit?usp=
sharing
(本日参加者は Doorkeeper よりメールを送ります)
72

本日のアジェンダ
● 15分：Web 動画とは
● 40分：映像制作の基本
● 120分：ワークショップ
○ ~15:00 - 15分：企画
○ ~16:00 - 60分：撮影 & アップロード
○ ~16:30 - 30分：キャプチャ
○ ~17:00 - 30分：レビュー
73

さあ実践！
● ワークショップスケジュール
○ ~14:45 - 15分：プラン
○ ~15:30 - 45分：撮影 & アップロード
○ ~16:00 - 30分：Web アップロード
○ ~17:00 - 60分：レビュー
74

お疲れ様でした！
次回は「企画講座」
http://namo.doorkeeper.jp
75

第7回 Web 動画編集講座〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)

Recommended

Recommended

More Related Content

What's hot

What's hot (10)

Similar to 第7回 Web 動画編集講座〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai)

Similar to 第7回 Web 動画編集講座〜編集して Web にアップしてみよう - NAMO (NAgoya Movie Obenkyokai) (20)

More from Katz Ueno

More from Katz Ueno (16)