第8回 Web 動画サイト講座〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)

2016.12.23 (金) NAMO 第8回 Web 動画サイト講座 Webサイトを完成させ、来シーズンのトピックを考えよう
第8回 Web 動画サイト講座
Webサイトを完成させ、来シーズンのトピッ
クを考えよう
1
NAMO (NAgoya Movie Obenkyokai)
@2016.12.23 ベースキャンプ名古屋

本日の目次
● 14:00 最初
● 14:10 早速サイトのまとめと公開準備
● 15:00 (?) いままでのおさらいまとめ
● 16:00 来シーズンについて
● 17:00 (任意の人)おさらい = 忘年会
2

自己紹介
3

Katz Ueno (上野勝之)
Twitter: @katzueno
ブログ: http://katzueno.com
コンクリートファイブジャパン株式会社
取締役 Chief Communciations Officer
http://concrete5.co.jp
名古屋で concrete5 CMS の普及
4

● ロスのエンタメ出版社でバイト
→ Web担 → CMS担当
→ 編集長
● 多言語サイトや SNS プロモを
自治体・グローバル企業へ提供
● 2009年、アメリカ生まれの CMS 「concrete5」日
本語版と日本ユーザーグループを設立
● Mautic や WordPress
● TOEIC は6時間勉強して 990点
5

concrete5 (CMS)
日本語版を作ってます
concrete5-japan.org
6

コンなご
concrete5 名古屋ユーザーグループ
名駅近く
「ベースキャンプ名古屋」
月2回勉強会
(毎月第1月曜日と週末)
次回は明日 11/7 (月)
concrete5nagoya.doorkeeper.jp
7

次回は 11/7 (月) 詳細は
meetup.com/Mautic-Meetup-Nagoya/
Mautic Meetup Nagoya
オープンソース・マーケティングオートメーションの勉強会
名駅近く
毎月第1月曜日夜に勉強会。concrete5 モクモク勉強会と同じ日！
8

次回は12/23 (金・祝) 開催
namo758.com
Web 動画を学ぶための定期勉強会
名駅近く
4月〜12月に年4回開催の Web 動画勉強会
9

10

2016.12.23 (金) NAMO 第8回 Web 動画サイト講座 Webサイトを完成させ、来シーズンのトピックを考えよう 11
concrete5 とは
concrete5 (コンクリートファイブ) とは
2003年、アメリカ・オレゴン州・ポートランドで生まれたウェブペー
ジなどの情報を簡単に管理・公開するためのコンテンツ管理シス
テム (CMS)。13年以上の歴史があり、ここ8年で急成長する注目
のシステム。動画の掲載も簡単。
京都大学
K.U.RESEARCH
コニカミノルタ
情報機器販売拠点向け
B2B サイト

concrete5 とは
25万人以上のユーザー、60万サイトでの導入実績
個人のウェブサイトから、大企業や大学、政府のウェブサイトま
で、様々な用途で60万サイト以上の導入実績があります。日本国
内でも約2000名がコミュニティに登録し、銀行、市町村の公式サ
イトや、国立大学などでも導入
バンプレスト
とるナビPCサイト他
導入実績 (日本国内)
● 市町村公式サイト
● コーポレートサイト
● 多言語サイト
● 会員サイト
● ニュースサイト
● イントラサイト
● 商工会議所
米陸軍
イントラサイト
ピーチ
アビエーション

なぜ動画のセミナー？
13

もう一つの経歴
● 大学からアメリカ・ロサンゼルスへ映画留学
● ロサンゼルスでインディーズ映画制作
● 出版社での動画編集、長編映画のプロデュースを行う
14

Twitter: @katzueno
ブログ: http://katzueno.com
取締役 Chief Communciations Officer
http://concrete5.co.jp
名古屋で concrete5 CMS の普及
● 大学からアメリカ・ロサンゼルスへ映画留学
● ロサンゼルスでインディーズ映画制作
● 出版社での動画編集、長編映画のプロデュースを行う
15

