SlideShare a Scribd company logo
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
第7回 Web 動画 編集講座
編集して Web にアップしてみよう
2016/10/1 (土) NAMO
@ ベースキャンプ名古屋
http://namo758.com
1
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
お知らせ
2
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
祝 公式サイト
http://namo758.com
3
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
connpass に移行します
http://namo.connpass.com/
次回告知を行うので
メンバーになったください
4
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
自己紹介
Katz Ueno
コンクリートファイブジャパン株式会社
Chief Communications Officer
TW: @katzueno
Blog: http://katzueno.com
5
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
自己紹介
● 1999年〜2007年 アメリカに居ました
● インディーズで映画作ってました
● Amazon Prime で過去の遺産が・・・
● 今まで、ラブコメ、ホラー
サーフィンドキュメンタリー
いろんな映画を作ってきました
6
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
コンなご
concrete5 名古屋 ユーザーグループ
7
http://concrete5nagoya.doorkeeper.jp
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Mautic Meetup Nagoya
8
http://meetup.com/Mautic-Meetup-Nagoya/
オープンソース・マーケティングオートメーション
勉強会!
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
WCAN 2016 Autumn
Katz が Web 動画を!!
http://wcan.jp/
9
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
本日のアジェンダ
● 10分:NAMO について (復習)
● 30分:編集の基本
● 150分:ワークショップ
○ 15分:説明&チーム分け
○ 75分:編集しよう
○ 15分:キャプチャー
○ 45分:レビュー
10
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 11
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
NAgoya Movie Obenkyokai
名古屋で Web 動画を勉強する会
12
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画とは?
13
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 とは?
● Katz が勝手に考える Web 動画の定義
14
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 とは?
● YouTube?
● ニコニコ?
● Ustream?
● Facebook
15
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 とは?
● YouTube?
● ニコニコ?
● Ustream?
● Facebook
16
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 1. Web ページの素材
○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム
■ 映像単体がコンテンツ
■ 例:ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立
17
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 1. Web ページの素材
○ YouTube・ニコ動・Ustream との違い
■ ウェブページはあくまでもフレーム
■ 映像単体がコンテンツ
■ 例:ニコニコ動画にYouTube動画を転載してもコンテ
ンツとして成立
○ Web動画はそのサイトでしか成立しない
18
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 2. スペースの節約
19
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 2. スペースの節約
○ 写真だと複数枚必要
○ 動画だと一個でOK
○ というか、画面いっぱい使える
20
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 3. 表現・説得力UP
21
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画の特徴
● 3. 表現・説得力UP
○ 動きがある!
■ 動作がわかる
■ 感情を伝えられる
※ 音声は、ちょっと別の話
22
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
素材 + 動き + 感情
23
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
素材 + 動き + 感情
売上UP
24
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今? Web 動画
25
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
やっと、技術が追いついてきた
26
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
やっと、技術が追いついてきた
27
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
28
● カメラ
○ iPhone
○ 一眼レフカメラ
= プロ並みの画質。しかもWebの人持ってる
● ソフトウエア
○ スマホアプリ
○ iMovie
○ Adobe CC -> Adobe Premiere (プロ用ソフト!)
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
29
● HTML5
○ Flash の縛り
○ <video> タグ = 自由度UP
○ 例:デジタルサイネージ
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
なぜ今 Web 動画?
30
● HTML5
○ <video> タグ = 自由度UP
○ 動画は 4:3 or 16:9
である必要がない
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画
31
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画
やっと「今でしょ!」
32
ガッテンしていただけましたか〜?( ̄ー ̄)ニヤリ
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
ただし!
作り方を覚えないとダメ!
33
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
悪い Web 動画の例
● 長い
● 映像がブレてる
● 音声が要る
● 動きがない
● 感情が伝わらない
34
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
= NAMO
35
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
= NAMO
ちゃんと Web 動画を作るための勉強会
36
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
= NAMO
ちゃんと Web 動画を作るための勉強会
よろしくお願い致します!
http://namo.doorkeeper.jp
37
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
夏目さん
「編集の基本」
c/wt.fabrics.
http://www.slideshare.net/cwtfabrics/15-10-03nano3
こちらのスライドをご覧ください
38
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
夏目さん
ありがとうございました
39
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
動画を Web に掲載
どうやってウェブに掲載するか
40
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP
● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
41
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP
● YouTube や Vimeo などにアップロードし
埋め込みだけで可能か
42
今日はこちらを中心に解説
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP
○ 利点・欠点
■ YouTube や Vimeo の制限に囚われたくない
■ サイズを自由に決めたい
■ 自分でビデオをエンコードできる
■ プレイヤーが要らない or カスタマイズしたい
43
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● 動画ファイルをサーバーにUP
○ 気をつけないといけないこと
■ サーバーが動画ファイルをサポートしているか
■ サポートしなくても .htaccess で設定を加えれば追
加可能か
■ データ転送量に上限がある場合は注意
44
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ .htaccess で動画ファイルをUPできるよう
にする方法
.htaccess サンプルコード
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
45
レンタルサーバーによっては設定済み or 設定できない場合があります。
できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう
対応をお願いするのはタダです!
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に動画を掲載
■ まず、そもそも動画をどこに保存?
● YouTube や Vimeo などにアップロード
○ エンコードの必要なし
○ 簡単
○ プレイヤーやブラウザ判定を勝手にしてくれる
○ WordPress でデフォルトで対応していたりプラグインが
豊富にある
46
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
動画形式の基礎知識
● Web で使える動画
HTML5で主にサポートしている動画形式は下記の3つ
47
mp4 Apple が開発したMPEG-4動画。H.264エンコーディングが主。IE8
を含めて多くのブラウザで使える
ogv オープンソースの動画形式。Theoraエンコーディングが主。
webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポー
ト
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
動画形式の基礎知識
● 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
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
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>
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
50
<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>
「autoplay loop」にすると自動ループ再生に
「control」はブラウザのコントロールが開く
「muted」は音声ミュート
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
51
<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>
ビデオの素材ファイルを読み込むところ。
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
video タグの基本
● HTML5 ビデオタグはこんなに便利
52
<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>videoタグをサポートしていない古いブラウザが表示する
部分。ここでは画像を読み込んでいるが普通のテキスト
などでもOK
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Webに掲載してみよう
53
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web に掲載:注意点
● ビデオをページに埋め込んでみる
● 埋め込んでから確認
○ 埋め込みが多すぎないか
○ ページロードが遅くなってないか
○ 動きが派手すぎないか
○ めまいがしないか
○ そもそも、本当に動画の必要があるか
54
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
すいません。休憩の前に
55
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 編集講座
ワークショップ
56
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 編集講座
● 自己紹介
● チーム分け
● お題
● 休憩&ネタ考える ( ̄ー ̄)ニヤリ
● ワークショップスタート
● 編集披露
57
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 撮影講座
● 自己紹介
58
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
Web 動画 撮影講座
● チーム分け
59
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● チーム分け
3人一組
60
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● お題
61
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● お題
62
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● お題
63
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● お題
「苔玉ウェブサイトを作ろう」
64
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
65
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 今まで撮影した素材を元に Web に載せるビデオを編集
しよう
66
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 条件:
■ 複数回シリーズの3回目
■ 前回撮影した素材を使います
■ 映像を編集します
■ Web 用に出力します
■ Web にアップロードします
■ 音は無視(また違う次元の話になるので)
67
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ クライアント:安井先生からの説明
リンク
68
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 何を編集?
■ 苔玉のメンテナンス・剪定・トップページ
69
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 主旨:
ナツメさんの実際の編集の基本を実践しよう
( ̄ー ̄)ニヤリ
70
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 素材
■ 本当は、自分でショットリストや脚本を作るべきだけ
ど、まずはこちらでつくりました。
■ 前回で撮影した素材を使用
■ 編集して Web サイトに掲載しよう
71
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
● 苔玉ウェブサイトを作ろう
○ 素材・編集リストは Google Docs に
https://docs.google.com/document/d/1rSUwyiWVvxlz
D22yqUwcK8CJKIvtDh99JhOWE2NGtJU/edit?usp=
sharing
(本日参加者は Doorkeeper よりメールを送ります)
72
Web 動画 撮影講座
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
本日のアジェンダ
● 15分:Web 動画とは
● 40分:映像制作の基本
● 120分:ワークショップ
○ ~15:00 - 15分:企画
○ ~16:00 - 60分:撮影 & アップロード
○ ~16:30 - 30分:キャプチャ
○ ~17:00 - 30分:レビュー
73
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
さあ実践!
● ワークショップスケジュール
○ ~14:45 - 15分:プラン
○ ~15:30 - 45分:撮影 & アップロード
○ ~16:00 - 30分:Web アップロード
○ ~17:00 - 60分:レビュー
74
2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう
お疲れ様でした!
次回は「企画 講座」
http://namo.doorkeeper.jp
75

