WordPressサイトの再設計方法（ダウンタイムなし）

数年前と変わらない見た目のウェブサイトになっていませんか？ウェブサイトはすぐに古臭く感じられるようになり、以前のように訪問者の注意をうまく引きつけられていないことに気づくかもしれません。

見た目を新しくしたいというだけでなく、ウェブサイトをビジネスを前進させる強力なツールにしたいと考えているはずです。

リデザインは、オンラインでの存在感を刷新し、WordPressサイトが最大限に機能するようにするための戦略的な一手です。

正しく行われたリデザインは、エンゲージメント、コンバージョン、ブランド認知度を高めることができます。しかし、それをどうやって行うのでしょうか？

このチュートリアルでは、WordPressウェブサイトをリデザインする方法をご紹介します！

主なポイントは次のとおりです：

• ステージングサイトを使用してダウンタイムなしでリデザイン：ライブサイトはオンラインのまま、リデザインをプライベートで作業できます
• Duplicator Proのワンクリックステージングは、プロセス全体を簡素化します。フルサイトバックアップからダッシュボードで直接ステージングサイトを作成できます。
• まずパフォーマンスのベンチマークを設定します。MonsterInsightsとGoogle Search Consoleで現在の指標を追跡し、リデザインの成功を測定します。
• 常に災害復旧ポイントを作成する：必要に応じて即座にロールバックできるように、公開前に元のサイトをバックアップします
• ローンチ後の完全な監査が不可欠です。リデザイン後、壊れたリンク、301リダイレクト、コアウェブバイタル、SEOの問題、機能の問題を確認します。

クイックサマリー：WordPressサイトのリデザイン方法

目次

WordPressサイトをリデザインする理由

サイトのリデザインは時間がかかりすぎる、またはウェブサイトをメンテナンスモードにしてしまうのではないかと心配で、先延ばしにしているかもしれません。しかし、リデザインが役立つ状況がいくつかあります。

• 時代遅れのデザイン

ウェブサイトが時代遅れに見えたり、最新の機能が不足していたり、現在のデザイン基準を満たしていない場合は、リデザインの時期かもしれません。

更新されたウェブサイトデザインは、訪問者のエクスペリエンスを向上させ、サイトをより魅力的でプロフェッショナルなものにすることができます。

• ユーザーエクスペリエンスが低い

ユーザーがウェブサイトのナビゲーションに苦労したり、ページの読み込み速度が遅い場合、高い直帰率やコンバージョン率の低下につながる可能性があります。

ユーザーエクスペリエンス（UX）に焦点を当ててWordPressサイトをリデザインすることで、これらの問題に対処し、オーディエンスを引きつけ続けることができます。

• レスポンシブでない、またはモバイルフレンドリーでない

多くの人がモバイルデバイスを使用してインターネットを閲覧しています。これは、さまざまな画面サイズに適応するレスポンシブなウェブサイトを持つことが重要であることを意味します。

現在のウェブサイトがモバイルフレンドリーでなかったり、レスポンシブでなかったりする場合は、アクセシビリティを最大化するためにリデザインする時期かもしれません。

• ブランディングまたはメッセージングの変更

ブランドが大幅に変更された場合や、メッセージングを刷新したい場合は、ウェブサイトのリデザインが新しいブランドアイデンティティを与えることができます。ブランディングとメッセージングの一貫性を保つことで、全体的なイメージが強化され、ターゲットオーディエンスにリーチするのに役立ちます。

• 検索エンジン最適化（SEO）の改善

検索エンジンはアルゴリズムを頻繁に更新し、SEOのベストプラクティスは時間とともに変化します。ウェブサイトの再設計は、サイト構造の最適化、ページ読み込み速度の向上、およびSEOフレンドリーな要素の実装により、オーガニックトラフィックを増やす機会となります。

• 新機能