映像 + Web の経験
16

さて・・・本題
17

今日、伝えたいこと
● 今後動画の需要はどんどん増える
● ウェブ・ビデオの垣根がなくなる
● 機材・ソフトが手に入りやすい今
● 今が動画を始める良い機会！
● 動画、初めて見ませんか？
18

でもやっぱり動画は奥が深い
● 何事も、企画・コンセプトが大事
● 経験を積まないと企画できない
※ 経験を積める勉強会
=
「NAMO」
19

いままでの経緯
20

第5回 NAMO
2016/5/15
企画講座〜
構成・スケジュール・予算ワー
クショップ
21

第5回 NAMO
Web 動画企画講座〜
構成・スケジュール・予算ワー
クショップ
22

第6回 NAMO
2016/7/24
撮影講座〜
動画撮影ワークショップ
(写真)
23

第6回 NAMO
2016/7/24
撮影講座〜
24

第6回 NAMO
2016/7/24
撮影講座〜
25

第7回 NAMO
2016/10/1
編集講座
Webサイトに動画を掲載して
みよう (写真)
26

第6回 NAMO
2016/10/1
編集講座
みよう
27

第6回 NAMO
2016/10/1
編集講座
みよう
28

課外撮影大会
5月庄内緑地BBQ
11月新城撮影会
29

第8回 (今回) NAMO
2016/12/23
サイト講座〜 Webサイトを完
成させ、来シーズンのトピック
を考えよう
30

苔玉マスター
安井さん
● サイトのお話
● まとめ作業
● 公開作業！
31

サイト公開準備開始
● 安井さんがサイト公開準備をしている間、今
年のまとめを紹介します。
● スライドを一気に公開！
32

ウェブと動画
動画の種類
33

動画の分類
1. コンテンツとしての動画
a. 動画コンテンツ
i. YouTube、Nico動、Ameba TV 等
ii. 動画がメインのコンテンツ。
b. 生配信コンテンツ
i. Nico生、AmebaTV、Ustream
ii. セミナー、勉強会など
34

動画の分類
2. コンテンツの素材としての Web 動画
a. Web 動画 (勝手に命名)
i. Web サイト
ii. 背景画像、写真素材
※ VR の技術もすごく発達し手軽ですが、今回は割愛。
※ ただし、すごく身近なものに。詳しくは懇親会で。
35

動画の分類: 動画&生配信コンテンツ
● 配信先：
YouTube、Vimeo、独自プラットフォーム
● 動画がコンテンツのメイン
● Web ページはあくまでもフレーム
動画だけで完結する
例: YouTube の動画をニコ動に転載できる
36

動画の分類: Web 動画
● 配信先：
ウェブサイト
● 動画は素材。動画のみでは完結しない
● Web サイト全体でコンテンツが完結
動画だけでは完結しない
その動画を他の場所に移すと意味がわからない
37

Web 動画
理解できない人にちょっと詳しく
38

Web 動画
理解できない人にちょっと詳しく
39

枕の良さが伝わりました？
動画だけを見てみよう
40

なぜ動画が良いのか
動画を使うことの利点を考えよう
41

1. スペースの節約
a. 写真だと複数枚必要
b. 動画だと一個でOK
c. というか、画面いっぱい使える
d. 例：まくらの付け方
42

2. 表現・説得力UP
a. 動きがある！
i. 動作がわかる
ii. 感情を伝えられる
b. 例：眠たい時に使いたい
43

動く素材 + 感情

動く素材 + 感情
= 売上UP

しかも
インフラが整った

Web 制作者はもう持ってる (?)
47
● カメラ
○ iPhone
○ 一眼レフカメラ
● ソフトウエア
○ スマホアプリ
○ iMovie
○ Adobe CC

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

動画が扱いやすくなった！
● HTML5
○ Flash の縛り
49

