閉じる

2014.10.1

新潮流は超シンプル! Webメディアサイトにおける4つの「デザイン」トレンド

185953136

photo:Thinkstock / Getty Images

 

こんにちは。インフォバーンでアートディレクター兼デザイナーをしている上野です。今回は私がデザインを検討する際に、さまざまなサイトを参照して気づいた、Webメディアサイトにおける4つの「デザイン」トレンドをご紹介します。記事の世界観に浸ってもらうためのインターフェースや、メディアの個性をどう表現するかなど、Webメディアサイトはデザイン手法の面でも日々進化し続けています。

 

1.PCサイトでもスタンダードとなるか? ハンバーガーメニュー

スマートフォンでのサイト閲覧が主流になりつつある現在、スマホから始まったデザイントレンドが、PCサイトにも導入される例が増えてきました。

海外メディアでは一般的な表現になりつつある「ハンバーガーメニュー」。メニューの項目が並んでいるさまをデフォルメした「三」の形状がハンバーガーに見えることから、そのように呼ばれています。

そもそもはアプリ向けに開発されたUIがスマホサイトへ、そしてPCサイトへと導入される事例が増えてきました。TIMEやVOGUEなど、大手メディアも採用しています。

 

140922time

http://time.com

TIME」では、ハンバーガーメニューをクリックするとカテゴリが出る仕様です。PC、タブレット、スマホと同じ挙動で、ユーザー体験に共通性を持たせています。レスポンシブ対応。
 

140922vogue

http://www.vogue.co.uk

VOGUE」はハンバーガーメニューを置いたグレーのエリアがモードな雰囲気を演出。

 

2.記事詳細はシングルカラムレイアウト

シングルカラムレイアウトにすることで、読み手は他のコンテンツに目移りすることなく記事に集中することができます。

以前はバナー、トピックス、ランキング…と関連情報を多く見せる複数カラム構成が主流だった、Webメディアのデザイン。現在では、特に記事詳細ページでシングルカラムにする事例が増えてきています(TOPページは複数カラムのままが多いですが)。

シングルカラム構成はスマホとPCのデザインが近いため、サイト設計、マークアップ作業負荷の軽減につながるという、作り手側のメリットもあります。

 

140922good

http://magazine.good.is

GOOD」の詳細記事は、イラストを大きく配置する印象的な構成。レスポンシブ対応。
 

140922art&design

http://calvertjournal.com

THE CALVERT JOURNAL」のワンカラム構成は、写真のレイアウトを複数パターン持たせることで、まるでビジュアル誌のようなユーザー体験を提供しています。レスポンシブ対応。
 

140922LA_gran_fuga

http://victoryjournal.com

VICTORY JOURNAL」のデザインもグラフ誌のように美しいです。レスポンシブ対応。

 

3.読んでいる記事タイトルを常時表示させておく

記事のタイトルを画面上部に常時表示しておけば、1万文字ある記事を読んでいたり、無限スクロールで流し読みをしていても、どのメディアの何の記事を読んでいたのか、わからなくなることはありません。

 

140922designing_tomorrow

http://www.slate.com

DESIGNING TOMORROW, TODAY」。ミニマルで美しいタイトルエリアです。
 

140922good2

http://magazine.good.is

GOOD」では、スクロールすると出現する効果で、ユーザーにタイトルの存在を印象づけます。

 

4.誰が書いた記事かを印象的に見せる

コンテンツ発信者の顔を出すことで、メディアの信頼度は高まります。

著者のTwitterアイコンで一覧を作ってもいいですが、描きおろしのイラストや撮りおろしの写真でトーンを統一すれば、メディアのイメージ、オリジナリティをより強く伝えることができます。

 

140922newyorker

http://www.newyorker.com

THE NEW YORKER」では、ポップなイラストで著者を表現。親近感が増します。
 

< img class=”aligncenter size-full wp-image-4248″ src=”/wp-content/uploads/2014/09/140922uvn.jpeg” alt=”140922uvn” width=”600″ height=”459″ />

http://www.universiteitvannederland.nl

UNIVERSITEIT VAN NEDERLAND」では、渋いモノクロの顔写真。学術的な印象です。
 

140922five

http://fivethirtyeight.com

Five Thirty Eight」では、デザイン処理をした写真がサイトのトーンづくりに一役買っています。

 

より良いコンテンツ体験のため、深くコンテンツを楽しんでもらうため、Webメディアにブランド(価値)を感じてもらうためのWebメディアデザインのトレンドをご紹介しました。

インフラの発展やデバイスの進化によって、大きな変化を遂げるWebメディアのデザイン。毎年トレンドが入れ替わり、次々と新しい表現が生まれています。少しでもWebメディアの今を感じていただけたら幸いです。

なお、Webメディアデザインの先端を走るデザイナーになりたい!(Webメディア以外でも)という新メンバーも募集中です! ご興味のある方は、ぜひこちらから応募してみてください。

 

CHANNEL IB TOP