2022年の10のブログレイアウトのベストプラクティス—厄介なレイアウトでUXを台無しにしないでください

公開: 2022-04-30

賢明なユーザーエクスペリエンスデザイナーは、「優れたデザインは目に見えない」と述べています。言い換えれば、あなたやあなたのユーザーがあなたのブログのレイアウトやユーザーエクスペリエンスに気づいているなら、それはおそらく悪いデザインです。

私たちが毎日使用しているすべてのウェブサイト、アプリ、プラットフォームについて考えてみてください。ユーザーインターフェイスとエクスペリエンスについて意識的に考えていますか？

最高のユーザーインターフェイス（UI）とユーザーエクスペリエンス（UX）は、Instagramの投稿へのコメント、長い形式のブログ投稿のナビゲート、データの入力など、目標の達成を妨げるものではありません。 Webアプリ。

適切に設計されたブログは、多くの点でeコマースビジネスの所有者にとって不可欠です。たとえば、サイトへのトラフィックを増やし、潜在的な顧客との信頼関係を築くのに役立ちます。また、製品やサービスの宣伝にも役立ち、後で成長の機会につながります。

残念ながら、デザインがぎこちない場合は、人々があなたのコンテンツに固執して読む可能性が低くなることがすぐにわかります。つまり、上記の良いことはどれも起こりそうにないということです。

「媒体はメッセージです。」つまり、コンテンツをどのように配信するかは、コンテンツ自体の品質と同じくらい重要です。

あなたのブログはあなたのマーケティングファネルの重要な部分であるため、優れたUI/UXは確かにリピーターと収益に影響を与えます。

このブログ投稿では、2022年のベストレイアウトプラクティスのいくつかを実行し、ユーザーの関心を維持し、さらに多くのことを求めて戻ってきて、ブログを他の人に推薦します。

2022年のUXに関する10のブログレイアウトのベストプラクティス

Webのベストプラクティスを含むテクノロジーは毎週変化しているようです。そして、新しいテクノロジーによって、コンテンツを消費するための新しいエキサイティングな方法が生まれます。

ユーザーは現在、ソーシャルメディアを介してであれ、電話でブログを読んでいる場合であれ、コンテンツを短時間で消費することに慣れています。

ブログのレイアウトは、これらの変更に適応し、誰かがどこで、どのようにブログを使用していても、読みやすくする必要があります。

最適なUXのためにブログのレイアウトを設計する際に覚えておくべきいくつかのヒントがあります。

ヒント1：一元化された「ラーニングセンター」アプローチを使用する

特定のトピックについて広範囲に書くことは、Googleでトピックの権威を構築し、視聴者を信頼するための優れた方法です。

ただし、ブログでこのコンテンツをどのように整理するかは、コンテンツ自体と同じくらい重要です。

非営利団体の資金調達について知っておくべきことをすべて書いたとしましょう。それは素晴らしいです。しかし、関連するコンテンツがタグ付けされておらず、分類されておらず、他の多くのトピックに散在している場合、非営利の見込み客にとってそれはどのようなメリットがありますか？

これは、特定のトピックに関するすべてのコンテンツを一度に消費したいユーザーにとっては理想的ではありません。そのトピックに関するすべてが1つの場所にまとめられている、累積的なアプローチを採用することをお勧めします。これを「学習センター」アプローチと呼びます。

このアプローチは、エンゲージメントを高めるための優れた方法です。これにより、ユーザーは、Webサイト全体でスカベンジャーハントを行うことなく、特定のトピックに関するすべてのコンテンツを簡単に見つけて消費することができます。また、他のコンテンツをクロスプロモーションして、サイトで費やす時間を増やすこともできます。

さらに、ラーニングセンターのアプローチでは、セッションあたりのページ数が増える可能性があります。

これは実際にはどのように見えますか？良い例については、 MatterAppのブログをチェックしてください。職場のチームに賞賛とフィードバックを与えるアプリを特徴とする同社は、その柱とクラスターのコンテンツを1ページの6つのカテゴリーにクラスター化しました。このページには、ユーザーが製品について詳しく知るために調査する必要のあるすべてのものが含まれています。

ヒント2：「スティッキー」な要素を活用する

人間は怠け者です。したがって、設計の主要な信条の1つは、ユーザーの作業をできるだけ少なくしながら、最大の価値を付加することです。

「スティッキー」なページ上の要素を使用することは、これを促進し、ブログのエンゲージメントを高めるための最良の方法の1つです。

ユーザーが下にスクロールしても、スティッキー要素は画面に表示されたままになります。これは、ユーザーがページの一番上までスクロールバックしなくても、いつでもアクセスできることを意味します。