動画が扱いやすくなった！
● HTML5
○ Flash の縛り
○ <video> タグ = 自由度UP
○ 使い方や縦横比も自由
50

ただし！
51

企画が大事
52

企画・プランが大事
● 無駄に動画
● 長ったらしい
● ブレまくり・気持ち悪い
● 音声が聞き取れない
53

企画・プランが大事
● 無駄に動画
● 長ったらしい
● ブレまくり・気持ち悪い
● 音声が聞き取れない
手軽になったからこそ
企画・制作に集中しよう！
54

動画制作
企画講座
動画制作の流れを知って
クオリティの高い動画を作ろう
55

動画制作企画講座：おことわり
● この企画講座を聞いても、実際に動画制作体験
しないと身になりません
● なぜなら、動画は撮影があります
● 撮影は体を動かします
● 自分が動くことで習得できます
56

動画制作企画講座：おことわり
● 今回の企画講座は、Web 動画の素材収録を中
心に紹介します。
● 専門の撮影スタジオでの撮影ではなく、「現場」
での撮影を基本とします。
57

動画制作：企画講座
● STEP1: コンセプト
● STEP2: ロケハン
● STEP3: 撮影の企画
● STEP4: スケジュール & 予算
● STEP5: 撮影
● STEP6: 編集
● STEP7: 公開
ちょっと話すペースをスピードアップ
58

STEP 1:
コンセプト
根本的な動画の目的をはっきりさせよう
59

STEP1: コンセプト
● どのような動画が必要なのかほしい動画を考え
よう。
● これは Web 制作でもほぼおなじ
60

● 考える事
○ ターゲット
○ 何を動画で見せるか
○ 欲しい効果
○ 本当に動画で表現することが必要か
○ ロケハン
○ 予算・スケジュール
61

● ターゲット
○ 一般的なマーケティングとしてのターゲット
○ 動画を見る人の環境
■ スマホ -> データ転送量
● データ量は最低限で！
■ いま時点は PC で考慮
62

● 動画にする目的・理由が必要
1. 素材・動きが必要か
2. スペースの節約になるか
3. 感情を訴えれるか
4. 面白い or 興味があるか
写真やテキスト以上のもの
63

● Web サイト企画 (Web動画の場合)
○ ワイヤーフレームを作ろう
■ 背景・写真の代わりになる？
■ どういうサイズの動画になる？
○ 参考：Google で「Web 動画」を検索し、サンプルを見まく
ろう
64

● Web サイト企画 (Web動画の場合)
○ ワイヤーフレームを作ろう
■ 背景・写真の代わりになる？
■ どういうサイズの動画になる？
○ 参考：Google で「Web 動画」を検索し、サンプルを見まく
ろう
65

STEP 2:
ロケハン
撮影場所を撮影前に確認しよう
66

STEP2: ロケハン
● 撮影は時間との勝負！
● 場所の責任者の許可。企画を事前に説明
● 移動や撮影の所要時間
● 電源の場所
● 照明を使うのであればアンペア
● ブレーカーの場所
● 電気代負担どうする
● 責任者の人とコミュニケーションをとる！
67

STEP2: ロケハン
● 重要 TIPS
○ 屋外：天気、予備日必要？
○ 日の出、日の入りの時間の把握
○ 移動時間帯の交通量
○ 電車移動、ラッシュアワーと重ならない？機
材多いと大変！
○ 駐車場から撮影場所まで移動できる？
68

STEP 3:
撮影の企画
ストーリーボードやショットリストを作ろう！スケ
ジュールや予算の基本に
69

STEP 3: ショットリスト
● ストーリーボード
○ 絵コンテを作れると理想
○ もしくは、テキストだけの絵コンテ
● ショットリストを作ろう (一番重要)
○ シーン
○ ショット
※ ストーリーボードは無くても良い
70

