WPBeginner - 初心者のためのWordPressチュートリアル

Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WPBeginner v5 – 新規サイトデザインと今後の展望

Updated: by Editorial Staff | レビュー Syed Balkhi | Reader Disclosure

シェア フェイスブックメッセンジャー WhatsApp

もしあなたが今日WPBeginnerをロードしているのであれば、私たちのサイトデザインが新しくなっていることにお気づきかもしれません。前回のデザインが2012年であったことを考えると、WPBeginnerもそろそろリフレッシュする時期だとおっしゃる方も多いでしょう。私たちが学んだこと、なぜこんなに時間がかかったのか、そして最も重要なことは、新しいデザインで何が新しくなったのかということです。

背景

私は2009年にWPBeginnerを始めました。最初の3年間で、WPBeginnerは4回のデザイン変更を行いました。これは、私たちの中核となる使命にもっとうまく使うことができたかもしれない多くのリソースを消費します：

WPBeginnerのツール、チーム、トレーニングを通じて、中小企業が成長し、大企業と競争できるようにすることです。

WPBv4の後、私はコアミッションに集中するようにし、その結果は驚くべきものでした。

この4年間で

  • WPBeginnerブログで1000以上の無料WordPressチュートリアルを作成しました。
  • YouTubeチャンネルに500以上の新規チュートリアル動画を追加しました。
  • WordPress用語集に100以上のキーワードを追加しました。
  • 放置されたサイト訪問者を購読者に変換するツール、OptinMonsterを発表しました。当社のオプトインフォームは月に数十億回表示されています。
  • ユーザーのサイトを遅くすることなく、写真や動画のギャラリーを簡単に作成できるように、最も強力なWordPressギャラリーソリューションであるEnvira Galleryを発表しました。
  • パフォーマンスとユーザーエクスペリエンスを最優先した、使いやすいレスポンシブWordPressスライダープラグイン、Soliloquyを発表しました。
  • WPFormsはWordPressフォームプラグインの中で最も初心者に優しいプラグインです。
  • 今年初めにYoast Analyticsを買収し、MonsterInsightsにリブランドしました。現在、Googleアナリティクスを初心者でも簡単に使えるようにプラグイン全体を書き換えているところです。

私たちのプラグインは合わせて1300万回以上ダウンロードされ、200万以上のサイトで有効化されています。

これらはすべて素晴らしい成果ですが、私たちの使命のために改善し続けたいのであれば、新たに取り組むべき課題があります。

そこで、WPBeginner v5にたどり着きました。

データを使ったデザイン

ここ数年、ほとんどのサイトにおいてモバイル端末の使用率が大幅に上昇しています。そのため、ブログを始める際には、モバイルフレンドリーなレスポンシブWordPressテーマを選択することをお勧めします。

私たち自身のサイトがレスポンシブではなかったので、これは少し皮肉なことでした。ソーシャルメディア上では、他のWordPressデザイナーや開発者から多くの批判を受けました。

WPBeginnerはなぜレスポンシブではないのかと読者からコメントをもらうこともありました。

レスポンシブデザインの重要性は理解していますが、ビジネスにおいてタスクの優先順位を決める際には、データに基づいた決断をすることがより重要です。

WPBv4デザインを立ち上げた2012年当時、モバイルを利用していた読者は全体の2%にも満たなかった。

2016年の今日、その数は約7％に増加しています。

これは、50%以上のユーザーがモバイルを利用しているList25のような私の他のサイトに比べると、まだ非常に低い数字です。

しかし、ほとんどの人はモバイル端末でWordPressサイトにプラグインをインストールしないので、これは理にかなっている。ほとんどの人はモバイルでコードを変更しない。ほとんどの人はモバイルでWordPressの一般的なエラーを修正しようとしません。

そのため、WPBeginnerをレスポンシブにすることは最優先事項ではありませんでした。しかし、モバイルの利用率が5％を超えた時点で、私たちは他の課題にも対応した再設計の計画を立て始めました。

WPBeginnerv5 Responsive

私たちが直面したもう一つの課題は、サイトのユーザビリティでした。コンテンツが増えるにつれ、ユーザーが探しているものを見つけるのが難しくなりました。例えば、WordPressの高速化について8つの投稿がありましたが、包括的なステップバイステップの解決策はありませんでした。

