Advertisement

trendsinwebmagazine

 

Yahooなどの大手ニュースサイトなどでも使用され、情報系ポータルサイトで人気のあるウェブレイアウトのひとつにマガジンスタイルがあります。

多くの情報をまとめて表示することで、ユーザーに閲覧するコンテンツの選択肢を広げることができ、アクセスアップにもつながります。

 

今回はそんなマガジンスタイルのウェブレイアウトにおける12のトレンド&具体例をまとめた「Trends in News and Magazine-Style Web Design」がVandelay Design Blogで公開されていたので、ご紹介します。

ポータルサイトをデザインしようと考えている方は参考になるトレンドが見つかるかもしれません。

 

 

詳細は以下から。

 

 

白またはライトな背景色を使用しよう


 

情報コンテンツの豊富なマガジンスタイルのホームページに使用されている背景色は、可読性を考え、白やライトな色使いとなっています。

もちろん例外もありますが、大手サイトなどでは特にこの傾向が高いようです。

magl-34

via True/Slant

 

 

 

グリッドを使用しよう


 

最近のニュースサイトのレイアウトはグリッドを使ったデザインが目立っています。

グリッドを使うことで等間隔に整列されたカラムを作成することができ、多くの情報をまとめて表示するときにも便利です。

magl-30

via The New Yorker

 

 

 

タイポグラフィーをデザインとして使おう


 

ニュースサイトではたくさんのコンテンツでページを埋めなければいけません。

タイトルやテキストはもちろん、イメージ画像、ナビゲーションメニュー、広告枠などがレイアウトされており、どれもデザインよりも情報が重視されています。

Webフォントなどを使ってヘッドラインを表示するなどして、デザイン性のあるタイポグラフィーを使用したりしています。

日本語サイトではなかなかWebフォントの使用は難しいかもしれませんが、英語表記などには気を配りたいところです。

magl-26

via The Morning News

 

 

 

サムネイル画像を使おう


 

多くのニュース、マガジンスタイルサイトでは、トップページからたくさんの記事やエントリー、コンテンツにリンクさせています。

ユーザーにとってわかりやすく情報を知るためにサムネイル画像を表示することで、アクセスアップにもつながります。

特に人気の高い記事や最新記事などによく使われています。

magl-35

via UGSMAG

 

 

 

検索ボックスに気を配ろう


 

サイトに多くのコンテンツが掲載されている場合、検索ボックスはビジターにとって、探しているコンテンツを見つける強力な武器となります。

多くのニュースポータルサイトにおいて、ヘッダー部分など簡単に見つけることができる場所に検索ボックスはレイアウトされています。

使いやすさを考えたユーサビリティの面においても改善することができるでしょう。

magl-33

via bmi Voyager

 

 

 

カテゴリー別のナビゲーションメニューを使おう


 

多くの情報を扱うポータルサイトには、ナビゲーションをメニューを利用することで論理的でシンプルにまとめることができます。

記事をカテゴリー別に分けることで、ビジターが探している情報をわかりやすく提供することができます。

magl-31

via Dazed Digital

 

 

 

水平型のナビゲーションメニューを使おう


 

メニューバーのスタイルとしては、水平型ナビゲーションを使用しているサイトが多い傾向にあります。

垂直型ナビゲーションを使用しているサイトもありますが、数は限られているのが現状です。

magl-36

via the Guardian

 

 

 

ドロップダウンメニューを使おう


 

水平型ドロップダウンメニューの多くはドロップダウンメニューを利用しており、ビジターに多くの選択肢を提供しています。

さまざまなカテゴリーの大量のコンテンツがある場合などは、特にビジターにもわかりやすく求めている情報にたどり着きやすくしています。

magl-27

via New York Magazine

 

 

 

ビデオコンテンツを作ろう


 

最近では当たり前になっているYouTubeなどのビデオ動画などにリンクを貼ることで、ビデオコンテンツを提供してみるのもよいかもしれません。

通常トップページかサイドバーなどにコンテンツを作成している傾向が高いようです。

サイト滞在時間が長くなるというメリットもあります。

magl-32

via People

 

 

 

人気エントリーを表示しよう


 

ビジターにとって人気エントリーを見つけやすくすることで、ユーサビリティの改善につながります。

多くのニュースサイトでは、サイドバーを中心にカテゴリー別の人気エントリーを表示しています。

日本の場合、はてなブックマークなどのソーシャルメディアで人気のエントリーを表示してもよいかもしれませんね。

magl-28

via Inc.

 

 

 

ソーシャルメディアを活用しよう


 

ブログなどでも使われているtwitterなどのソーシャルネットワークを活用することで、さらに話題性のあるニュースサイトを作り上げることができます。

また独自に投票ボタンなどを設置しているケースも多く見かけます。

magl-29

via GOOD

 

 

 

サイドバーは右側に設置しよう


 

左側に設置しているニュースポータルサイトももちろんありますが、多くの場合、トップページとコンテンツページの右側にレイアウトしている傾向が強いようです。

magl-8

via Omid for Iran

 

 

 

マガジンスタイルの具体的サンプル


 

具体的にマガジンスタイルでレイアウトされているニュースサイトをまとめています。

デザインの際のアイデア参考に使ってみるとよいかもしれません。

 

Kineda

magl-1

 

 

Visual Recipes

magl-2

 

 

Clutch Magazine

magl-3

 

 

Accueil

magl-5

 

 

Broadway

magl-6

 

 

Mix Online

magl-9

 

 

Causecast

magl-11

 

 

RunAddicts

magl-14

 

 

CNN iReport

magl-15

 

 

Relevant Magazine

magl-20

 

 

The Swish Life

magl-23

 

 

Caja Navarra Online

magl-24

 

参照元サイトにはこの他にもマガジンスタイルデザイン作成の参考になりそうな具体的サンプルがたくさんまとめられていますので、こちらもよろしかったら一緒にどうぞ。

 

[参照元 : Trends in News and Magazine-Style Web Design – Vandelay Design Blog]