メインビジュアルに動画を設定する

TOPページのメインビジュアルに動画を設定し、訪問者にさらに印象的なお買い物体験を提供しましょう。

動画はメイン画像と同じように画面いっぱいに広がり、トップページで自動再生され、キャッチコピーなどの背景動画のように表示されます。サイトの閲覧者から「再生」「停止」といった操作はできません。スマートフォン縦表示では画面を覆うように表示するため、動画の左右は見切れるようにレスポンシブ表示されます。

そのため、動画は観賞目的ではなく、ビジュアルイメージとしての表現で、短い長さで繰り返し再生する、専用の動画素材を用意するということを前提とします。

1. 動画機能をオンにする

テーマ設定の「【TOPメイン動画】動画ON/OFF」をONにします。このスイッチがOFFの時は「【TOPメイン画像】1枚目」が有効になり、ONにすると画像は無効化され、動画を読み込むモードになります。

動画だけ利用する場合でも、『【TOPメイン画像】1枚目』には何らかの画像が設定されている必要があります。

2. 動画を指定する

BASEは動画サービスではないので、BASE上に動画ファイルをアップロードすることはできません。次のいずれかの方法で動画をインターネット上にアップロードします。

1. Vimeo

Vimeoの場合は動画をアップロードされた際に付与される数字のIDを入力してください。
https://vimeo.com/000000000

Vimeoはクリエイティブな映像を中心としたプラットフォームです。YouTubeのような雑多なSNS的要素が少ないため、ショップ用の動画を置くだけという使い方に向いています。 一般企業サイトなどで自動再生されるイメージ動画では、Vimeoを利用している場合がとても多いです。
Vimeoは無料アカウントで利用できますが、無料アカウントでは動画にコントローラーが表示されるでしょう。Plus以上の有料アカウントがおすすめです。（Plusは月額￥700、有料ではありますが、もっともおすすめです。もしすでにPlusアカウントを利用されていれば、迷わずVimeoを利用してください。）

Vimeoの利用方法はVimeoによって決められるため、アカウントの種類によって何ができるかはその都度確認してください。

2. YouTube

YouTubeの場合は動画のURLにある動画IDを入力してください。
https://www.youtube.com/watch?v=XXXXXXXXXX

サイト上で利用するだけの動画の場合、一般公開ではなく、URLを知っている人だけ閲覧できるようにする設定がありますので、それを利用しても良いでしょう。

YouTubeの利用方法はYouTubeによって決められるため、アカウントの種類によって何ができるかはその都度確認してください。

3. 自前サーバー

もし自前でストリーミングサーバーがある場合は動画のmp4ファイルのURLを入力します。
https://xxxxxx.xxx/xx/xxxxx.mp4

動画サイトの制約、決まり、仕様変更、トラブルに影響を受けませんが、ホスティングサーバの転送量などの確認が必要です。ストリーミングサーバーではなくWEBサーバーの場合は再生開始が著しく遅くなる可能性があります。現状では動画形式を複数設定する仕様にはなっていないため、mp4を利用してください。

動画ファイルへのURLはhttpsから始まるSSL通信である必要があります。

次に、Vimeoの動画ID、YouTubeの動画ID、動画URLのいずれか1つを入力します。複数を読み込ませると、見えないところで大量のデータ通信が発生してしまう可能性があるため、1つだけ入力された状態でしか読み込まないようになっています。

プレビューでうまく動画が再生されるか確認します。

もし動画が読み込まれない場合、Vimeo/YouTube/URLのどれか1つだけに入力しているか確認してください。また動画の読み込みが遅い場合、ご自身のインターネット環境が遅いのか、動画自体が重すぎるのか、などいくつかの理由を想定して見ましょう。

注意点

フルスクリーンで表示するため、動画はフルHD（1920x1080）推奨としています。

Wifi環境だけでなく、モバイル回線でもチェックしてみましょう。読み込みが遅い場合、動画が重すぎるのかもしれません。

