このページでできること
- 既存のボックス／テキスト／ボタンを複製→差し替えできます
- 見た目のくずれを防ぎながら、同じデザインをもう一つ作れます
使う場所：Wix Studio エディタ（見た目の編集）
1. まずは安全準備
- 作業前に #01 はじめに → サイト履歴の作成 を実施
- 大きな更新は 複製ページ（draft） で試す
✅ ポイント：元に戻せるようにしてから始めると安心！
2. 基本操作：複製→差し替え
ここでは「デザイン済みのパーツをそのまま使って、内容だけ変える」方法を学びます。
手順（全3ステップ）
❶
対象パーツ（テキスト／ボックス／ボタン）またはセクションごとクリック
❷
［複製］ を押す（ショートカット：⌘/Ctrl + D）
❸
複製したパーツの配置を変更する/整える
できること：既存のボックス/テキスト/ボタンを複製→差し替え
▶ 対象パーツをクリック →［複製］（⌘/Ctrl+D）→ 文字を入力
💡 コツ：フォント・サイズは既存に合わせると崩れにくい
⚠ 注意：ボックスサイズを大きくしすぎるとスマホで崩れます
3. テキストの差し替え
複製したテキストの中身だけを入れ替えます。
手順（全3ステップ）
❶
テキストをダブルクリック
❷
文字を入力（改行・箇条書きも可）
❸
既存のスタイル（見出し／本文など）をそのまま使う
※公開前に、各デバイスの画面を確認（切り替えは画面上部のデバイスアイコンをタップ）
💡 コツ：太字・色を増やしすぎると統一感が失われます。
4. ボタンの差し替え
ボタン名とリンク先を入れ替えます。
手順（全4ステップ）
❶
ボタンをクリック
❷
ラベル（文字）を入力
❸
［リンク］ を押してページ／URL／アンカーから選択
❹
保存→ プレビューで動作確認
💡 コツ：外部URLは https:// から入力
5. ボックス（フレーム）の使い回し
画像やテキストをまとめて複製して使います。
手順（全4ステップ）
❶
ボックス（またはコンテナ）をクリックして複製
❷
［複製］ 複製したレイアウトのグリッドを反転
❸
中の画像とテキストだけを差し替え
❹
配置のガイド線に沿って位置をそろえる
デザイン済みのフレームを活用した編集が完了
💡 コツ：左右の余白と上下の間隔をそろえると、読みやすくきれい。
⚠ 注意：幅や高さを大きく変更しない（スマホの崩れの原因）
6. レイアウトを崩さないポイント
- サイズは最小限の調整にとどめる
- 行間をむやみに狭くしない
- 整列ガイドにスナップさせる
- PCで整えてから、スマホ表示で最終チェック
7. 確認チェック
- 文字ははみ出していない？
- スマホ表示でも読める？
- ボタンのリンクは正しい？
- 余白・整列はそろっている？
8. よくあるミスと対処
- 文字がはみ出す → 文字数を調整／幅を少し広げる／既存サイズに戻す
- 重なってクリックできない → 前面/背面の並び替えで解決
- 同じリンクのまま → 複製後はリンク先を更新する
- スマホで崩れる → モバイル表示で幅・改行を確認（#7 レスポンシブ参照）
9. ショートカットまとめ
- 複製：⌘/Ctrl + D
- コピー：⌘/Ctrl + C
- ペースト：⌘/Ctrl + V
- 元に戻す：⌘/Ctrl + Z
このあと読むとよいページ
専門サポートの案内
- コンポーネント化（同一デザインをサイト全体で統一運用）
- スタイルガイド整備（見出し/本文/ボタンの統一ルール）
量産が必要・運用を楽にしたい場合は、共通パーツ化やスタイルガイド作成をご提案します。