More Related Content

What's hot

CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
Katz Ueno
 
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
Hiroshi Urabe
 
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
Toru Miki
 
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
Katz Ueno
 
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポートconcrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
Katz Ueno
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
tomo_masakura
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
Katz Ueno
 
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
Naoko Takano
 
An example of how to make the accessibility ready theme
An example of how to make the accessibility ready themeAn example of how to make the accessibility ready theme
An example of how to make the accessibility ready theme
Takeshi Kashihara
 
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
Katz Ueno
 

What's hot (10)

CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5CMS の現場から - WordPress と concrete5
CMS の現場から - WordPress と concrete5
 
WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編WordPressで行う継続的インテグレーション入門編
WordPressで行う継続的インテグレーション入門編
 
レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4レスポンシブ・イメージのWordPressへの実装と4.4
レスポンシブ・イメージのWordPressへの実装と4.4
 
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
2014年 失敗しない! WordPress 多言語サイト制作で絶対に知っておきたいこと
 
concrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポートconcrete5 とアメリカ 〜 Web制作現地レポート
concrete5 とアメリカ 〜 Web制作現地レポート
 
HTML5 アプリ開発
HTML5 アプリ開発HTML5 アプリ開発
HTML5 アプリ開発
 
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと
 
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
「なんとなく」の壁を越えよう! 〜自信を持ってWordPressを選択するためのヒント〜
 
