WPBeginner v6 – 新しいサイトデザインの舞台裏

ここ数週間でWPBeginnerをご覧になった方は、新しいウェブサイトのデザインになったことに気づかれたかもしれません。以前のデザインと多くの類似点がありますが、舞台裏では多くの変更がありました。

ニュースレターでお約束したように、再デザインの背景にある考え方、学んだこと、サイトの新しい点、そして最も重要なこととして、私たちの学びの一部をウェブサイトの改善にどのように活用できるかをお伝えしたいと思います。

簡単な背景

私は2009年にWPBeginnerを開始し、多くの新しいクリエイターと同様に、最初の3年間でウェブサイトのテーマデザインを4回変更しました。

ビジネスが成長するにつれて、ウェブサイトの再設計には多くの時間とリソースがかかり、それらは私たちのコアミッションを達成するために費やすべきだと気づきました。

そのため、コアミッションにすべての焦点を当てることを決意し、ビジネスは飛躍的に成長しました。

WPBeginnerの最後の再設計は2016年に実施され、それ以来私たちは大きく進歩しました。

過去5年間で起こったことは次のとおりです。

• WPBeginnerブログで1000以上の無料WordPressチュートリアルを作成し、YouTubeチャンネルで数百の新しいビデオチュートリアルを追加しました。
• FacebookにWPBeginner Engageコミュニティを立ち上げました。これは現在、8万人以上のメンバーを擁する最大のWordPress Facebookグループです（参加は無料です）。
• 当社は、WPBeginner Growth Fundを立ち上げ、MemberPress、Pretty Links、Formidable Forms、Uncanny Automator、およびその他の6社を含む、お気に入りのWordPressプラグインに投資しています。
• 2つの新しいWordPressプラグインをリリースしました。WordPressソーシャルプルーフプラグインであるTrustPulseと、強力なWordPressプレゼント＆コンテストプラグインであるRafflePressです。
• 有名なAIOSEO（WordPress用オールインワンSEOプラグイン）、SeedProd（ドラッグ＆ドロップWordPressサイトビルダー）、Smash Balloon（ソーシャルメディアフィードプラグインNo.1）、PushEngage（ウェブサイトプッシュ通知プラグイン）、AffiliateWP（WordPress用アフィリエイト管理プラグイン）を含む5つのWordPress成長プラグインを取得しました。
• また、有名なWP Mail SMTPプラグイン（メール配信の問題を解決するため）、SearchWP（強力なWordPress検索プラグイン）、Easy Digital Downloads（デジタル製品を販売するための人気のeコマースプラグイン）、WP Simple Pay（クレジットカード決済を受け付けるための簡単なプラグイン）、そしてSugar Calendar（WordPress用の簡単なイベントカレンダープラグイン）を含む、5つのWordPressプラットフォーム＆インフラストラクチャプラグインを取得しました。

合計で、当社のプラグインは現在1900万以上のウェブサイトで使用されており、当社のプラグインのうち4つは史上最高のWordPressプラグイントップ20に入っています。

それらはすべて素晴らしい成果ですが、私たちは、改善を続け、私たちの使命を果たすために、対処する必要のある新しい課題に直面しています。

これがWPBeginner v6につながります。

コンテンツ発見に焦点を当てたデザイン

WPBeginnerはシンプルなチュートリアルブログとしてスタートしましたが、今ではWordPressのWikipediaのようになっています。

当社のユーザーは繰り返し、WordPressの問題に対する答えを見つけたいとき、単にキーワードをGoogleで検索し、最後にWPBeginnerを追加して最良の解決策を見つけると述べています。

読者の皆様がWordPressに関する質問の答えを素早く見つけられるように、新しいホームページでは検索機能を重視しました。

コンテンツライブラリを検索するために戻ってきたリピーターの方でも、WordPressを始めたばかりの新規読者の方でも、WPBeginnerのホームページから探しているものを見つけやすくなりました。

