第3回 Web 動画編集講座〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)

2015.10.2 (土) 第3回 Web 動画編集講座〜 Web サイトに掲載してみよう
第3回 Web 動画撮影講座
iPhone や一眼レフでマスターする撮影術
2015/10/2 (土) NAMO
@ ベースキャンプ名古屋
http://namo.doorkeeper.jp
1

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

自己紹介
1999年〜2007年アメリカに居ました
インディーズで映画作ってました
最新作「Isolated」
今まで、ラブコメ、ホラー
サーフィンドキュメンタリー
いろんな映画を作ってきました
3

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

CMS Fun
名古屋で CMS を勉強しよう
5
http://cmsfun.doorkeeper.jp

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

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

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

Web 動画とは？
9

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

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

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

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

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

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

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

なぜ今？ Web 動画
17

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

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

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

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

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

Web 動画
23

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

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

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

= NAMO
27

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

= NAMO
ちゃんと Web 動画を作るための勉強会
よろしくお願い致します！
29

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

Webに掲載してみよう
45

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

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

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

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

自己紹介
50

チーム分け
51

チーム分け
3人一組
52

お題
53

お題
ベースキャンプ名古屋(￣ー￣)ﾆﾔﾘ
54

お題
ベースキャンプ名古屋(￣ー￣)ﾆﾔﾘ
「紹介ウェブ動画をつくろう」
55

ベースキャンプ名古屋「紹介ウェブ動画をつくろう」
56

第1回 http://namo.katzueno.com/
57

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

何を編集？
ベースキャンプの紹介サイト
59

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

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

作成するビデオ
62
1. 施設紹介 (練習)
a. ベースキャンプの施設を
紹介
2. チェックイン方法
a. 月額会員のチェック員方
法を紹介
3. トップページイメージ

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

さあ実践！
ワークショップスケジュール
~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. 例：オフィスグリコ

お疲れ様でした！
次回は「企画講座」
65

第3回 Web 動画編集講座〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (6)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 第3回 Web 動画編集講座〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai)

Ähnlich wie 第3回 Web 動画編集講座〜 Webサイトに動画を掲載してみよう - NAMO (NAgoya Movie Obenkyokai) (20)

Mehr von Katz Ueno

Mehr von Katz Ueno (20)