Studio Help

ボックスのデザイン設定

67件の記事

Figma to Studio

ボックスのレイアウトとポジション

ボックスのレイアウト：サイズ（幅・高さ）

ボックスのレイアウト：マージン・パディング・ギャップ（余白）

ボックスのレイアウト：配列方向と配置

ボックスのポジション：位置・重ね順・はみ出し

ボックスのポジション：位置（相対・固定・絶対・追従）

ボックスのポジション：はみ出し設定

ボックスを重ねる（ネガティブマージン）

複数のボックスの縦幅（高さ）を揃える

固定位置のボックスをスクリーン下部・右端に配置する

変形・回転・傾き

ボックスの外観設定

ボックスの外観：フィルターを設定する

ボックスの外観：背景色を設定する

ボックスの外観：枠線を設定する

ボックスの外観：角丸を設定する

ボックスの外観：影（シャドウ）を設定する

ボックスの外観：不透明度

背景を斜めに塗る・斜め背景を作成する

デザインの一括管理（カラースタイル・テキストスタイル）

カラースタイルを設定する

選択色を活用する

マイカラー（My Color）への新規登録停止と機能提供終了について

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

フォント

Studioで利用できるフォント

フォントリスト：サイト内で使用するフォントを管理する

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

カスタムフォント（Custom Fonts）

StudioでTypeSquareを使用する

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

エディタで設定したフォントが、異なるフォントとして表示される場合

1プロジェクトで使用できる書体数の上限

FONTPLUSの提供終了について（2026年4月7日終了）

コンポーネント

コンポーネント

コンポーネントでプロパティを活用して、設置場所ごとに内部の要素を変える

エフェクトとアニメーション

条件付きスタイル

条件付きスタイル：スクロールエフェクトを設定する（Scroll Effect）

アニメーション（イージング・時間・遅延）を設定する

ボタンにカーソルを乗せると色が変わるアニメーションの作成方法

ホバー時に画像を切り替える

ホバー時に端から色が変わるボタンを作成する

出現時に下からフェードインするアニメーションを作成する

タイピング風テキストのアニメーションを作成する

ローディング風アニメーションを作成する

スクロールに連動して画像がゆっくりスライドする表現（パララックス）を設定する

リンクやホバーアニメーションが動作しない時の修正方法

「出現時」のアニメーションが表示されない原因と対処法

デザインの小技、便利機能便

コマンドパレットでプロジェクト内外を検索する

ヘッダーやボタンを画面に固定表示する

ボックスを横並び・縦並びに変更する方法

画像上のテキストを見やすくするコツ

タブ切り替えデザインの作成方法

エディタ上でテーブル（表）を追加したい

ダウンロードボタンを設置したい

アフィリエイトタグを設置したい

エディタ上のページやデザインの一部を誤って削除してしまった場合の対処法

デザイン編集時のトラブルシューティング

エディタ上でボックスを選択できません

左パネルを開けない、右パネルの設定項目が少ない場合

「デザインデータの容量が大きくなっています」と表示される場合

ボックス入れ子構造の階層上限

固定位置でヘッダーを配置すると、デザインと重なってしまう

埋め込んだ背景動画の上下や左右に余白ができてしまう場合

コピー & ペーストができない場合

画像に青い網がかかって文字を重ねられない場合

Toggle ボックスのメニューが上下に開いて動いてしまう場合

ボックスの画像・テキスト・リンクを変更すると、他のボックスも同じ内容に置き換わってしまう

デザイン表示のトラブルシューティング

サイトが意図せず左に寄る、右側に余白ができる

スクロールバーが表示されない

縦書きテキストが、プレビューやサイトで重なってしまう場合