ビジネスが進化するにつれて、ウェブサイトにeコマースストア、ブログ、またはソーシャルメディアフィードを追加する必要が生じる場合があります。再設計により、これらの新機能をシームレスに統合し、全体的なデザインとユーザーエクスペリエンスに適合させることができます。

WordPressサイトの再設計を行う前にすべきこと

後ほど、WordPressサイトを完全に再設計する方法をご紹介しますが、その前にいくつか実行しておくべき手順があります。

現在のデザインを評価する

ウェブサイトを再設計する前に、現在のデザインを検討してください。優れた機能と改善したい点を把握しておく必要があります。

元のウェブサイトの気に入っている点を必ずメモしておきましょう。再設計を進める上で、これらの機能や使いやすさを維持したいはずです。

しかし、優れた再設計のためには、弱点を考慮することが重要です。不十分なレイアウトや配色を修正することで、パフォーマンスが良く、見た目も魅力的なウェブサイトを作成できます。

現在のベンチマークを確認する

再設計が効果的であったかどうかを確認するには、現在のサイトの統計情報を把握しておく必要があります。

現在のベンチマークは、MonsterInsightsをインストールすることで簡単に確認できます。これはGoogleアナリティクスをWordPressのバックエンドに接続し、すべてのパフォーマンスデータを1か所にまとめるプラグインです。

MonsterInsightsをウェブサイトに追加したら、トップ投稿/ページレポートを探してください。ここで、訪問者がどれだけいるかを確認できます。

MonsterInsightsのデータを保存したい場合は、PDFレポートをエクスポートボタンをクリックしてください。これにより、ページビュー、ユーザーセッション、直帰率などが含まれるzipファイルがダウンロードされます。

MonsterInsightsのその他の機能を確認したいですか？完全レビューをお読みください！

Google Search Consoleからコアウェブバイタルスコアを取得する必要があります。エクスペリエンス » コアウェブバイタルに移動し、モバイルとデスクトップのレポートをエクスポートします。

これらは、Googleがユーザーエクスペリエンスを評価するために使用するパフォーマンス指標であり、リデザインの前後に追跡して、検索パフォーマンスを改善した（損なっていない）ことを確認する価値があります。

これらの統計を保存することで、リデザインが価値があったかどうかを簡単に確認できます。新しいデザインが公開される前後の分析を比較できるようになります。

再設計の目標を設定する

パフォーマンスベンチマークを把握したら、再設計の目標を設定できます。

優れた再設計により、以下が可能になります：

• 読み込み時間の短縮
• コンバージョン率の向上
• 直帰率の低下
• ページあたりの平均滞在時間の増加
• ユーザーエクスペリエンスの向上
• その他多数！

新しい色、ロゴ、レイアウトでリブランディングを試すこともできます。再設計の前後にパフォーマンスベンチマークを記録してください。これらの指標は、再設計が成功したかどうかを判断するのに役立ちます。

予算を設定する

最後に、プロジェクトの予算を決定する必要があります。再設計の基本的な費用には、新しいテーマの購入やプロのウェブデザイナーの雇用が含まれます。

ビジネスの他の分野のために費用を節約したい場合は、自分で再設計を行うことをお勧めします。優れたテーマビルダーがあれば、コーディングスキルがなくても新しいサイトを構築できます。

WordPressサイトの再設計方法

サイトのデザインを改善しようと決めても、どうすればよいかわからないかもしれません。心配いりません。私がすべてのステップを案内します！

• ステップ1：Duplicator Proのインストール：バックアップおよび移行プラグインにより、サイトをステージングエリアに簡単に移行して再設計できます
• ステップ2：ライブウェブサイトのコピーを作成する：現在のサイトの完全なバックアップを生成し、ダウンロードします
• ステップ3：ステージングサイトを構築する：Duplicatorを使用して、ライブサイトのバックアップをステージングサイトに即座に変換します
• ステップ4：新しいデザインを構築する：SeedProdまたはその他のデザインツールを使用して、リデザインされたウェブサイトを作成します
• ステップ5：新しいウェブサイトをローンチする：災害復旧ポイントを作成し、完了したリデザインをライブサーバーに移行します
• ステップ6：リデザインされたサイトを監査する：エラー、壊れたリンク、SEOの問題、および全体的な機能を確認します

