関連記事を表示するレコメンドウィジェットのデザインは、Webサイトとの相性で決めよう!
ハウツー
Webサイトに訪れたユーザに対して、閲覧コンテンツに関連する「別のリンク」を提供する関連記事の機能は、WebサイトのPV（ページビュー）や平均滞在時間を増やし、ユーザ満足度を向上させるために非常に重要です。今回は、関連記事を提供する際のデザイン（レコメンドウィジェットのデザイン）について考えます。
こちらもオススメ
- こちらもおすすめ！？ あわせて読みたい！？ 関連記事レコメンドウィジェットの表現方法
- 関連記事でコンテンツをつなぐ！PVアップ、収益アップにつながる有効な活用方法
- 記事と商品のコンテンツマッチでリフレッシュ！ ～関連記事＋広告のレコメンドウィジェットに疲れたら～
レコメンドウィジェットのおさらい
閲覧中のコンテンツ周辺に設置される関連記事は、ほとんどの場合、複数のコンテンツリンク集として枠単位で提供されています。この枠のことを一般的にレコメンドウィジェットと呼び、一部広告を含んだレコメンドウィジェットは、レコメンドウィジェット型広告と呼ばれています。
レコメンドウィジェット：メインコンテンツに関連あると思われるリンクの集まり
レコメンドウィジェット型広告：レコメンドウィジェットに広告（外部サイトへのリンク）が混ざったもの
代表的なレコメンドウィジェットのデザインは、パソコンで4×2（もしくは、3×2）の表示、スマホで2×4（もしくは、2×3）の表示で、各Webサイトでよく目にすると思います。
Webサイトとレコメンドウィジェットの相性
レコメンドウィジェットのデザインは代表的な4×2や3×2以外にもさまざまなパターンが存在します。Webサイトのコンテンツとの相性から、自社サイトに合ったレコメンドウィジェットのデザインパターンを考えてみましょう。
1.テキスト情報がメインで、画像がないコンテンツも存在する場合
速報系ニュースサイトや企業サイトのプレスリリースコーナーでは、コンテンツ自体に画像を含まないケースも多く、標準的な4×2のレコメンドウィジェットではうまく情報を伝えられません。そのような時は、テキストエリアを大きくしたレコメンドウィジェットが有効です。コンテンツ下やサイドバーどちらにも使え、スマホでもそのままのレイアウトで配信でき、使い勝手の良いデザインです。現在のとりもちブログではパソコン表示のサイドバーにこのデザインを適用しています。
ポイント
- 文字情報がメインで、画像がないコンテンツが存在するWebサイトの場合、縦一列のレコメンドウィジェットを候補にしてみよう
- SNSでのシェアを意識して、画像がない場合でもコンテンツ登録時には企業ロゴなどをog:imageに設定しよう
- テキストリンクだけでもよいが、スマホ表示になった際に最低限のタップしやすい面積は確保しよう
以前の記事：OGPを理解しなければいけない理由－マーケティングに役立つOGPの書き方
2.コンテンツ中に必ず画像がある場合
ECサイトのようにコンテンツに対して画像が必ずある場合は、画像表示領域を大きく取ったレコメンドウィジェットが有効です。ECサイトでもよく見かけますが、4×2や3×2のデザインで画像中心のレコメンドウィジェットでユーザの興味を引きましょう。少しインパクトを出したい場合には、ウィジェット内の1枠を大きくとった変形デザインも有効です。現在のとりもちブログでは、記事下にレコメンドウィジェット内の2枠を大きくした変形10枠デザインを採用しています。
ポイント
- 画像付コンテンツが多い場合は、4×2のようなタイルデザインを活用しよう
- 変形デザインも有効だが、画像サイズにばらつきがある場合や商品のみの透過画像がある場合は、見栄えが悪くなる可能性があるので、事前テストを入念にしよう
- 変形デザインを採用する際は、スマホでの表示くずれに注意しよう
以前の記事：インパクトで選んでない？アクセス数UPにつながるアイキャッチ画像の選び方
Webサイト・コンテンツとの相性を考えよう
今回は、レコメンドウィジェットのデザインについて考えました。レコメンドウィジェットは、自社コンテンツとの相性や来訪ユーザの特性、タップのしやすさなどから総合的に導入を判断しましょう。CMSによっては、対応可能なデザインが限られる場合もあります。その際は、思い切ってサードパーティのツールやサービスを検討するのも良いでしょう。レコメンドウィジェットは、Webサイトにとって重要なパーツとなりつつあり、同一サイトだけではくサイト間の送客にも使えますが、手動での設定には限界があります。この機会に自社サイトのレコメンドウィジェットデザインを一度見直してみてはいかがでしょうか。
こちらもオススメ
