WordPressサイトを再設計する方法(&SEOを維持)

公開: 2025-02-24

ウェブサイトの再設計は、企業にとってエキサイティングでやりがいがあります。再設計には少量の高い希望はありませんが、これは記念碑的な仕事です。再設計は、サイトを剥がして再び構築する機会を与えることにより、既存の問題を解決できます。

たくさんのWordPressの再構築を行った人からそれを取ります。それだけの価値がありますが、間違いなくいくつかの作業が必要です。

目次
  • 1なぜあなたのウェブサイトを再設計するのですか?
  • WordPressサイトを再設計するための2つのステップ
    • 2.1 1.再設計のニーズを計画します
    • 2.2 2。ステージングサイトを作成します
    • 2.3 3. SEOと技術の詳細を保持します
    • 2.4 4. WordPressの再設計にDIVIを使用します
    • 2.5 5.ページとテンプレートを設計します
    • 2.6 6。パフォーマンスのためにサイトを最適化します
    • 2.7 7。発売前のチェックリストに従ってください
    • 2.8 8。ライブに行く
  • 3 WordPressの再設計が正しく行われます
    • 3.1それを行く

なぜあなたのウェブサイトを再設計するのですか?

サイトが立ち往生していると感じたときに再設計が必要です。これにはさまざまな形がありますが、ここに大きな変化が必要ないくつかがあります。

ウェブサイトの再設計の理由:業界の変更にはウェブサイトの更新が必要です。サイトは望ましい結果を達成していないため、訪問者は顧客への変換に問題があり、ビジネス目標が変化し、ブランドやロゴを更新しました。

あなたがこれらのいずれかにあなたの頭をうなずいていたなら、再設計があなたの最大の関心事であるかもしれません。

WordPressサイトを再設計するための手順

Webサイトの再設計には、絶対確実なプロセスがあります。しかし、当然のことながら、計画から始めることをお勧めします。

1.再設計のニーズを計画します

目標設定は、ウェブサイトの再設計の重要な部分です。あてもなく浮かぶには、プロジェクトが大きすぎます。あなたが現実的に達成したいことについて考えてください。

なぜあなたはあなたのウェブサイトの目標を書き留める必要があります

ウェブサイトの一般的な目標は、多くの場合、次のようなものが含まれます。

  • より良いコアWebバイタルスコア(より高速なサイトの方が誰にとっても優れています)
  • コンバージョン率の改善(それがあなたのサイトでの提出、製品の購入、またはその他の重要なアクションであるかどうか)
  • 滞留時間や直帰率などで測定されるユーザーエンゲージメントの改善
  • 将来のコンテンツ作成を簡素化するスケーラブルな設計システムを作成する
  • ユーザーエクスペリエンスを強化するための新しい機能を追加する(カスタマーレビュー、より速いチェックアウト、ビデオを表示するためのより良い方法、または簡単なナビゲーションなど)

コアWebバイタルスコアやコンバージョン率など、これらの目標の一部は、メトリックを追跡することで簡単に測定できます。より良い設計システムを作成するなど、他の人々は、特定の感覚や効率のレベルを達成することに関するものかもしれません。重要なことは、あなたが始める前にあなたの目標が明確に定義され、書き留められていることを確認することです。

チップを再設計します
サイトを再設計しているからといって、すべてが行かなければならないというわけではありません。ブログの投稿、サービスの説明、画像ライブラリ、製品情報など、コアコンテンツは一般的に価値があります。少し短いTo Doリストを持つために何ができるかを決定します。

2。ステージングサイトを作成します

ライブサイトで作業しないでください。代わりにステージングサイトを設定します。ホスティングツールを使用して、WordPressサイトをクローン化します。これを行わないと、訪問者がまだアクセスしようとしている間、ウェブサイトを壊す危険があります。さらに、ステージングサイトは、現在のWebサイトを維持することでプレッシャーを取り除きます。また、元のサイトがネットネットネガティブでない限り、ライブサイトでコンストラクションページを使用することもお勧めしません。再設計されたサイトの準備ができるまで待ってください。

Sitegroundは、既存のWebサイトからステージングサイトを作成する最も簡単な方法の1つを提供します。