STEP 3: ストーリーボード
● ストーリーボードに必要な内容
○ いつ
○ どこで
○ 誰が
○ （なぜ）
○ 何を
○ どうしたか
絵を描けなくても文章でまとめよう！
71

● ショットリストとは
○ 撮影時間や予算を考える上で重要なリスト
○ 誰が、どういう場所、機材、小道具が必要か、時間がど
れだけかかかるかを見極める重要なリスト
○ 後日の編集の際にも役に立つ
72
[シーン番号] - [ショット番号] ショットのタイプショットの説明
e.g. 1-1 e.g. WS e.g. 主人公が建物に入る

● ショットリスト用語辞典
○ ショットタイプ (人それぞれの解釈がありますが)
73
略号名前説明
EWS Extreme Wide Shot 人物 (物体) と場所の雰囲気がわかる。環境がわかる
WS Wide Shot 人物 (物体) 全体が足の先から頭の上まで画面いっぱい
に映っている
3/4 4分の3 (Three Quarter) 人物のひざ上が映っている
MS Medium Shot 人物 (物体) の腰上が映っている
CU Close Up 人物 (物体) の胸から上が映っている
MCU Medium Close Up 人物の顔だけ
ECU Extreme Close Up 人物 (物体) の顔だけ、もしくは顔の一部しか写っていない

● 参考: TYPE OF SHOT AND SHOOTING
TECHNIQUES
74

● シーンとショットの違い
○ シーンの定義
■ カメラ・照明・撮影時間のセットアップが同じ
■ 照明やカメラを大幅に動かさないといけないとシーン
が増える
■ シーンが増えるとバラエティ豊かになるかもしれない
が、撮影時間が余計にかかる
○ ショットの定義
■ シーンの中での撮影ショット
■ 例：部屋の中の人物の WS や MS CU 等
■ ショットが多くないと編集の時に困る可能性。多すぎ
ると撮影時間がかかる
75

STEP 4:
スケジュール & 予算
ストーリーボードやショットリストを作ろう！スケ
ジュールや予算の基本に
76

Web 動画制作企画: スケジュール
● 必要な撮影時間を計画できるようになろう
○ 例: 3人 (カメラ+ディレクタ+登場人物)
だいたいの基準 (規模や内容によって変わります)
77
所要時間の目安
60分 1つのロケーションに到着したときの準備時間
30分 1シーンをセットアップするときの準備時間の目安
10〜20分 1ショットを撮影するときの撮影時間の目安
30〜60分片付け
移動時間同じ日で2箇所以上の場所で撮影するとき、移動するときの時間

Web 動画制作企画: スケジュール
● 必要な編集時間を計画できるようになろう
○ 例: ざっくりすぎる編集時間の目安
78
所要時間の目安
60分~ 編集素材のとり込み作業
60分編集基本時間
1時間/分最終的なビデオの長さ (分) x 時間。例: 2分のビデオ = 2時間の編集
時間
60分 Webの形式へのエクスポート (エンコード)
任意アニメーションなどの特殊効果や素材の作成時間

Web 動画制作の手順：予算
● 人件費とは
○ その人が費やす時間に対する対価
○ 基本的に人日 (作業時間) 計算
(1日 = ○万円)
79

● 人件費とは
○ 内訳 (本当にざっくりですが)
■ 企画・構成費
■ 進行管理費
■ 撮影費
● 機材をレンタルするのであればレンタル貸出返
却の時間も含める
● 遠方への移動が必要であればその時間や交通
費も含める
80

● 人件費とは
○ 内訳 (続き)
■ 編集費
※ また特殊な技術を持っている人は追加で技術費用を追加
81

● 機材費とは
○ 撮影や編集に使用する機材の費用
○ 撮影
■ カメラ・マイク・照明
● レンタル屋さんのレンタル代を参考に算出しよう
だいた10日使ったら元が取れるように設定
(例: CUE、光響社、ビデオエイペックス)
■ ロケーション費用
82

