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

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

第 3 回 Web 動画撮影講座iPhone や一眼レフでマスターする撮影術

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

http://namo.doorkeeper.jp

1

http://namo.doorkeeper.jp/


自己紹介

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

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

2

http://katzueno.com/


自己紹介

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

3

http://isolated.tv/


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

4

http://concrete5nagoya.doorkeeper.jp

http://concrete5nagoya.doorkeeper.jp/


CMS Fun 名古屋で CMS を勉強しよう

5

http://cmsfun.doorkeeper.jp

http://concrete5nagoya.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の人持ってるソフトウエアスマホアプリiMovieAdobe CC -> Adobe Premiere (プロ用ソフト !)



21

HTML5Flash の縛り

<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

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




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

31


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

32


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

動画ファイルをサーバーに UPYouTube や Vimeo などにアップロードし埋め込みだけで可能か

33



動画ファイルをサーバーに UPYouTube や Vimeo などにアップロードし埋め込みだけで可能か

34

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



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

YouTube や Vimeo の制限に囚われたくないサイズを自由に決めたい自分でビデオをエンコードできる

プレイヤーが要らない or カスタマイズしたい35



動画ファイルをサーバーに UP気をつけないといけないことサーバーが動画ファイルをサポートしているか

サポートしなくても .htaccess で設定を加えれば追加可能かデータ転送量に上限がある場合は注意

36


Web に動画を掲載■ .htaccess で動画ファイルを UPできるようにする方法.htaccess サンプルコード

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


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



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>ビデオの素材ファイルを読み込むところ。



44


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


http://namo.katzueno.com/


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

複数回シリーズの 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...

Design

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

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

Design

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

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

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