メインコンテンツにスキップ

公開中のサイトデザインをリニューアルする方法

既にStudioでサイトを公開中の場合に、リニューアルする方法を4パターンご紹介します。リニューアル規模やサイトの状況に合わせて方法を選択してください。

今週アップデートされました

公開中のサイトをリニューアルする方法

既にStudioでサイトを公開中の場合に、リニューアルする方法を4パターンご紹介します。本記事でご紹介する方法は一例となります。サイトの状況に応じてご検討ください。

(1) 別プロジェクトを作成(複製)し、ドメインを切り替える場合

(2) 現サイトを直接編集して更新する場合

(3) プロジェクト内に新ページを作成し、パスを差し替える場合

(4) 別プロジェクトから、ページデザインをコピー&ペーストで移植する場合


(1) 別プロジェクトを作成(複製)し、ドメインを切り替える場合

新しいプロジェクトでリニューアル後のサイトを構築し、旧プロジェクトのドメインを新しいプロジェクトに設定する方法です。

注意

  • 旧プロジェクトでのドメイン解除から新プロジェクトで再接続・公開が完了するまで、必ずダウンタイムが発生します。

  • 有料プランを新プロジェクトに移行または引き継ぎはできません。契約のタイミングによってはプランの重複期間が発生します。

  • プロジェクトの複製はオーナー権限のアカウントで利用可能です。

  • Appsの連携情報は全て手動での移行が必要です。

手順

  1. 公開中のプロジェクトを複製します。

  2. 複製したプロジェクトで、リニューアルサイトを構築します。

  3. リニューアルサイトの準備が整ったら、旧プロジェクトのドメインを解除し、新プロジェクトで同じドメインを登録、サイト公開します。

独自ドメイン(有料プラン)をご利用の場合

ドメインの解除・再登録の際に、旧プロジェクトのダウングレードと新プロジェクトのアップグレードが必要です。新プロジェクトが用意できたら、次の手順でプラン変更を行います。

  1. 旧プロジェクトのプランをダウングレードします。

  2. 旧プロジェクトの有効期限内に、新プロジェクトをアップグレードします。(プランの重複課金期間を最小限にする場合は有効期限前日などに実施を検討してください)

  3. 旧プロジェクトの独自ドメイン接続を解除します。

  4. 新プロジェクトで、独自ドメインを設定します。

studio.siteドメインをご利用の場合

登録したドメインの解除・再登録が必要です。

  1. 旧プロジェクトを非公開にし「×」をクリックしてドメイン名を空欄にします。

  2. 新プロジェクトの公開設定で、先ほど解除したドメイン名を入力し、公開します。

(2) 現サイトを直接編集して更新する場合

この方法は、早期に完成できる小規模サイトの場合におすすめです。

編集期間にサイトを更新しなければ、公開中のサイトに影響はありません。

手順

  1. プロジェクト内の各ページを直接編集します。

  2. 準備ができた段階でサイト公開(更新)します。

この場合ダウンタイムは発生せず、CMSデータやAppsの設定等も引き続き利用できます。しかし、リニューアル後のデザインが完全に完成するまでサイトを更新できなくります。

(3) プロジェクト内に新ページを作成し、パスを差し替える場合

プロジェクト内でリニューアル用のページを新たに作成し、公開するタイミングで差し替える方法です。サイトが大規模でリニューアルに時間がかかる場合にご検討ください。

編集期間にサイトを更新しなければ、公開中のサイトに影響はありません。

手順

1. ページの追加・複製

リニューアル用のページを追加または複製し、ページの公開範囲設定非公開にします。

2. パスの変更またはページの削除

準備が整ったら、まず公開中のページのパスを全て変更、またはページを削除します。

3. パスの変更

リニューアル用の各ページのパスを、正式な文字列に変更します。

※ポップアップが表示された場合、チェックが入った状態で「更新」を選択します

4. 動作確認

作業が完了したら、サイト内リンクなどの動作をライブプレビューで確認します。

5. 公開範囲変更

各ページの公開範囲設定を全員にし、サイトを更新します。

注意

  • サイト公開時、公開範囲設定の切り替え忘れにご注意ください。

  • 公開中のサイトに反映するには、公開設定パネルで「更新」する必要があります。

(4) 別プロジェクトから、ページデザインをコピー&ペーストで移植する場合

別プロジェクトでリニューアルデザインを作成し、デザインをコピーして移植する方法です。コンポーネントのデータも自動的に移行されます。

注意:コピー&ペーストで引き継げるデータは、ページ内のデザイン要素のみです。CMSダッシュボード内のデータは、新規作成する必要があります。

また、プロジェクトに依存する一部情報は引き継ぐことができません。

<引き継ぐことができないデータの一例>

手順

  1. 新デザイン作成用のプロジェクトを用意する
    プロジェクトを新規作成または、公開中のプロジェクトを複製し、リニューアルデザインを作成します。

  2. 新デザインのレイヤーをコピーする
    リニューアルデザイン作成後、各ページのレイヤーパネルから Base <div> レイヤーをコピーします。(Mac:⌘+C、Windows:Ctrl + C)

  3. 公開中のプロジェクトのデザインを空にする
    公開中のプロジェクトへ移動し、ページ上の不要なボックスを削除します。
    ボックスを削除しても、サイトを更新するまでは、公開中のサイトに影響はありません。

  4. 公開中のプロジェクトに新デザインをペーストする
    コピーした Base <div>レイヤーを、ペーストして移行します。(Mac:⌘+V / Ctrl + V)
    コピーしてきたコンポーネントは、新しいコンポーネントとしてプロジェクト内に自動的に追加されます。

  5. 貼り付けたレイヤーのグループ化を解除する
    レイヤーをペーストすると、[Base <div>] のグループとして貼り付けられます。
    貼り付けた [Base <div>] レイヤーはグループ化を解除してください。(Win:ctrl+shift+G、Mac:⌘+shift+G)

注意:固定位置のボックスについて
固定位置に設定したボックスは、設定自体は保持されていますが、最上位の [Base] レイヤー直下に配置されていない場合は機能しません。

ペーストで移植した際、固定位置に設定したボックスがグループ化されていると、[Base]レイヤーの直下に存在しない状態になります。貼り付け後には必ずレイヤー内の[Base]グループ化を解除してください。

6. リンクやサイト設定を必要に応じて設定し直し、動作をライブプレビューで確認します。

7. 問題がなければ、サイトを更新して公開します。

こちらの回答で解決しましたか?