サイドバーは消滅に向かっていますか?

新しい Web サイトを構築するときは、レイアウトや機能に関する数多くのハードルに常に取り組むことになります。 それらの 1 つは、悪名高いサイドバーの配置 (または配置しない) です。

最近、サイドバーを見つける最も一般的な場所はブログです。 ブログベースの Web サイトまたは会社の Web サイトのブログ セクションのいずれか。 ランディング ページやサービス ページにサイドバーが表示されることはほとんどありません。 サイドバーのある会社の Web サイトを見つけることは、実際には非常にまれです。

サイドバーは消滅に向かっていますか?

サイドバーが一部のサークルで人気を失っている一方で、他のサークルではまだ人気がある理由を見てみましょう!

ウェブサイトの構築とレイアウトの選択

2000 年代初頭には、両側にサイドバーがあり、コンテンツが中央にある Web サイトが一般的でした。 両方のサイドバーには、広告、オファー、その他の気を散らすグラフィックや点滅する GIF がいっぱいです。 実際のコンテンツに集中し続けることは困難でした。 しかし、時が経つにつれ、サイドバーの評判が悪くなり、人々はサイドバーを失明するようになりました。

通常の 2 つのサイドバーのレイアウトは右側のサイドバーに引き継がれ、そこからサイドバーはまったくありません。 最新の WordPress テンプレートには、サイドバーまたはサイドバーなしのオプションがありません。

サイドバーがあるとクリック、ナビゲーション、ユーザー エクスペリエンスに優れていると言う人もいれば、サイドバーはほとんどデッド スペースだと言う人もいます。

モバイルでの使用の増加に伴い、小さなデバイスでは通常、サイドバーはメイン コンテンツの一番下にしか表示されないことを覚えておく必要があります。

では、サイトにサイドバー (または 2 つ) が必要かどうかはどうすればわかりますか?

Web サイトの核心に迫ると、すべてはユーザー エクスペリエンスにかかっています。 サイドバーが、訪問者がサイトを簡単かつ混乱のない方法でナビゲートするのに役立つ場合は、それを追加します。 ナビゲーションをシームレスに処理できるクリエイティブな方法が他にある場合は、サイドバーを捨ててください。

最も一般的な解決策は、サイドバーのないメイン ページまたはランディング ページを作成してから、ブログ セクションにサイドバーを作成することです。 サイドバーに何を含めるかは、特定のサイトによって異なりますが、主なものは次のとおりです。

• 購読オプション
• 関連記事
• オプトイン
• 著者略歴
• 広告

サイドバーに表示される広告の量によって、エクスペリエンスが左右されます。 すべてが広告でいっぱいの場合、すぐに無視されます (または、少なくとも顔をしかめます)。 サイドバーのコンテンツが本当に良いものであれば、1 つまたは 2 つの広告は気にならないでしょう。 広告がデザインの他の部分と視覚的によく合っている場合はボーナス ポイント!

レイアウトの例をいくつか見てみましょう。次にサイドバーのハードルを越える必要があるときに、より多くの情報を得て、できればよりインスピレーションを得ることができるでしょう!

3 つのカラムから 2 つのサイドバーへの進化とその逆

前に、2 つのサイドバーを使用した Web サイトのレイアウトはほとんど過去のものであると述べました。 言及しなかったのは、このタイプのレイアウトは、よく知られている「3 列」レイアウトの拡張に過ぎないということです。 これは、2 つのサイドバーを使用し、その過程でそれを無効にしている Web サイトがまだいくつかあることを意味します。

2 つのサイドバーと 3 つの列の違いは、名前自体から推測できます。 サイドバーが 2 つあるということは、1 つのメイン コンテンツ エリアとそれに付随する 2 つのバーがあることを意味します。 3 列のレイアウトは、コンテンツを整理するための設計メカニズムです。 ヒエラルキーはまだありますが、傍観者の余分なコンテンツよりも理にかなった方法で使用されています. 3 列のレイアウトは、雑誌や大規模なブログなどのオンライン定期刊行物に最適です。

Grain Edit の Web サイトをご覧ください。 基本的には 2 つのサイドバーのレイアウトである 3 列のレイアウトですが、よくできています。 メイン コンテンツは左側にあり、2 つのサイドバーは右側にあります。 これらのサイドバーはサイト全体で変更されることはなく、左側のコンテンツのみが変更されます。

これらの 2 つのサイドバーで非常にうまく機能するのは、(ページ レイアウトがボックス化されているため) 邪魔にならず、両側に非常に多くの空きスペースがあることです。 左側の余白は、読者が文章を読み進める際に、アイラインに気を取られずに頭から離れないようにするのに役立ちます。

適切に設計された 3 列のレイアウトのもう 1 つの好例は、Mashable の Web サイトです。 彼らのフロント ページには、「What's New」、「What's Rising」、「What's Hot」の 3 つのセクションがあります。 列はよく整理されており、コンテンツのサイズは、左側の最小から右側の最大まで、さまざまです。

