新聞・雑誌風レイアウトでみかけるウェブデザインの12のトレンド
Post on:2010年4月9日
新聞・雑誌風レイアウトのニュース系ウェブサイトでみかける特徴的な12のトレンドをVandelay Designから紹介します。

Trends in News and Magazine-Style Web Design
1. ホワイト(明るい)背景
新聞・雑誌風レイアウトのサイトではコンテンツの比重が高く、ホワイトか明るい背景にする傾向があります。それは一般的にリーダビリティのために良いことです。
もちろん、例外もあります。しかし、メジャーなニュース系ウェブサイトではほとんどがホワイトの背景を使用しています。

2. グリッドベース
新聞・雑誌風レイアウトのサイトのレイアウトには、グリッドベースのレイアウトが採用されています。多くのコラムやテキストが配置されるため、グリッドはこういったタイプに非常に効果的です。
グリッドはコンテンツを適度なスペースで配置し、より読みやすく提供できます。

3. デザインエレメントとしてのタイポグラフィ
新聞・雑誌風レイアウトのサイトではページに多くのコンテンツを配置しなければなりません。テキストと見出し、画像、ナビゲーション、広告などがあります。
これらをグリッドで配置する際は、タイポグラフィが重要なデザインエレメントとして活躍します。

4. サムネイル画像
新聞・雑誌風レイアウトのサイトでは、記事やポストなどに多くのリンクを含んでいます。特に主要なものにはサムネイル画像を使用することはごく当たり前のことです。

5. サイト内検索
ビジターがサイト内の記事を探す際、サイト内検索は非常に役立つ機能です。たいていのサイトではサイト内検索は目立つ場所に配置されています。多くの場合はページの最上部です。
サイト内検索は、簡単に見つけられる場所に配置し、正確な結果を提供できるようにします。

6. カテゴリベースのナビゲーション
多くのコンテンツがあるサイトでは、論理的でシンプルなナビゲーションを配置することが必要です。たいていのサイトではコンテンツを分類し、ユーザーにカテゴリベースのナビゲーションを提供することで、探しているものを見つけ出せるようになります。

7. 水平型のナビゲーション
水平型のナビゲーションはさまざまなサイトで利用されていますが、ニュース系ウェブサイトでは特に顕著です。
垂直型のナビゲーションはセカンダリナビゲーションのために使用します。ほとんどのサイトでは垂直型はプライマリナビゲーションとしては使用していません。

8. ドロップダウン
水平型のナビゲーションには、ユーザーに多くの情報を提供するために拡張型のメガドロップダウンを使用しています。
主要カテゴリだけでなく、サブカテゴリも見せることが可能です。このタイプはユーザーが簡単に利用できるように設計してください。

9. ビデオコンテンツ
最近になって多くのサイトでビデオコンテンツが増えてきました。フロントページやサイドバーにビデオは配置したセクションが含まれます。

10. 人気があるコンテンツ
ユーザーに人気のあるコンテンツへのリンクをまとめるのは、ユーザーが何かを見つけるためにユーザビリティの非常に重要な部分です。このコンテンツはサイドバーによく配置されています。

11. ソーシャルメディア
ブログにも多く利用されているソーシャルメディアのインテグレーションを配置します。ボタンの投票型コンテンツ、Twitter、Facebookなどがよく掲載されています。

12. 右側のサイドバー
いくつかのサイトではサイドバーを左側に配置しますが、多くのサイトでは右側にサイドバーを配置します。このレイアウトはフロントページをはじめ、コンテンツページに利用されています。

ショーケース
元記事では、多くのショーケースが紹介されています。
sponsors