今日 WPBeginner をご覧になっている方は、新しいウェブサイトのデザインに気づいたかもしれません。前回のデザインは 2012 年のものでしたので、多くの方は WPBeginner をリフレッシュする時期が来たと言うでしょう。リデザインのプロセスから得た洞察、学んだこと、なぜこれほど時間がかかったのか、そして最も重要なこととして、新しいデザインの何が新しいのかを皆さんと共有したいと思います。
簡単な背景
私は2009年にWPBeginnerを開始しました。最初の3年間で、WPBeginnerは4回の再設計を経ました。これは、コアミッションに費やすことができた多くのリソースを消費しました。
私たちのツール、チーム、トレーニングを通じて、中小企業が成長し、大企業と競争できるよう支援します。
WPBv4の後、私はコアミッションに集中することを決意し、その結果は驚くべきものでした。
過去4年間で:
- WPBeginnerブログで、千以上の無料WordPressチュートリアルを作成しました。
- YouTubeチャンネルに500以上の新しいビデオチュートリアルを追加しました。
- WordPress Glossaryに100以上の用語を追加しました。
- 私たちは、サイトから離脱するウェブサイト訪問者を購読者に転換するツールである OptinMonster を立ち上げました。私たちのオプトインフォームは、月に数十億回表示されています。
- ユーザーがウェブサイトを遅くすることなく簡単に写真やビデオギャラリーを作成できるように、最も強力なWordPressギャラリーソリューションであるEnvira Galleryをローンチしました。
- パフォーマンスとユーザーエクスペリエンスを最優先事項とした、使いやすいレスポンシブWordPressスライダープラグインであるSoliloquyをリリースしました。
- 皆様からのフィードバックやご提案に基づき、最も初心者フレンドリーなWordPressフォームプラグインであるWPFormsをリリースしました。
- 今年初めに、Yoast Analyticsを買収し、MonsterInsightsにリブランドしました。私たちは、Google Analyticsを初心者にも分かりやすくするために、プラグイン全体を書き直している最中です。
合計で当社のプラグインは1300万回以上ダウンロードされ、200万以上のウェブサイトでアクティブに使用されています。
それらはすべて素晴らしい成果ですが、私たちのミッションを改善し続けるためには、対処する必要のある新しい課題があります。
これでWPBeginner v5の紹介は終わりです。
データでデザインする
ここ数年で、ほとんどのウェブサイトでモバイルデバイスの使用がかなり増加しました。そのため、ブログを開始する際には、常にモバイルフレンドリーなレスポンシブWordPressテーマを選択することを推奨してきました。
これは少し皮肉でした。なぜなら、私たち自身のウェブサイトはレスポンシブではなかったからです。私たちは、コミュニティの他のWordPressデザイナーや開発者からソーシャルメディアで多くの批判を受けました。
時折、読者からWPBeginnerがレスポンシブでない理由についてコメントをいただくことがありました。
レスポンシブデザインの重要性は理解していますが、ビジネスでタスクを優先順位付けする際には、データに基づいた意思決定を行うことがさらに重要です。
2012年にWPBv4デザインをローンチしたとき、私たちのオーディエンスの2%未満がモバイルでした。
2016年の今日、その数は約7%に増加しました。
これは、List25のような他のウェブサイトと比較すると、依然として非常に低い値です。List25では、ユーザーの50%以上がモバイルを利用しています。
しかし、ほとんどの人がモバイルデバイス経由でWordPressウェブサイトにプラグインをインストールしないため、理にかなっています。ほとんどの人はモバイルでコードを変更しません。ほとんどの人はモバイルで一般的なWordPressエラーを修正しようとしません。
そのため、WPBeginnerをレスポンシブ対応にすることは最優先事項ではありませんでした。しかし、モバイル利用率が5%を超えたため、他の課題にも対応する再設計の計画を開始しました。
私たちが直面したもう一つの課題は、サイトのユーザビリティでした。コンテンツが増えるにつれて、ユーザーが探しているものを見つけるのが難しくなりました。例えば、WordPress の高速化に関する記事が 8 件ありましたが、包括的なステップバイステップのソリューションはありませんでした。
WPBeginnerの検索フォームで最も検索されたクエリを調査し、包括的なステップバイステップチュートリアルを作成しました。これらはデザインで迅速に強調表示されています。
ヘッダーのフルスクリーン検索オーバーレイとサイドバーの追加検索バーにより、WPBeginnerの検索も容易になりました。
今後、WordPressタグをクリエイティブに活用したコンテンツポータルを作成することで、ユーザーが探しているものを見つけやすくしていきます。
WPBv5の新機能
サイトのコア機能はそのままです。ウェブサイトの主な変更点は以下の通りです。
新しいスタートはこちらページ
WPBeginnerを初めてご利用になる方は、新しい「まずはここから」ページをご覧ください。
レスポンシブウェブデザイン
WPBeginnerウェブサイトは現在100%レスポンシブなので、すべてのデバイスで素晴らしく見えます。
カスタム子テーマの構築には、人気のGenesisフレームワークを使用することにしました。
包括的なガイド
すべてのページのサイドバーを見ると、「ヘルプが必要なこと…」という新しいセクションがあり、WordPressの高速化方法、WordPressのセキュリティ強化方法、WordPressのSEO最適化方法などの包括的なガイドが紹介されています。
製品の可視性を向上
WPBeginnerのアンケートで、私が尋ねた質問の一つに「所有している製品の名前を挙げてください」というものがありました。多くの人が私たちの製品を知らなかったことに驚きました。新しいデザインでは、私たちが所有している製品をより効果的に紹介していきます。
これは新しいプレミアムWordPressプラグインページから始まります。
サイドバーやニュースレターの広告でも、製品をローテーションします。
FontAwesomeと新しいフォント
新しいデザイナーではアイコンフォントが使用されていることに気づくかもしれません。これはFontAwesomeと呼ばれ、私はDave Gandyの作品の大ファンです。
私たちは彼の作品をすべての製品に使用しており、FontAwesomeの誇り高いサポーターです。
面白い事実ですが、FontAwesomeを使用すると、WPBeginnerロゴをフォントとして、他のプロパティと同様に追加できます。
新しいデザインでは、Typekit を通じて Proxima Nova フォントを使用しています。
新しい共有プラグイン
以前は、Floating Social Barプラグインのバリエーションを使用していました。
Twitter、Facebookなどの変更の後、WPBeginner用の新しい共有プラグインを作成する時期が来たと感じました。
Twitterのカウントは正確に取得しますが、さらに重要なのは、合計シェア数が表示されるようになったことです。
フローティング動作を停止することにしました。代わりに、シェアボタンは各投稿の先頭と末尾に追加されるようになりました。これにより、小さい画面サイズでのユーザーエクスペリエンスが向上します。
新しい電子書籍とオプトインフォーム
各投稿の下部には、WordPressツールキットをダウンロードするための新しいオプトインフォームが表示されます。このeBookには、私たちがウェブサイト全体で使用している正確なツールが共有されています。
これはWPBeginnerのブループリントとは異なります。なぜなら、それはWPBeginnerで使用しているものだけを示すからです。
ツールキットの電子書籍はより包括的です。
サイドバーのオプトインフォームを、2段階のオプトインプロセスであるMonsterLinksに置き換えました。サイドバーのオプトインフォームは、そのスペースを正当化するほど高いコンバージョン率ではありませんでした。そのため、メールで購読したい場合は、サイドバーのメールアイコンをクリックすることで購読できるようになりました。
次は何？
フロントエンドの変更に加え、バックエンドにも多くの変更を加え、今後数ヶ月でWPBeginnerチームがより包括的なガイドを作成しやすくしました。
WPBeginner動画メンバーシップサイトはオーバーホールされます。現在はまだ古いテーマを使用しています。
それをLMSシステムに移行し、初心者向けビデオコースと500以上のYouTube動画を一元化された場所に集約する予定です。
そのサイトの目標は、ユーザーがWordPressを速く学習できるように、より整理されたコースを提供することです。
皆様のご支援とフィードバックに感謝いたします。
敬具、
Syed Balkhi
WPBeginner創設者
Vipin
こんにちは、
デザインは素晴らしいです。
実は私も、ディールやクーポン関連のビジネスをしている自分のウェブサイトに同じような見た目を求めていました。私もGenesisフレームワークとgenesis-simple子テーマを設定しましたが、ヘッダーのトグルオプションやディール投稿をどのように実現したのか分かりません。教えていただけますか？
ありがとうございます
Vipin Singh
ショラ
古いデザインは知りませんでしたが、とにかく新しいデザインが気に入りました。このサイトに来るたびに、自分のサイトのデザインもこうなれるような気がします。wpbeginnerテーマさん、ありがとうございます。素晴らしい仕事をしていますね。良い一日を。
WPBeginnerサポート
やあ、Shola、
Thanks for the kind words.
管理者
Atul
このフラットデザインは、すべてのデバイスで非常にきれいに見えます。今はずっと良くなりました。
Aaditya Sharma
私はあなたのウェブサイトの定期的な読者です。新しいサイトのデザインは以前のものより改善されていますが、OMGというような感動はありません。
サイトの幅を広げることができるかもしれません。
Ekesmall
わあ、レスポンシブデザインが見られてとても嬉しいです。以前は携帯電話でウェブサイトを見るのがかなり難しかったですが、今は良いです。
Srivalli
おめでとう、サイード。新しいレイアウトはとてもすっきりしてきれいです。ところで、あなたの新しい共有プラグインは他のユーザーも利用できますか？とてもすっきりしていて意味深長に見えます。
編集スタッフ
Srivalliさん、こんにちは
No the new share plugin is not public yet
管理者
Srivalli
ありがとう、すぐに公開されることを願っています…:)
ブジンゲ・ブライアン
これは本当に素晴らしいです。新しいデザインが好きです。昨日ここにいました。目が覚めて、お気に入りのWordPressチュートリアルサイトをチェックしたら、見たものがリフレッシュされていました。本当に素晴らしい皆さんです。
編集スタッフ
Glad you liked it Businge
温かいお言葉ありがとうございます。
管理者
LH Louis
このフローティング共有バーは素晴らしいです。Mashableにも素晴らしいものがありますね！
追伸：ここにバックリンクがあれば嬉しいです…
編集スタッフ
ありがとう。
コメント内のバックリンクのことでしたら、スパムが多すぎたため削除しました。
管理者
Muhammad Imran
素晴らしいデザインですね。WBチームの皆さん、おめでとうございます。
M Imran
編集スタッフ
インランさん、ありがとうございます。
管理者
Diane
デザインの変更、とても気に入りました。ちなみに、ポップアップとランキングに関するGoogleの発表についてどう思われますか？ 今回ばかりはGoogleに賛成です。あなたのサイトにアクセスして数秒も経たないうちに、購読を促すポップアップが表示されました（すでに購読しています）。コンテンツをチェックして気に入るかどうかを確認する時間もなく、購読を求められています。これはオンラインでの絶え間ない煩わしさになっています。オプトインモンスターにトラッキングを追加する方法はありますか？もし私があなたのニュースレターからクリックした場合、購読ポップアップが表示されないように。それは、セールスポイントになるでしょう。
とにかく話がそれてしまいましたが（本当に迷惑なポップアップだったので、我慢できませんでした!!）あなたのサイトは素晴らしく、コンテンツも本当に素晴らしいです。訪問者がコンテンツを読んだ後に購読したいかどうか尋ねれば、より高いオプトイン率が得られるかもしれません…。
編集スタッフ
こんにちは、ダイアンさん。
フィードバックありがとうございます。
ポップアップに関する新しいGoogleモバイルフレンドリーのルールについては、こちらで書きました：
http://optinmonster.com/the-new-google-mobile-friendly-rules-for-popups/
管理者
Herwig
新しいデザインが大好きです！質問があります：新しい共有プラグインはどこかで利用できますか？とても素晴らしいです！
編集スタッフ
ハーウィグさん、
温かいお言葉ありがとうございます。共有プラグインは現在利用できません。なぜなら、WPBeginnerのためにカスタムコーディングされたものだからです。将来的にはリリースするかもしれませんが、まだ一般公開の準備はできていません。
管理者
Betty Johnston
…OK！ 素晴らしい！… 長い間フォローしています… このアップデートは速い… スーパーUX-UI… 明確…（あなたのロゴを除いて…少しぼやけています）… 対照的な色が気に入りました… そして簡単な指示… あなたに同意します。私は何も修正するためにNote5を使用しません…。個人的には、オフィスにいないときにすべてを読み、その後、デスクトップ/ラップトップから必要なものをすべて適用します… 助けが必要な多くのことを確認するのが待ちきれません… ありがとうございます、そしておめでとうございます…！
編集スタッフ
Thanks for the feedback Betty. We appreciate it
管理者
サルマン
サイトは素晴らしいです。以前のバージョンよりも良いです。
このウェブサイトの作成に使用したすべてのツールとテクノロジーのリストを作成して公開してもらえませんか？それは素晴らしいでしょう。ありがとう。
編集スタッフ
Salmanさん、こんにちは
WPBeginnerで使用しているすべてのもののリストはここにあります： https://www.wpbeginner.com/blueprint/
管理者
TeQuan Douglas
こんにちは、サイードさん！
すごい… WPBeginnerは以前よりもずっと速くなりました。この新しいデザインが大好きです。私はWPBeginnerを1日に少なくとも5回利用しています。良い仕事を続けてください。
編集スタッフ
Thank you TeQuan
管理者
ブリン・ウィルソン
Well done: looks fab – simple, clean and well thought out. Impressive.
編集スタッフ
ありがとう、ブリン
管理者
リサ
とても素晴らしいです – Syedとチーム、そしてStudioPressにおめでとうございます！
編集スタッフ
Thanks Lisa
管理者
Neil Forrester
サイードさん、こんにちは。
新しいデザイン、素晴らしいですね。そして、すべてのWordPressチュートリアルに感謝します。私はあなたのサイトを定期的に参照しており、貴重なリソースだと信じています。
よろしくお願いいたします。
ニール・フォレスター | pixelfire.com.au
編集スタッフ
ニールさん、ありがとうございます。ご支援に感謝いたします。
管理者
アンリ・ロタン
こんにちは、WPBeginnerです！
チームの皆さん、おめでとうございます。
数ヶ月前にサイトがレスポンシブでないと苦情を言いました。今、私はサービスを受けており、そしてよくサービスを受けています。
カメルーンから、すべて親指を立てています！
編集スタッフ
ご辛抱と継続的なサポートに感謝いたします、アンリ様。大変感謝しております。
管理者
Izham
新しいデザインが好きです。最初はWPBにレスポンシブデザインがないのはなぜだろうと私も奇妙に感じました。
これを読んだ後、理由がわかりました。
WPB、素晴らしい仕事です！
あなたのブログを見つけ、私のWP体験を大いに向上させることができました。
あなたたちの説明の仕方が好きです。彼らの洞察は、あなたがたのチームが実際にテストしてから書いていることを示しています。単にコピー＆ペーストしてGoogleでランク付けするためだけに編集するブログではありません。
皆さんをフォローします。
編集スタッフ
ありがとう、Izham。
管理者
マイク
新しいデザインは気に入っています。確かに、私が自分のサイトで作業しているときは、モバイルではありません。しかし、私は携帯電話であなたのメールを受け取っており、しばしばコーヒーハウスで読むために保存しています。これは物事をずっと良くするでしょう。新しいデザインの成功を祈っています。
編集スタッフ
Thanks Mike – yup that was the most common use-case. People read emails via phone and then come to our site. Hopefully it will be a much better UX now
管理者
エイドリアン
やっと！(笑) 電車の中であなたの記事を読んでいたのですが、ページサイズを調整するのがイライラしました。
エイドリアン
本当に、みんな大好きです!! この調子で頑張ってください!!
ベン
サイードさん、こんにちは。
WordPressに関するあらゆることの素晴らしいリソースのための素晴らしい新しい外観です。
あなたがされたこと、そして全体を通して明確なメッセージングを本当に気に入りました。
プロセスと進め方を皆さんに知らせてくれてありがとう。
いくつかにリフレッシュのインスピレーションを与えるかもしれません！
頑張ってください
ベン
OBINNA DURU
こんにちは、WP Beginnerさん。最近WordPress CMSを使い始め、あなたのサイトの資料のほとんど（すべてではないにしても）を使用しているので、非常に簡単だと感じました。クライアントのためにウェブサイトを構築しており、無料のホスティング会社を使用しています。クライアントの問題を解決するためのソリューションを探して、1日に少なくとも8回はあなたのサイトを閲覧しています。あなたのサイトを閲覧していたところ、古いデザインからこの新しいデザインに突然変更されました！以前のデザインの方が好きでした。なぜなら、以前のデザインは私の小さな携帯電話でフル幅のナビゲーションメニューを表示し、ナビゲーションが非常に簡単だったからです。しかし、この新しいデザインでは、ナビゲーション項目全体が「MENU」に縮小され、残りが表示される前にクリックする必要があります！この機会に質問させてください。「WordPressテーマからレスポンシブを削除し、スマートフォンでもフル幅のナビゲーションメニューを表示するにはどうすればよいですか？」クライアントの1人がそれを求めており、その問題を解決できません。ありがとうございます、神のご加護を。
OBINNA DURU
WordPressテーマディレクトリからテーマを使用しており、テーマの名前はWPナレッジベースです。この特定のテーマ、および一般的にすべてのテーマからレスポンシブ機能を削除し、あなたの以前のデザインのように、小さな電話画面でもフル幅のナビゲーションメニューを表示するにはどうすればよいですか。神のご加護がありますように。
WPBeginnerサポート
Obinnaさん、こんにちは。
フィードバックありがとうございます。ほとんどのユーザーは、折りたたまれたナビゲーションメニューの方が小さい画面で使いやすいと感じています。タップしやすく、メニューに表示できる項目も増えます。
フル幅メニューを使用したい場合は、完全にレスポンシブではないWordPressテーマから始めることができます。CSSを使用して幅を設定することもできます。
管理者
Mitch
アップデートとその内容を拝見できて大変嬉しく思います。
正直に申し上げますと、あなたがそれらのプラグインのオーナーであるとは全く知りませんでした！
率直に言って、Yoast Analyticsはあまり良識のない誰かが引き継いだと思っていましたので、WPBeginnerのような評判の良い方がオーナーだと知って本当に良かったです！
スコット・ブューラー
見栄えも速さも素晴らしいです。
編集スタッフ
Thank you
管理者
ジョサローン・ワーズワース
過去4年間、このサイトを静かに見てきました。私のような初心者にとって、あなたが教えていること（モバイルファースト）をWordPressサイト構築に実践的に活かせるような新しい変更があったことを嬉しく思います。
あなたとあなたのチームの素晴らしい仕事を続けてください。
編集スタッフ
Thanks for the kind words Josalone. We appreciate your support
管理者
Ahmad Awais
WPBチームにおめでとうございます！新しいデザインはかなり良い感じです。「今頃になって」ですね！
編集スタッフ
親切な言葉をありがとう、Ahmad。
管理者
Sidah
素晴らしい見た目です。
wpbeginner をもっと高解像度で作った方がいいかもしれません。iPhone 6 で見栄えが悪いです。
Regards
編集スタッフ
現在のサイトは、世界中の（遅い接続でも）すべてを高速に保ちたいと考えているため、Retina対応ではありません。
管理者
Dick Motta
アップデートを楽しみにしています。ウェブサイトを変更したいのですが、なぜか気が散ってしまいます。うまくいけば、WPの手順を学ぶためにもっと時間を費やすことができるでしょう。
編集スタッフ
ありがとうございます
管理者
Parvez Afshar
とても素晴らしくクリエイティブです。最も美しく、ユーザーフレンドリーなものにしてください。完全に素晴らしいです。おめでとうございます。
Carlito Thomas
新しいデザイン、気に入りました！ただし、メインのロゴが少しぼやけています。
Arief Mardianto
私はいつもWPBが行うことを行います。Life WPBv5
スティーブン
新しいデザインはシンプルでありながらパワフルです。
サイードさん、あなたとあなたのチームにおめでとうございます。
編集スタッフ
Thanks Stephen
管理者
アジャイ
驚くほど素晴らしいアップグレードです！WPコミュニティのためにしてくださっていることに感謝します。
編集スタッフ
アジェイ、ありがとう
管理者
ドーン・グローブス
サイードさん、よくできました。特にやり方の説明は素晴らしいです。間違いなく付加価値のある提案ですね。
ドーン
編集スタッフ
Thanks Dawn
管理者
Gayle Hardy
素晴らしい仕事です！おめでとうございます、サイトは素晴らしく見え、すべてのアップグレードは理にかなっています。長年にわたって共有していただいたヒント、トリック、そして分かりやすい指示に感謝しており、今後もWPについてさらに学ぶことを楽しみにしています。
編集スタッフ
Gayleさん、継続的なサポートをありがとうございます。
管理者
Herb Trevathan
ナイスジョブ。Genesisが大好きです :) スニペットをよく利用しています。
編集スタッフ
Thanks Herb – appreciate your support
管理者
Suman Gaudel
WPBがレスポンシブデザインになったのを見て嬉しいです。
編集スタッフ
Cheers
管理者
Sowmay
新しいソーシャルシェアプラグインはどこで入手できますか？
WPBeginnerサポート
ソウメイさん、こんにちは。
これは、弊社が独自に使用するために開発したカスタムプラグインです。
管理者
Pat Fleck
I agree with Adeel. It looks like you have put a lot of thought into the re-design. Also good to see that the site is now responsive
編集スタッフ
Thanks Pat
管理者
ダラス
サイトの新しい見た目がとても気に入りました。素晴らしい仕事です！総幅は約940pxのようですが、狭い幅にした特別な理由がありましたか？
編集スタッフ
当社のコンテンツ画像のほとんどが幅520ピクセルであるためです。多くのユーザーが高速なインターネット環境を持っていないため、サイトの速度を維持することが重要です。コンテンツ幅を広げ、より大きなサイズの画像をアップロードすると、サイトの速度がさらに低下します。
これは世界の西側では目立ちませんが、他の多くの国ではインターネットが非常に遅いです。
管理者
ウェズリー・バンクス
既存の画像サイズや低速なインターネット速度をそれほど考慮しない場合、幅を変更しましたか？新しいサイトを作成する際に、最適なコンテンツ幅にいつも苦労しています。ですので、何か洞察があればぜひ聞きたいです。ありがとうございます！
編集スタッフ
その時点では1140pxでデザインしたでしょう。大きな画像の方が間違いなく見栄えが良いからです。
Doug
よくやった、サイード。
編集スタッフ
ありがとう、Doug
管理者
アンドレ
素晴らしい、ただただ素晴らしい！
編集スタッフ
アンドレさん、ありがとう
管理者
テレサ・マソンカ
新しいリデザインおめでとうございます。そして、思慮深い変更に感謝します。サイトを探検するのが本当に楽しみです！
編集スタッフ
Teresaさん、温かいお言葉をありがとうございます。
管理者
Sowmay
サイード、以前のデザインよりもこのデザインの方が愛らしいと思いました。
編集スタッフ
ありがとうございます
管理者
Banna
デザインは素敵ですね。
しかし、記事をスクロールダウンしていくとサイドバーが見えなくなってしまいます。スペースがたくさんあるように見えます。
編集スタッフ
フィードバックありがとうございます、バンナさん。数日中に、一部の記事に関連コンテンツを追加するためにスクロールボックスを追加します。
管理者
アディール・サミ
こんにちは、サイード！
このデザインはまさに素晴らしいです — クリーンでシンプル、そしてエレガントです！
Congrats!
ニール・アンフレッド
とても素晴らしいですね…
kharid
この記事を本当にありがとうございます