Studio

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

レイヤーパネル

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

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

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

ひとつ戻る

表示倍率

クリックやホバーで開閉するボックスを簡単にページに追加することができます。

Toggle（トグル）ボックスの追加

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

エディタの動作環境

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

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

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

エディタのコメント機能

Studioのエディタでアップロードできるデータのファイル形式とサイズ制限についてご紹介します。

Studioエディタにアップロード可能なファイル形式とサイズ

Studio Support

Saika

デザインエディタ

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

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

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

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

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

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

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

Studioバナーの表示設定

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

サムネイル（OGP）設定

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

ファビコンの設定方法

有料プランでは、カスタムコードをページやサイト全体に追加することができます。この記事では、制限と追加方法を詳しく解説します。

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

プロジェクト全体の設定

Studioで作成したWebサイト上に公開できるページ数は、プランによって上限が異なります。この記事では、プランごとのページ数上限値とその確認方法をご紹介します。

公開ページ数のプラン別上限

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

ページタイプ

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

ページ管理

ページ名

パス

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

ページのメタ情報

Studioで作成したサイト内の一部ページを、サイト上に表示するか非表示にするか選べる「公開範囲」の設定方法をご紹介します。

ページの公開範囲設定

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

noindex

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

モーダルを追加する

404ページを設置する方法

ページ内コンテンツの意味・役割を定義し、検索エンジンに正しく伝えSEOに役立てることができます。

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

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

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

ページ毎の設定

Studioサイトのレスポンシブ設定方法とコツを解説します。デバイスサイズに応じたデザインを作成し、ユーザーに最適な表示を提供しましょう。

レスポンシブ設定方法

レスポンシブデザインで画面サイズに応じたレイアウトを実現するために、画面幅の切り替えポイントを設定することができます。PC・タブレット・モバイルの基本サイズに加えて、スモールサイズとミニサイズも追加できます。

ブレイクポイントの設定方法

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

スクリーン幅の変更

Studioエディタ上では問題のないレスポンシブレイアウトが、スマホで表示した際に崩れてしまう理由と、よくある実装例とその対処方法をご紹介します。

エディタとスマホ（公開サイト・プレビュー）でのサイト表示が異なります

レスポンシブ

ボックスの追加

ボックスの選択

ボックスのグループ化とは、配置済みの複数のボックスを1つのまとまりとしてまとめる方法です。

ボックスのグループ化とは

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

親子ボックス

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

ボックスの配置調整

ボックス

「配置」機能でページ内のボックスの配置場所やルールを指定することが出来ます。4種類の方法を使い分けることにより、様々な表現が可能です。

ボックスの配置：相対位置・固定位置・絶対位置・追従位置

ページに配置したボックスに設定するサイズ単位をご紹介します。固定値や相対値などの設定が可能です。

ボックスのサイズ単位設定方法

Studioでボックスに余白を設定する方法についてご紹介します。マージン・パディング・ギャップの3つの機能とその具体的な設定方法を解説します。

マージン・パディング・ギャップの設定方法

ネガティブマージン

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

ボックスの表示設定

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

はみ出し

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

重ね順

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

不透明度

ボックスの色を変更する方法をご紹介します。登録済みカラー、RGBA/HEX指定、デフォルトカラーなどから設定することができます。

ボックスの色を設定する

ボックスに枠線を追加する方法をご紹介します。枠線の色や種類を設定したり、辺ごとに枠線の適用箇所や太さを指定したりすることができます。

ボックスに枠線を設定する

ボックスごとにドロップシャドウまたはインナーシャドウが設定できます。

シャドウの設定方法

ボックスの角丸設定

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

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

条件付きスタイル

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

アニメーション

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

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

IDの設定

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

リンクの種類と設定方法

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

HTMLタグ

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

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

画像ボックス

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

画像の変更

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

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

画像をURLで指定する方法

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

画像スタイルメニュー

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

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

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

画像のalt設定

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

フリー画像

テキストボックス

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

リッチテキストボックス

テキストのスタイルを変更する方法をご紹介します。サイズ、太さ、行高、配置など、文字の設定方法を詳しく解説します。

テキストのスタイル変更方法

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

テキストの文字組み

Studioで制作するサイトに利用可能なフォントの種類をご紹介します。FONTPLUS、Google Fonts、TypeSquareなどのWebフォントとシステムフォント（System Fonts）が使用できます。

Studioで利用できるフォント

StudioでWebサイトを作成する際のフォントの選び方を、システムフォント（System Font）とWebフォントの観点から説明します。

フォント選びと使い分けのヒント：システムフォント（System Font）とWebフォント

Studioでは様々なフォントを使って、サイトの表現力が向上できます。この記事では、テキストのフォント設定・一括置換・削除方法について解説します。

フォントの設定・置換・削除方法

Webサイト制作で「なぜ表示されないの？」「どうして動かないの？」というお悩みを、20のチェックポイントで解決！Studio利用中によくある困りごとを、簡単&実践的な解決策でサポートします。迷ったら、まずはこの記事をチェック！

TypeSquareの使い方

Studioでは豊富なフォントを使って、印象や可読性を高めることができます。この記事では、フォントを管理する機能をご紹介します。

フォントの管理方法

アイコンボックス

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

アイコンの変更

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

アイコンのスタイル変更

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ボックスのレスポンシブ対応

Studioの埋め込みボックスを使い、簡単にLottieをページに埋め込む方法をご紹介します。

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

Kona

Embedボックス

デザインは統一したまま、コンテンツ管理が可能なリスト機能の使い方から注意点まで解説します。

リストの作成と管理方法

エディタ上のリストでテキストや画像を管理するリストカルーセルの設置方法をご紹介します。

リストカルーセルの配置・編集方法

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をと連携する方法を解説しています。

Airtable API 連携

 API

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

Figma to Studio

テキストのサイズやフォントなどのスタイル設定を効率的に管理できる「テキストスタイル」機能についてご紹介します。

テキストスタイルの設定と管理

選択した要素に使用されている色を一覧で確認、変更できる機能です。

ページ上の選択色の確認と一括変更

よく使うパーツを管理・再利用できるコンポーネント機能について解説します。

コンポーネント

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

セクションの追加

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