● 機材費とは
○ 編集
■ 特別なソフトの使用
■ MAなど特別な編集スタジオの使用
■ 音楽などのロイヤリティーフリー素材の
購入費用
83

STEP 5:
撮影
84

絶対に失敗しない
フレーミングのコツ
みんなが陥る罠
85

デッドスペースをなくす
画面の100%をすべて使いこなそう
86

悪い例:
87

さあ、
どこが悪いでしょう？
ちょっと考えてみよう
88

悪い例:
89

どこが悪いか
の答え
90

悪い例:
91

悪い例:
92
ここって写ってる必要？

何故か、
構図の上半分が空く
なぜ起こるのか、ちょっと考えてみよう
93

悪い例と良い例
見比べてみよう
94

悪い例:
95

正解:
96

正解:
97

悪い例:
98
デッドスペース

なぜデットスペースが多いとダメ？
● 何がメイン？
○ ごちゃごちゃ
○ 混乱する
● メインキャラが小さくなる
○ メッセージ半減
○ インパクト半減
○ 感情半減
99

改善しよう！
コツを掴めば簡単にできる
100

悪い例:
101
デッドスペース

正解:
102

やったこと
● カメラを下に向けて天井を写さない
● 高い・低い・高い・低いの順番並び替え
● 背の高すぎる人にしゃがんでもらう
103

なぜ？
原因を考えてみよう
結構簡単な理由
104

カメラマンの
目線はどこ？
105

悪い例
の原因
106

悪い例
の原因
107

悪い例
の原因
108

原因
中心しか見てない
その他の部分、一切無視！
109

悪い例
の原因
110

悪い例
の原因
111
見てない見てない

見てないですね！
112

じゃあ、見れば良い
114

見る！
115

見る！
116
見た！
余分じゃんここ見てない

見る！
117
見た！
余分じゃんここ
見た！
何ここ！？
何も無いやん〜

四隅を見る！
(特に左上・右上)
118

Before
119

After!!
まあ、
なんということで
しょう！
120

Web 動画照明講座
急ぎ足版
121

照明とは
122

照明とは
123
まずは、自分の「照明」の作品
https://vimeo.com/48135418
本編では紹介しません。
時間がある時見てみてください

照明とは
124

照明とは
125

照明とは
126

照明って
こういうイメージですか？
127

・・・
128

ぜんぜん違う
129

Katz の独断と偏見の照明論
● カメラは人間よりも性能が悪い
● 人間の目で見ているような映像を再現するため
に手助けをするのが照明
● ビーム光線とかカラーフィルターとかは演劇とか
ポストモダニズムな世界だけ
● 照明があるとバレたら負け
130

Katz の独断と偏見の照明論
● 照明を使っていると
視聴者にバレたら負け
131

そもそもなぜ照明は必要か
● カメラは人間よりも性能が悪い
132

● 適当解説「ダイナミックレンジ」
○ 色や物体を認識できる明るさの範囲
133

● 適当解説「ダイナミックレンジ」
134

ダイナミックレンジ
● 明るすぎて白飛びする境界
● 暗すぎて真っ黒になる境界
135

136

137

● 人間とカメラでダイナミックレンジは違う
● 人間のほうが広い
● カメラのほうが狭い
138

ダイナミックレンジ (DR)
● 人間とカメラの DR の差の例
139

140
ヒトカメラ

141
ヒトとカメラの DR の差の例
ヒトが見えているイメージ
ヒトカメラ

142
カメラの場合
※わかりやすくするため、誇張してます
ヒトカメラ

143
カメラの場合
空が白くなって
青さが無い
木が茶色じゃなく
て真っ黒
影の部分が
黒く潰れる
肌がザラザラし
てるみたい
ヒトカメラ

144
ヒトカメラ

145
ヒトカメラ

● 映像は人間の目よりも白飛びしやすく、黒く潰れ
やすい
146