Mashable のフロント ページの場合、これらをサイドバーと呼ぶことはほとんどできません。 3 つのコラムはすべて素晴らしい内容でいっぱいです。 いずれかの記事をクリックすると、左側に従来のメイン コンテンツが表示され、右側にサイドバーが表示されるようにレイアウトが変更されます。

実際には概念的なレイアウトです。 コンテンツが新しい場合は、左の列に表示されます。 トレンドになり始めたら、中央の列に移動します。 そして口コミで広まると、右側の最大の列に移動します。

古典的なブログのレイアウトは依然として最高ですが、どの程度ですか?

私たちが慣れ親しんでいるブログのレイアウトは、コンテンツが左側にあり、サイドバーが右側にあるものです。 一部のブログはそれをうまくやっていますが、他のブログは、収まる可能性のあるすべての広告を配置するためにサイドバースペースに依存しています. 私たちはあなたがそれらを見たことがあると確信しています。

ブログでお金を稼ごうとする新しいブロガーは、通常、優れたユーザー エクスペリエンスに必要なものよりもはるかに多くの、あらゆる種類のものをサイドバーに詰め込みます。

このブログを見ると、ThinkSEM には最小限のサイドバーがあり、カテゴリ、アーカイブ、サブスクリプション ボックス、およびサービスのオファーという 4 つの単純なものを収容する 2 つのセクションしかありません。 それでおしまい。 これらのボックスをスクロールするとすぐに、記事の内容がすべて表示されます。

「サイドバーの動きがない」とそれを回避する方法

数年前、ウェブサイトの開発者でブロガーの Brian Gardner は、サイドバーなし運動と呼ばれるミニマルな運動を始めました。 サイドバーのないブログやウェブサイトを作成したのは彼が初めてではありませんが、それをうまく行う方法を実際に広めたのは彼が初めてでした。 彼のマニフェストは、不要な気晴らしのないミニマリストの生活を送ることです。 彼はサイドバーを取り除くことで、この生き方を視覚化しました。

彼のブログとコミュニティである No Sidebar は、ここ数年で飛躍的に成長しました。 ブライアンと彼のチームは、ミニマルなライフスタイルだけでなく、サイドバーのない新世代のブロガーにも影響を与えています。 彼は独自の No-Sidebar WordPress テンプレートを作成しました。これは、サイドバーのない機能的で美しいブログを作成したい人なら誰でも利用できます。

No Sidebar ブログは、サイドバーを持たない方法の究極の例です。 コンテンツの両側には文字通り何もなく、ソーシャル メディアの共有ボタンもありません。 しかし、サイドバーがなくても、すべてのブログがこれほど極端になるわけではありません。

では、サイドバーのないブログを作成し、ページに重要な情報を含めるにはどうすればよいでしょうか? 最も良い例の 1 つは、中レイアウトです。 記事内には実際のサイドバーはありません。 拍手と共有のためのほんの小さなセクション。 サイドバーに反対することを決めたブログの多くは、このレイアウトを採用しています: コンテンツが中央にあり、共有ボタンが横にあります。 時々彼らは小さな作者のイメージを持っています。

サイドバー、コンバージョン、A/B テスト

サイドバーを維持するか破棄するかについてまだ迷っている場合は、おそらくクリックが心配です。 おそらく、コンバージョンの多くは、サイドバーのオファーから発生します。 Video Fruit の Brian Harris 氏は、サイトで A/B テストを実施し、サイドバーの有無にかかわらずクリック数が多かったかどうかを確認しました。 結果は、サイドバーなしのバージョンで肯定的でした。 彼は自分のブログのサイドバーを完全に取り除きました。

Crazy Egg の Neil Patel はサイドバーのチアリーダーですが、彼自身の Neil Patel ブログでのみ使用しています。 Crazy Egg ブログにはありません。 彼はおそらく、サイドバーで常に A/B テストを行っているでしょう。

A/B テストとは、Web サイト内の 2 つの異なるものに対してテストを作成することです。 DIVI などの一部の WordPress テーマでは、これが可能です。 他のテーマについては、解決策を得るためにバックエンドを調べる必要があるかもしれません。 Crazy Egg のこの記事が役立つかもしれません。

結論

それで、あなたはどう思いますか？ サイドバーは絶滅への道を進んでいますか? 私たちはそうは思いませんが、ますます多くの人が自分のサイトでそれを取り除く方法を見つける一方で、他の人が広告で埋め続けることは事実です.

あなた自身のウェブサイトまたはクライアントのウェブサイトに関するサイドバーの選択は、視覚的なスタイルとブランド メッセージに大きく依存します。 さまざまなオプションを検討したので、将来の決定が容易になる可能性があります。