Camera Roll to Vlog
初心者向けの動画編集の解説Webサイト
- 長友ひより Nagatomo Hiyori
- Keywords：Web, 動画編集, 解説
- https://hiyo1026.github.io/camera_roll_to_vlog（制作途中）
概要
背景と目的
Vlogが流行っているため、誰でも気軽に、動画という形で思い出を残せるようにしたい。
初心者向けの動画編集の解説は既に世に溢れていて、どれを参考にすればいいか迷いがちなので、これだけ見ればOKというものを学生目線で制作したい。
動画では自分のペースで作業しづらいため、あまり前例のない文字ベースで解説したい。
背景：Vlogが身近になっている
目的：初めてのVlog作りを促進する
成果物の仕様
形式：Webサイト
制作ツール
- VSCode（HTML/CSS/JavaScript）
- Adobe Illustrator
- Adobe Premiere Pro
進捗記録
2026.05.28
振り返り
- サイトマップ(階層構造)やワイヤーフレームについて知れた
- 昨今話題のAIを活用できた
- 企画段階からなかなか進めず、内容が間に合わなかった
- より効率の良いやり方を見つけたい
今後について
振り返りを記入する- 内容を完成させる
- サイト制作者の説明も載せる
AIを使った制作についてまとめる
スケジュール
0413 初回
0420
0427
0504 休み
0511 相互評価
0518
0525
0528 成果報告 ←イマココ
進捗
- AIを使った制作について
2026.05.25
Done
- 完成イメージ
https://youtube.com/shorts/BHhuBzV3viU - Vlogの制作風景の撮影（一時的に非公開にしています）
https://youtu.be/xw47w444r7Q - サイトマップ/ワイヤーフレーム
- キービジュアル/ロゴ
- デザインコンセプトの決定
- ロゴ：#282828，#f4f4f4
- ロゴ：#282828，#f4f4f4
メモ
- WIXからHTML/CSSに変更した
- AIを使ってコードを書いた
- 企画をまとめる（自分）
- サイトマップや画面構成をまとめる（Gemini）
- プロンプトを作る（ChatGPT）
- コードを書く（Claude）
- 修正/ブラッシュアップ（ChatGPT）
- 進行スピードに対して不安にならないように、サイト画面のスクロールに応じて進捗が%で表示されるようにした
- レスポンシブにした
- 学科サイトを参考に、右側にサイドバーを設けた
⇓
スケジュール
0413 初回
0420
0427
0504 休み
0511 相互評価
0518
0525 ←イマココ
0528 成果報告
2026.05.18
企画
「Camera Roll to Vlog - 写真フォルダからはじめる動画編集」
- 概要
- Vlog（short動画）の作り方
- Adobe Premiere Proの使い方
- コンセプト
- 初めてでも簡単に"いい感じ"のVlogが作れる
- 課題
- 動画では見ながらの作業がしづらい
- →自分のペースで学べる、文字ベースの解説にする
- 全体の進捗状況がわからず心が折れそうになる
- →どの段階まで進んでいるのか定期的に表示する
- 文字や画像だけではわかりづらい
- →適宜動画も挿入して説明する
- 初めてで何を準備すればいいかわからない
- →編集環境の設定や、素材撮りのポイントから紹介する
- そもそもPCに慣れていない
- →ショートカットも丁寧に記載する
- 他の解説動画などとの差別化
- →プレミアを使ってみたいという人をターゲットにする、自由度の高さを活かせる説明にする
- ターゲット
- いま写真フォルダに入ってる素材を使って、思い出をまとめてみたいと思っている人
- 初めてプレミアプロを触ってみたいと思っている人
- ペルソナ（仮）
黒木 葵 Kuroki Aoi
- 19歳、大学1年生、女性
- 宮崎県在住
- 自然が好き
- スマホでよく写真を撮る
- たまに旅行をする
- 行き当たりばったり
- ※画像はGeminiで生成
⇓
入れたい内容
- トップページ
- 概要
- 用意するもの
- 事前準備
- 素材を整える
- 手を加える
- 最終調整
- 書き出し・投稿等
- ショートカット一覧
- その他備考・補足
⇓
ToDo
- キービジュアル/ロゴ
- Vlogの制作風景の記録
- サイトマップ/ワイヤーフレーム
- デザインコンセプトの決定
⇓
スケジュール
0413 初回
0420
0427
0504 休み
0511 相互評価
0518 ←イマココ
0525
メモ
- 意気込んでVlogを作るというより、現時点で写真フォルダに入っている素材を使って、せっかくだから動画として思い出をまとめてみませんか？というノリ
- できたら次週に、これで十分理解できるか？のアンケートをとる
- 学科サイトと同じ形が使いやすい？右にサイドバーなど
2026.05.11
好評だった点
- 用意するものから書き出しまで項目があるのが、初心者に優しくて良い
- 文字ベースで、事前準備から知ることができるのは便利
見出された問題点
- 文字ばかりにならないように、写真も使うと良い
- ショートカットキーの一覧もあると良い
- 編集した動画の見本を掲載すると良い
感想から受けた印象
- 簡単な動画編集ならしたことあるという方も一定数いらっしゃった
- 完全初心者の方が多い
⇓
方針について
- 初めてプレミアを使う人向け
- Vlog/short動画(縦)の作り方
⇓
スケジュール
0413 初回
0420
0427
0504 休み
0511 相互評価 ←イマココ
0518
0525
2026.04.27
成果物の仕様・プロトタイプ
- サイトマップ、ワイヤーフレーム
- 作業画面（WIX STUDIO）
企画まとめ
- 形式
- Webサイト→自分のペースで学べる文字ベース
- 題材とする編集ソフト
- Premiere Pro
- 制作ツール
- WIX STUDIO
- Figma
- Adobe Illustrator
- Adobe Premiere Pro
- 伝えたい内容
- 全体の流れ
- どのくらい時間がかかるか
- 元素材の調達
- 自分で撮る
- フリー素材を探す
- ターゲット
- 動画編集を副業にしたい人
⇓
スケジュール
0413 初回
0420
0427
0504 休み ←イマココ
0511
0518
0525 1Q終わり
2026.04.20
テーマの決定
動画編集マニュアル
- 自分の編集スキルのポートフォリオを作りたい
- 実際にネットに上げて、成果物にしたい
⇓
現状調査（先行事例等）
- 動画編集の解説動画
- https://www.youtube.com/watch?v=4Up669PRU2M（30分、パート1）
- https://www.youtube.com/watch?v=Z3NSPOQ1jd4（50分、1本完結）
- https://www.youtube.com/watch?v=ZV_RlKLlkTs（120分、1本完結）
- https://www.youtube.com/watch?v=SuO6qzEX-R0（70分、1本完結）
- https://jp.cyberlink.com/blog/youtube/101/how_to_edit_youtube_video（概要のみ）
- https://www.kaikatsu.jp/column/030747.html（YouTube Studioでのやり方）
- ※サイトでの解説はあまり見つからなかった
解決すべき課題（ToDoリスト）
- 内容を決める
- 尺を決める
- 形式を決める
- 制作ツールを決める
- 構成を考える
- タイトルを考える
- 初心者は何が知りたい？わからない？
- 元素材の調達はどうする？
- ターゲットを明確にする（ペルソナ設定）
- 題材とする編集アプリ/ソフトの選定
制作上のアイデア（課題ごとに複数のアイデア）
- 内容を決める
- 切り抜き縦動画→もっとも身近
- 一般的な横動画→仕事の色が強い
- いろんな事例を混ぜ込む→時間かかる
- 尺を決める
- 長すぎると手をつけるのが億劫になりそう
- 数分のものをシリーズ化した方が取り掛かりやすそう
- 数年前は10分以内のものが流行り、20分以上は長めというイメージがあった
- 今の時代は長尺動画も流行ってる？
- 形式を決める
- 動画なら一緒に手を動かせる、尺は長くなりがち
- 文字なら自分のペースで学べる、分かりやすくするのが難しそう
- 制作ツールを決める
- Premiere Pro→動画作るならこれ
- After Effects→余裕があればアニメーション入れてクオリティ上げる
- Photoshop→慣れてないからプレミアでサムネ作ってもいいかも
- WIX STUDIO→自由度が高い
- Googleサイト→簡単
- note→最近の流行り？
- Qiita, Zenn→向いてない
- HTML&CSS→一から勉強しないといけない、鯖確保が難しそう
- 構成を考える
- 前置きが長いとブラウザバックされそう
- ターゲットに自分に合っているか分かる前置きはあった方がいい？
- いつ書いたものなのか明記しておくべき(アプリは日々アップデートされるため)
- タイトルを考える
- 周りとの差別化が大切
- クリックしてもらえるタイトルはどんなもの？
- 初心者は何が知りたい？わからない？
- 全体の流れ
- それぞれのツールの場所
- どのくらい時間がかかるか
- 元素材の調達はどうする？
- 自分で撮る
- フリー素材を探す
- ターゲットを明確にする
- 副業にしたい人
- 推しの切り抜きを作りたい人
- ボランティアで軽く動画作りたい人
- 題材とする編集アプリ/ソフトの選定
- Premiere Pro→仕事なら大体これなはず
- CapCut→切り抜き作るだけならこれ使う人が多いかも
⇓
スケジュール
0413 初回
0420 ←イマココ
0427
0504 休み
0511
0518
0525 1Q終わり
2026.04.13
アイデア案
- 動画編集ガイドの制作（premiere pro）
- 自己紹介（短大でやっていたこと紹介）
- 車椅子だと不便なところマップ
- 選挙に行こう！ポスター
- 新大学生向けNotionガイド（主に授業管理について）
- 一緒にメイクを始めよう
- 結局…就活ナニスル！？
- 推し活のヘアメについてまとめる
- おすすめおさけ
- お洒落なvlogの作り方
- AIを使ってみよう
- 就活の第一歩！業界研究について
- SPIの問題を解いてみよう
- 私のブックマーク紹介
- アプリを作ってみたい
- スキンケアやヘアケアなどについてまとめる
- 自己分析をしてみよう
- 推し紹介
- NPO法人ブラストビートの紹介
- 飼い犬の紹介
- ゲームの作り方を調べる
- 小学生の時に自由帳で作っていたゲームの再現
- 高１妹のための数学解説
- 垢抜けロールモデルの探し方
- SNSとの良い付き合い方
- プロジェクトの立ち上げから進行のやり方
- 好きな曲について語るだけ
- 自分の中にある哲学を書き出してまとめてみる
- 副業の始め方
- 強震モニタを見てみよう
- 地震対策や地震の歴史のまとめ
- 「プール後更衣室症候群」の紹介
- 計画を立てるのが苦手な人へ
- タイトルの付け方
- ロゴの作り方
- 車椅子の人との街の歩き方（覚えておくべきことまとめ）
やってみたいことの書き殴り
- BGM作ってみたい
- 映像作りたい
- グラフィックデザイン
- HTMLでサイト作ってみたい
- AIを使ってプログラム書いてみたい
- イラストを描きたい
- PV作ってみたい
- 情報をSNS（Instagram、Xなど）にまとめてみたい
⇓
テーマ候補
- 動画編集ガイド（Vlogを作ってみよう）
- 自己紹介（短大でやっていたこと紹介）
- Claudeの使い方まとめ（タスク管理をもっとラクに）
成果物の仕様
- PDF冊子 or Googleサイト or Figmaプロトタイプ
- （映像）
この演習を通して身につけたいスキル
- デザインスキルの向上
image_0528.png
main_image.jpg
logo.png
site_map.png
wire_frame.png
persona_by_gemini.jpg
image_0510.png
image_0511.png