すべての単一投稿ページにあるサイドバーや、検索アイコンをクリックした際のウェブサイトヘッダーにも同様の検索ウィジェットが表示されます。

WPBeginnerが、技術に詳しくないユーザーにとって最大のWordPressリソースサイトになった理由の1つは、複雑なWordPressのトピックを平易な英語で、ステップバイステップで説明しているからです。

新しいデザインでは、WordPress用語集セクションにライブ検索機能を追加しました。これにより、一般的なWordPress用語に簡単に慣れることができます。これは基本的にWordPress用語の辞書のようなものです。

WPBeginnerユーザーとして、人気のプラグイン、プレミアムテーマ、ホスティング、その他のマーケティングツールに関する最高のWordPress割引への限定アクセスをご利用いただけます。

当社のチームは、皆様のために最高の取引を交渉するために素晴らしい仕事をしてくれました。このセクションは大幅に成長し、100以上のクーポンと取引があります。

ユーザーからの多くの要望により、セールセクションにもライブ検索を追加しました。これにより、お気に入りのWordPress製品の最安値をすばやく見つけることができます。

2022 年に向けて、私たちにとって大きな優先事項はコンテンツの発見可能性です。

これにより、最高のユーザーエクスペリエンスを提供し、サイト滞在時間を増やし、ページビューを増加させ、全体的な直帰率を削減します。

2022年、ユーザーエクスペリエンス最適化（UXO）がSEOにおいて重要な役割を果たすと信じています。

競合他社に打ち勝ち、競争優位性を獲得したいのであれば、UXOに注意を払うことを強くお勧めします。

この記事全体を通して、新しいテーマで行ったように、サイトに同様の機能を実装する方法についてのヒントを共有します。

WordPress検索を改善する方法

デフォルトのWordPress検索機能はあまり強力ではないため、ランキングアルゴリズムをカスタマイズして各検索結果に表示されるものを制御したい場合は、SearchWPプラグインの使用をお勧めします。

または、Googleアルゴリズムを使用するGoogleカスタムサイト検索を使用することもできますが、欠点はGoogleが検索ページに広告を表示するため、あまり見栄えが良くないことです。

デールセクションや用語集のように、サイトにライブ検索を追加したい場合は、WordPressサイトにAJAXライブ検索を追加する方法に関するこのチュートリアルに従ってください。

他に役立つ可能性のあるWordPress検索チュートリアルとしては、カスタムWordPress検索フォームの作成方法や、WordPressメニューに検索バーを追加する方法があります。

新しいWordPressメガメニュー

コンテンツの発見可能性というテーマに沿って、古いWordPressドロップダウンメニューを新しいマルチカラムのメガメニューにアップグレードしました。

これにより、新規ユーザーは最高のコンテンツをすばやく簡単に見つけることができます。

また、私たちが構築している無料ビジネスツールや、その他の新製品をより効果的に紹介することもできます。

WordPressでメガメニューを追加する方法

WPBeginner用にカスタムソリューションを構築しましたが、WordPressでメガメニューを追加する方法に関するこのチュートリアルに従うことで、トップページをより効果的に強調できます。

WordPressブロックエディター（ついに）

2019年、WordPressはコンテンツ作成のために、非常に強力なブロックエディター（別名Gutenberg）を導入しました。

私はすぐにそれを私の個人ブログで使用し始めましたが、WPBeginnerは多くのカスタムコーディングされた機能を備えたレガシーテーマを使用していたため、切り替えはそれほど簡単ではありませんでした。

そのため、過去2年間、WPBeginnerサイトではクラシックエディターを使用せざるを得ず、新しいウェブサイトはすべてWordPressブロックエディターの最新かつ最高の機能を利用していました。

最終的に、新しいテーマにより、WordPressブロックエディターのすべての素晴らしい機能を使用できるようになりました。

例えば、コードを書かずに非常にクールな「知っていましたか？」ブロックを追加できるようになりました。

また、WordPressブロックエディターを使用して、いくつかのランディングページを完全に再設計しました。

