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

ここ数週間の間にWPBeginnerを訪れたのであれば、新しいサイトデザインに気づいたことでしょう。以前のものと似ている部分も多いですが、舞台裏で変わったこともたくさんあります。

ニュースレターでお約束したように、リニューアルの背景にある思考プロセス、私たちが学んだこと、サイトの新機能、そして最も重要なこととして、私たちが学んだことのいくつかをあなたのサイトを改善するためにどのように活用できるかを共有したいと思います。

背景

私は2009年にWPBeginnerを立ち上げましたが、他の新人クリエイターと同じように、最初の3年間で4回もサイトのテーマデザインを変えました。

ビジネスが成長するにつれ、サイトのリニューアルに多くの時間とリソースを取られ、本来の使命を果たすためにもっと有効に使えるはずだと気づきました：

だから私は、中核となる使命にすべて集中するようにし、ビジネスは飛躍的に成長した。

WPBeginnerの最後のリデザインは2016年に開始され、私たちはそれ以来長い道のりを歩んできました。

この5年間で何が起こったか：

• WPBeginnerブログで1000以上の無料WordPressチュートリアルを作成し、YouTubeチャンネルで数百の新しい動画チュートリアルを追加しました。
• FacebookでWPBeginner Engageコミュニティを立ち上げ、現在では80,000人以上のメンバーを抱える最大のWordPress Facebookグループとなりました（参加は無料です）。
• WPBeginner成長ファンドを立ち上げ、MemberPress、Pretty Links、Formidable Forms、Uncanny Automatorなど6つのお気に入りのWordPressプラグインに投資しました。
• 2つの新しいWordPressプラグイン、WordPressソーシャルプルーフプラグインのTrustPulseと、強力なWordPress景品・コンテストプラグインのRafflePressを立ち上げました。
• 有名なAIOSEO（WordPress用All In One 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プラットフォーム＆インフラストラクチャープラグインを取得しました。

私たちのプラグインは合計で1,900万以上のサイトで使用されており、そのうちの4つはWordPressプラグインのトップ20に入っています。

これらすべてが素晴らしい成果である一方、私たちには新たな課題があり、それに取り組む必要があった。

これでWPBeginner v6にたどり着いた。

コンテンツの発見性を重視したデザイン

WPBeginnerはシンプルなチュートリアルブログとしてスタートしたが、今ではWordPressのウィキペディアとなっている。

私たちのユーザーは、WordPressの問題に対する答えを見つけたいとき、単にキーワードをGoogleで検索し、最後にWPBeginnerを加えるだけで、最適な解決策を見つけることができると繰り返し話してくれました。

読者がWordPressに関する質問の答えをすぐに見つけられるように、私たちは新しいホームページで検索機能に大きな焦点を当てました。

WPBeginnerのトップページでは、リピーターの方でも、WordPressを始めたばかりの読者の方でも、お探しのコンテンツを簡単に見つけることができます。

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

WPBeginnerが非技術系ユーザー向けの最大のWordPressリソースサイトとなった理由のひとつは、複雑なWordPressのトピックをステップバイステップでわかりやすく説明しているからです。

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

WPBeginnerユーザーになると、人気のプラグイン、プレミアムテーマ、ホスティングサービス、その他のマーケティングツールで最高のWordPress割引を独占的に利用できます。

私たちのチームは本当にあなたのために最高のお得な情報を交渉し、このセクションは100以上のクーポンとお得な情報を持つようにかなり成長しています。

ユーザーからのご要望が多かったため、お買い得情報セクションにライブ検索を追加しました。

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のブロックエディターの素晴らしい機能をすべて使えるようになった。

例えば、コードを書くことなく、とてもクールな「Did You Know」ブロックを追加できるようになった：

また、WordPressのブロックエディターを使って、ランディングページのデザインも一新しました。

例えば、無料WordPressブログ開設のランディングページをご覧ください。

また、ブロックエディターを使って無料ビジネスツールのデザインを一新し、最近作った無料ツールのいくつかを強調しました。