私たちは、WPBeginnerの検索フォームで上位に入力された検索クエリーを調べ、包括的なステップバイステップのチュートリアルを作成しました。

WPBv5 Comprehensive Guides

また、ヘッダーのフルスクリーン検索オーバーレイとサイドバーの追加検索バーにより、WPBeginnerの検索をより簡単にしました。

今後は、WordPressタグをクリエイティブに活用したコンテンツポータルを作成することで、ユーザーが探しているものを見つけやすくしていきます。

WPBv5の新機能

サイトのコア機能は変わりません。以下は、サイト上のいくつかの顕著な変更点です：

新規: スタート・ヒアのページ

もしあなたがWPBeginnerを初めてご利用になるのであれば、新規の「ここから」ページをご覧ください。

レスポンシブウェブサイトデザイン

WPBeginnerのサイトは100％レスポンシブに対応し、すべての端末で美しく表示されます。

私たちは、カスタムの子テーマを構築するために、人気のあるGenesisフレームワークの先頭に固定表示することを選択しました。

包括的なガイド

各ページのサイドバーを見ると、”I need help with… “という新しいセクションがあり、WordPressを高速化する方法、WordPressのセキュリティを向上させる方法、WordPressのSEOを最適化する方法など、包括的なガイドが紹介されています。

製品のより良い可視性

WPBeginnerの国勢調査で、私たちが所有している製品を挙げてくださいという質問をしました。私たちの製品について知らない人が多いことに驚きました。新しいデザインでは、私たちが所有している製品をよりよく紹介するつもりです。

これは、新しいプレミアムWordPressプラグインのページから始まります。

また、サイドバーやニュースレターの広告でも、製品をローテーションして紹介する予定です。

FontAwesomeと新規フォント

新しいデザイナーにアイコンフォントが使われていることにお気づきでしょうか。これはFontAwesomeと呼ばれるもので、私はDave Gandyの作品の大ファンです。

私たちはすべての製品に彼の作品を使用しており、FontAwesomeの誇り高きサポーターです。

FontAwesomeを使えば、WPBeginnerのロゴをフォントとして追加することができます。

新しいデザインでは、Typekitを通じてProxima Novaフォントを使用しています。

新規: シェアプラグイン

以前はFloating Social Barプラグインを使用していました。

WPBeginnerのために新しい共有プラグインを作成する時が来たと感じました。

このプラグインは、Twitterのカウントを正確に取得しますが、より重要なのは、合計シェア数を取得することです。

New Share Plugin

シェアボタンは各投稿の最初と最後に追加しました。これにより、小さい画面サイズでのユーザー体験が向上します。

新規: eBookとオプトインフォーム

各投稿の一番下に、私のWordPressツールキットをダウンロードするための新しいオプトインフォームが表示されます。このeBookでは、私たちのサイト全体で使用している正確なツールを共有しています。

WPBeginnerで使用しているものだけを紹介しているので、WPBeginnerの設計図とは異なります。

ツールキットのeBookはより包括的です。

また、サイドバーのオプトインフォームを2ステップのオプトインプロセスであるMonsterLinksに置き換えました。サイドバーのオプトインフォームは、そのスペースを正当化できるほど高いコンバージョン率ではありませんでした。そのため、メールで購読したい場合は、サイドバーのメールアイコンをクリックしてください。

WPBv5 Sidebar Optin

次の記事

フロントエンドの変更とは別に、WPBeginnerチームが今後数ヶ月でより包括的なガイドを簡単に作成できるよう、バックエンドにも多くの変更を加えました。

WPBeginner動画会員サイトは、オーバーホールを行う予定です。現在はまだ古いテーマを使用しています。

初心者向け動画コースと500以上のYouTube動画を一元化したLMSシステムにする予定です。

このサイトのゴールは、ユーザーがWordPressを早く学べるように、より整理されたコースを提供することです。

みなさんのサポートとフィードバックに感謝します。

敬具
Syed Balkhi
WPBeginner創設者

WPBeginnerで人気 今すぐだ！

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション！

今すぐダウンロード

