メインコンテンツにスキップ
すべてのコレクションよくある質問公開
Studioで公開中のサイトデザインをリニューアルする方法
Studioで公開中のサイトデザインをリニューアルする方法

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

Saika avatar
対応者:Saika
今週アップデートされました

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

既にStudioでサイトを公開中の場合に、リニューアルする方法を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をご利用でないサイトでのみ有効な方法となります。

注意

  • CMS記事、プロパティはコピーして引き継ぐことができません。新規作成してください。

  • ペーストされた<div> Baseは、グループ化を解除(Win:ctrl+shift+G、Mac:⌘+shift+G)で削除してください。

  • シンボル化されている部分をコピーしてペーストすると、シンボル化された状態で貼り付けされ、プロジェクトに新規シンボルとして自動で追加されます。

手順

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

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

  3. 公開中のプロジェクトへ移動し、ページ上の不要なボックスを削除します。次に、コピーしてきた <div> Base レイヤーをペースト(Mac:⌘+V / Ctrl + V)し移行します。

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

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

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