対象プラン：全プラン

画像ボックスの特徴と操作方法

この記事では、画像ボックスの特徴と画像ボックスの配置・画像の変更・画像のURL指定方法について解説します。

画像ボックスの特徴と概要

画像ボックスとは、ページ上に画像を配置する際に使用するボックスです。

Studioにアップロードした画像や、連携している写真リソースサイトのフリー画像を選択したり、Studio外のサーバーの画像をURL指定で表示することができます。

Boxモードの画像に限り、画面上部のスタイルメニューでキャンバス上で自由なレイアウトや画像の表示加工が可能です。

1ファイル1GBまでの画像ファイルをアップロードしてページデザインに利用できます。

エディタにアップロードが可能なファイル形式と容量制限の詳細や、ファイルのアップロード方法については、以下のヘルプページをご覧ください。

Tips: 1GB以上の画像ファイルを小さくする

無料の画像圧縮ツールなどを利用することで、画質を保ったままファイルサイズを小さくすることができます。Studioではファイルサイズを変更するツールは提供していません。

高品質な無料の写真リソースサイト「Unsplash」の画像が利用できます。フリー画像の利用方法の詳細は、フリー画像をご覧ください。

URL指定をすることで、外部のストレージサービスや自身のサーバーなど、Studio外にアップロードされている画像を利用できます。URL指定の方法は、外部サーバーに保存された画像をURLで指定するの項目をご覧ください。

画像ボックスには「Boxモード」と「Imgモード」があり、モードによって画像の扱い方や設定可能な機能が異なります。

各モードの詳細や操作方法は、画像ボックスのBoxモード・Imgモードとはのヘルプページをご覧ください。

画像にテキストなど他の要素を重ねたり、フィルタ効果を加えることができます。縦横比の維持やalt（代替テキスト）の設定はできません。

ユースケース	理由・ポイント
ファーストビュー（メインビジュアル）	背景画像の上にキャッチコピーやボタンを重ねて演出できる
セクション全体の背景	レイアウト全体の一部として画像を使い、比率やサイズに依存しない
ぼかし・明るさ調整などの効果付き背景	フィルタ効果で画像を加工し、デザイン性を向上
画像を装飾として使用する	画像を装飾的に使うための加工やスタイル変更がしやすい

画像の縦横比を維持した表示や、alt（代替テキスト）の設定が可能です。他要素の重ね配置やフィルタ効果は利用できません。

ユースケース	理由・ポイント
商品写真・製品カタログ	画像の比率を維持しつつ、画像のalt設定で商品名や説明を付与できる
ニュース記事の図版・グラフ	内容を画像のalt設定で説明し、情報伝達やアクセシビリティを担保できる
会社ロゴ・ブランドロゴ	画像のalt設定で社名やブランド名が明記でき、SEOやアクセシビリティに有効
スタッフ紹介の顔写真	画像比率を保ちつつ、名前や役割を画像のalt設定で説明が可能
フォトギャラリーやポートフォリオサイト	画像比率を保ち、画像のalt設定で補足が可能
サービス紹介ページで使用する画像や写真	画像のalt設定でサービス内容を説明しつつ、画像比率を保持