Sitegroundワンクリックステージングサイト

ステージングサイトは、一時的なURLで「生きている」ウェブサイトのクローンです。ライブサイトとは完全に分離されているため、2つの間に干渉はありません。

ステージングサイトでは、ライブサイトとしてプッシュするまでGoogleが気付かないように、一時的にそれを提出することをお勧めします。それを行うには、「設定>読み取り」に移動し、「検索エンジンがこのサイトのインデックスを作成することを阻止する」というボックスを確認してください。ライブサイトに加えてステージングサイトをインデックス化させた場合、Googleを混乱させます。

3. SEOと技術の詳細を保持します

再設計はSEOに影響を与える可能性があります。検索エンジンは、既存のサイト構造に基づいてインデックスを作成します。あまりにも多くを変更すると、Googleはインデックスからページをドロップし、プロセスを再度開始します。そのため、既存のサイトの完全な監査を実施することをお勧めします。 Google検索コンソールを使用して、高性能のページ、クロールエラー、キーワードのランキングを識別します。このデータをエクスポートすると、ベンチマークを確立して再設計されたサイトを比較し、ウェブサイトの基礎を変更しすぎないようにします。

再設計ごとにこれらのそれぞれを必ず実行してください。

  1. 既存のURLを保存します。すべてのページを追跡し、CMS製のページを含むWebサイトに投稿してください(分類法や保存ページについては考えてください)。私はこれらすべてのスプレッドシートを持っているのが好きです。サイトのページの95%のサイトマップを見ることができます。
  2. URLの変更があるページに対して301リダイレクトを設定します(非常に重要です。あるプラグインはこれを自動的に行います)。
  3. 301については、以前のリダイレクトをそのままにしてください。また、必要な301Sをクリーンアップしたい場合があります(404は悪くはありませんが、ページが移動する場合は301を使用します)。
  4. タイトルタグとメタの説明を移行します。あなたはそれらを変更するかもしれませんが、あなたがそうしなければ、あなたは確かにそれらを失いたくありません。
  5. ページで使用される追加のスキーマを保持します(SEOプラグインからデフォルトで作成されたものよりも多く)。スキーマを保存するのを忘れたときにスキーマを再現するのは苦痛です(これにもスプレッドシートを使用してください)。
  6. 検索エンジンがコンテキストに使用するため、見出し構造をそのままにしてください。コンテンツを変更することは許可されていますが、以前のSEOに影響を与える可能性があることを知っているだけです。

WordPressの再設計のSEOタスク

SEOは、多くの場合、再設計の後付けです。 SEOは(理由の範囲内で)新しいWebサイトを最適化する最後のものの1つになりますが、再設計で最初に考えることの1つである必要があります。既存のWebサイトが現在のトラフィックを取得した場合、ステップ(または複数)に戻りたくありません。

チップを再設計します
また、明確な理由がない限り、SEOプラグインを変更しないことをお勧めします。もしそうなら、多くのプラグインが、ほとんどのSEO設定を古いプラグインから新しいプラグインに移行するための移行ツールを備えています。

4. WordPressの再設計にDiviを使用します

テーマを変更するとウェブサイトを大幅に変更できますが、良いニュースは、すべてのメディアとCPTがそのままであることです。アップロードされた画像とビデオは、構築したカスタム投稿タイプと同じURLパスを持ちます(ただし、クエリループとページの要素を再構築する必要があり、ページネーションが変更される可能性があります)。これにより、ゼロから開始していないため、再設計により自信があります。

これで、WordPressの再設計のテーマを選択するときに、何百ものオプションがあります。ただし、実際にWebサイトを設計するためにDIVI以外に優れたものはありません。 WordPress用のページビルダーがユーザーに多くのデザインオプションを提供するのを見たことがありません(初心者やCSSに非常に熟練した人であるかどうか)。

Divi 5エディター機能

Diviはデザインマシンであり、本当に再設計にコミットしている場合は、さらに別のデザインボトルネックに押し込むツールを選択しないことをお勧めします。何よりもまず、Diviは設計ツールです。つまり、新しいWebサイトを再構築するために必要なすべての機能と機能があります。

