Studio Help

ボックスのデザイン設定

63件の記事

Figma to Studio

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

ボックスのレイアウト：サイズ（幅・高さ）を設定する

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

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

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

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

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

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

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

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

変形・回転・傾き

ボックスの外観設定

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

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

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

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

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

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

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

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

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

選択色を活用する

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

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

フォント

Studioで利用できるフォント

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

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

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

StudioでTypeSquareを使用する

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

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

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

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

コンポーネント

コンポーネント

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

アニメーション

アニメーション

ローディング風アニメーションの作成方法

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

ボタンにホバーすると端から色が変わるアニメーションの作成方法

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

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

下からフェードインするアニメーションの作成方法

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

条件付きスタイル

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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