例えば、私たちの新しい無料WordPressブログセットアップランディングページをご覧ください。

ブロックエディターを使用して、無料ビジネスツールを再設計し、最近作成した無料ツールの一部を強調しました。

必要に応じて完全にカスタムされたランディングページを作成するために、引き続きSeedProdを使用します。これは、適切なドラッグ＆ドロップWordPressページビルダーだからです。

Gutenberg を使ってカスタムランディングページを作成する方法を学ぶのは楽しかったですが、マーケティングチームがカスタムランディングページを作成できるようになる前に、セットアップにはまだ多くのコーディングが必要でした。

一方、ページビルダープラグインを使用している場合、マーケティングチームは開発チームの助けなしにカスタムランディングページやファネルレイアウトなどを迅速に作成できます。

WordPress core team is working hard on the full-site editing features, but it still needs a lot of work before it can compete with the powerful features that you get with page builders like SeedProd, Divi, or Beaver Builder.

とはいえ、ブロックエディターは非常に素晴らしいものであり、コンテンツを強化するためのクールなデザイン要素を作成するために使用できるWordPressブロックプラグインがたくさんあります。

ここに、新しいテーマで注目のプラグインを強調表示するための、もう1つのクールなブロックがあります。

SeedProdは、WordPressで最も初心者向けのドラッグ＆amp;ドロップページビルダーです。150以上の既製テンプレートが付属しており、そのテーマビルダー機能を使用すると、完全にカスタムなWordPressテーマ（コードなし）を構築できます。今すぐSeedProdを試す »

今後のブログ記事では、コンテンツの可読性をさらに向上させるためのコンテンツデザインブロックがさらに増えるでしょう。

YoastからAIOSEOへの切り替え

長い間、WPBeginnerサイトはYoast SEOプラグインの非常に古い、カスタマイズされたバージョン（v 2.3.5）を使用していました。

比較のために言うと、彼らは現在バージョン17です。

Yoast は、SEO に重要だと考えていたいくつかの必須機能が削除されていたため、更新したくありませんでした。

WordPress SEOの分野全体が革新を止めたとも感じました。

そのため、2020年初頭に、オリジナルのオールインワンSEOプラグインであるAIOSEOを取得し、チームに完全に刷新させました。

チームが行った仕事に非常に誇りを持っており、競争優位性を得るために必要なすべてのSEO機能が備わっています。

ブロックエディターと同様に、当社の新しいウェブサイトもAIOSEOへの切り替えを開始し、ランキングの向上を見始めたため、WPBeginnerでの使用を熱望していました。

現在、All in One SEOの最新かつ最高のSEO機能を使用しています。

当社では、動画サイトマップのような機能により、動画コンテンツのランキング向上を支援し、RSSサイトマップによりコンテンツのインデックス作成を高速化し、高度なSEOモジュールによりサイトSEOをより細かく制御できるようになり、その他多くの機能が利用可能です。

これは市場で最高のSEOプラグインだと心から信じており、最も重要なのは、中小企業や代理店にとって公正な価格設定であることです。

今週中に、なぜ切り替えたのかについて、詳細な機能の内訳とともに完全なレポートを作成する予定ですが、それまでの間、All in One SEOの無料版を試すか、WPBeginnerで使用しているすべての強力な機能を備えたPro版をチェックすることができます。

WordPressの速度改善

多くの研究で、ウェブサイトが高速であるほど、ユーザーエクスペリエンスが向上し、サイト滞在時間が増加し、全体的なコンバージョンが増加することが示されています。

これが、Googleがウェブサイトの速度をSEOランキング要因にした理由でもあります。

さて、このサイトをしばらくフォローしている方なら、私がパフォーマンス最適化に夢中になっていることをご存知でしょう。

WPBeginnerサイトは、素晴らしいWordPressホスティングパートナーであるSiteGroundのおかげで、すでにかなり高速でした。彼らはGoogleクラウドプラットフォーム上に構築された高度に最適化されたWordPressホスティングソリューションを提供しています。