映像の照明とは
● 白く飛んでしまう光をカット
● 黒く潰れてしまう箇所を照らす
147

148
ヒトカメラ
カメラの場合
青さが無い
て真っ黒
影の部分が
黒く潰れる
てるみたい

149
ヒトカメラ
カメラの場合
青さが無い
て真っ黒
影の部分が
黒く潰れる
てるみたい
光をカット
光を均等化
照らす
照らす

150
ヒトカメラ
ヒトが見えているイメージ
に近づけるのが映像照明

問題点！
● 人間の目ではわかりにくいような
光の加減調整が必要
151

問題: 小さい範囲で光を操作
152
ヒトカメラ

問題: 小さい範囲で光を操作
153
ヒトカメラ
狭い・・・
難しい

だから映像照明は
難しい！
機材、時間、経験、お金がかかる！
154

でも、やらないと！
次の道に進めない
155

最低限知っておきたい
映像照明のコツ
156

1. 安全第一！
まじで
157

1.安全第一
● 照明、熱い → やけどに注意
● 照明、重い → 鈍器に注意
● 照明、高い → お金かかる
● 照明、電気 → ブレーカー注意！
158

1.安全第一
● 撮影現場でふざけるな！
● 照明器具を扱うときは軍手や手袋をはめる
● 素足で撮影現場を歩くな
● 保険に入ろう
● 特に大きい照明を使うとき、
必ず、経験豊富な専門家を必ず雇え！
159

2. 準備が一番大事
準備が大事！
160

2.準備が一番大事
● 現場の電気見取り図。ブレーカー確認
● 何台まで照明使える？
● 照明セットアップの時間大丈夫？
● 発電機いる？発電機は安物でOK？
安定電源供給できる高いの必要？
161

3. 照明の必須道具
道具もあれば良いけど、
身近な機能も使おう
162

3.照明の必須道具
● ライトメーター
人間の目ではわかりにくい、光の強弱を
測ってくれる。
SEKONIC (セコニック)
ツインメイト L-208 J110 約1.7万
デジタルマスター L-758CINE: 7万円
163

● ライトメーター
iPhone で使えるものも
LUMU Lite ($99)
http://www.lu.mu/lightmeter/
※ カラーメーターになる Lumu Power もプレオーダー中
164

● ライトメーターの問題
165

● ライトメーターの問題
使い方をマスターしないといけない
※ 結構、経験と想像力が必要になってきます。
※ ただ、マスターすると、準備段階から、照明の設置場所の検討がしやすくなり撮影時間短縮になるので、本
格的に照明を覚えたいのであれば、絶対にライトメーターは必要。
166

そんなあなたに朗報
主に一眼レフカメラを持っている方
167

ヒストグラムを使おう！
適当に光を計測できるよ！
168

ヒストグラムとは
● ダイナミックレンジの範囲内に締めている画面
を統計的に表した表
169

170

171

ヒストグラムで照明調整
● 暗いところや明るくて飛びそうなところが無いよ
う、程よい加減なグラフになるように照明をセッ
トする練習を行う。
172

ヒストグラムで照明調整
173
暗すぎの例ちょうど良い例明る過ぎの例
「ちょうど良い」はいろんな解釈がある
ので一概には言えません。経験で慣れ
てください。

以上、照明講座
本当に適当です。
本当はもっとあるんだけど・・・。
174

STEP 6:
編集
・
175

Web 上での編集とは
● 編集の基本
○ 「カット」だけ
○ フェードアウトやエフェクトは考えない
■ 例:) Photoshop で切り抜きやサイズ変更だけしてる
ようなもの
○ 編集の全ては「カット」だけ
○ 編集ソフトは iMovie があれば十分！
176

映像編集の基本
● 無駄な場所をとにかくカットする
● 変なエフェクトは考えない
177

映像編集の基本
● おすすめ TIPS
○ 必要ない部分はカット
○ タイミング
○ 音声を使う場合は音声をナチュラルに
178