SeedProdは適切なドラッグ＆ドロップWordPressページビルダーであるため、必要に応じて完全カスタムのランディングページを作成するために使用する予定です。

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

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

WordPressのコアチームはフルサイト編集機能に懸命に取り組んでいるが、SeedProd、Divi、Beever Builderのようなページビルダーで得られる強力な機能に対抗するには、まだ多くの作業が必要だ。

とはいえ、ブロックエディターはかなり素晴らしいし、WordPressのブロックプラグインもたくさんあるので、コンテンツを引き立てるクールなデザイン要素を作成するのに使うことができる。

この新しいテーマには、注目のプラグインをハイライトするためのもう一つのクールなブロックがあります：

SeedProdは、WordPressのための最も初心者に優しいドラッグ＆ドロップページビルダーです。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には、GloballyRecognized Avatarsの略でGravatarと呼ばれるサードパーティのサービスがビルトインされています。

これにより、ユーザーがWordPressサイトにコメントを残す際に、プロフィール写真やアバターを表示することができます。

課題は、サイト訪問者がGravatarアカウントをセットアップする必要があることです。そのため、あなたのサイトではグレーの謎の男のアバターが読み込まれるだけで、見た目はよくありません。

今、50のコメントをしている人気のあるブログ投稿があり、ユーザーの10%だけがグラビアター画像を持っていて、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は、より多くのメール購読者を獲得し、サイトのコンバージョンを高めるのに役立っているので、無効化するという設定はありませんでした。

幸運なことに、私の会社の一つなので、開発者にGoogleフォントを無効化する解決策を尋ねた。

すでにOptinMonsterには、Googleフォントを無効化するだけでなく、任意のカスタム・ウェブ・フォントを読み込むことができるAPIソリューションがありました。

私はかなり技術に精通しているので、チームがドキュメンテーションで共有した小さなスニペットを実装することができますが、私たちの顧客の多くはそうではないことを知っています。

そこで、私たちのチームはキャンペーンビルダー内にこの機能を実際にビルトインしました（コーディングは必要ありません）。

しかし、もしあなたがコードに慣れていて、キャンペーンごとに手動でこの設定をオフに切り替えたくないのであれば、私が使っているハックに従えばいい。

まず、以下のJSスニペットを追加して、サイト上でOptinMonsterがWebフォントを読み込まないように無効化します：

<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; }

もちろん、あなたのサイトのフォントと一致するようにフォントを変更することを忘れないでください。これは、基本的にあなたのサイトに読み込まれるすべてのOptinMonsterキャンペーンに上記のfont-familyを適用します。

W3 Total CacheからWP Rocketに乗り換えた

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

しかし、私たちがすべての製品サイトで使用しているWP Rocketには一致しませんでした。

今回のデザイン変更に伴い、私はついにWP Rocketに乗り換えた。WP Rocketには、特に信頼性の高いキャッシュ・プリロードとファイル最小化といった、素晴らしいサイトスピード機能がたくさん搭載されている。

このプラグインは、あなたのサイトの速度を改善したい場合は非常に重要です。

ThirstyAffiliatesや Pretty Linksを使ってアフィリエイトリンクを管理している場合は、本当に〜してもよいですか？

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

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

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

私はWP Rocketチームに、人気のあるアフィリエイトプラグインを自動的に検出し、除外されたURLタグを事前に記入して、より初心者に優しくすることができるかどうか確認するよう依頼しました。

次に何が来るのか？

2022年に向けて大きな計画があるから、今年中に新しいサイトデザインを公開したかったんだ。

WPBeginnerでは、この2年間多くの皆様からご質問をいただいていた、全く新しいセクションを立ち上げる予定です。

2022年第2四半期の初めまでには発表したい。

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

それ以外では、2022年にYouTubeチャンネルで本当にクールなことをやる予定なので、注目してほしい。

いつもながら、長年にわたる継続的なサポートとフィードバックにすべて感謝したい。

敬具
Syed Balkhi
WPBeginner創設者