Imagesこんにちは。インフォバーンでアートディレクター兼デザイナーをしている上野です。今回は私がデザインを検討する際に、さまざまなサイトを参照して気づいた、Webメディアサイトにおける4つの「デザイン」トレンドをご紹介します。記事の世界観に浸ってもらうためのインターフェースや、メディアの個性をどう表現するかなど、Webメディアサイトはデザイン手法の面でも日々進化し続けています。ハンバーガーメニュースマートフォンでのサイト閲覧が主流になりつつある現在、スマホから始まったデザイントレンドが、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」の詳細記事は、イラストを大きく配置する印象的な構成。JOURNAL」のワンカラム構成は、写真のレイアウトを複数パターン持たせることで、まるでビジュアル誌のようなユーザー体験を提供しています。JOURNAL」のデザインもグラフ誌のように美しいです。3.読んでいる記事タイトルを常時表示させておく記事のタイトルを画面上部に常時表示しておけば、1万文字ある記事を読んでいたり、無限スクロールで流し読みをしていても、どのメディアの何の記事を読んでいたのか、わからなくなることはありません。ミニマルで美しいタイトルエリアです。http://magazine.good.is「GOOD」では、スクロールすると出現する効果で、ユーザーにタイトルの存在を印象づけます。4.誰が書いた記事かを印象的に見せるコンテンツ発信者の顔を出すことで、メディアの信頼度は高まります。著者のTwitterアイコンで一覧を作ってもいいですが、描きおろしのイラストや撮りおろしの写真でトーンを統一すれば、メディアのイメージ、オリジナリティをより強く伝えることができます。YORKER」では、ポップなイラストで著者を表現。NEDERLAND」では、渋いモノクロの顔写真。Eight」では、デザイン処理をした写真がサイトのトーンづくりに一役買っています。良いコンテンツ体験のため、深くコンテンツを楽しんでもらうため、Webメディアにブランド(価値)を感じてもらうためのWebメディアデザインのトレンドをご紹介しました。インフラの発展やデバイスの進化によって、大きな変化を遂げるWebメディアのデザイン。毎年トレンドが入れ替わり、次々と新しい表現が生まれています。Webメディアの今を感じていただけたら幸いです。ご興味のある方は、ぜひこちらから応募してみてください。FacebookTwitterはてなブックマーク投稿者:上野菜美子アートディレクター。WEB制作会社にてキャンペーンサイト、コーポレートサイト、ブランドサイト等のデザインを行う。2010年より株式会社インフォバーン入社。メディアサイトを中心にアートディレクション、デザイン業務を行う。アートディレクション、デザインの実績として「新しい美しさが見つかる、毎日へ。2019レポートーアクセス数は二の次でいい。2019年11月2019年8月2019年5月2019年4月2019年3月2018年11月2018年9月2018年7月2018年4月2018年1月2017年12月2017年11月Ask各種ご質問やご相談については下記よりお問い合わせください。