An example of how to make the accessibility ready theme
An example of how to make the accessibility ready themeAn example of how to make the accessibility ready theme
An example of how to make the accessibility ready theme
 
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
普通のサイト企画でも使える!失敗しない!多言語サイト制作で絶対に知っておきたいこと
 

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

Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Katz Ueno
 
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
Katz Ueno
 
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
Katz Ueno
 
concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11
Katz Ueno
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Katz Ueno
 
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
Kelly Holonic
 
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
Masayuki Taguchi
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Katz Ueno
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
Katz Ueno
 
動画像のばらし方
動画像のばらし方動画像のばらし方
動画像のばらし方
Kei Kawamura
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
Katz Ueno
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
Kentaro Matsumae
 
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
Yossy Taka
 
推薦学習コンテンツ Ruby/Ruby on Rails編
推薦学習コンテンツ Ruby/Ruby on Rails編推薦学習コンテンツ Ruby/Ruby on Rails編
推薦学習コンテンツ Ruby/Ruby on Rails編
DIVE INTO CODE Corp.
 
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
Akira Ouchi
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
mganeko
 
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
Osamu Shimoda
 

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

Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第5回 NAMO (NAgoya Movie Obenkyokai)
 
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回  NAMO (NAgoya Movie Obenkyokai)
Web 動画 企画講座 構成・スケジュール・予算ワークショップ - 第9回 NAMO (NAgoya Movie Obenkyokai)
 
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
 
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
第4回 Web 動画 企画講座 〜 Web 動画を企画・構成・予算を作ろう
 
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
第1回 始めてみよう Web 動画 〜 基礎編 まずは iPhone から
 
concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11concrete5 導入活用セミナー 名古屋 2015-11
concrete5 導入活用セミナー 名古屋 2015-11
 
Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7Dynamic Contents & etc - Mautic Meetup Nagoya #7
Dynamic Contents & etc - Mautic Meetup Nagoya #7
 
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
 
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
「これからは動画だよね」に対応するための動画制作&活用手法(講師:田口 真行)
 
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
Web 動画 撮影講座 & 動画撮影ワークショップ - 第6回 NAMO (NAgoya Movie Obenkyokai)
 
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
撮影・照明・音声収録のコツ - 第10回 NAMO (名古屋Web動画勉強会)
 
動画像のばらし方
動画像のばらし方動画像のばらし方
動画像のばらし方
 
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモWordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
WordFes Nagoya 2016 サイトの裏側と HTML 変換 永代供養 実践デモ
 
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
ニコニコ動画iOSアプリの UX・マネタイズ・技術の話
 
WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置WebサイトへのYotutube動画の設置
WebサイトへのYotutube動画の設置
 
推薦学習コンテンツ Ruby/Ruby on Rails編
推薦学習コンテンツ Ruby/Ruby on Rails編推薦学習コンテンツ Ruby/Ruby on Rails編
推薦学習コンテンツ Ruby/Ruby on Rails編
 
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
Opera Mobile for AndroidのカメラサポートをつかってWebコンテンツにカメラ機能をつけてみたお話
 
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでねSkywayのビデオチャットを録画しよう。そう、ブラウザでね
Skywayのビデオチャットを録画しよう。そう、ブラウザでね
 
SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告SeleniumConf16 UK参加報告
SeleniumConf16 UK参加報告
 
提案
提案提案
提案
 

More from Katz Ueno

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
Katz Ueno
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
Katz Ueno
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
Katz Ueno
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
Katz Ueno
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
Katz Ueno
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
Katz Ueno
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Katz Ueno
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Katz Ueno
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
Katz Ueno
 
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
Katz Ueno
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
Katz Ueno
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
Katz Ueno
 
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
Katz Ueno
 
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
Katz Ueno
 
オープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015Bオープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015B
Katz Ueno
 
The Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site MultilingualThe Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site Multilingual
Katz Ueno
 

More from Katz Ueno (16)

Mautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のりMautic 2.x から 4.x まで アップデートの道のり
Mautic 2.x から 4.x まで アップデートの道のり
 
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
CloudFormation ことはじめ - JAWS UG 名古屋 2019年7月度
 
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohamaconcrete5 の魅力 @ Cloud Garage Meetup Yokohama
concrete5 の魅力 @ Cloud Garage Meetup Yokohama
 
AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話AWS + CloudFront で行った concrete5 高速化のお話
AWS + CloudFront で行った concrete5 高速化のお話
 
VPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいことVPS・専用・クラウドサーバを使う時に知っておきたいこと
VPS・専用・クラウドサーバを使う時に知っておきたいこと
 
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
concrete5 基本講座 - ページタイプ・ページテンプレート・コンポーザー - コンなご勉強会 第69回
 
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
Translation Day 2 日本語訳 - WordBench Nagoya 2016年11月
 
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
Companies, Stages and 事例紹介 - Mautic Meetup Nagoya #8 (2016年11月7日)
 
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道CMS の今後と IoT 〜 concrete5 などの CMS が進む道
CMS の今後と IoT 〜 concrete5 などの CMS が進む道
 
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
時代は SNS 連携! WordPress サイトの SNS 連携、AMP & Instant Article 対策体験記 - WordFes Nagoy...
 
Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4 Contact は奥が深い - Mautic Meetup Nagoya #4
Contact は奥が深い - Mautic Meetup Nagoya #4
 
concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)concrete5 のリモート開発 (愛知県岩倉市から)
concrete5 のリモート開発 (愛知県岩倉市から)
 
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
concrete5.7.x 対応 カスタムテンプレートを極める - 第58回 コンなご勉強会
 
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
はじめての concrete5 (2016年1月) 第56回 コンなご勉強会
 
オープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015Bオープンソースでビジネスをして1年経って - NGK2015B
オープンソースでビジネスをして1年経って - NGK2015B
 
The Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site MultilingualThe Best Practices of Making WordPress Site Multilingual
The Best Practices of Making WordPress Site Multilingual
 

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

  • 1. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 第7回 Web 動画 編集講座 編集して Web にアップしてみよう 2016/10/1 (土) NAMO @ ベースキャンプ名古屋 http://namo758.com 1
  • 2. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう お知らせ 2
  • 3. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 祝 公式サイト http://namo758.com 3
  • 4. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう connpass に移行します http://namo.connpass.com/ 次回告知を行うので メンバーになったください 4
  • 5. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 自己紹介 Katz Ueno コンクリートファイブジャパン株式会社 Chief Communications Officer TW: @katzueno Blog: http://katzueno.com 5
  • 6. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 自己紹介 ● 1999年〜2007年 アメリカに居ました ● インディーズで映画作ってました ● Amazon Prime で過去の遺産が・・・ ● 今まで、ラブコメ、ホラー サーフィンドキュメンタリー いろんな映画を作ってきました 6
  • 7. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう コンなご concrete5 名古屋 ユーザーグループ 7 http://concrete5nagoya.doorkeeper.jp
  • 8. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Mautic Meetup Nagoya 8 http://meetup.com/Mautic-Meetup-Nagoya/ オープンソース・マーケティングオートメーション 勉強会!
  • 9. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう WCAN 2016 Autumn Katz が Web 動画を!! http://wcan.jp/ 9
  • 10. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 本日のアジェンダ ● 10分:NAMO について (復習) ● 30分:編集の基本 ● 150分:ワークショップ ○ 15分:説明&チーム分け ○ 75分:編集しよう ○ 15分:キャプチャー ○ 45分:レビュー 10
  • 11. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 11
  • 12. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう NAgoya Movie Obenkyokai 名古屋で Web 動画を勉強する会 12
  • 13. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画とは? 13
  • 14. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 とは? ● Katz が勝手に考える Web 動画の定義 14
  • 15. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 とは? ● YouTube? ● ニコニコ? ● Ustream? ● Facebook 15
  • 16. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 とは? ● YouTube? ● ニコニコ? ● Ustream? ● Facebook 16
  • 17. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 1. Web ページの素材 ○ YouTube・ニコ動・Ustream との違い ■ ウェブページはあくまでもフレーム ■ 映像単体がコンテンツ ■ 例:ニコニコ動画にYouTube動画を転載してもコンテ ンツとして成立 17
  • 18. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 1. Web ページの素材 ○ YouTube・ニコ動・Ustream との違い ■ ウェブページはあくまでもフレーム ■ 映像単体がコンテンツ ■ 例:ニコニコ動画にYouTube動画を転載してもコンテ ンツとして成立 ○ Web動画はそのサイトでしか成立しない 18
  • 19. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 2. スペースの節約 19
  • 20. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 2. スペースの節約 ○ 写真だと複数枚必要 ○ 動画だと一個でOK ○ というか、画面いっぱい使える 20
  • 21. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 3. 表現・説得力UP 21
  • 22. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画の特徴 ● 3. 表現・説得力UP ○ 動きがある! ■ 動作がわかる ■ 感情を伝えられる ※ 音声は、ちょっと別の話 22
  • 23. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 素材 + 動き + 感情 23
  • 24. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 素材 + 動き + 感情 売上UP 24
  • 25. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今? Web 動画 25
  • 26. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今 Web 動画? やっと、技術が追いついてきた 26
  • 27. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今 Web 動画? やっと、技術が追いついてきた 27
  • 28. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今 Web 動画? 28 ● カメラ ○ iPhone ○ 一眼レフカメラ = プロ並みの画質。しかもWebの人持ってる ● ソフトウエア ○ スマホアプリ ○ iMovie ○ Adobe CC -> Adobe Premiere (プロ用ソフト!)
  • 29. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今 Web 動画? 29 ● HTML5 ○ Flash の縛り ○ <video> タグ = 自由度UP ○ 例:デジタルサイネージ
  • 30. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう なぜ今 Web 動画? 30 ● HTML5 ○ <video> タグ = 自由度UP ○ 動画は 4:3 or 16:9 である必要がない
  • 31. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 31
  • 32. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 やっと「今でしょ!」 32 ガッテンしていただけましたか〜?( ̄ー ̄)ニヤリ
  • 33. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ただし! 作り方を覚えないとダメ! 33
  • 34. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 悪い Web 動画の例 ● 長い ● 映像がブレてる ● 音声が要る ● 動きがない ● 感情が伝わらない 34
  • 35. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう = NAMO 35
  • 36. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう = NAMO ちゃんと Web 動画を作るための勉強会 36
  • 37. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう = NAMO ちゃんと Web 動画を作るための勉強会 よろしくお願い致します! http://namo.doorkeeper.jp 37
  • 38. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 夏目さん 「編集の基本」 c/wt.fabrics. http://www.slideshare.net/cwtfabrics/15-10-03nano3 こちらのスライドをご覧ください 38
  • 39. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 夏目さん ありがとうございました 39
  • 40. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 動画を Web に掲載 どうやってウェブに掲載するか 40
  • 41. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ まず、そもそも動画をどこに保存? ● 動画ファイルをサーバーにUP ● YouTube や Vimeo などにアップロードし 埋め込みだけで可能か 41
  • 42. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ まず、そもそも動画をどこに保存? ● 動画ファイルをサーバーにUP ● YouTube や Vimeo などにアップロードし 埋め込みだけで可能か 42 今日はこちらを中心に解説
  • 43. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ まず、そもそも動画をどこに保存? ● 動画ファイルをサーバーにUP ○ 利点・欠点 ■ YouTube や Vimeo の制限に囚われたくない ■ サイズを自由に決めたい ■ 自分でビデオをエンコードできる ■ プレイヤーが要らない or カスタマイズしたい 43
  • 44. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ まず、そもそも動画をどこに保存? ● 動画ファイルをサーバーにUP ○ 気をつけないといけないこと ■ サーバーが動画ファイルをサポートしているか ■ サポートしなくても .htaccess で設定を加えれば追 加可能か ■ データ転送量に上限がある場合は注意 44
  • 45. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ .htaccess で動画ファイルをUPできるよう にする方法 .htaccess サンプルコード AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm 45 レンタルサーバーによっては設定済み or 設定できない場合があります。 できなければ、ダメ元でサポートにメールや電話をして聞いてみてお願いしてもらいましょう 対応をお願いするのはタダです!
  • 46. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に動画を掲載 ■ まず、そもそも動画をどこに保存? ● YouTube や Vimeo などにアップロード ○ エンコードの必要なし ○ 簡単 ○ プレイヤーやブラウザ判定を勝手にしてくれる ○ WordPress でデフォルトで対応していたりプラグインが 豊富にある 46
  • 47. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 動画形式の基礎知識 ● Web で使える動画 HTML5で主にサポートしている動画形式は下記の3つ 47 mp4 Apple が開発したMPEG-4動画。H.264エンコーディングが主。IE8 を含めて多くのブラウザで使える ogv オープンソースの動画形式。Theoraエンコーディングが主。 webm Google が開発した動画形式。IE9+, Chrome, Firefox 4+ でサポー ト
  • 48. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 動画形式の基礎知識 ● 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
  • 49. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 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. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう video タグの基本 ● HTML5 ビデオタグはこんなに便利 50 <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> 「autoplay loop」にすると自動ループ再生に 「control」はブラウザのコントロールが開く 「muted」は音声ミュート
  • 51. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう video タグの基本 ● HTML5 ビデオタグはこんなに便利 51 <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> ビデオの素材ファイルを読み込むところ。
  • 52. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう video タグの基本 ● HTML5 ビデオタグはこんなに便利 52 <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>videoタグをサポートしていない古いブラウザが表示する 部分。ここでは画像を読み込んでいるが普通のテキスト などでもOK
  • 53. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Webに掲載してみよう 53
  • 54. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web に掲載:注意点 ● ビデオをページに埋め込んでみる ● 埋め込んでから確認 ○ 埋め込みが多すぎないか ○ ページロードが遅くなってないか ○ 動きが派手すぎないか ○ めまいがしないか ○ そもそも、本当に動画の必要があるか 54
  • 55. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう すいません。休憩の前に 55
  • 56. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 編集講座 ワークショップ 56
  • 57. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 編集講座 ● 自己紹介 ● チーム分け ● お題 ● 休憩&ネタ考える ( ̄ー ̄)ニヤリ ● ワークショップスタート ● 編集披露 57
  • 58. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 撮影講座 ● 自己紹介 58
  • 59. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう Web 動画 撮影講座 ● チーム分け 59
  • 60. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● チーム分け 3人一組 60 Web 動画 撮影講座
  • 61. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● お題 61 Web 動画 撮影講座
  • 62. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● お題 62 Web 動画 撮影講座
  • 63. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● お題 63 Web 動画 撮影講座
  • 64. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● お題 「苔玉ウェブサイトを作ろう」 64 Web 動画 撮影講座
  • 65. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう 65 Web 動画 撮影講座
  • 66. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 今まで撮影した素材を元に Web に載せるビデオを編集 しよう 66 Web 動画 撮影講座
  • 67. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 条件: ■ 複数回シリーズの3回目 ■ 前回撮影した素材を使います ■ 映像を編集します ■ Web 用に出力します ■ Web にアップロードします ■ 音は無視(また違う次元の話になるので) 67 Web 動画 撮影講座
  • 68. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ クライアント:安井先生からの説明 リンク 68 Web 動画 撮影講座
  • 69. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 何を編集? ■ 苔玉のメンテナンス・剪定・トップページ 69 Web 動画 撮影講座
  • 70. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 主旨: ナツメさんの実際の編集の基本を実践しよう ( ̄ー ̄)ニヤリ 70 Web 動画 撮影講座
  • 71. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 素材 ■ 本当は、自分でショットリストや脚本を作るべきだけ ど、まずはこちらでつくりました。 ■ 前回で撮影した素材を使用 ■ 編集して Web サイトに掲載しよう 71 Web 動画 撮影講座
  • 72. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう ● 苔玉ウェブサイトを作ろう ○ 素材・編集リストは Google Docs に https://docs.google.com/document/d/1rSUwyiWVvxlz D22yqUwcK8CJKIvtDh99JhOWE2NGtJU/edit?usp= sharing (本日参加者は Doorkeeper よりメールを送ります) 72 Web 動画 撮影講座
  • 73. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう 本日のアジェンダ ● 15分:Web 動画とは ● 40分:映像制作の基本 ● 120分:ワークショップ ○ ~15:00 - 15分:企画 ○ ~16:00 - 60分:撮影 & アップロード ○ ~16:30 - 30分:キャプチャ ○ ~17:00 - 30分:レビュー 73
  • 74. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう さあ実践! ● ワークショップスケジュール ○ ~14:45 - 15分:プラン ○ ~15:30 - 45分:撮影 & アップロード ○ ~16:00 - 30分:Web アップロード ○ ~17:00 - 60分:レビュー 74
  • 75. 2016.10.1 (土) 第7回 Web 動画 編集講座 〜 Web サイトに掲載してみよう お疲れ様でした! 次回は「企画 講座」 http://namo.doorkeeper.jp 75