ステップ1：Duplicator Proをインストールする

再設計を検討している場合、まったく新しいWordPressのインストールをゼロから構築したくはないでしょう。ウェブサイト全体をやり直す場合でも、すべての投稿、ページ、プラグイン、その他の重要な詳細を保持することが重要です。

データ損失を回避するために、ライブウェブサイトのコピーを作成し、ステージングサイトに移動することをお勧めします。ここでは、ライブユーザーに影響を与えることなく新しいデザインを構築できます。

この作業に最適なツールはDuplicatorです。このWordPressプラグインは、バックアップ、移行、およびクローニングの強力なツールです。ウェブサイト全体を単一のzipファイルとしてダウンロードするため、簡単に移動できます。

再設計プロセス中にDuplicatorが必要かどうか不明ですか？Rock Lobster WebdesignがDuplicatorでデザイン効率を向上させる方法をご覧ください！

まず、Duplicator Proのサブスクリプションを選択してください。無料バージョンも利用可能ですが、Duplicator Proにはドラッグアンドドロップ移行機能が付属しています。これにより、再設計をすぐに開始できます。

購入が完了したら、ライセンスキーをコピーします。次に、ライブWordPressサイトのダッシュボードを開き、Duplicatorをインストールします。

次に、Duplicator Pro » Settings » Generalに移動します。

ライセンスキーを貼り付け、Activateボタンをクリックします。これで、再設計プロセスを開始する準備が整いました！

ステップ2：ライブウェブサイトのコピーを作成する

次のステップでは、ウェブサイトのコピー（またはバックアップ）を作成する必要があります。手動バックアップは大変な作業ですが、Duplicatorは初心者でも簡単にできます。

Duplicatorは、すべてのWordPressファイル、テーマ、プラグイン、およびデータベーステーブルをzipファイルにバックアップすることで機能します。バックアップを作成すると、完全に新しいサーバーに簡単に移動できます。

まず、Backups » Add Newに移動します。

動的タグを使用してバックアップに名前を付けることができます。Storageの下でLocalを選択します。

サイトの再設計にあたり、サイトの一部の要素を削除したい場合があります。その場合は、アーカイブファイルをカスタマイズできます。バックアップセクションを展開し、含めたくないコンポーネントのチェックを外すだけです。

サイト全体をバックアップするには、何も変更せずに次へをクリックしてください。

Duplicator がライブウェブサイト全体のスキャンを完了します。バックアップを作成する前に、通知を確認してください。

バックアップが作成されたら、ダウンロードできます。

LocalWP のようなローカルステージング環境を使用する場合、このソフトウェアは WordPress を自動的にインストールしてくれることがよくあります。この場合、アーカイブファイルのみをダウンロードする必要があります。

ただし、FTP クライアントや cPanel を使用してバックアップをサーバーに直接アップロードする場合は、installer.php スクリプトも保存してください。

ステップ3：ステージングサイトを構築する

再設計のような大きなタスクの準備をする際には、ステージングサイトを用意することが重要です。これは、ライブサイトの機能や外観に影響を与えることなく変更をテストできる、ウェブサイトのクローン版です。

ライブウェブサイトを再設計すると、誤って不具合を視聴者に公開してしまう可能性があります。

ステージングサイトを使用すると、公開する前にすべてが正しく機能していることを確認できる、安全で管理されたスペースが確保されます。さらに、再設計中に既存のウェブサイトをメンテナンスモードにする必要もありません。

ステージング環境の設定は、かつてリデザインの最もフラストレーションのたまる部分でした。ホストのステージングツールを理解するか、LocalWPのようなローカル開発環境を構成するか、手動でサブドメインにファイルをコピーする必要がありました。