もう少しヘルプが必要な場合、Diviには、プロのWebデザイナーのチームによって設計されたスターターサイトがあります。また、実証済みのAI Webサイトビルダーを使用して、よりカスタムを使用することもできます。両方のオプションの最大の部分は、すべてのデザインがDiviに準拠していることです。つまり、すべてがDiviのエディター内で編集可能であることを意味します。

予算が限られていますか? Diviは、実際には市場で最も手頃なWebデザインツールの1つです。本格的なデザインツール、クラウドストレージ、AIアシスタント、VIPサポート(そして、この文に詰め込んでいただける以上のもの)を月額7.42ドルで入手できます。

再設計のためにDiviを入手してください

チップを再設計します
DIVIを最大限に活用するには、モジュールプリセットと新しいオプショングループプリセットの使用について学びます(Divi 5)。これらは、デザインをより速く、より一貫性のあるクラスベースの設計システムを適用するDIVIの方法です。デザイナーを使用している場合は、DIVI内のこれらの機能を認識していることを確認してください。

5.ページとテンプレートを設計します

グローバルな色とフォントをセットアップすることから始めます。 DiviテーマオプションまたはWordPressテーマのカスタマイザー内で、プライマリカラーパレットとフォントのペアリングを確立できます。

DIVIでグローバルフォントを編集します

次に、Diviのプリセットシステムの作業を開始します。プリセットは、一般的なWebサイト要素のすべてに再利用可能なデザインスタイルを作成します。ボタン、見出し、さまざまなテキストスタイル、フォームフィールドなどのことを考えてください。プリセットは、サイト全体で設計の一貫性を確保するために重要です。私はサイト全体で使用する要素を含むページから始めます。その後、このためにホームページから始めるのが好きです。

次に、Diviのテーマビルダーを使用して、ヘッダーとフッターテンプレートに取り組みます。 Webサイト全体に適用されるグローバルヘッダーとフッターテンプレート(または、必要に応じて特定のセクションに)を作成します。また、必要な動的ページテンプレートを作成します。動的ページテンプレートは、テンプレートに自動的に適用されるコンテンツに使用されます(ブログ投稿、カテゴリアーカイブページ、製品ページなど)。

Diviテーマビルダー

この後、Core Staticページを設計することで終了するのが最善です。ホームページ、ページ、連絡先ページ、サービスページなどの最も重要な静的ページから始めます。これらのページを設計するときは、グローバルスタイルとプリセットを適用して視覚的な一貫性を維持します。各ページに効果的なアクションを施したクリアレイアウトの作成に焦点を当てます。

6.パフォーマンスのためにサイトを最適化します

Google Page Speedスコアの改善と、速度の最適化に使用する必要があるプラグインについて詳細に読むことができるため、私はこのポイントを軽減しません。しかし、ここに私が完成した再設計のいずれかに持っているものがあります:

divi

Divi 4 vs Divi 5ページ速度

ページの読み込み時間を4倍短縮したDivi 5アルファの以前のバージョン

私たちは、Diviが設計の自由と制御に制限を課す素晴らしいテーマである方法をすでに取り上げています。しかし、それはまた、市場で最も速く、最もパフォーマンスの高いWordPressテーマの1つです。この再設計中にDIVIを初めてインストールする場合、Divi 5を調べることを強くお勧めします。 。 WooCommerceストアを再設計している場合、古いバージョンは今の最善の策ですが、他のほとんどの場合、Divi 5が使用したいものになります。

再設計のためにDiviを入手してください

CloudFlare CDN

CloudFlare-ホームページ -  2025年1月

CloudFlareは、世界中のサーバーにWebサイトの静的資産を保存および提供するコンテンツ配信ネットワーク(CDN)であり、ユーザーへの距離データが削減されます(より速くなります)。小規模なWebサイト用に無料版をよく使用しました。ただし、次のツールは、ビジネスの収入に依存していたWebサイトに使用するものです。

CloudFlareを取得します

Nitropack

Nitropack速度最適化