たとえば、メールリストに登録するための召喚状がある場合、スティッキー要素を使用すると、常に表示され、簡単にアクセスできるようになります。

この例は、 HubSpotのブログで見ることができます。同社は、画面の右下隅にある粘着性のある召喚状を使用して、ユーザーが自分の電子メールリストにサインアップするように促しています。

スティッキー要素は、次のような他のさまざまな目的に使用できます。

ソーシャルメディアボタン
ナビゲーションメニュー
検索バー
ライブチャットウィジェット

ここで重要なのは節度です。粘着性のある要素が多すぎると、ページが圧倒されて雑然とし、最終的にユーザーエクスペリエンスが損なわれる可能性があります。

ヒント3：追いかける

長い形式のコンテンツを持つことは、ブログへのトラフィックを増やし、Googleで上位にランク付けするために不可欠です。しかし、ほとんどの読者は迅速な回答を望んでおり、あなたがあなたの製品やサービスの長所について際限なくドローンを飛ばしているのを聞きたくありません。

たとえば、ユーザーが「ブログの執筆とは何か」という質問への回答が必要な場合、彼のクエリのほとんどの検索結果には、長くて包括的なガイドが含まれます。ガイドは質問に答えますが、ユーザーは定義を見つけるために長いコンテンツをざっと読む必要があります。

もう1つの例は、Pinterestの長いブログ投稿を調べて、材料とレシピの手順をたどることです。レシピに直接アクセスできるリンクを使用する料理の専門家に感謝しますよね？

これらの例は、ほとんどのユーザーにとって間違いなく時間がかかり、苛立たしいものです。これは、ユーザーエクスペリエンスの悪さの縮図です。その代わりに、記事のクイックサマリーボックスを利用して追跡します。

記事全体の要約を含む小さなボックスがあると便利で、ユーザーや読者の時間を節約するのに最適な方法です。サマリーボックスはコンテンツに合わせて調整可能ですが、記事の冒頭に配置することは、読者のために回答やコンテンツを詳しく説明するための優れた方法です。

ボーナスとして、ユーザーの質問に明確かつわかりやすく答えることで、Googleがあなたを彼らの切望された「注目のスニペット」結果に入れる可能性が高まります。これはユーザーの質問への答えを強調するGoogleSERPの最高の結果です。

ヒント4：ブログカードのデザインを活用する

あなたのブログを新鮮に保つために、あなたはおそらくたくさんの記事をクランクアウトしているでしょう—よくやった！がんばり続ける。

ただし、これは、特にメインのブログページですべての新しい投稿を一度に強調表示しようとしている場合に、すぐに視覚的な混乱につながる可能性があります。

では、ユーザーを圧倒することなく、メインのブログページに投稿を掲載することの最適なバランスは何でしょうか。ブログのサムネイルと記事のリンクはどのくらいの大きさまたは小ささである必要がありますか？

ええと、その質問に対する簡単な答えはありませんが、少なくとも最も効果的なアプローチは「ブログカード」のレイアウトであることを私たちは知っています。詳細については、評判の良い出版サイトの慣行を研究して複製することをお勧めします。

Medium.comは、この形式の優れた例を提供します。

ブログカードのデザインを使用することには、次のような多くの利点があります。

それらはスキャンして消化するのが簡単です。
重要な情報を簡単に認識し、思い出し、読むことができます。
彼らはあなたがユーザーを圧倒することなく多くの情報を含めることを可能にします。
簡単に並べ替えたり並べ替えたりできるため、レスポンシブデザインに最適です。
それらは十分な空白を提供し、視覚的に魅力的でナビゲートしやすいものにします。

ただし、最も重要度の低い要素と最も重要度の高い要素を明確に区別するために、レイアウトのフォントサイズと画像を変える必要があります。この戦術は、読者にとってデザインをより読みやすくします。

さらに、カードのデザインに次の要素を含めることができます。

注目の画像
ブログ作者（画像）
カテゴリー
ブログのタイトル
ソーシャルシェアリンク
投稿日
ブログの抜粋
続きを読むボタン

このリストを念頭に置いて、Mediumのホームページを見てみましょう。

各「カード」とすべての関連情報に注意してください。ほとんどすべてのブログ投稿には、少なくとも次のものがあります。

ブログのタイトル
注目の画像
ブログの作者
ブログの作者画像
公開日
読書の時間
後で使用するために投稿をブックマークする機能

あなたはおそらくこれまでにこれらすべての要素に気づいたことはないでしょう？しかし、あなたはおそらく彼らの存在に感謝しています。これは、優れたデザインが見えないことの完璧な例です。

