はじめに
本書の目的
本書は「ホームページに動画を使いたい」「動画で魅力を伝えたい」と考える方向けのガイドです。スマートフォンで撮影した動画の活用法や、サイトに埋め込む手順、背景動画の使い方、ホームページの作り方まで順を追って分かりやすく説明します。
読者対象
個人事業主、小規模店舗のオーナー、広報担当、または初めてホームページを作る方を想定しています。専門的な知識がなくても進められる内容にしてあります。
本書の構成と使い方
全5章で構成し、基本から実践まで段階的に学べます。まずは第2章で手軽に作れる動画のポイントを押さし、第3章以降で埋め込みやレイアウト、背景動画の活用法を学びます。各章は実例中心で、すぐに試せる手順を載せています。
注意点
動画は容量や再生の速度に影響します。閲覧者の環境を考えて軽量化や代替表示も検討してください。
スマートフォンで簡単作成した動画で魅力あふれるホームページ
はじめに
スマートフォンで撮った短い動画は、ホームページをぐっと魅力的にします。準備と工夫で、手軽に見栄えの良い動画を作れます。
1. 作成前の準備と計画
目的（商品紹介・店舗案内・スタッフ紹介）を決め、尺は15〜60秒を目安にします。縦向きはSNS向け、横向きはPC表示向けと使い分けます。シンプルな台本やショットリストを用意し、明るい場所で撮影します。
2. 無料編集アプリの活用
iMovie（iPhone）、CapCut、VNなどの無料アプリでトリミング、色調整、テロップ挿入ができます。BGMは著作権フリーの素材を使い、音量バランスを整えます。
3. 動画フォーマットの推奨
MP4（H.264）を基本にします。解像度は1080pまたは720p、再生負荷を下げるため画質とファイルサイズのバランスを調整します。サムネイル（poster）も用意しましょう。
4. アップロード方法
自サーバーに置くと制御しやすく、外部サービス（YouTube/Vimeo）を使うと配信負荷が軽くなります。埋め込みコードかHTML5のvideoタグで表示します。
5. レスポンシブ対応
動画は幅100%で表示し、スマホとPCで見やすい比率を用意します。自動再生はミュート推奨、キャプションや代替テキストも用意します。
6. 最終チェックと公開
読み込み速度、音声、字幕表示、表示崩れをスマホとPCで確認して公開します。
7. 著作権とコンプライアンス
音楽や素材は必ず利用許諾を確認し、人物が映る場合は同意を取ります。個人情報には十分注意してください。
ホームページに動画を埋め込む方法とメリット・作り方のコツ
埋め込み方法（手軽な手順）
- YouTubeやVimeoの動画ページで「共有」→「埋め込みコード」をコピーします。
- HTMLの表示したい場所にそのiframeを貼り付けます。
- レスポンシブにするなら、親要素に幅100%・高さ自動のCSSを指定します（例: .video-wrap {position:relative;padding-top:56.25%} iframe{position:absolute;top:0;left:0;width:100%;height:100%}）。
メリット・デメリット
- メリット: 簡単で帯域や配信は動画サービス側が担います。埋め込みだけで再生や字幕などの機能が使えます。
- デメリット: ページ読み込みが遅くなる場合があり、外部サービスの広告やトラッキングが入ることがあります。また利用規約や公開設定に注意が必要です。
動画を作るコツ
- 長さは短め（30～90秒推奨）。冒頭5秒で注目を引く構成にします。
- サムネイル（poster）を用意して、クリック誘導を明確にします。
- 音声なしでも伝わるようにテキストや字幕を入れてください。
- ファイルでホスティングする場合はmp4（H.264）とwebmを用意し、圧縮して読み込みを軽くします。
実用的な注意点
- 自動再生する場合はミュートが必要です。読み込み遅延にはlazy loadingを使ってください。
- プライバシーや利用規約は事前に確認しましょう。
背景に動画を使ったWebサイトの作り方
1. まずは素材を決める
背景動画は雰囲気作りが目的です。素材は次の4つから選べます。
– 自撮影：個性が出せます。短いループを想定して撮影してください。
– プロ撮影依頼：品質重視なら依頼がおすすめです。
– 有料素材：安定した品質で商用利用しやすいです。
– 無料素材：コストを抑えたいときに便利です。
撮影時は手ブレを抑え、明るさを均一にすると背景として使いやすくなります。
2. HTML5での基本実装
シンプルな例：
ポイント：多くのブラウザで自動再生するにはmutedが必要です。playsinlineはモバイルで画面全体再生を防ぎます。
3. 見栄えとパフォーマンスのコツ
- ファイルは短く圧縮し、解像度は背景領域に合わせる。
- object-fit: coverで切り取りつつ画面にフィットさせる。
- テキストは暗めのオーバーレイで読みやすくする。
- フォールバック画像（poster）を必ず用意する。
4. アクセシビリティと注意点
背景動画は装飾扱いにし、aria-hidden=”true”を付けるか、重要情報をテキストで補ってください。音はオフが原則です。モバイル通信や読み込み時間に配慮して、遅延読み込みやサイズ制限を行ってください。
ホームページの3つの作り方と具体的な手順
以下では、初心者向けに代表的な3つの作り方と、すぐに実行できる具体的な手順をわかりやすく説明します。
1) ノーコード／サイト作成サービス（Wix、Squarespace、ペライチなど）
ステップ:
1. 目的を決める（名刺代わり、商品紹介、ブログなど）
2. サービスを選ぶ（無料プランと有料プランの違いを確認）
3. テンプレートを選び、スマホ表示を確認
4. 文章と写真を入れてページを作成
5. 独自ドメインを設定して公開
メリット: 操作が簡単で短時間に公開できます。デメリット: カスタマイズ制限がある場合があります。
2) CMS（WordPressなど）
ステップ:
1. ドメインとレンタルサーバーを契約
2. WordPressをインストール（自動インストール機能を使うと楽です）
3. テーマ（見た目）を選んで有効化
4. プラグインで機能を追加（バックアップ、SEO、フォームなど）
5. 固定ページと投稿を作り、試験公開
メリット: 拡張性が高く運用しやすいです。初心者でも手順を追えば対応できます。
3) 手作り（HTML/CSS/JS）または静的サイトジェネレーター（Jekyll、Hugo）
ステップ:
1. ページ構成を設計（トップ、サービス、問い合わせなど）
2. テンプレートを作るか、既存テーマを利用
3. ローカルで表示を確認（ブラウザでチェック）
4. GitHub PagesやNetlifyで公開
メリット: 表示速度が速く、細かい制御ができます。技術の学習が必要です。
共通の注意点:
– 写真は著作権に注意して用意する
– スマホ対応（レスポンシブ）を必ず確認する
– 定期的にバックアップを取り、情報を更新する
目的や技術の習熟度で方法を選ぶと、効率よく良いホームページが作れます。
