WordPressウェブサイトを再設計する方法：究極のチェックリスト
公開: 2021-12-10ああ、WordPressウェブサイトの再設計…
このミッションに関連するさまざまな問題について考えるとき、通常は少しストレスを感じる傾向があります。
この重要な瞬間に、サーバーで単純なCommand + Option + EscapeまたはCtlr + Alt + Delを実行し、簡単にやり直すことを夢見ない人はいますか？
残念ながら、 Webサイトの再設計は、常にそれよりも少し複雑です。 そして、見落とし、間違い、失敗は、とても早く起こります…
WPMarmiteは、この大きなプロジェクトに安心して取り組むためのベストプラクティスを皆さんと共有したいと考えていました。
準備はできたか？ この投稿では、アップストリーム戦略からオンライン立ち上げまで、 WordPressWebサイトを再設計するために考慮する必要のあるすべての要素について詳しく説明します。
概要
- WordPressウェブサイトを再設計する前の4つのステップ
- 再設計を開始するための3つのステップ
- あなたのウェブサイトの立ち上げを成功させるための3つのステップ
あなたの最高のWordPressプロジェクトには最高のホストが必要です！
WPMarmiteはBluehostを推奨しています：優れたパフォーマンス、優れたサポート。 素晴らしいスタートを切るために必要なものはすべてあります。
WordPress Webサイトを最初から作成する方法については、完全なガイドをご覧ください。
WordPressウェブサイトを再設計する前の4つのステップ
WordPressを手に入れてウェブサイトを再設計する前に、さまざまな構造要素に取り組む必要があります。
そうです。自分が何に取り組んでいるのかを知らずに始めようとは思わなかったのですか？
1.再設計の目標を設定します
他のプロジェクトと同様に、WordPress Webサイトを再設計するには、目標を設定する必要があります。目標は、正確に定義する必要があります（フリーランサー、Webエージェンシー、または非専門のWebマスター）。
次のステップを導くのは、これらの明確で簡潔な目標です。
それはあなた自身に次の質問をすることになります：なぜあなたはあなたのウェブサイトを再設計したいのですか？ これには多くの理由が考えられます。
- 新しいテーマを選択するか、ページビルダーを選択して、サイトのデザインを変更します。
- サイトの管理を更新します。 これは、プラグインまたはWordPress CMSのバージョンが更新されていない場合、異なるプラグイン間に競合がある場合、またはテーマが不規則に変更されている場合に当てはまります。 これらはすべてあなたのウェブサイトのパフォーマンスとその日常の管理に影響を与える可能性のある懸念事項です。
- SEOを最適化します。 特にトラフィックが減少したか、離陸していないか、ユーザーエクスペリエンスが現在不安定であるか、またはHTMLコードがGoogleのロボット用に最適化されていないかどうかを自問することを目標とします。
- 現在のデザインでは対応できない新機能をサイトに追加します。 また、訪問者にとってより直感的で使いやすいものにすることもできます。
- Webサイト（またはeコマース）の技術構造を改善して、セキュリティを強化し、読み込み速度を改善し、ツリー構造を変更します。
- サイトを別のウェブホスティングサーバーに移行します。
- 特にWooCommerceストアがある場合は、売り上げを増やしましょう。
- より最新のウェブサイトを提供するコンテストであなたのサイトを最新のものにしてください。 あなたはあなたのブランドイメージとあなたの評判を改善するためにそれを利用するでしょう。
よく構成されたドキュメントに、これらのさまざまな目標を書き留めます。 あなたはそれらがあなたのウェブサイトの再設計を組織するための構造化要素を構成するのを見るでしょう。
2.再設計プロジェクトを構成します
再設計の目的が明確になったので、プロジェクトのメインラインを決定するさまざまなステップについて説明しましょう。
ワイヤーフレームを作成する
ワイヤーフレームという用語はベルを鳴らしますか？
このステップは非常に重要であるため、主題の迅速なレビューが必要です。
ワイヤーフレームは、Webページのさまざまな要素を1つのドキュメントに配置するのに役立つ構造的なモックアップです。
アイデアは、実際には、サイトのさまざまなページのフレームワークを構築して、作成するユーザーエクスペリエンスを明確に把握することです。
この記事で例を挙げましたが、ここでも私のポイントを説明します。
ミレニアムペーパー+鉛筆の方法で簡単に再設計できる場合でも、デジタルツールを使用してワイヤーフレームを設計することをお勧めします。
これにより、必要に応じて簡単に変更できるだけでなく、これらのワイヤーフレームをチーム（またはWebマーケティングで働くいとこと）と共有することもできます。
私はこれを行うためにいくつかのツールをお勧めすることしかできません：
- Balsamiq Wireframes ：有料のソフトウェアですが、30日間の無料試用版では、巧妙に作成されたワイヤーフレームを設計するための十分な時間が与えられます。
- MockFlow ：これは便利なフリーミアムオンラインツールです。 その無料版では、最初に最大3ページを作成できます。
- スケッチ：適切に使用する方法を知っていれば、非常に強力なコラボレーションWebデザインプラットフォームです。 30日間の無料試用版と、月額9ドルからの有料オファーを提供しています。
- Canva ：ワイヤーフレーミング専用のツールではありませんが、その多数の機能のおかげで、それに近づくことができます。 そして何より、それは多くの機能を備えた無料版を持っています。
そしてこの時点で、あなたはあなたのワードプレスのウェブサイトを再設計するために何を期待するかについてより明確な考えを持っています。
モックアップのデザイン
ワイヤーフレームが再設計されたページの構造のビジョンを提供する場合、モックアップはデザイン自体を統合します。
ページレイアウトソフトウェア（InDesignなど）を介して作成されたWebページのレイアウトには、特定の技術が必要になる場合があり、かなり時間のかかる手順です。
したがって、問題は、再設計のためにグラフィックモックアップを本当に作成する必要があるかということです。 答えは簡単です。
- はい、独自のテーマを作成したい場合。 この場合、再設計されたWebサイトを最初から設計する必要があるため、すべてのグラフィック要素を簡単に視覚化できます。
- いいえ、既存のテーマを使用して再設計するだけの場合は。 より簡単なソリューション。 ただし、この場合は、目標に応じて新しいテーマを選択してください。
あなたを助けるために、WPMarmiteはあなたが必要とするリソースを持っています：最高の無料のテーマのリスト。 楽しみ！
WPMarmiteのヒント：
「テーマを選択する際に注意すべき要素の中で、チェックすることを忘れないでください：
- テーマがSEO用に最適化されていること。
- インターネットユーザーが使用するすべてのブラウザー（少なくともChrome、Safari、Firefox、およびEdge）用に最適化されていること。
- レスポンシブデザインで設計されています。つまり、すべてのデバイス（デスクトップ、スマートフォン、タブレット）向けに最適化されています。
これにより、サイトを再設計する際のトラブルを大幅に減らすことができます。」
WPMarmiteサブスクライバーに参加する
最後のWPMarmite投稿（および排他的なリソース）を取得します。
新しいツリー構造について考えてください
はい、私はあなたを安心させます、私たちはまだ園芸ではなく、ウェブサイトの再設計について話しているのです！
ツリー構造を設計するということは、異なるページ間に存在するリンクを想像し、訪問者がサイト内を移動する方法をすべて考えることを意味します。
つまり、ツリー構造を作成することで、ユーザーのさまざまなナビゲーションパスについて考えることができます。
それで、それをどのように行うのですか？
ツリー構造を設計し、以下を含めることを忘れないでください。
- メインナビゲーションメニュー、および潜在的なセカンダリメニュー。
- フッターとそれに含まれる可能性のあるリンク。
- 特にブログで考えられるサイドバー。
- ブログなどのさまざまなカテゴリ。
このような図では、異なるページ間に巧妙に作成されたメッシュを作成することを忘れることはできません。これにより、スムーズなユーザーエクスペリエンスが保証されます。
ワイヤーフレームと同じように、この図を1枚の紙に作成するか、GlooMapsやOctopusなどのオンラインツールを使用できます。
仕様の設計
さて、この段階では、構造化要素が十分に供給されています。 今度は、これらすべてを重要なドキュメントである仕様にまとめるときです。
Webサイトの再設計の仕様は非常に広範なドキュメントであり、Webサイトの再設計に必要なさまざまな期待をターゲットにすることができます。
Web上に仕様の多くのテンプレートがあります。 ただし、必ず以下を含める必要があります。
- あなたのウェブプロジェクトとあなたの会社の説明、そしてあなたのウェブサイトがこのプロジェクトで果たす役割。
- 可能であれば正確に説明された、新しいWebサイトのターゲットオーディエンス。
- 再設計の目標は、可能な限り図で示されています。 たとえば、トラフィックを増やすことが目標の1つである場合は、現在のWebサイトのトラフィックを指定することを忘れないでください。
- あなたの現在のウェブサイトから回復される要素：あなたのページのコンテンツ、可能な画像など。
- たどりたいグラフィックパス。 これを行うには、ワイヤーフレームとモックアップを仕様、およびスタイルガイド（視覚的なアイデンティティを定義する）に統合します。
- eコマースストア、ブログ、オプトインモジュール、新しい管理（バックオフィス）の追加など、再設計されたWebサイトの新しい機能要素。
- 再設計プロジェクトの主なマイルストーン：いつWebサイトのプレビューを表示しますか？ いつ公開しますか？
今はもっとはっきりしていますね。
3.自由に使えるリソースについて考えてください
さあ、ビジネスに取り掛かる時が来ました。
あなたがそれを受け入れるならば、あなたの挑戦は今あなたが自由に使える資源を以下の観点からリストすることです：
- 予算：再設計にいくら投資したいですか？
- 時間：WordPress Webサイトを再設計するためにどのくらいの時間がありますか？
- スキル：自分ですべての目標を達成する能力はありますか？
- ツール：プラグイン、テーマ、ページビルダー…これらのタイプのツールは、技術的なWebスキルが限られている場合でも、目標を達成するのに役立ちますか？
このリストを使用すると、外部プロバイダーを呼び出す必要があるかどうか、またはチームメンバーと、または独自の手段で独立して作業できると感じるかどうかを知ることができます。
最高のWordPressエキスパートを探す
Codeableは、WordPressテーマのデザインやインストールからカスタムプラグインの開発まで、あらゆることを支援できる専門家とのマッチングに専念しています。
4.リダイレクトプランを作成します
「さて、ここに行きます、これがそれです！」
簡単！ あなたのウェブサイトの再設計の間にあまりにもしばしば無視される最後のステップがあります：あなたのリダイレクト計画の作成。
説明させてください。
多くの場合、Webサイトの再設計では、URLが変更されます。 これは、新しいページを作成する場合に特に当てはまります。
しかし、リダイレクトを行うことを考えずに新しいWebサイトをオンラインにするとどうなりますか？ 404エラーがたくさんあり、SEOと訪問者のナビゲーションに影響を与えます。
リダイレクト計画を設計するために、これほど簡単なものはありません。 ExcelまたはGoogleスプレッドシートを開き、次のようにテーブルを作成します。
Webサイトがオンラインになったら、リダイレクトプラグインを設定し、このテーブルを直接インポートできます。
賢いですね。
了解しました。深呼吸して、再設計自体について話しましょう。
WPロケットであなたのウェブサイトをスピードアップ
再設計を開始するための3つのステップ
では、プロジェクトが適切に構造化および編成されているので、どのように対処しますか？ これらの3つの重要なステップがあなたを導きます。
1.ローカルで作業するか現在のサイトで直接作業するかを選択します
技術的な側面に入る前に、作業を選択することから始めます。
- 現在のサイトに直接アクセスして、変更を「ライブ」で統合します。
- または、開発サーバーと実稼働前サーバーで、新しいサイトをオーディエンスに提供する前にテストします。
これらの2つのオプションには何が必要ですか？
あなたのサイトで直接オンラインで作業することは野蛮です。
この場合、すべての訪問者は変更をライブで確認し、新機能の「モルモット」として機能します。これにより発生する可能性のあるすべてのバグが発生します。
また、変更中にエラーが発生した場合、問題を検出して解決するまでWebサイトに影響を与えることに注意してください。 サイトが利用できず、機能が機能していません…
これらすべての問題を回避するために、Webサイトをローカルで再設計できます。
ローカルで作業することの利点はたくさんあります。
- 安全に変更を加えてください。
- リスクなしでプラグインをテストします。
- オンラインにする前に、最終レンダリングのプレビューを用意してください。
また、現在構成しているWPの管理を維持したい場合にも理想的なソリューションです。 つまり、既存のWebサイトを削除せずにWordPressWebサイトを変更できるようになります。
ただし、まったく新しい管理で最初から始めたい場合は、WordPressをローカルにインストールする方法を確認してください。
WPMarmiteのヒント：「もちろん、UpdraftPlusやDuplicatorなどのプラグインのおかげで、古いWebサイトから要素を取得できます。 これらのプラグインを使用すると、コンテンツ、テーマ、プラグイン、メディアなど、必要なものを管理者にインポートして戻すことができます。」
2.再設計に必要なツールを入手します
今度は、WordPressWebサイトの再設計を引き継ぐために必要なすべてのものをリストして入手するときです。
覚えておいてください：あなたはそれらをあなたの仕様にリストしました。
これには以下が含まれる場合があります：
- 公式ディレクトリで利用可能な多くのテーマの1つがあなたの目に留まった場合、新しいテーマ（非常に人気のあるAstraのように）。
- コードに手を入れたくない場合は、ElementorやBeaverBuilderなどのページビルダー。
- 素晴らしい機能を統合するための新しいプラグイン。
使用するプラグインがわかりませんか？ たぶん、あなたは私たちの必需品リストであなたが探しているものを見つけるでしょう。
ツールボックスの準備はできていますか？ すべてを設定して、再設計の最後の重要なステップであるコンテンツに進みましょう。
3.新しいWebサイトのコンテンツを準備します
まず第一に、忘れてはならない重要なポイント。
ウェブサイトの再設計中に、回復できる以前のウェブサイトのコンテンツが必然的にあります。
画像、テキスト、プラグインの構成：考えてみてください！
したがって、現在のWordPress Webサイトのバックアップを作成し、再設計に入れたいものを覆い隠してください。
ただし、再設計を行う場合は、Webサイトのコンテンツを変更して、ターゲットにとって、そしてもちろん検索エンジンにとって、より関連性が高く、魅力的なものにすることでもあると思います。
だからあなたのSEO戦略について考えてください、あなたの新しい（素晴らしい）ウェブサイトをうまくランク付けすることはとても重要です。
従う手順を要約するのが複雑な場合は、ここで主要な行を示すことができます。
- 一方では、ランク付けするキーワードを定義します。 これらは、ターゲットが探している情報を見つけるために、ターゲットがGoogleに自発的に入力する表現です。
- 一方、各ページで、それらを統合する必要がある場所を決定します。 タイトルタグ（hn）
、または画像の代替テキストは、たとえばSEO用に最適化する必要があります。Googleはそれらを好みます。そこで最初にサイトを理解しようとします。 - これらの新しいコンテンツが再設計されたWebサイトに統合されると、すべてが適切に配置されていることを確認できます。 特に、見過ごされがちな画像の名前、タイトル、ページのメタディスクリプションについて考えてみてください。
Webサイトのページ上のSEO（コンテンツの最適化）を支援するには、専用のSEOプラグインを利用してください。
WPMarmiteはそれらの中で最も有名なYoastSEOを使用していますが、市場で効果的なのはWPMarmiteだけではありません。 この記事で競合他社の詳細な比較をご覧ください。
ウェブサイトのランキングはそれ自体が仕事です。 ただし、いくつかの優れた方法を使用すれば、うまくやって、ターゲットの要求に成功することができます。
開発サーバー上で、ローカルで、そして必要なすべてのWordPressツールを使用して、プロジェクトの進行状況を確認できます。オンラインでの立ち上げが近づいています。
あなたのウェブサイトの立ち上げを成功させるための3つのステップ
新しいWordPressWebサイトを世界に公開することに興奮しているように感じます。
時間をかけてこれらの3つのステップを確認し、注意深く実行してください。実行してよかったと思います。
1.直接運用サーバーまたは運用前サーバーを選択します
「実動前サーバー」という用語は、あなたにとって何の意味もありませんか？ 心配しないでください。定義のために少し休憩しましょう。
実稼働前のサーバーは、Webサイトが公開されたときにWebサイトが稼働するサーバーと同じサーバーを共有します。 WPMarmiteを再設計する場合、Alexは、たとえば、プリプロダクションをpreprod.wpmarmite.comに配置することを選択できます。これはwpmarmite.comと同じ環境になります。
では、なぜこのpreprodサーバーを使用するのでしょうか。
- WordPress開発者の場合、クライアントで再設計を検証します。
- サイトが公開される前にバグをテストするため。
- SEO戦略を調整するには、すべてのキーワードが各ページに含まれていることを確認してください。
これがすべて検証されたら、それから初めてライブになり、新しいWebサイトを展開できます。 自信がある場合は、もちろん直接本番環境に移行することもできます。
WPMarmiteのヒント：「サイトの展開中は、訪問者がWebサイトに再度アクセスできるようになるまで、メンテナンスモードをアクティブにする必要があることに注意してください。
これを行うには、私たちが作成したComingSoonプラグインの選択を確認することを躊躇しないでください。 これにより、メンテナンスページを表示でき、継続的な再設計にもかかわらず、訪問者を変換し続けることができます。」
2.潜在的な問題について新しいWebサイトをテストします
実稼働前のサーバー（またはWordPressの冒険家の場合はライブ）から、新しいWebサイトをテストする必要があります。
問題のテストを成功させる秘訣は、平均的な訪問者の立場になり、クリックして、発生した問題に注意することです…
おそらく、設計と構造の問題が発生します。 ただし、次のことも確認することを忘れないでください。
- 行われていないリダイレクト、およびデッドリンクまたはホワイトページを生成します。
- GTMetrix、Pingdom、またはGoogleのPageSpeedInsightsテストでテストすることによるWebサイトのパフォーマンス。
- オプトインポイントは、それらがうまく機能するかどうかをチェックすることによって。
- お問い合わせフォーム、見積もりフォーム…
- 支払い、eコマースサイトがある場合（確認メール、メンバーサイトへのアクセスなど）。
すべてが美しく、機能的で、うまく接続され、うまくまとめられていますか？ おめでとう！ 最後のステップは、私がここからあなたの顔に見る大きな笑顔を強化します。
3.すべてのサードパーティサービスを再アクティブ化して再接続します
さあ、あなたはもうすぐそこにいます！
これで、WordPressWebサイトにリンクされているすべてのサービスとプラグインを再アクティブ化できます。 特に考えてみてください：
- キャッシュプラグイン。
- MonsterInsightsなどのGoogleAnalyticsを使用するプラグイン。
- FacebookやInstagramなどのソーシャルネットワークを使用するプラグイン。
- プラグインとテーマのさまざまなライセンスキー。
また、セキュリティはすべての人のビジネス（特にあなたのビジネス）であるため、Webサイトを保護するすべての要素を再度有効にすることを忘れないでください。
行く準備はできましたか？ 次に、Google検索コンソールで新しいウェブサイトのインデックス作成を開始します。 この操作により、Googleのロボットは新しい赤ちゃんを訪問し、新しいバージョンでより迅速にインデックスを作成します。
タダム！ 再設計され、パフォーマンスが向上し、印象的で、構造化された新しいWebサイトは、それにふさわしいトラフィックを受け取る準備ができています。 大変な作業でしたが、それだけの価値はありましたね。
#WordPressウェブサイトの#redesignを計画していますか？ 良い！ 実用的なヒントやコツをたくさん使って、可能な限り最善の方法で再設計を準備、実行、オンラインで行うためのステップバイステップの計画を確認してください。
最近、WordPressのウェブサイトの再設計を行いましたか？
あなたが遭遇した問題、またはあなたがそれに受けたプライドは何ですか？
コメントでそれについてすべて教えてください：WPMarmiteチームはそれらすべてを注意深く読みます。