画像ボックス：BoxモードとImgモード

BoxモードとImgモードとは

Studioの画像ボックスには、「Boxモード」と「Imgモード」という2つのモードがあります。これらのモードは画像の扱い方や設定できる機能が異なります。

編集内容・挙動	Boxモード	Imgモード
他要素（テキスト・ボタンなど）を重ね配置して、親子ボックスの構造にする	○	×
画像の背景加工（背景位置・繰り返し・背景サイズ・フィルター）の適用	○	×
縦横比を保持した表示（auto指定）	×	○
alt属性（代替テキスト）の設定	×	○

各モードへの切り替えは、画像ボックス右上のトグルスイッチで行います。

注意：ImgモードからBoxモードへの切り替えができない場合

Boxモードは、画像自体のサイズ情報が認識され縦横比を保持する仕様のため、高さ / 幅どちらかのサイズ単位をautoに設定する必要があります。

以下いずれかの方法で、auto設定をしてください。

Boxモードでは、画像にテキストなど他の要素を重ねたり、フィルタ効果を加えることができます。背景画像としての利用や、画像に効果を加えたい場合に適しています。

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

Imgモードでは、画像を独立した要素として扱います。画像の縦横比を保ったまま表示し、alt属性（代替テキスト）で情報を正確に伝達できます。

特徴

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

image picture

イメージ 写真 素材