また、 Impactのインバウンドマーケティングの専門家がブログカードのレイアウトに記事を配置するために推奨するベストプラクティスの1つは、記事を2列または3列に配置することです。

これはあなたが提示している情報に依存しますが、全体として、同時に見られる投稿の数を最大化します。

ヒント5：読み取り時間を含める

コンテンツを作成するときは、人々にそれを読み続けてもらいたいと考えています。しかし、読者が時間がないと感じた場合は、先に進む可能性があります。そのため、あなたができる最善のことの1つは、記事を読むのにかかる時間を正確に伝えることです。

この戦術は、ターゲットオーディエンスが常に外出中の忙しい人々で構成されている場合に特に重要です。彼らに推定読み取り時間を与えることによって、あなたは読者に時間の約束を前向きに与える戦略を実装しました。それはまた、短いスパートで消化しやすいコンテンツのために彼らを連れ戻す可能性が高いです。

したがって、他の人にコンテンツを読み続けてもらいたい場合は、正確にどのくらいの時間がかかるかを伝えてください。この単純な行為は、エンゲージメントを高め、サイトの人々をより長く維持します。

ヒント6：空白を有利に使用する

空白は、ネガティブスペースとも呼ばれ、ページ上の要素の周囲のスペースです。読者の視覚的な興味をそそり、特定のコンテンツに注意を向けるために、レイアウトで空白を使用することが重要です。

適切に設計されたレイアウトを作成するには、空白の適切なバランスを見つけることが不可欠です。空白が少なすぎると、ページが窮屈で忙しいと感じる可能性があり、ユーザーにとっては圧倒される可能性があります。一方、空白が多すぎると、ページが未完成または専門的でないように感じられる可能性があります。

たとえば、TikTokは大量の空白を利用しています。彼らが使用する量は、ビジネスWebサイトではばかげているように見えるかもしれませんが、ページ上のビデオにすべての注意を向けるのに最適です。

一般に、空白が少なすぎるのではなく、多すぎるという側面で誤りを犯すのが最善です。これは、目に優しいすっきりとした広々とした外観を作成するのに役立ちます。

したがって、ブログのレイアウトに関しては、空白があなたの友達です。特定のコンテンツに注意を引き、レイアウトをより視覚的に魅力的にするのに役立ちます。

ヒント＃7：サイドバーが乱雑にならないようにする

これは多くのブロガーが犯すよくある間違いです。彼らは、ソーシャルメディアアイコン、オプトイン、広告、およびその他のランダムながらくたでいっぱいのサイドバーを詰め込みます。

この方法は、すべてが見栄えが悪いだけでなく、訪問者を混乱させ、圧倒する可能性があります。

また、顧客に付加価値を与えることよりも何かを販売することに関心があり、情報提供の信頼を構築するコンテンツの目的全体を打ち負かしているという印象を与えます。

サイドバーをジャンクドロワーのように扱わないでください。代わりに、ソーシャルメディアのアイコンやオプトインなどの必需品に固執してください。これにより、ナビゲートしやすく、ユーザーエクスペリエンスを向上させる、より合理化された外観を作成できます。

ヒント＃8：タイポグラフィを賢く使う

タイポグラフィは、好奇心旺盛な人のためにテキストが物理的またはデジタルページでどのように見えるかです。また、書体を操作して、表示されたときに書体を読みやすく魅力的なものにすることも含まれます。

この配置には、通常、行や単語の長さ、間隔など、またはポイントサイズなどのデザイン要素を取得し、それらを追加または操作して、見た目が良く、消化しやすいものにすることが含まれます。

より良い影響を与えるには、レイアウトでタイポグラフィを賢く使用することが不可欠です。あなたは視覚的な興味を生み出し、そうするときに特定のコンテンツに注意を向けます。

たとえば、見出しには常に大きなフォントを使用し、本文には小さなフォントを使用する必要があります。または、見出しにまったく別のフォントを使用することもできます。

理想的には、17pxから21pxまでのフォントサイズがデジタルリーダーに適していると見なされます。一部のフォントサイズは、他のフォントサイズに比べて当然大きくなります。

さらに、1ページで使用するフォントの数を最大で3つに制限することをお勧めします。例えば：

投稿のタイトルには最初のフォントスタイルを使用します。
サイドバーのタイトルには、2番目のフォントスタイルを使用します。
投稿の本文には3番目のフォントスタイルを使用します。

最後のヒントとして、フォントがWebセーフであることを確認してください。そうしないと、一部のデバイスにロードされない場合があります。 Google Fontsはウェブフォントの無料リポジトリであり、常に安全な方法です。

