Studio

ページ上に画像を配置する際に利用する「画像ボックス」について、利用可能な画像の種類やモードの違い、基本的な追加・編集・削除・URL指定の操作方法を解説します。

画像ボックス

動画ボックスは、mp4やwebm形式の動画をページ上に直接配置できる機能です。画像やテキストと同様に自由なレイアウトが可能で、サイトに動画ならではの動きやインパクトを加えたい場面で活用できます。

動画ボックス

StudioエディタにアップロードしたPDFファイルは、ページ上に直接表示はできませんが、リンク先として指定できます。会社案内や資料配布など、さまざまな用途に活用可能です。

PDFファイルをリンク先に指定する

エディタ上で画像を加工する方法を解説します。明るさ、コントラスト、モノクロなどのスタイルや、背景画像のサイズ調整、リピート、位置調整の方法を詳しく説明します。

画像スタイルメニュー

画像ボックスでは2種類のモードが選択できます。この記事では、それぞれの特徴と使い分けについて解説します。

画像ボックスのBoxモード・Imgモードとは

imgモードの画像ボックスに代替えテキストを設定する

画像のalt設定

StudioでUnsplash素材を使用する方法

フリー画像（Unsplash）

Studioでは、背景画像を固定することで、スクロールしても背景画像が動かないレイアウトを作成できます。この記事では、背景画像を固定する具体的な手順を説明します。

背景画像を固定表示する

Studioの画像ボックスには、画像の縦横比を保持したまま柔軟にサイズ調整ができるImgモードがあります。pxなどで縦横両方のサイズを指定すると縦横比が崩れる原因になるため、ハンドルを使ってautoに設定する方法をご紹介します。

画像ボックスのImgモードで縦横比率が崩れる場合

Studioで画像の縦横比を固定したい場合は、画像ボックスの右上にあるスイッチをImgに切り替えます。Imgモードでは画像素材の縦横比率を保持したまま表示できます。

画像の比率を固定する

アセットパネルから、デザインエディタ上に画像・動画・PDFファイルのアップロードが可能です。ファイルのアップロード方法、管理、削除などの基本操作を説明します。

各種ファイル（画像・動画・PDF）のアップロードと管理

Studioで擬似的なトリミング効果を得る方法で、画像の位置を調整したり、簡単なトリミング効果が適用できます。以下の手順でその一例をご紹介します。この他にも、相対位置のままで画像のマージンをマイナスの値に設定することも可能です。

画像の配置やトリミング位置をボックス内で調整する

Studioエディタでは、画像・動画・PDFをアップロードしてWebサイトのデザインや構成に活用できます。本記事では、対応ファイル形式、容量制限、注意点について説明します。

Studioエディタにアップロード可能なファイル形式と容量制限

Studioエディタに1ファイルあたり1GBまでのmp4やwebm形式の動画ファイルをアップロードすることが可能です。アップロードした動画は直接ページに配置できます。

Studioに動画を直接アップロードできますか？

2025年5月に1ファイルあたり1GBの容量制限が設定されたため、サイズの大きい画像の圧縮処理が廃止となりました。サイト上ではアップロードしたオリジナル画像がそのまま使用されます。

サイズの大きい画像をアップすると、画質が粗くなってしまいます

Studio.Stockは、AI生成による高解像度・高品質な写真素材を提供するフォトストックサービスです。商用利用可能な画像を手軽に検索・ダウンロードでき、プロンプト編集や背景除去など多彩な編集機能も利用できます。

Studio.Stock

画像/動画ボックス・PDF

Create a custom design with text, images, and links

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

公式サイト

公式ブログ

事例集

セミナー動画

YouTube

コミュニティで知見を深める

Intercom のサポートやコミュニティのエキスパートに質問し、答えてもらいましょう。

このサイトでは、当社および当社の第三者ベンダーが、当社のクッキーポリシーに記載された目的のために、お客様とサイトでのやりとり（閲覧したコンテンツ、カーソルの動き、画面の記録、チャット内容を含む）に関する個人情報を監視および記録するために、クッキーやその他の技術を使用しています。当サイトを引き続きご利用いただくことで、{websiteTermsLink}、{privacyPolicyLink}および{cookiePolicyLink}に同意したことになります。

このサイトでは、サイトの運営に必要不可欠なCookieおよび類似のテクノロジー（以下「Cookie」）を使用します。また、当社とパートナーは、サイトのパフォーマンス分析、機能、広告、ソーシャルメディア機能を有効にするために、追加のクッキーを設定したいと考えています。詳細については、{cookiePolicyLink}をご覧ください。クッキーの設定は、[クッキー設定] で変更することができます。

当社では、ウェブサイトの機能維持、分析、そして広告表示のためにクッキーを使用しています。オプションで必要に応じて希望するクッキーを有効または無効にできます。詳細については、{cookiePolicyLink}をご覧ください。

お客様には、個人情報の販売をオプトアウトする権利があります。お客様のデータの使用方法について詳しくは、{cookiePolicyLink}をご覧ください。

お客様のプライバシーに関する選択

当社では、お客様の体験を向上させるためにクッキーを使用しています。クッキーの設定は以下でカスタマイズすることができます。詳細については、{cookiePolicyLink}をご覧ください。

クッキー設定

リンク, 終了するにはcontrol-option-right-arrowを押します

ヘルプセンターは空です

エラーが発生しました。そのページは存在しません。

がっかり

無表情

笑顔

考えています...

ソースを検索しています...

分析しています...

メッセンジャー経由で送信されたチケット、または会話内でサポートエージェントによって送信されたチケットがここに表示されます。

お客様が作成したチケットはありません

別のキーワードを使用するか、入力ミスがないか確認してみてください。

別のキーワードやフィルタを使用してみてください。

チケットが見つかりませんでした

タイトル

御社に関連するすべてのチケットの進捗状況を追跡

チケットポータル。

{assigneeName}さんがこちらに対応中です！

{assigneeName}さんがチケットを完了しました

{assigneeName}さんが近日中に対応する予定です

{assigneeName}さんが詳細情報を必要としています

あなたのチケットは完了しました