対象プラン:全プラン
画像ボックスの特徴と操作方法
この記事では、画像ボックスの特徴と画像ボックスの配置・画像の変更・画像のURL指定方法について解説します。
画像ボックスの特徴と概要
画像ボックスとは、ページ上に画像を配置する際に使用するボックスです。
Studioにアップロードした画像や、連携している写真リソースサイトのフリー画像を選択したり、Studio外のサーバーの画像をURL指定で表示することができます。
Boxモードの画像に限り、画面上部のスタイルメニューでキャンバス上で自由なレイアウトや画像の表示加工が可能です。
画像ボックスで使用できる画像ファイル
Studioエディタにアップロードした画像
1ファイル1GBまでの画像ファイルをアップロードしてページデザインに利用できます。
エディタにアップロードが可能なファイル形式と容量制限の詳細や、ファイルのアップロード方法については、以下のヘルプページをご覧ください。
Tips: 1GB以上の画像ファイルを小さくする
無料の画像圧縮ツールなどを利用することで、画質を保ったままファイルサイズを小さくすることができます。Studioではファイルサイズを変更するツールは提供していません。
フリー画像(Unsplash)
Studio外にアップロードされている画像
URL指定をすることで、外部のストレージサービスや自身のサーバーなど、Studio外にアップロードされている画像を利用できます。URL指定の方法は、外部サーバーに保存された画像をURLで指定するの項目をご覧ください。
BoxモードとImgモード
画像ボックスには「Boxモード」と「Imgモード」があり、モードによって画像の扱い方や設定可能な機能が異なります。
各モードの詳細や操作方法は、画像ボックスのBoxモード・Imgモードとは のヘルプページをご覧ください。
Boxモードの特徴
画像にテキストなど他の要素を重ねたり、フィルタ効果を加えることができます。縦横比の維持やalt(代替テキスト)の設定はできません。
ユースケース | 理由・ポイント |
ファーストビュー(メインビジュアル) | 背景画像の上にキャッチコピーやボタンを重ねて演出できる |
セクション全体の背景 | レイアウト全体の一部として画像を使い、比率やサイズに依存しない |
ぼかし・明るさ調整などの効果付き背景 | フィルタ効果で画像を加工し、デザイン性を向上 |
画像を装飾として使用する | 画像を装飾的に使うための加工やスタイル変更がしやすい |
Imgモードの特徴
画像の縦横比を維持した表示や、alt(代替テキスト)の設定が可能です。他要素の重ね配置やフィルタ効果は利用できません。
ユースケース | 理由・ポイント |
商品写真・製品カタログ | 画像の比率を維持しつつ、画像のalt設定で商品名や説明を付与できる |
ニュース記事の図版・グラフ | 内容を画像のalt設定で説明し、情報伝達やアクセシビリティを担保できる |
会社ロゴ・ブランドロゴ | 画像のalt設定で社名やブランド名が明記でき、SEOやアクセシビリティに有効 |
スタッフ紹介の顔写真 | 画像比率を保ちつつ、名前や役割を画像のalt設定で説明が可能 |
フォトギャラリーやポートフォリオサイト | 画像比率を保ち、画像のalt設定で補足が可能 |
サービス紹介ページで使用する画像や写真 | 画像のalt設定でサービス内容を説明しつつ、画像比率を保持 |
画像のスタイル設定
Boxモードの画像ボックスには、エディタ上で画像の加工が可能です。詳細は、画像スタイルメニューをご覧ください。
明るさ
コントラスト
鮮やかさ
モノクロ
セピア
ぼかし
配置
画像のサイズ調整
画像のリピート設定
表示位置の調整
画像のalt設定
Imgモードの画像ボックスには、alt(代替えテキスト)が設定できます。
Altを設定することで、画像の内容を検索エンジンやサイトの読み上げ機能に伝えることができます。SEOの観点からもこの情報を設定することは非常に重要です。詳しくは、画像のalt設定をご覧ください。
画像ボックスの操作方法
画像ボックスの主な操作について説明します。
画像ボックスを配置する
空の画像ボックス、またはアップロード済みの画像・フリー画像が配置できます。
空の画像ボックスを配置する
エディタ画面左側の画像ボックスをドラッグ&ドロップします。
以下の手順で、追加パネル内[ボックス]タブからの追加も可能です。
アップロード済み画像、またはフリー画像(Unsplashの画像)の配置
配置済みの画像を変更する
ページ上とレイヤーパネルの2箇所から変更できます。
詳しくは、9.【基本編】テンプレートの編集方法 > テキストや画像を差し替えるをご覧ください。
ページ上での変更
レイヤーパネルからの変更
重ね順の関係などで画像ボックスが直接ダブルクリックできない場合には、レイヤーパネルから変更します。
画面左側の[>]で左パネルを開き、[レイヤー]パネルを選択します。
画像を変更したい画像ボックスのレイヤーを探して選択します
画面右側の[<]で右パネルを開き、[ボックス]設定パネルを選択します。
画像サムネイル部分をダブルクリックすると、[アップロード]と[Unsplash]が左パネルに表示されます。
変更先の画像をクリックしてボックスに反映します。
画像ボックスを削除する
削除したい画像ボックスをダブルクリックします。
表示されたメニューで、[ボックスを削除]を選択します。
Tips: 指定したいボックスがクリックしにくい場合は、左パネル内の[レイヤー]パネルから削除したい画像ボックスを選択すると、ダブルクリックしやすくなります。
外部サーバーに保存された画像をURLで指定する
外部のストレージサービスなど、エディタ外に保存されている画像を使用する際は、画像をURL指定します。
画像ボックスを選択します。
画面右側の[<]で右パネルを開き、[ボックス]設定パネルを選択します。
画像URLを入力します。
image
picture
イメージ
写真
素材