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

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

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

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

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

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

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

• ステージングサイトを使用してダウンタイムなしでリデザイン：ライブサイトはオンラインのまま、リデザインをプライベートで作業できます
• Duplicator Proがプロセス全体を簡素化：バックアップを作成し、ステージング環境との間で変更を簡単に移行できます
• 最初にパフォーマンスのベンチマークを設定する：MonsterInsightsで現在の指標を追跡し、リデザインの成功を測定します
• 常に災害復旧ポイントを作成する：必要に応じて即座にロールバックできるように、公開前に元のサイトをバックアップします
• 公開後の完全な監査が不可欠：リデザイン後にリンク切れ、SEOの問題、機能の問題を確認します

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

目次

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

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

• 時代遅れのデザイン

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

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

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

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

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

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

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

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

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

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

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

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

• 新機能

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

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

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

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

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

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

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

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

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

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

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

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

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

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

再設計の目標を設定する

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

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

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

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

予算を設定する

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

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

WordPressサイトの再設計方法

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

• ステップ1：Duplicator Proのインストール：バックアップおよび移行プラグインにより、サイトをステージングエリアに簡単に移行して再設計できます
• ステップ2：ライブウェブサイトのコピーを作成する：現在のサイトの完全なバックアップを生成し、ダウンロードします
• ステップ3：ステージングサイトを構築する：LocalWPまたはホスティングプロバイダーのステージングツールを使用して、安全なテスト環境をセットアップします
• ステップ4：バックアップをインポートする：ステージング環境にサイトのバックアップをアップロードして、ライブデータをインポートします
• ステップ5：新しいデザインを構築する：SeedProdまたはその他のデザインツールを使用して、再設計されたウェブサイトを作成します
• ステップ6：新しいウェブサイトを公開する：災害復旧ポイントを作成してから、完了した再設計をライブサーバーに移行します
• ステップ7：再設計されたサイトを監査する：エラー、壊れたリンク、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：ステージングサイトを構築する

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

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

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

ウェブホスティングプロバイダーが自動的にステージングエリアを作成してくれる場合もあります。ただし、自分で作成することも、WordPress ステージングプラグインを使用して作成することも簡単です。

このチュートリアルでは、初心者向けのローカル開発ソフトウェアである LocalWP を使用します。これは、個人のコンピューターに WordPress をセットアップしてホストします。さらに、無料で利用できます。

開始するには、お使いのコンピューターのオペレーティングシステムに一致するバージョンの LocalWP をダウンロードしてください。次に、+ アイコンをクリックして新しいサイトを追加します。

次に、ステージングサイトの名前を付けます。開発者の場合は、PHP、Apache、MySQL のカスタムバージョンを自由にセットアップできます。または、推奨オプションを選択すると、基本的な WordPress サイトが作成されます。

最後のステップとして、WordPress のユーザー名、パスワード、メールアドレスを入力します。これらの認証情報を使用して、ステージングサイトのダッシュボードにアクセスします。

ステージングサイトをライブウェブサイトと同じサーバーにホストしたい場合があります。これにより、2 つのサイト間で変更を移行する際にエラーが発生しなくなります。

これを支援するために、WordPress ステージングサイトの作成に関するチュートリアルをご覧ください。

ステップ4：バックアップをインポートする

LocalWP がステージングサイトを構築した後、それはデフォルトの WordPress インストールになります。ライブサイトと同じように見栄えを良くするには、保存したバックアップをインポートするだけです。

Local アプリでサイトを選択し、WP 管理をクリックします。これにより、ローカルサイトのダッシュボードが開きます。

ここで、Duplicator Proをプラグインとしてインストールして有効化します。次に、「バックアップのインポート」ページを見つけて、以前に保存したアーカイブファイルをアップロードします。

バックアップのアップロードが完了すると、Duplicatorから通知があります。インストールを開始するには、「 続行 」をクリックします。

次のページで、インストーラーの起動をクリックします。

その後、サイトのインストールの展開に関するステップバイステップの説明が表示されます。

利用規約と通知に同意します。次に、「 次へ」をクリックします。

最後に、インストール設定を確認します。問題がなければ、「 OK」をクリックします。

Duplicatorは、デフォルトのローカルサイトをライブサイトの正確なコピーに置き換えます！「管理者ログイン」ボタンを使用して、新しいダッシュボードにアクセスできます。 

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

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

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

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

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

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

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

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

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

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

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

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

ステップ6：新しいウェブサイトを公開する

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

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

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

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

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

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

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

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

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

ステップ7：リデザインしたサイトを監査する

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

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

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

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

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

• 壊れたリンクをチェックし、必要に応じてリダイレクトを追加します
• パフォーマンスの高いウェブページと投稿を再度確認します
• タイトル、見出し、メタディスクリプションが移行前と移行後で一貫していることを確認します
• ページの読み込み速度をテストします
• アクティブに使用されていないプラグインを削除します
• XMLサイトマップを確認し、エラーを修正します
• 異なるブラウザでリデザインをテストします

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

よくある質問（FAQ）

結論

これで完了です！WordPressサイトの再設計方法を学びました。

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

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

ウェブサイトをステージングエリアとの間で手動で移動するのに多くの時間を費やす必要はありません。ドラッグアンドドロップの移行を開始するには、Duplicator Proをダウンロードしてください！