トップページの設定(メイン写真)

メイン写真の仕組み

１枚だけアップした時は静止画に、２枚目をアップすると自動的に左右カーソルが表示されフェードエフェクトで切り替わるようになります。（最大２枚まで）

画像のサイズ、縦横比率について

トップ画像はレスポンシブ、フルスクリーン、つまり画面の縦横比に応じて四隅が少しづつクロップされながら表示されます。そのため固定値としての推奨値はございませんが、PC表示では縦横比4:3程度、サイズとしては少なくとも横幅1200px程あれば十分に綺麗に表示されます。またスマホ縦用画像については、一般的なスマホ画面比率として16:9〜18:9程度にするとうまく表示されます。

どちらもレスポンシブ、フルスクリーンであることから多少比率が違っていても問題ありません。

メイン写真を設定してみよう！

メイン写真の設定項目別の解説

それぞれの項目は図の通りに対応しています。

入力したテキストがどこに対応するかは、赤いラインで示している通りです。入力欄を空欄にすればそれ自体は表示されないので、言いたいことやデザインを見て、必要なものだけ入力すれば大丈夫です。例えば全部があると情報量がが多すぎるとおもえば、「サブタイトル＋メインタイトル」「メインタイトル＋リードテキスト」といった組み合わせがよいでしょう。

メインタイトルはフォントとサイズを選択できます。入力する文字数によってバランスを見る必要があるので、まずは「言いたいこと」を書いてみてから、微調整してください。

次に、図の中の (1)〜(4)について説明します。

(1) タイトル配置

タイトルテキストの配置を「中央寄せ / 右寄せ / 左寄せ」から選択できます。写真の構図などに合わせて試してみてください。

左右寄せを選んだ場合でも、そもそも横幅が狭いスマホの縦表示画面では中央寄せされるんだ。

(2) フレーム

「フレーム」は、タイトルのセットを枠で囲んだりする装飾デザインが選べます。

キャッチコピー、色、フォント、配置、そしてフレームを組み合わせ…。
BASEのデザイン編集画面は、リアルタイムに反映されるからとても使いやすいですね。

でもブラウザはかなり頑張ってる状態だから、あれこれ編集ずーっとやってるとちゃんと反映されなくなるときがあります。そんな時はブラウザを「再読込み」してみよう。

(3) トリミング時の画像寄せ

スマホ画面など、画面が縦長になった状態での画像の「寄せどころ」を指定できます。

メイン写真は殆どの場合、横長の写真を使うことになります。画面も横長なら良いのですが、画面が縦長になったとき、写真は「それでも画面を大きく覆うぞ！」となるため、結果的に「左右を大きく切り取って中央だけ拡大」ということになります。

(4) スライド切替り速度

２枚のスライドが切り替わる速度を「５秒、７秒、１０秒」から選択できます。

(5) スマホでの表示比率

スマホ画面でメイン画像を「ハーフスクリーン：画面の半分くらいの高さにする」か「フルスクリーン：画面を覆う高さにする」かを設定できます。

スマホ用に縦長画像を用意する（2022年6月のアップデートで追加されました！）

レスポンシブ表示にて「トリミング時の画像寄せ」を行っても、どうしても画像1種類では解決できない場合、スマホ縦表示の時専用に縦長画像を用意することができます。

「スマホ縦用画像」にアップした画像は、画面サイズがスマホ縦表示の場合にメインの画像に切り替わり表示されます。縦横比に推奨値はありませんが、一般的にスマホ縦サイズで表示できるような縦長画像を利用してください。

スマホ用画像を利用する場合、「スマホでの表示比率」は「フルスクリーン」にして利用してください。また左右トリミングはほぼ無視されます。

タイトルのテキストを、任意の場所で改行したい場合

どうしてもある場所で強制的に改行したい場合、HTMLタグの「 ＜ｂｒ　／＞ 」を入れれば改行されます。

　＜ｂｒ　／＞
（必ず半角で入力します）

例えば上の「まってな、かーちゃん」の場合、「まってな、＜ｂｒ　／＞かーちゃん」と入力してあります。

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

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