STUDIO

ページ内のコンテンツを整理する

セクションの追加

ボックスの追加

ボックスの選択

グループ化

STUDIOエディタでボックスの入れ子構造（親子ボックス）を作る方法をご紹介します。エディタ上またはレイヤーパネルから操作できます。

親子ボックス

STUDIOで配置したボックスの配置を調整する方法を解説します。親ボックスを選択すると表示されるメニューから、ボックスの並び方向などを調整することができます。

ボックスの並び方

ページ内の階層構造やデータを確認する

レイヤーパネル

コンポーネント

サイト上に追加した要素を複製し、利用する方法

コピー＆ペーストについて

直前の作業を取り消す / やり直す

ひとつ戻る

表示倍率

STUDIOでの操作がより効率的に行えるキーボードショートカットをご紹介します。

キーボードショートカット一覧

エディタでテキストや画像などのコンテンツだけが編集できるコンテンツ編集モードについて解説します。

コンテンツ編集モード

クリックやホバーで開閉するボックス

Toggleボックスの追加

プラグインを使ってFigmaのデザインをSTUDIOへインポートする

Figma to STUDIO

STUDIOエディタの動作環境について解説します。PC上のGoogle Chromeの最新バージョンを使用することを推奨し、他のブラウザやタブレット、モバイル端末の非対応についてもご紹介します。

エディタの動作環境

アップロードや削除、リンク先として設定する方法

PDFファイルのアップロードと管理

STUDIO内のページや機能を検索し、素早いアクセスを可能にする機能です。CMSアイテムなどのプロジェクト内検索と他プロジェクトの検索ができます。

コマンドパレットを活用する

STUDIOエディタのコメント機能を使ったコメントの追加や管理手順について解説します。機能を活用して、デザインの品質向上や進捗管理に役立てましょう。

エディタのコメント機能

STUDIO Support

Saika

Kona

デザインエディタ

STUDIOでのプロジェクト作成、複製、リセット、アーカイブ方法、そしてプロジェクトの設定について解説します。

プロジェクトの作成と管理

プロジェクトのデザインデータを初期状態へ戻します

プロジェクトをリセットする

編集履歴の保存・確認・復元ができます

サイトのバージョンを管理する

STUDIOサイトに表示されるSTUDIOバナーの表示設定方法をご紹介します。バナーの非表示は有料プランでのみ設定可能です。

STUDIOバナーの表示設定

SNSでURLをシェアした際のOGP内容の設定方法と注意点を解説します。

サムネイル（OGP）設定

STUDIOでサイトのファビコン(Favicon)を設定する方法と注意点を解説します。ファビコンのアップロード手順や、SNSや検索エンジンへの反映についてもご紹介します。

ファビコンの設定方法

STUDIOでカスタムコードを追加する方法を詳しく解説します。有料プラン契約プロジェクトでは、サイト全体や特定ページの </head> タグと </body> タグ直前にコードが追加できます。

サイト・ページにカスタムコードを追加する

プロジェクト全体の設定

プロジェクトのページを管理する

ページ管理

STUDIOで追加できるページの種類と特徴

ページタイプ

公開サイトで特定ページを非公開に設定する方法

ページ毎の公開範囲

ページ名

パス

STUDIOを利用してページのメタ情報（タイトル、説明文、ファビコン、OGP画像）を設定する方法を詳しく解説します。正しい設定を行うことで、検索結果やSNSでの表示を改善し、より多くの訪問者を引き寄せましょう。

ページのメタ情報

検索結果に表示させないページの設定

noindex

ページの上に表示されるポップアップウィンドウ

モーダルを追加する

404ページを設置する方法

ページ内コンテンツの意味・役割を定義し、検索エンジンに正しく伝えSEOに役立てる

構造化データでページ内コンテンツを定義する

STUDIOでモーダルウィンドウを開く・閉じるリンクを設定する方法について解説します。

モーダルへのリンク設定方法

ページ毎の設定

STUDIOサイトのレスポンシブ設定方法と設定のコツをご紹介します。様々なデバイスサイズに合わせてデザインを整え、レスポンシブなサイトにしましょう。

レスポンシブ設定

ブレイクポイントを追加したり、値を変更する方法

カスタムブレイクポイント

様々な画面サイズ向けにデザインする

キャンバス幅の変更

レスポンシブ

STUDIO でブレイクポイントごとにコンテンツの表示・非表示を設定する方法をご紹介します。

ボックスの表示設定

要素を画面や親ボックスからの距離で固定する

相対位置・固定位置・絶対位置