Duplicator Proはそれらをすべて削除します。ワンクリックステージングにより、WordPressダッシュボードから直接ステージングサイトを作成できます。

Duplicator Pro » ステージングに移動し、最初のステージングサイトを作成します。

前のステップで作成したバックアップを選択します。サイトにタイトルとカスタム管理カラースキームを付けて、ライブサイトではなくステージングサイトを編集していることが簡単にわかるようにします。

クローンが完了したら、ステージングサイトの管理ダッシュボードにログインします。すべてがライブサイトと同じように見え、機能します。視聴者には何も表示されません。

ローカルでの作業を好む開発者の場合、LocalWPは依然として優れた選択肢です。お使いのオペレーティングシステムに一致するバージョンをダウンロードし、新しいサイトを追加して、Duplicatorバックアップをインポートします。しかし、ほとんどのサイト所有者にとっては、ワンクリックステージングがより速い方法です。

ステップ4：新しいデザインを構築する

ステージングサイトができたので、元のウェブサイトはそのままにして、全体的な再設計を行うことができます。

WordPressの組み込みエディターでウェブサイトをデザインすることもできますが、これらはあまり使いやすくなく、柔軟性も高くありません。 

あらゆる種類のウェブサイトを簡単にデザインするには、SeedProdの使用をお勧めします。SeedProdは、ドラッグアンドドロップ編集、150以上のランディングページテンプレート、さらには事前構築済みのウェブサイトテーマを備えているため、最高のウェブサイトビルダーです。

SeedProdはランディングページビルダーとして始まりましたが、ウェブサイトのあらゆる部分をカスタマイズできるように進化しました。テーマビルダーを使用すると、新しいページ、ヘッダー、フッターなどを簡単にデザインできます。

これらのすべての機能を利用するには、ローカルWordPressサイトにSeedProdをインストールして有効化します。次に、「SeedProd » Theme Builder » Theme Template Kits」に移動します。

これにより、選択できるさまざまな事前デザインされたテーマキットが得られます。すべてのページテンプレートをゼロから手動でコーディングする代わりに、SeedProdはデザインプロセスをジャンプスタートできます。

ポートフォリオ、オンラインビジネス、ブログなどのさまざまなウェブサイトが見つかります。

新しいテーマを選択すると、ホームページ、投稿、ヘッダー、フッターのテンプレートが用意されます。これらのいずれかを編集するには、「 デザインを編集」をクリックします。

次に、SeedProdページビルダーを使用してテーマを完全にカスタマイズできます。自由に新しいブロックをページにドラッグアンドドロップしたり、フォントを編集したり、デフォルトの色を更新したり、その他の変更を行ったりしてください。

完了したら、変更を保存してください。次に、各テーマテンプレートを発行します。ページの上部で、新しいSeedProdテーマを有効にします。

SeedProdでウェブサイトをデザインする方法についてさらに詳しいガイドが必要な場合は、コードなしでカスタムWordPressテーマを作成する方法に関するこの記事をご覧ください。 

ステップ5：新しいウェブサイトをローンチする

新しいウェブサイトの再設計が完了したら、変更を発行する時間です！

Duplicatorを使用すると、ステージングサイトのバックアップを作成するだけで済みます。次に、バックアップのアーカイブファイルをダウンロードします。

これをライブウェブサイトにインポートする前に、災害復旧ポイントの設定を検討してください。基本的に、これはデザインを更新する直前のサイトのバックアップを保存します。開発中に見逃した重大なエラーに気付いた場合は、このバックアップにロールバックするだけです。

これを実行するには、元のサイトのバックアップを作成します。保存場所としてローカルを選択してください。

バックアップの作成を続行します。完了したら、青い家のアイコンをクリックします。

ディザスタリカバリの設定をクリックします。

