はじめに
はじめまして、メンバーズルーツカンパニーのデザイナー豊田です。
メンバーズルーツでは、Webサイト制作の現場業務の内製化に注力しており、現在、ノーコードツールである「Studio」を活用したWebサイトの開発支援を行っております。
今回は、2025年5月にリリースされたStudioの新機能「動画アップロード」をご紹介します。
待望の機能ですね！動画を自由に配置できるので、デザインの幅が広がります。
それでは、動画アップロード機能について見ていきましょう！
機能について
この機能では、最大1GBまでのmp4やwebm形式の動画をページ上に配置できます。
従来は、YouTubeやVimeoなどの動画をembedボックスを使って埋め込む仕様でしたが、今回のリリースにより、画像と同様に自由にアップロードして配置できるようになりました。
※外部サーバーにアップロードされた動画（YouTubeやVimeoなど）を埋め込む場合は、引き続きembedボックスをご使用ください。
操作方法
1.動画の準備
最初に、アップロードしたい動画ファイルを準備します。
2.動画ボックスの追加
Studioを開き、エディタ内の画面左メニューから[追加]＞[ボックス]＞[Video]を選択するか、ページに[Video]をドラッグ＆ドロップします。
3.動画の追加
画面左メニューから[追加]＞[アップロード]を選択し、[＋]ボタンをクリックして準備した動画ファイルをアップロードします。
4.動画のアップロード
動画ブロックを選択すると、アップロードのオプションが表示されるので、「ファイルを選択」ボタンをクリックし、準備した動画ファイルをアップロードします。
4.表示・再生設定
画面右側のメニューで動画の表示や各種再生設定が可能です。右メニューから[ボックス]タブを開き、各設定を行います。
設定項目 | 内容 |
|---|---|
ビデオ | 動画の最初のフレーム画像とURLが表示されます。動画を差し替える際は、イメージをクリックすると他のアップロードした動画に差し替え可能です。 |
ポスター画像 | 動画再生前のプレビュー画像や、動画が読み込めない場合に表示される画像を設定できます。初期設定では、動画の最初のフレームが使用されます。 |
動画の配置 | 動画をトリミングして表示することができます。 |
プレイヤーを表示 | プレイヤーの表示・非表示を切り替えることができます。 |
自動再生 | 動画が自動的に再生されます。 |
ミュート | 動画に音声がある場合、デフォルトで音声が無音になります。 |
ループ再生 | 動画が自動的に繰り返し再生（ループ再生）されます。 |
インライン再生 | モバイル環境で動画がフルスクリーンにならず、ページ内でそのまま再生されます。 |
PiPを無効 | PiP機能が利用できなくなります。 ※PiP機能とは、他のアプリや画面を開きながら小さなウィンドウで動画や画像を再生する機能です。 |
クリックで再生 | 動画をクリックしたときのみ、動画が再生されます。 |
補足：再生・停止ボタン付きの動画ボックスを配置したい場合は、エディタ内の左メニューから[追加] ＞ [ボックス] ＞ [Video with Button]を選んでください。
こちらで動画アップロード、各設定は完了です！
動画サイズの設定などは、写真と同様にボックスサイズを変更して配置してみてください。
活用イメージ
ここまでは、機能の概要と操作方法についてご紹介しました。
続いては、この機能をどのように活用できるか、具体的なイメージをご紹介します。
1. 採用サイトでの雰囲気訴求
社員の働く様子やインタビュー映像、オフィスの内装などを動画で紹介することで、企業カルチャーや職場の雰囲気を直感的に伝えることができます。
静止画では伝えきれない空気感を届けたいときに、特に効果的です。
2. サービス紹介ページでの利用シーン可視化
商品やサービスの使い方、操作手順などを短い動画で紹介することで、ユーザーの理解をよりスムーズに促すことができます。
静止画に比べて情報量が多く、動きのある説明により、利便性や魅力をより効果的に伝えることができます。
3. トップページで世界観を演出
ブランドイメージを強く印象づけたい場合は、トップページのファーストビューに背景動画を配置するのもおすすめです。
抽象的なイメージ映像や風景などを使うことで、ブランドの世界観やコンセプトを伝える演出が可能です。
さいごに
以上、Studioの新機能「動画アップロード」をご紹介しました。いかがでしたでしょうか？
動画は、短時間で世界観や雰囲気を視覚的に伝えることができ、ブランドイメージの訴求や採用サイトの社員の声、働く様子を紹介する際に最適です。
企業やブランドのメッセージを効果的に届ける手段として使用され、トレンドの1つです。
ぜひ、Studioの新機能を活用してウェブサイトを作成してみてくださいね。
メンバーズルーツは、ノーコード・ヘッドレスCMSで
企業の業務デジタルマーケティング業務を支援する制作会社です
この記事が役に立ったと思ったら、
ぜひ「いいね」とシェアをお願いします！
