オウンドメディアやブログに表示する要素として、人気記事や新着記事、カテゴリ、タグなどいろいろなものがあります。

これら要素を「どこに・なにを・どのように」配置するかで、サイト全体の回遊性が大きく変わってきます。 このため、有名なサイトに共通するベストプラクティスを抑えておくことは、UIを設計する上で重要な知識だといえます。

この記事では、UIに優れたサイトをいくつか紹介します。 メディアのUI設計の際の参考にしてみてください。

はじめに

UIを設計する上でなにより重要なのは、つくろうとしているサイトのビジネスキャンバスをしっかりと描くことです。

これは1つ1つのサイトで異なっており、すべてのサイトは各々のビジネスキャンバスに適したUIになっています。

この記事ではいくつかのサイトを紹介しますが、ただ参考にせず、自分たちのサイトの目的と照らして設計に役立てましょう。

ビジネスキャンバスがまだ描けていない状態の方は、サービスキャンバスのつくり方を参考にしてみてください。

要素一覧

多くのメディアは、次のようなコンテンツを表示しています。 同じく、メディアのUIを設計する際、これらの要素を表示しようと考えていると思います。

この記事で紹介するサイトで、これらの要素がどこに・どのように表示されているかを注意して見てみると、勉強になると思います。

  • 人気記事
  • 新着記事
  • ピックアップ記事
  • アクセスランキング
  • 特集ページ
  • カテゴリ
  • タグ
  • ライター一覧
  • 検索フォーム
  • ソーシャルボタン
  • お知らせ

サイト一覧

それでは以下に、参考になるサイトの名前とスクリーンショットをリンクつきで紹介します。

なお、タイトルには各サイトへのリンク、画像には現時点でのアーカイブへのリンクを張っています。

1. geechs magazine

2. 株式会社エウレカ

3. ROOMIE

4. HRナビ

5. RETRIP

6. 日経ビジネスオンライン

7. WIRED

8. BBCニュース

9. ログミー

10. グノシー

11. cakes

12. THE BRIDGE

13. Evernote 日本語版ブログ

14. 株式会社LIG

おわりに

オウンドメディアやブログは、検索エンジンからの流入がとても重要になってきます。 上記のサイトにおける各ページの想定キーワードはなにで、どのように要素を配置しているかを見ることで、SEO対策にも役立つことと思います。