そしてもちろん、私たちはWordPressの速度に関するベストプラクティスに従っていましたが、新しいテーマデザインにより、いくつかの顕著な速度改善を行いました。

こちらがGoogle Page Speedの結果です。

GTMetrixとPingdomからのホームページの結果は次のとおりです。

そして、新しいセクション、ホームページへのコンテンツ追加、画像の拡大などを行っても、この結果を得ました。

そして、お尋ねになる前に、WPBeginnerサイトには現在68個のアクティブなプラグインがあります。

なぜページサイズを縮小し、すべてを高速化しながら、サイトにコンテンツを追加できたのか、疑問に思っているかもしれません。

さて、不要だと感じたものを削除しました。これらは、より多くのウェブサイト所有者に検討してほしいことです。

これはサイトの速度を向上させSEOランキングに役立つだけでなく、全体的な帯域幅の使用量を削減し、コストを削減し、ウェブサイトのカーボンフットプリントを改善します。

WordPressコメントでのGravatarの無効化

WordPressには、Gravatar（Globally Recognized Avatarsの略）と呼ばれる組み込みのサードパーティサービスが付属しています。

これにより、WordPressサイトにコメントを残したユーザーのプロフィール写真またはアバターを表示できます。

課題は、ウェブサイトの訪問者にGravatarアカウントを設定してもらう必要があることですが、ほとんどのユーザーはそうしません。そのため、ウェブサイトには見た目の良くない灰色の謎の男性のアバターが表示されるだけになります。

さて、コメントが50件ある人気のブログ記事があり、ユーザーの10％しかGravatar画像を持っておらず、90％は持っていないとしましょう。さて、それはあなたのページが読み込んでいる50枚の追加画像であり、コンテンツに大きな価値をもたらさないものです。

そのため、多くの人気ブログがGravatarを無効にし始めており、WPBeginnerでも同様のことを行っています。

この簡単な変更により、ページの読み込み時間とサイト速度スコアが劇的に改善されました。

サードパーティのカスタムフォントの削除

正直に言うと、過去にカスタムフォントについて深く考えたことはありませんでした。

タイポグラフィの観点からサイトを良く見せる、少なくともインターネットが速い幸運な人にとっては、ごく普通のことだと感じていました。

旧WPBeginnerテーマでは、Proxima NovaというカスタムAdobeフォント、FontAwesomeという人気のアイコンフォントを使用しており、OptinMonsterポップアップではGoogleフォントのSource Sans Proを使用していました。

インターネット接続が悪い遠隔地からサイトを訪れたとき、これらのフォントがユーザーエクスペリエンスにどれほど大きなパフォーマンス影響を与えるかを真に実感しました。

新しいデザインでは、この問題を解決したいと考えました。これにより、開発途上国の学生やビジネスオーナーが WPBeginner にアクセスし、WordPress を学び、オンラインプレゼンスを成長させることが容易になります。

新しい WPBeginner v6 テーマは、デフォルトのシステムフォントを使用しており、これらは大きく進化しました。すべてのデバイスで美しく表示され、もちろん非常に高速です。

スタイル未適応テキストのフラッシュ（FOUT）なし、累積レイアウトシフト（CLS）なし、ブロッキング時間の著しい短縮。

WordPressダッシュボードにログインするか、Githubを使用すると、両方のプラットフォームが以前にシステムフォントに切り替えたため、フォントが似ていることに気づくでしょう。

カスタムフォントの削除は、すべてのビジネスウェブサイトにとって実行可能な解決策ではないかもしれませんが、スピードに関しては、デザイナーと開発者の両方が注意すべきことだと私は確信しています。

役立ついくつかのベストプラクティス:

• 見出しと本文で2つの異なるフォントを使用する代わりに、両方に同じフォントを使用することを検討してください。
• 細字、標準、半太字、太字、極太、黒、そしてこれらのすべてのイタリック体バージョンなど、複数の異なるフォントウェイトやスタイルを使用する代わりに、フォントウェイトを2つ（標準と太字）のみに減らすことを検討してください。
• FontAwesomeやその他のアイコンフォントライブラリ全体を読み込むのではなく、必要なアイコンのSVGを直接追加することを検討してください。

OptinMonsterでカスタムフォントを無効にする

テーマのデザインとコーディングが完了した後も、フォントに関するもう一つの問題を解決する必要がありました。

私のウェブサイトのポップアップとメール購読フォームはOptinMonsterを使用していますが、それでもGoogleフォントを読み込んでいました。

OptinMonsterは、より多くのメール購読者を獲得し、ウェブサイトのコンバージョンを向上させるのに役立つため、無効にすることは選択肢ではありませんでした。

幸いなことに、それは私の会社の1つなので、開発チームにGoogleフォントを無効にする方法を尋ねました。

この機能は私が最初にリクエストしたものではなく、OptinMonsterにはすでにGoogleフォントを無効にするだけでなく、任意のカスタムWebフォントを読み込むことができるAPIソリューションがありました。

私はテクノロジーにかなり精通しており、ドキュメントで共有された小さなスニペットを実装できますが、多くのお客様はそうではないことを知っています。

そのため、当社のチームは現在、キャンペーンビルダー内にこの機能を構築しました（コーディング不要）。

ただし、コードに慣れていて、キャンペーンごとにこの設定を手動でオフにしたくない場合は、私が使用しているハックに従うことができます。

まず、OptinMonsterがサイト上でウェブフォントを読み込まないように、以下のJSスニペットを追加してください。

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

次に、style.cssファイルに次のCSSを追加します。

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

もちろん、ウェブサイトのフォントに合わせてフォントを変更することを忘れないでください。これにより、基本的に上記のfont-familyがサイトに読み込まれるすべてのOptinMonsterキャンペーンに適用されます。

W3 Total CacheからWP Rocketに切り替えました

長い間、WPBeginnerでW3 Total Cacheプラグインの高度にカスタマイズされた構成を実行していました。

それでも目的は達成できましたが、当社の全製品サイトで使用しているWP Rocketには及びませんでした。

この再設計により、私はついにWP Rocketに切り替えました。これは、特に信頼性の高いキャッシュプリローディングとファイルミニフィケーションなど、多くの優れたウェブサイトスピード機能を提供します。

ウェブサイトの速度を向上させたい場合は、このプラグインが不可欠です。

アフィリエイトリンクの管理にThirstyAffiliatesまたはPretty Linksを使用している場合は、それらをキャッシュから除外するようにしてください。

高度なルールタブに移動し、キャッシュしないURL設定にアフィリエイトのスラッグを追加するだけです。

これを行わないと、キャッシュプリロードが有効になっている場合、WP Rocketはアフィリエイトリンクを内部リンクのように見なしてキャッシュしようとします。

これはクリック数を人為的に膨らませ、アフィリエイト指標に影響を与える可能性があります。

WP Rocketチームに、一般的なアフィリエイトプラグインを自動的に検出して除外URLタグを事前入力し、より初心者向けにできるかどうか尋ねました。彼らがその提案を実装してくれることを願っています。

次は何が来る？

2022年には大きな計画があるので、今年の終わりまでに新しいサイトデザインを公開したかったのです。

WPBeginnerで、皆様が過去2年間ずっとお問い合わせくださっていたセクションを全面的に立ち上げる予定です。

もうすぐ登場します。2022年の第2四半期初頭までにローンチしたいと思っています。

また、より良い全体的な読書体験を提供するために、新しいブロックエディターでさらに実験する予定です。

それ以外では、YouTubeチャンネルもチェックしてください。2022年にはそこで本当にクールなことをたくさん行う予定です。

いつものように、長年にわたる皆様の継続的なサポートとフィードバックに感謝いたします。

敬具
Syed Balkhi
WPBeginner創設者