複数のコンテンツを効率的に管理し、有用にする6つのデザインパターン

コンテンツを効率的に表示し、ユーザーエクスペリエンスを強化する、人気の高いデザインパターンを紹介します。

サイトのキャプチャ

6 Popular Content Presentation Design Patterns

[ad#ad-2]

下記は各ポイントを意訳したものです。

1. 価格表

価格表はサービスやプロダクトの価格を一覧できるようにしたものです。
ユーザーに基本的な機能と価格を比較させ、決断へと誘う効果があります。また、価格表自体にサインアップボタンを配置するのも効果的です。

サイトのキャプチャ

Basecamp

サイトのキャプチャ

LightCMS

2. 記事リスト

記事リストはニュースサイトやブログなどに多く見られ、よくできた記事リストにはタイトルだけでなく、記事の始まりや概略などを添えて表示します。これはユーザーにとって有用なコンテンツで、より容易にブラウズする手助けとなります。また、ユーザーが本当に興味をもってコンテンツを見つけだすので、期待通りではないなどのフラストレーションを減らすこともできます。

サイトのキャプチャ

The 9513

サイトのキャプチャ

Kind Company

3. サムネイル画像

サムネイル画像は二つの異なる方法で使用されます。一つは一般的なもので、プロダクトや写真ギャラリーなど画像の一覧として提供する方法です。もう一つは、記事に対してビジュアルのコンテクストを与える方法です。
共通するポイントはサムネイル自体がクリック可能であることで、それぞれに対応したファイルを開くようにします。

サイトのキャプチャ

Kester Limb

サイトのキャプチャ

Tobias Bjerrome Ahlin

[ad#ad-2]

4. カルーセル・スライドショー

カルーセルとスライドショーは人気の高いコンテンツをプレゼンテーションするデザインパターンで、ウェブページのレイアウト上も目立つ配置になっています。表示する際には、イメージとともに見だしやキャプションが添えられており、一つのプロダクトについて数多くの画像を見せるために使用することもできます。

サイトのキャプチャ

MotoCMS

サイトのキャプチャ

CreamScoop

5. 水平スクロール

水平にスクロールすることは長い間、ウェブデザインの世界で禁じられてきたものでした。主な原因として水平のスクロールバーの操作が困難であるというものでしたが、現在ではJavaScriptなどを使用してこの操作を容易なものにしている傾向があります。

サイトのキャプチャ

Radioactive Thinking

サイトのキャプチャ

Stephane Tartelin

6. 無限スクロール

垂直方向へのスクロールが果てしなく続くページは、Twitter, Facebookなどのように絶え間なく更新されるコンテンツで人気が高まっています。これはスクロールをし続ける限り、果てしなくページが垂直方向に表示され続けます。

サイトのキャプチャ

Continuous Scrolling: facebook.com

サイトのキャプチャ

Endless Scrolling

sponsors

top of page

©2018 coliss