WEB・IT業界で働く人々の人生を少し豊かにするメディア

CAREER HACK

記事をより読みやすくする『NewsPicks』のデザイン

2018-04-17

記事をより読みやすくする『NewsPicks』のデザイン

経済メディア『NewsPicks(ニューズピックス)』は、図やイラスト、インフォグラフィックなどデザインで「記事を読む体験」を向上させている。櫻田潤さんによる解説をお届け。

デザインの力で、情報を気持ちよく読んでもらう

「デザインの力を使って“情報”を気持ち良く読んでもらう。それが私の仕事です」

こう語ってくれたのが、『NewsPicks』でインフォグラフィック制作を担当する櫻田潤さん。イラストや図解で情報を伝えやすくする「インフォグラフィックエディター」という職種を開拓。第一人者として先頭を走り続けてきた。

櫻田さんによる「読みやすさのためデザイン解説」をお届けする。

わかりやすいビジュアルを駆使した記事・ニュースが特徴の『NewsPicks』わかりやすいビジュアルを駆使した記事・ニュースが特徴の『NewsPicks』。「ネット四天王のすべて」「ビジュアルレポートで見る決算」「Airbnb成長ストーリー」など独自コンテンツを配信している。

※ 2018年3月に開催された「UI Crunch #12「伝える」を加速させる。書く、読むUI」のレポート記事としてお届けします。

NewsPicksが持ち合わせる「2つのUI」

まず語られたのは、『NewsPicks』がメディアとして担う2つの役割と意識するUIについて。

1. プラットフォーム/サービスのUIを意識する
 ユーザーがPickすることで、さまざまな媒体の記事が掲載される

2. パブリッシャー/コンテンツのUIを意識する
 編集部がオリジナル記事を制作し掲載する

2つのUI

コンテンツUIに特化したクリエイティブチーム

特に言及したのが、コンテンツにおけるUIの重要性について。

「NewsPickの記事は、画面いっぱいにコンテンツを表示しています。広告を表示させていない。だからこそ、コンテンツはインターフェースそのものと捉えています」

NewsPicksにはクリエイティブ・チームがあり、コンテンツのUIに力を入れる。インフォグラフィックのみならず、スライド型記事や動画の制作も行なう。

なぜ、他のメディアに比べて、コンテンツのUIに力を入れられるのか。

「NewsPicksは有料課金モデルなので、コンテンツの品質を高めることが大切だという共通認識があります。さらにバナー広告がなく、ブランド広告、ネイティブ広告を展開しているため、コンテンツのUIにフォーカスできています」

独自の自社プラットフォーム・課金ビジネスを

自社で制作している記事は、自社プラットフォームに掲載する。そのため見せ方もコントロールができる。ここが「プラットフォーム主導」「広告モデル」の既存メディアとの大きな違いだという。

「GoogleやFacebook、Twitterなどのプラットフォーム主導でビジネスが進められてきたため、コンテンツのUIに注意を払う文化が醸成されてこなったと考えています。さらにコンテンツはフロー状態でどんどん流されていく。広告モデルがビジネスの中心にあり、バナー広告ありきのインタフェースへ。そしてエンゲージメントよりもバズを追い求めるメディアが多く生まれ、外部メディアに配信するのが当たり前になっていきました。コンテンツを制作する側からすれば、見え方をコントロールできない」

こうした背景から、コンテンツのUIを磨く意識が醸成されてこなったのではないか?と櫻田さんは解説してくれた。

NewsPicks インフォグラフィック・エディター 櫻田潤NewsPicks インフォグラフィック・エディター 櫻田潤
2010年4月より、個人プロジェクト『ビジュアルシンキング』を開始。いち早くインフォグラフィックの制作を行うなど、第一人者として先頭を走り続けてきた。2014年、NewsPicksに参画。それ以降、インフォグラフィックを用いた記事の編集、デザイン、執筆など活躍の場を広げている。

[関連記事]
NewsPicks編集部 櫻田潤の試み―インフォグラフィックの力で情報をより価値化する。
https://careerhack.en-japan.com/report/detail/474

「たのしい」「わかりやすい」「ためになる」

櫻田氏が考えるコンテンツのUI、特にインフォグラフィックで意識しているのは、読者に「たのしかった、わかりやすい、ためになった」という体験を提供すること。

「インフォグラフィックをつくる際、読者が『最後まで読みたくなる』『コメントしたくなる』『他の記事も読みたくなる』ことを意識しています。例えば、かわいいアイコンをきっかけに経済に興味を持ってもらい、コメントしてもらう。それが体験づくりだと思っています」

詳細なUX設計において気をつけている3つを紹介してくれた。

[1]見た目よりもストーリー

見た目よりもストーリー

「最も大事にしているのが、ストーリーテリングです。起承転結を考え、ストーリーとして面白いものになっているか。情報を正しく伝えられているか。インフォグラフィックをつくるときに、ただ絵コンテをいれるだけでは意味がありません」

[2]目線と思考の流れを演出

目線と思考の流れ

「続いて、目線と思考の流れを演出について。“引っかかる箇所”を演出することを意識しています。例えば、この記事。読者に最も効率よく情報を収集してもらうことを考えたら、シンプルに縦に配置すればいいのですが、それではサッと見るだけで終わってしまう。なのでテキストの向きと線の流れを所々で変えています」

[3]集中していない読者を想定

集中していない読者を想定

「読者は必ずしも集中した状態で見てくれるわけではありません。集中していない読者を想定し、記事をチェックするようにしています。NewsPicksは朝の通勤時間帯に見られることが多いので、自分自身も満員電車の中でチェックしてみる。他にも、眠い状態でチェックしたり、食事しながらチェックしたりもしています」

UI/UXよりも大事なのは「倫理観」

櫻田さんは「UI/UXよりも大事にしていること」として、こんなメッセージを残してくれた。

「デザインは“邪悪”なものに加担したり、予期せぬことを演出したりするといった可能性もあるものです。だからこそ、倫理観を最も気にしなければいけない。ドラッガーの本に“知りながら害をなすな”という言葉がありますが、テコでも動かない倫理観があった上で、インターフェース、体験という話が乗っかってくる。それが結果として読まれる記事、読む理由というものになっていくと信じています」

(おわり)



CAREER HACK をフォロー

タグ一覧