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

2014-10-01

photo：Thinkstock / Getty Images

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

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

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

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

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

http://time.com

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

http://www.vogue.co.uk

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

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

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

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

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

http://magazine.good.is

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

http://calvertjournal.com

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

http://victoryjournal.com

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

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

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

http://www.slate.com

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

http://magazine.good.is

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

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

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

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

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」では、渋いモノクロの顔写真。学術的な印象です。

http://fivethirtyeight.com

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

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

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

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

上野菜美子

アートディレクター。WEB制作会社にてキャンペーンサイト、コーポレートサイト、ブランドサイト等のデザインを行う。2010年より株式会社インフォバーン入社。メディアサイトを中心にアートディレクション、デザイン業務を行う。アートディレクション、デザインの実績として「新しい美しさが見つかる、毎日へ。Beauty & Co.」/資生堂、「マイカジスタイル」/ 花王株式会社、「Dyson Duo」 / ダイソン株式会社　など。