ヒント9：関連記事を組み込む

人々にあなたのコンテンツに固執して読んでもらうもう1つの方法は、関連する記事をレイアウトに組み込むことです。

関連記事は、トピックまたは主題が類似している他のブログ投稿（内部および外部）へのリンクです。これらのリンクを含めることで、人々の関心を維持し、コンテンツを長期間読むことができます。

関連記事を見つけるには、YoastSEOなどのプラグインを使用できます。このプラグインはあなたのブログ投稿を分析し、あなたが含めるべき関連記事を提案します。

または、Googleにアクセスして「[トピックキーワード]サイト：[yoursite.com]」を検索することにより、手動検索を行うことができます。 Googleがサイトのインデックスを作成している限り、そのキーワードを含むサイト上のすべてのページと投稿が表示されます。

たとえば、ブログのトピックについて書いたすべてのページを表示したい場合は、Googleで次の検索を入力します：「bloggingsite：skuvault.com」。

結果として得られるページは、相互リンクの優れた候補となる可能性があります。

ヒント＃10：高品質の画像を使用する

ブログのレイアウトでは、高品質で安っぽくない画像を使用することが重要です。それは、人々がテキストよりも写真に関心を持つ傾向がある視覚的な生き物だからです。

実際、調査によると、情報を画像と一緒に提示すると、人々は情報を覚える可能性が高くなります。

したがって、ブログ投稿の画像を選択するときは、それらが高品質で、目前のトピックに関連していることを確認してください。

一般的なストックフォトを避けるために最善を尽くします。場合によっては、既存の写真を編集して、よりカスタマイズされたように見せることもできます。

上品で無料のストックフォトを見つけるのに最適な場所はPexelsです。

ブログのUXをレベルアップする他の方法

私たちがリストした10のヒントに加えて、ブログのUX/UIを改善する他のいくつかの方法があります。

スキャン可能なデザインを選択してください：ブログは本や学術論文を書くこととは大きく異なります。短く正確なセクションを記述し、長い段落を避け、ヘッダーと関連画像でテキストを分割し、サブヘッダーとヘッダーを使用してセクションを整理することで、ブログのレイアウトをスキャン可能にすることができます。
レイアウトのブランディング：ブランディングはビジネスを成功させるための鍵であり、ブログのレイアウトでも同じように機能します。作成するブログは、ブランドの感触と外観を反映している必要があります。つまり、ホームページのテーマやデザインがシンプルな場合は、ブログのレイアウトを同じに保つことをお勧めします。
垂直方向の配置を使用する：不適切に設計された要素は、親指の痛みのように突き出ます。たとえば、画像やテキストが列の残りの部分から見当違いに見える場合、それは気を散らすものになり、専門家ではないように見えます。また、段落と写真は、視覚的な連続性のために同じ幅にする必要があります。
検索バーを含める：サイトにコンテンツがたくさんある場合、人々が探しているものを見つけるのが難しい場合があります。ブログのレイアウトに検索バーを含めることが重要です。そうすれば、人々は探している情報をすばやく簡単に見つけることができます。
コンテンツの作成者を強調表示する：ブログに複数の作成者がいる場合は、名前を強調表示し、投稿の横に高品質の写真を含めることが重要です。このアプローチはすべてを人間化し、読者との信頼関係を築くのに役立ちます。また、同じ作成者による他のコンテンツを簡単に見つけることができ、GoogleがあなたのEAT（専門知識、権威、信頼）を判断するのに役立ちます。
サイトをモバイルフレンドリーにする： 2022年です。ブログのレイアウトがモバイルフレンドリーであることを確認することは交渉の余地がありません。ありがたいことに、評判の良いプロバイダー（WordPress、Squarespace、Shopify）の最新のブログレイアウトにはすべて、すぐに使えるモバイルフレンドリーなレイアウトが含まれています。モバイル対応のレイアウトがない場合は、この投稿の範囲を超える問題が発生します。

あります！これらのヒントを利用して、読者が何度も戻ってくるようなキラーなブログレイアウトを作成してください。

在庫管理を忘れないでください

私たちのアドバイスを受けて、これらのUXのヒントを実装する場合は、読者数、トラフィック、売上の急増に備えてください（どういたしまして！）。

あなたがeコマースショップなら、この成長を管理するための優れた在庫システムが必要になります。

SkuVaultは、あらゆる形態と規模の企業が在庫管理に伴う面倒な作業を最適化および合理化するのを支援するために存在します。

収益を伸ばす（そして正気を保つ）ために私たちが事業主と一緒にやってくる具体的な方法の詳細については、ここをクリックしてください。