⚠ ご案内
こちらは2026年6月下旬にリリース予定の新しい管理画面向けのヘルプです。
現在提供中の画面とは異なりますのでご注意ください。
サイト最上部に表示されるメインビジュアル（キービジュアル）を設定するページです。
動画はもちろん、複数枚の画像を登録してスライドショーにしたり、フルスクリーン表示など様々なデザインの設定が可能です。
| デフォルト | フルスクリーン | ビッグバナー |
|
画像をメインビジュアルエリアに表示します。
を登録できます。 |
画面いっぱいにメインビジュアルを表示します。 サイトにアクセスした直後（ファーストビュー）では、ヘッダーの背景が透過し、スクロールすると通常のページと同じデザインに切り替わります。 |
大きなサイズのバナーをメインビジュアルエリアに表示します。 |
1. 主な設定項目:
-
表示形式
-
デフォルト
- 画像一枚から、スライドショー、動画の設定ができます。
-
スマートフォン
- 【画像】5MBまで / 解像度：1920px × 2560px / 対応フォーマット：jpg, png
- 【動画】20MBまで / 解像度：1920px × 2560px/ 対応フォーマット：mp4
- 【スライドショー】5MBまで / 解像度：1920px × 2560px / 対応フォーマット：jpg, png
-
PC
- 【画像】5MBまで / 解像度：1920px × 960px / 対応フォーマット：jpg, png
- 【動画】20MBまで / 解像度：1920px × 960px / 対応フォーマット：mp4
- 【スライドショー】5MBまで / 解像度：1920px × 960px / 対応フォーマット：jpg, png
-
フルスクリーン
-
画面いっぱいに画像を表示することができます。
ファーストビュー（サイトにアクセスした直後）ではヘッダーの背景が透過し、フルスクリーン状態になります。 - スクロールすると通常のトップページと同じデザインに切り替わります。
-
スマートフォン
- 【画像】5MBまで / 解像度：1080px × 1920px / 対応フォーマット：jpg, png
- 【動画】20MBまで / 解像度：1080px × 1920px / 対応フォーマット：mp4
- 【スライドショー】5MBまで / 解像度：1080px × 1920px/ 対応フォーマット：jpg, png
-
PC
- 【画像】5MBまで / 解像度：1920px × 1080px / 対応フォーマット：jpg, png
- 【動画】20MBまで / 解像度：1920px × 1080px / 対応フォーマット：mp4
- 【スライドショー】5MBまで / 解像度：1920px × 1080px / 対応フォーマット：jpg, png
-
画面いっぱいに画像を表示することができます。
-
ビッグバナー
- バナー管理に登録した画像をメインビジュアルとして大きく表示することができます。
- 【画像】5MBまで / 解像度：1920px × 768px (5:2) / 対応フォーマット： jpg, png
-
デフォルト
2. 操作手順:
a. 「トップページ > メインビジュアル」をクリックします。
b. 任意の表示形式を選択し、「画像・動画」を選択します。
-
スライドショー利用時
- 「＋」ボタン：ファイルを追加できる編集画面が追加されます。
- 左画像アイコン：追加したファイルを切り替え、編集することができます。
- 「↑↓」マーク：アイテムの上下を入れ替えます。
- ゴミ箱マーク：アイテムを削除できます。
-
フルスクリーン利用時
- フルスクリーン状態の時にメニューの文字色・ボタン色を変更できます。
- フルスクリーン状態の時に表示されるロゴ画像を設定できます。
スクロールされると通常のロゴ画像に切り替わります。
-
ビッグバナー利用時
- タイトル：画像の読み込みに失敗した際にユーザーに表示されます。
- 公開期間：バナーの表示期間です。
- URL：バナー画像からの遷移先URLを設定できます。
c. 各設定項目を設後、「適用」ボタンをクリックして変更を反映します。
d. 全ての変更が完了しましたら、ページ右上にある「プレビュー」でユーザー様提供画面を確認・「保存」で設定内容を保存できます。
3. よくある質問
＜PC向け画像/映像と、スマートフォン向け画像/映像は両方設定する必要がありますか？＞
片方だけ設定している場合、そちらを流用してもう一方も表示されますので、必ずしも両方設定する必要はございません。
ただし、閲覧しているブラウザのサイズに応じて調整されるため、画質が荒く見えたり、切り取られて見れない領域が大きくなってしまうことがございますので、両方設定することを推奨しています。
＜「フルスクリーン時のロゴ」は、何を設定すればいいですか？＞
メインビジュアル（画像・動画）と重なっても見やすいロゴを設定してください。 主に色味の調整を目的としています。
例:
・ メインビジュアルが暗い場合 → ロゴを白く反転させる
・ メインビジュアルが明るい場合 → 通常のロゴのまま使用する
変更が不要な場合は、設定しなくても問題ありません。
＜「フルスクリーン」で設定した画像/動画が見切れてしまう＞
画面いっぱいにメインビジュアルを表示する関係上、ほとんどの場合で画像・動画の端が若干切り取られてしまいます。
画像・動画は以下のような仕組みで画面に表示されています。
- ブラウザ画面の中央に画像/動画が配置されます
- 表示されている領域に合わせて元画像・動画の上下左右の端が切り取られます
このため、以下の点に気をつけて画像を制作いただくことをおすすめします。
- 顔やロゴなど、極力切れてしまうことを避けたい要素がある場合、できるだけ中央に配置する
- PCは16:9、スマートフォンでは9:16のサイズをベースに画像を制作していただく