この時点で、リカバリリンクをコピーするか、ランチャーファイルをダウンロードします。これらを安全な場所に保存しておくと、サイトを即座に復旧するために使用できます。

次に、リデザインをインポートする時間です。これを行うには、バックアップのインポートページに移動し、ステージングサイトのzipファイルをアップロードします。Duplicatorがバックアップをウェブサイトにインポートする方法を案内します。 

詳細については、ローカルのWordPressサイトをライブサーバーに移行する方法のチュートリアルをご覧ください。

ステップ6：リデザインされたサイトを監査する

ステージングサイトでエラーをチェックした場合でも、何かを見落としている可能性があります。リデザインを公開した後、ウェブサイトが正しく表示され機能していることを確認するために、徹底的に確認することが重要です。

検索エンジン最適化（SEO）が適切であることを確認するために、完全なSEO監査を実行することを検討してください。All-in-One SEOは、初心者にもわかりやすいウェブサイトのSEO提案リストを提供してくれるため、この目的に最適なSEOプラグインです。

また、サポートチケットフォームの作成をお勧めします。これにより、ユーザーはサイトでのエクスペリエンスに影響を与えるバグや404エラーを報告できます。

WPFormsのようなプラグインを使用すると、サポートチケットテンプレートから開始し、連絡フォームを編集して特定のニーズに合わせて調整できます。

リデザインの直後に実行すべきその他のタスクを次に示します。

• 壊れたリンクをチェックし、必要に応じてリダイレクトを追加します
• パフォーマンスの高いウェブページと投稿を再度確認します
• タイトル、見出し、メタディスクリプションが移行前と移行後で一貫していることを確認します
• ページの読み込み速度をテストします
• アクティブに使用されていないプラグインを削除します
• XMLサイトマップを確認し、エラーを修正します
• 基本的なWCAG 2.2アクセシビリティ標準に対してサイトをチェックする
• コアウェブバイタルスコアを、再設計前に保存したベンチマークと比較します。LCP（読み込み速度）、INP（インタラクティビティ）、CLS（レイアウトシフト）に細心の注意を払ってください。
• 異なるブラウザでリデザインをテストします

これらすべてを行った後、新しい訪問者を引き付け、何度もウェブサイトに戻ってきてもらう美しいリデザインが完成します！ 

よくある質問（FAQ）

ライブサイトでの再設計はやめましょう

ほとんどのWordPressサイトオーナーは、ステージングステップをスキップします。なぜなら、それは追加の作業のように感じられたからです。LocalWPの設定、サブドメインの設定、ファイルの転送を手動で行うことは、スキップすることが合理的だと感じさせるのに十分な手間でした。

その言い訳はもう通用しません。Duplicator Proのワンクリックステージングは、かつて30分かかっていたセットアップを、ボタンを1回クリックするだけに変えます。ライブサイトはオンラインのままで、訪問者には何も表示されず、あなたは結果を気にせずに何かを壊すためのプライベート環境を手に入れることができます。

再設計のSEO側面は、ローンチ後も注意が必要です。トップパフォーミングURLを壊したり、コアウェブバイタルスコアを低下させたりする美しい新しいデザインは、あなたが気づく前に検索ランキングに実害を与える可能性があります。プロジェクトが完了したと見なす前に、監査を実行してください。

ウェブサイトをステージングエリアとの間で手動で移動するのに多くの時間を費やす必要はありません。任意のフルサイトバックアップからDuplicator Proのワンクリックステージングを試してみてください！

こちらをご覧の皆様には、これらのWordPressチュートリアルやプラグインレビューも気に入っていただけるかもしれません：

• 見事なウェブサイトを構築するためのベストWordPressテーマ15選
• WordPressサイトのクリーンアップ方法（専門家による11のヒント）
• WordPressテーマの変更方法
• クラウドWordPressバックアップの作成方法
• WordPressサイトをクローンするための9つのベストプラグイン
• WordPressデータベースの最適化方法