親ボックスからはみ出した要素の扱い（オーバーフロー）

はみ出し

前面に任意の要素を持ってくる

重ね順

単位設定を工夫してレスポンシブにデザインする

サイズ単位

ボックスに余白を持たせる方法

マージン・パディング・ギャップ

ネガティブマージン

ボックスの不透明度を設定する

不透明度

塗り

枠線

ドロップシャドウ / インナーシャドウの設定

シャドウ

角丸

ブレンドモード・フィルター・背面フィルター

ホバー、出現時などの条件に応じたスタイルの設定

条件付きスタイル

ホバー・出現時などの条件付きスタイルにモーションをつける

アニメーション

ボックス毎の設定（スタイルバー）

アンカーリンクの遷移先を設定

IDの設定

STUDIOでのリンク設定方法を解説します。ページ内リンク、外部サイトへのリンク、モーダルの開閉設定などご紹介します。

リンクの種類と設定手順

STUDIOのボックスに設定できる種類と設定する手順を解説します。

HTMLタグ

ボックス毎の設定（ボックス設定パネル）

STUDIOの画像ボックスを使えば、スタイリングを施したり、フリー画像を利用したりできます。この記事では、画像ボックスの配置方法、画像の変更方法、編集とスタイリングの機能についてご紹介します。

画像ボックス

画像ボックスに任意の画像を当てはめる

画像の変更

エディタに画像をアップロードしフォルダで管理と画像やファイルの削除手順を解説します。

画像ファイルのアップロードと管理

画像をURLで指定する方法

画像スタイルメニュー

Boxモード・Imgモード

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

画像のalt設定

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

フリー画像

テキストボックス

テキストのスタイルを編集する

テキストスタイル

STUDIOでは、Google Fonts と TypeSquare（モリサワ）が無料で利用できます。プロジェクトへのフォント追加・設定方法をご紹介します。

フォントの設定と管理

Webフォントサービス「TypeSquare」を有効化する

TypeSquareの使い方

テキストの文字組みを解説します。

テキストの文字組み

部分的なスタイル変更ができるテキストボックス

リッチテキストボックス

アイコンボックス

アイコンの色やサイズを編集する

アイコンのスタイル変更

アイコンボックスの内容を変更

アイコンの変更

STUDIOのEmbedボックス機能を使って、外部サービスのコンテンツをウェブページに埋め込む方法をご紹介します。この記事では、設定手順および注意すべき点を分かりやすく説明しています。

Embedボックスを追加する

YouTubeに公開されている動画を埋め込む方法

YouTube動画を埋め込む

Vimeoに公開した動画を埋め込む方法

Vimeo動画を埋め込む

X（旧Twitter）内の任意のコンテンツを埋め込む方法

X（Twitter）を埋め込む

Facebook内の任意のコンテンツを埋め込む方法

Facebookを埋め込む

formrunで作成したフォームを埋め込む方法

formrunを埋め込む

縦型動画のFirework動画を、STUDIOに埋め込む方法を解説します。埋め込みコードを取得して、ペーストするだけで簡単に埋め込むことができます。

Fireworkを埋め込む

HubSpot Formを埋め込む

Googleフォームを埋め込む

Googleカレンダーを埋め込む

デザインに地図を埋め込む方法

Google Mapsを埋め込む

埋め込んだ動画などの画角を保ったまま表示させる方法

Embedボックスのレスポンシブ対応

Lottie 埋め込みボックスを利用し、サイトへアニメーションを追加

Lottie の埋め込みとカスタマイズ

Embedボックス

STUDIOのリスト機能の使い方から注意点まで解説します。デザインは統一したまま、コンテンツを管理する場合に便利な機能です。

リストの作成と管理方法

スライドショーを作成し、画像やテキストなどを表示します

カルーセル（リスト）

note など外部記事のフィードを配置する

RSS連携

STUDIOのRSS連携機能を使用し、noteの最新記事をサイトに表示する手順を解説します。

noteのRSS設置手順

リストボックス

APIを公開している外部サービスのデータを取得し、STUDIOの動的リストに表示する方法を解説しています。連携可能なAPIの条件、各種API連携サービスの設定手順、データの紐付け方法、注意点などをご紹介します。

API連携 (Beta)とは

API機能（Beta）を利用して、microCMS API をSTUDIOに連携する方法をご紹介します。

microCMS API 連携

Notion API 連携

API連携（Beta）を利用して、Aritable APIをSTUDIOへ連携する方法を解説しています。

Airtable API 連携

 API

STUDIOに移動

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