メインコンテンツにスキップ
すべてのコレクションよくある質問公開
公開中のStudioサイトデザインをリニューアルする4つの方法
公開中のStudioサイトデザインをリニューアルする4つの方法
Saika avatar
対応者:Saika
2か月以上前に更新

既にStudioをご利用の方へ、Webサイトを更新する手順を4パターンご紹介します。本記事でご紹介する方法は一例となります。サイトの状況に応じてご検討ください。

1. 新旧プロジェクトを切り替えてリニューアル

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

公開中のプロジェクトを複製し、リニューアル後のサイトを別のプロジェクトにて構築。リニューアルサイトの準備が整ったら、旧プロジェクトのドメインを解除し、新プロジェクトで同じドメインを登録、サイト公開します。

独自ドメイン利用プロジェクトとサブドメイン(studio.site)利用プロジェクトで手順が異なります。

注意

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

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

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

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

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

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

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

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

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

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

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

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

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


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

2. サイトを直接編集してリニューアル

プロジェクト内の各ページを直接編集。準備ができた段階でサイト公開(更新)する方法です。

サイト公開後に行なったエディタ上での変更は、サイト更新するまで公開サイトには反映されません。そのため、既存のページをそのまま編集して準備ができたタイミングでサイトを更新する方法でリニューアルできます。

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

3. リニューアル用の新ページを作成して差し替え

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

1. ページの追加・複製

リニューアル用のページを追加または複製し、ページの公開範囲設定非公開にします。
※ページ単位の非公開設定は、有料プランのプロジェクトでのみご利用いただける機能です

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

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

3. パスの変更

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

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

4. 動作確認

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

5. 公開範囲変更

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

FREEプランをご利用の場合、noindex設定をonにすることで、ページを検索結果に表示させないようにすることが可能です。noindexはページを検索結果に表示させない機能なので、ページURLに直接アクセスすると閲覧可能となります。そのため、ページのパスを推測しにくい不規則な文字列に変更することを推奨します。

/1 /2 など簡単なパスのままだと、リンクの直打ちによりページが閲覧される可能性があります。

※noindex設定のon/off忘れにご注意ください

注意

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

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

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. 問題がなければ、サイトを更新して公開します。

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