Reader Interactions

91件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Vipin says

    Hi,

    The design looks awesome.

    Actually I also wanted to same look for my website that is also related to deal and coupon business. I have also setup genesis framework and genesis-simple child theme but I don’t know how you achieve header toggle option and deal post can you guide me

    Thanks
    Vipin Singh

    返信

  3. Shola says

    well, i did not know the old design but any way i love the new design. when ever i come to this site, it fills like, my site design can be like this. thanks wpbeginner theme. you guys are doing a grate job. have a good day.

    返信

  5. Aaditya Sharma says

    I m regular reader of your website, new site design well improvement than the previous one but not feeling coming like OMG.

    Maybe site width can increase.

    返信

  6. Ekesmall says

    Wow, am so glad to see the responsive design because it’s quite difficult viewing the website on mobile phone before but now is now good.

    返信

  7. Srivalli says

    Congrats Syed, the new layout looks very neat and nice. btw is your new Share Plugin available for other users?.looks very neat and meaningful.

    返信

  8. Businge Brian says

    This is really amazing. I like the new design. Was hear last day, I wake up, check my favorite wordpress tutorial website and it was refreshing what I saw. Really great guys.

    返信

  11. Diane says

    Love the redesign. Just out of interest, what do you think of Google’s announcement on pop ups and rankings? For once I’m with Google on this. I hadn’t been on your site more than a couple of seconds before a pop up appears asking me to subscribe (I do already). I’ve not had time to even check out the content and see if I like it and I’m being asked to subscribe. It’s become a constant irritant online. Is there a way you can add tracking to opt in monster, so that if I’m clicking through from one of your newsletters, the subscribe pop up doesn’t appear? Now, that would be a selling point.
    Anyway I digress (couldn’t help it, the pop was REALLY annoying!!) – your site looks great and your content is really fabulous. Ask visitors if they want to subscribe after they’ve had time to read your content and you may find you get a higher opt in rate….

    返信

  12. Herwig says

    I love the new design! Just a question: Is your new sharing plugin available anywhere? It really looks great!

    返信

    • Editorial Staff says

      Hi Herwig,

      Thanks for the kind words. The sharing plugin is not available at this time because it was custom coded for WPBeginner. We may release it in the future, but it’s not ready for public release just yet.

      返信

      管理者

  13. Betty Johnston says

    …OK! excellent!.. Following you from long long time… this update is fast … super UX-UI… clear… (except your logo…little fuzzy)… Love the contrasting colors… and easy instructions… I agree with you; I do not use my Note5 to fix anything….personally i read all when i am not in my office and then i apply whatever i need from my desktop/laptop… I am eager to check a lot of things where i need help… Thank you and Congratulations…!!

    返信

  14. Salman says

    The site looks great. Better than the previous version.

    Can you make a list of all the tools and technologies you’ve used in making this website and publish them? That would be wonderful. Thanks.

    返信

  15. TeQuan Douglas says

    Hi, Syed!

    Wow… WPBeginner is actually much faster than it has always been, I must say that I love this new design. I use WPBeginner at least 5 times a day, keep the good work up..

    返信

  18. Neil Forrester says

    Hi Syed,

    Great job on the new design and thank you for all the WordPress tutorials. I refer to your site on a regular basis and believe it is a invaluable resource.

    Best wishes,
    Neil Forrester | pixelfire.com.au

    返信

  19. Henri Lotin says

    Hello, at WPBeginner!

    Congratulations to all the team.

    I’ve complained months ago that the site wasn’t responsive. Now I’m served, and well served.

    All thumbs up, form Cameroon!

    返信

  20. Izham says

    I like the new design. At first I too feel weird why WPB has no responsive design.

    After reading this now I understand why.

    Great job WPB!

    I stumbled upon your blog and it has a lot improve my wp experience.

    I like the way you guys explained. The insights mereka true showing that your team really test it before writing about it. Not some blog who just copy paste and edit it just to rank on gogle.

    I will follow you guys.

    返信

  21. Mike says

    Like the new design. While it is true that when I am working on my sites, I am not on mobile. I do receive your emails on my mobile, and quite often I save them to read at my local coffee house to read. This will make things a lot better. Good luck with the new design.

    返信

  23. Ben says

    Hi Syed,

    A great new look for a great resource on all things WordPress.

    Really like what you have done and with clear messaging throughout.

    Thanks for letting us all know the process and how you went about things.

    Might inspire some to have a refresh!

    All the best

    Ben

    返信

  24. OBINNA DURU says

    Hello, WP Beginner, I recently started working with wordpress cms and found it very easy because I use most (if not all) of your site materials. I build websites for clients and I have my a free host company I use. I browse through your site, at least, not less than 8 times a day, looking for solutions to solve my clients’ problems. I was browsing through your site when it suddenly changed from the old design to this new one! I loved the former one than this because the former design displayed a full-width navigation menu on my small phone, making it very easy to navigate through, but this new design shrinks the whole navigation items into a “MENU” I must click on before the rest are displayed! I would love to use this opportunity to ask, “how can I remove the responsiveness from a wordpress theme and make it display a full width navigation menu even on smart phones. One of my clients have been asking for it, and I can’t solve that problem. Thanks and God bless.

    返信

    • OBINNA DURU says

      I use a theme from the wordpress theme directory and the name of the theme is WP knowledge base. how can i remove the responsiveness from the particular theme, and from all themes in general, making it display a FULL WIDTH NAVIGATION MENU even on small phone screens, exactly as your former design was. God bless.

      返信

    • WPBeginner Support says

      Hi Obinna,

      Thanks for the feedback. Most users find the collapsed navigational menu easier to use on smaller screens. It is easier to tap, and more items can be displayed in the menu.

      If you would like to use full-width menu, then you can start with a WordPress theme that is not fully responsive. You can also set width using CSS.

      返信

      管理者

  25. Mitch says

    Great to see the update and all that it brings.
    I have to say, I had NO idea that you were the owners of those plugins!
    Quite frankly, I thought someone with less than desirable scruples had taken over Yoast Analytics so it is great to now know that someone as reputable as WPBeginner is the owner!

    返信

  27. Josalone Wordsworth says

    I’ve been quietly following this site for the past 4 years, am glad that your new changes are practical to what you teach novice like me when building wp sites (mobile first).
    Please keep up your great work you and your team.

    返信

  30. Dick Motta says

    Looking forward to the updates. I want to make changes to website, but somehow get distract. Hopefully, I can spend more time learning wp procedures.

    返信

  31. Parvez Afshar says

    It’s nice and creative – try to make it the most beautiful and user friendly . Totally awesome now congrats.

    返信

  37. Gayle Hardy says

    Great job! Congrats, the site looks great and all your upgrades make perfect sense. I appreciate all the tips, tricks, and easy-to-follow instructions you’ve shared through the years and I look forward to learning more about WP for years to come.

    返信

  41. Pat Fleck says

    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 :)

    返信

  42. Dallas says

    I love the new look of the site. Nice job! It appears that your total width is around 940px. Was there any specific reason for going with the narrow width?

    返信

    • Editorial Staff says

      Because most of our content images are 520px wide. We want to make sure that we keep our site fast because a lot of our users don’t have fast internet. Going with bigger content width and uploading larger size images further slows down the site.

      This is not noticeable in the western part of the world, but a lot of other countries have very slow internet.

      返信

      管理者

      • Wesley Banks says

        If you weren’t as considered about existing image sizes or slow internet speeds, would you have changed the width? I always struggle when creating new sites what is the best content width. So, I’d love to hear any insights. Thanks!

        返信

  45. Teresa Maslonka says

    Congratulations on the new redesign, and thank you for your thoughtful changes. Really excited to explore the site!

    返信

  47. Banna says

    The design look nice.
    But while i scroll down through article i miss the sidebar. Look like we have lot of space.

    返信

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。

著作権 © 2009 - 2024 WPBeginner LLC.無断複写・転載を禁じます。WPBeginner®は登録商標です。

Awesome Motiveが管理する｜WordPressホスティングがSiteGroundが管理する

を手伝ってほしい。…

人気のある検索

ブログの開始 ワードプレス SEO WordPress パフォーマンス WordPress エラー WordPress セキュリティ オンラインストアの構築