STEP 7:
Web 公開
179

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

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

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

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

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

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

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

動画形式の基礎知識
● Web で使える動画
HTML5で主にサポートしている動画形式は下記の3つ
187
mp4 Apple が開発したMPEG-4動画。H.264エンコー
ディングが主。IE8 を含めて多くのブラウザで使え
る
ogg オープンソースの動画形式。Theoraエンコーディン
グが主。
webm Google が開発した動画形式。IE9+, Chrome,
Firefox 4+ でサポート
2016年12月時点では、mp4 で動画を用意する。ただ
WebM はファイルサイズが小さくパフォーマンスが良く、
Google が作っているので、将来的には WebMになるだろ
うと多くの人が予測。なので mp4 と webm

video タグの基本
● HTML5 ビデオタグはこんなに便利
188
<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>

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

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

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

Webに掲載してみよう
192

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

おまけ
セミナー動画配信
自社セミナーや勉強会を開催している人
194

セミナー・勉強会配信 1500時間以上！
6年間セミナー動画を配信し続けました
195

セミナー・勉強会動画
● 利点
○ セミナーや勉強会に来れない人も録画が見れる
○ 遠隔地の人も見れる
○ 行き届いていなかった人へもメッセージを訴えれる
● 欠点
○ 尺が長いものが多いので編集が大変
○ スピーカーの声の収録が大変
196

● セミナー配信で使いたい機材
○ 音声入力がついているビデオカメラ
○ スピーカーの近くまでマイクを配置できるよ
う、 XLR という音声ケーブルを使える変換器
を導入する
○ ショットガンマイクを使う
197

● セミナー配信で気をつけること
を導入する
198

● セミナー配信で使いたい機材
を導入する
機材の詳細は「勉強会・セミナーを録画中継するのにおすすめ
な機材とTIPS (2016年版)」ブログ記事
199

● セミナー会場で気をつけること
○ 電源の確保
■ 延長コード必要？
○ カメラ・三脚の場所
■ 参加者の邪魔にならない？
200

● 生中継をする時に気をつけること
○ インターネット回線の確保
■ 施設のネットワークがブロックしているか
(配信用のポートが開放されているか)
■ 参加者もそのネット回線を使うのか
■ モバイルであれば安定しているか
○ 回線による画質の調整
201

● 生中継をする時に気をつけること
○ 生配信をする場合の機材や TIPSも「勉強会・セミナーを
録画中継するのにおすすめな機材とTIPS (2016年版)」
ブログに
202

さあ、いよいよ
公開！
203

三河苔玉レンタルサービス
http://kdm-rental.net/
204

205

みなさん、おつかれさまでした！
206

さあ、
来シーズンの話をしよう
207

来シーズンの内容
● ネタ
○ 過去：ベースキャンプ、苔玉
● 来シーズン
○ アーティスト
○ 自分の好きなものを持ってきてレビュー動画
○ 360 VR をやってみたい（技術）
○ InaKatsu Menu
○ 子どもプログラミング教室
● 知りたい・やりたいこと
○ 動画の効率の良い撮影プロセス
○ テーマ別撮り方のノウハウ
■ 人物の売り方
■ イベントの撮影方法
○ 静止画で動画を作る
○ 編集を学びたい
208

次回は2017年4月〜5月
namo758.com
Facebook Group で議論中
https://www.facebook.com/groups/namo5/
Web 動画を学ぶための定期勉強会
名駅近く
4月〜12月に年4回開催の Web 動画勉強会
209

第8回 Web 動画サイト講座〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (18)

Similaire à 第8回 Web 動画サイト講座〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai)

Similaire à 第8回 Web 動画サイト講座〜 Webサイトを完成させ、来シーズンのトピックを考えよう - NAMO (NAgoya Movie Obenkyokai) (9)

Plus de Katz Ueno

Plus de Katz Ueno (17)