YouTubeなどでは再生画質はリアルタイムで自動的に最適化されます。画質が悪くなっていても、テーマの設定などで画質を指定することはできません。

閲覧者の端末設定などによって再生されない場合

動画はデータ量も多いため、閲覧者の端末設定などによって再生されない場合があります。

例えばモバイル端末の設定で「アクセシビリティ」に関してビデオの自動再生をオフにしている場合、閲覧者の端末で「低電力モード」がオンになっている場合などは自動再生されないブラウザもあります。MacのSafariでも電源状況によっては再生されない場合があるようです。これらの条件は常に変わっている（利用者を第１に考えて改善され続けている）こと、iOS/Android問わず利用者の環境は様々であることなどから、何らかの理由で動画の自動再生ができない場合は必ずあると思ってください。

また、トップページから別のページに遷移した後にブラウザの「戻る」で戻った場合や、端末スリープからロック解除した場合などは動画の自動再生は開始されません。（iOS/Androidなどでの制約もあるため、無理に強制再読み込みをさせる、といった処理もあえて避けています）
ショップロゴなど、トップページへのリンクタップして戻った場合や、閲覧者が再読み込みを行った場合は動画再生されます。

モバイル端末などでは利用者が把握していない設定、あるいは意図的に設定している場合もあり、そのような環境で無理矢理再生させることは不可能であることを知っておく必要があります。

動画を利用する場合でも、再生されないという状況も想定内とし「見せたい」にこだわりすぎず、閲覧者の環境を優先しましょう。

自動再生されるイメージ映像のポイント

1. とにかく軽く：動画はできるだけ軽量に作成することがポイントです。 「動画を全部見てほしい」ではなく、「世界観だけが伝えられれば良い」という感覚で、必要最小限の長さ、そして最小限の画質サイズで作成し、閲覧者の負担にならない軽い動画を作成しましょう。
2. 大きな動きをスローで見せる：動画は一般的な横長比率で作成してもスマホサイズなどでは大きく切り取られます。小さな被写体が動くような映像ではなく、全体として大きな動きをスローで見せたり、カメラスライダーを使って奥行き感を出した映像表現などが良いでしょう。
3. フェードイン/アウト：動画の始まりをフェードインにしておくことで、読み込み遅延がある場合でも動画がスムーズに再生されているように見せることができます。動画の最後もフェードアウトしておきましょう。
4. 音声は無し：動画再生時に音声は再生されません。仮に音声がある動画でもサイト側でミュートされますが、動画を書き出す時点で音声は無しにしておきましょう。

オプション：動画用ドットフィルター

「ドットフィルター」をONにすると、動画に細かいドットを被せるフィルターをかけることができます。

動画はできるだけ高画質で見せたいものですが、モバイルを考慮するとどうしてもサイズを小さくしないといけなくなり画質が悪くなる場合があります。その時にドットフィルターをかけることで画質の粗さを目立たなくなる視覚効果があります。

ON/OFFを切り替えて見比べてみて、お好みでご利用ください。

ドットフィルターは不思議と高画質に見えるし、クールな雰囲気、パキッとした雰囲気も出て、動画がぐっと締まる感じがするね。逆に、ふんわりと明るい雰囲気にしたい場合は無しの方が良いかも！

その他

将来的なBASEの仕様変更などにより動画の埋め込みができなくなる可能性もあります。どうぞご了承ください。

デフォルトでは動画は1つ、スライドショーにした場合は２枚目は静止画のみ、としています。理由として、多くの方にご利用いただくテーマはパソコン操作に慣れている方も慣れていない方も利用するものであるため、テーマ設定項目が増え過ぎないようバランスをとっています。 今後のショップオーナー様からのフィードバックにより仕様変更を検討していきます。すぐに増やしたい場合、カスタマイズサービスをご利用ください。