Nitropackは、Webサイトを非常に高速にするためのオールインワンプラットフォームです。 WordPress Webサイトスマートキャッシュ、独自のCDNを介した最適化されたリソース配信、および印象的な画像最適化を提供します。また、怠zyな読み込みと画像をWebPに変換することもできます。 WordPressを使用すると、多くの場合、一連のプラグインとサードパーティツールにパッチを当てていますが、Nitropackは本当にワンストップショップです。この素晴らしい一連の統合ツールに自分自身を扱ってください。後で感謝します。

Nitropackを取得します

7.発売前のチェックリストに従ってください

発売前のチェックリストがあり、誤って何かを見逃さないようにします。文字通りチェックできるものは何百もありますが、ここにチェックする6つの主要なカテゴリがあります。

  • すべてのコンテンツを校正する:タイプミス、文法エラー、およびキャッチに目を向ける必要があるものを確認します(ここでは、特定のことをキャッチするためにAIを使用するのが好きです)。
  • 画像とメディアのレビュー:すべての画像とビデオが正しく表示され、最適化されていることを確認してください。
  • モバイルテスト:モバイルデバイスとタブレットのすべてのページをテストして、レスポンシブデザインが期待どおりに機能するようにします。私たちは21世紀に携わっているので、非常に幅広のディスプレイもテストしてください。
  • クロスブラウザーテスト:さまざまなブラウザ(Chrome、Firefox、Safari、Edge)でサイトをテストして、互換性を確保します。
  • サイトクロールを実行する:可能であれば、ScreamingFrogの無料バージョンを使用してサイトをcraい、明らかなエラーに対処する必要があるかどうかを確認してください。
  • インストール分析:起動の直前に分析をセットアップするのに最適な時期です。再設計されたサイトがどのように行われているかを実際に確認できるように、コンバージョンイベントを設定してください。

WordPressサイトの再起動チェックリストを再設計します

8。ライブに行く

真実の瞬間が到来しました!ステージング環境で再設計されたWebサイトを厳密にテストし、その安定性とパフォーマンスに自信を持っていると、ライブになりましょう。この時点で、あなたはうまく機能し、あなたのエンドユーザーを満足させ、あなたのビジネス目標を達成するものを構築しました。

優れたウェブサイトの3つの側面が再設計されています

Sitegroundを使用している場合は、サイトツールを使用してステージングサイトをライブにすることができます。 Sitegroundがワンクリックでステージング環境を作成したように、ステージングサイトをライブ環境に交換します。

Sitegroundワンクリック展開ステージングサイトをライブにします

それが起こるのに少し時間がかかります。サイト全体のステージングURLをカスタムドメインに変更する方法が大好きです。これは以前はそのような痛みでしたが、今では本当に楽です。

WordPressの再設計が正しく行われます

ユーザーは、特に典型的なWordPressのテーマが提供するものよりも優れた設計コントロールを望んでいる人、特にDiviに切り替えたことを望んでいたとユーザーがよく聞きます。 DiviはWordPressの再設計を喜びにします。ドラッグアンドドロップビルダーグローバルな設計設定高度なスタイリングオプションを使用すると、ブランドと目標を反映するようにウェブサイトを再設計できます。コーナーを切らないで、数年で交換するWordPressテーマを取得してください。

Diviを試してみてください

適切なテーマができたら、Webサイトに新しい機能を追加し、SEOを維持(および改善)し、最初から速度と応答性を備えた構築に焦点を当てます。

それを手に入れてください

再設計は多くの作業ですが、これらのツールを使用して行う方法により、はるかに簡単になります。サイトのホスティング、設計、最適化には、以下のこれらのツールをお勧めします。

推奨事項のために便利です
Sitegroundワンクリックステージングを備えたWebホスティングプロバイダー今すぐ取得します
Diviテーマデザイナーにとって最高のWordPressテーマ今すぐ取得します
クイックサイト事前に構築されたスターターサイトとAIに生成されたWebサイト今すぐ取得します
divi ai AI搭載のWebデザインアシスタント今すぐ取得します
Nitropack合計ウェブサイトのパフォーマンス最適化プラグインとサービス今すぐ取得します
CloudFlareセキュリティ、CDN、およびパフォーマンスの最適化今すぐ取得します
ランク数学主要なWordPress SEOプラグイン今すぐ取得します
Divi Dash 1つの場所からすべてのWebサイトを監視するための無料ダッシュボード今すぐ取得します