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

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

第7回 Web 動画編集講座編集して Web にアップしてみよう

2016/10/1 (土) NAMO@ ベースキャンプ名古屋

http://namo758.com

1

http://namo758.com

http://namo758.com


お知らせ

2


祝公式サイト

http://namo758.com

3

http://namo758.com

http://namo758.com


connpass に移行します

http://namo.connpass.com/次回告知を行うので

メンバーになったください

4

http://namo.connpass.com/

http://namo.connpass.com/


自己紹介

Katz Uenoコンクリートファイブジャパン株式会社

Chief Communications Officer

TW: @katzuenoBlog: http://katzueno.com

5

http://katzueno.com


自己紹介

● 1999年〜2007年アメリカに居ました● インディーズで映画作ってました● Amazon Prime で過去の遺産が・・・● 今まで、ラブコメ、ホラー

サーフィンドキュメンタリーいろんな映画を作ってきました

6

https://www.amazon.co.jp/Things-Dont-Tell-Ryan-Reyes/dp/B01M0AH1L3/ref=sr_1_1?s=instant-video&ie=UTF8&qid=1475239441&sr=1-1&keywords=Thing+You+Don%27t+Tell


コンなごconcrete5 名古屋ユーザーグループ

7

http://concrete5nagoya.doorkeeper.jp




Mautic Meetup Nagoya

8

http://meetup.com/Mautic-Meetup-Nagoya/

オープンソース・マーケティングオートメーション勉強会！




WCAN 2016 AutumnKatz が Web 動画を!!

http://wcan.jp/9

http://wcan.jp/

http://wcan.jp/

https://wcan.jp/


本日のアジェンダ

● 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

http://www.slideshare.net/cwtfabrics/15-10-03nano3

http://www.slideshare.net/cwtfabrics/15-10-03nano3


夏目さん

ありがとうございました

39


動画を Web に掲載

どうやってウェブに掲載するか

40


Web に動画を掲載

■ まず、そもそも動画をどこに保存？

● 動画ファイルをサーバーにUP● YouTube や Vimeo などにアップロードし

埋め込みだけで可能か

41




● 動画ファイルをサーバーにUP● YouTube や Vimeo などにアップロードし

埋め込みだけで可能か

42

今日はこちらを中心に解説




● 動画ファイルをサーバーにUP○ 利点・欠点

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

43




● 動画ファイルをサーバーにUP○ 気をつけないといけないこと

■ サーバーが動画ファイルをサポートしているか

■ サポートしなくても .htaccess で設定を加えれば追

加可能か■ データ転送量に上限がある場合は注意

44



■ .htaccess で動画ファイルをUPできるようにする方法

.htaccess サンプルコード

AddType video/ogg .ogvAddType video/mp4 .mp4AddType 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


http://www.slideshare.net/fullscreen/yasuihiroaki/namo-6-64378379

http://www.slideshare.net/fullscreen/yasuihiroaki/namo-6-64378379


● 苔玉ウェブサイトを作ろう○ 何を編集？

■ 苔玉のメンテナンス・剪定・トップページ

69




○ 主旨：

ナツメさんの実際の編集の基本を実践しよう

(￣ー￣)ﾆﾔﾘ

70



● 苔玉ウェブサイトを作ろう○ 素材

■ 本当は、自分でショットリストや脚本を作るべきだけ

ど、まずはこちらでつくりました。

■ 前回で撮影した素材を使用

■ 編集して Web サイトに掲載しよう

71




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

72


https://docs.google.com/document/d/1rSUwyiWVvxlzD22yqUwcK8CJKIvtDh99JhOWE2NGtJU/edit?usp=sharing





本日のアジェンダ

● 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


お疲れ様でした！

次回は「企画講座」


75



Art & Photos

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

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