スマートニュースにおけるプロダクトデザイナーの役割

スマートニュースとデザイン

こんにちは。スマートニュース株式会社プロダクトデザイナーの山本興一です。

スマートニュースにデザイナーが存在するというイメージをお持ちの方は少ないのではないでしょうか？そもそもデザインとはなんでしょう？一般的には視覚的に優れたものを作成することだというイメージがあるかもしれません。しかしスマートニュースでは、デザインとは「ユーザーとアプリとの接点の設計」だと考えます。純粋なビジュアルデザインに特化したメンバーはおらず、デザイン全体をiOS/Androidクライアント開発チームが、アプリの実装と並行して担当しています。

SmartNews のデザインは、単純にきれいな色や形だとか、かわいいイラスト、斬新な見た目などを追い求めているわけではありません。コンテンツへのリスペクトや、ユーザーへの思いやりがまずあり、それを形にして表層に現しています。例えば SmartNews リリース当初から提供されている形態素解析による改行位置の調整や長体圧縮（ロングテキスト圧縮）に代表されるように、この設計がどんな文脈を持ち、ユーザーにどんな具体的なメリットを与えるかという観点で隅々までデザインされています。

(弊社クライアント開発チームの Slack より)

目立たないように見えるかもしれませんが、ユーザーの皆様に快適に使っていただけるよう、クライアント開発チームがデザイナーとしてアプリの品質を日々高いものにしています。

プロダクトデザイナーというロールの新設

そして今回、より積極的に新しいサービスをユーザーの皆様に提供するため、プロダクトデザイナーというロールが新設されました。

プロダクトデザイナーの主な仕事は、企画者の持つイメージやコンセプトを、どのようにプロダクトへと変換するのか設計すること。議論が机上の空論にならないよう、実際に動作するプロトタイプを作成しながら議論を積み重ねることで、すばやく確実にイメージを形にすることができます。

またプロトタイプを作成することで、実装が始まってから初めて判明するような問題を事前に発見することもできます。企画のパワーポイントだけが素晴らしく、実際に出来上がってみたらとても使えるものではなかった、という事態を避けられます。プロダクトデザイナーがいることで、より大きな企画をより精度高く実現することが可能になります。

「クーポンチャンネル」プロジェクトにおけるプロダクトデザイナーの役割

クーポンチャンネルを例にあげましょう。

クーポンチャンネルは、SmartNews のユーザの皆様が、多種多様でタイムリーなクーポン情報を知るだけでなく、それを煩雑な操作なしにすぐに利用することができるチャンネルです。SmartNews ではこれまでいわゆる狭義の"ニュース"のみを配信してきました。しかしクーポンチャンネルのプロジェクトでは、プロジェクトメンバー全員が「世界中の良質な情報を必要な人に送り届ける」という弊社のミッションを胸に、クーポンというそれを求める人にとって大変有益な情報をいかに SmartNews らしい体験でユーザに届けるかを目指して企画・開発がスタートしました。

ここからは、プロダクトデザインを担当する私が、クーポンチャンネルのユーザ体験をどう設計していったのかを簡単にご紹介いたします。

企画者とのコミュニケーションでプロジェクトの目的や課題を明確にする

クーポン情報を SmartNews 上に掲載する方法はあらゆる形が考えられますが、企画者にヒアリングしながら、方向性を少しずつ絞っていきます。たとえば店舗に実際に行った際にクーポンを探しやすいようにしたい、とてもメジャーなブランドが多数参加してくれそうなのでそれらをわかりやすく表示して「使える機能」だと伝えたい、などが要求としてまずありました。

また SmartNews においてクーポン機能は全く新しい体験です。クーポン一覧画面では、それがニュースではなくクーポンであるとひと目で分かるような工夫が必要でしょう。

さらにもう一つのテーマとして、普段あまりクーポンを積極的に使わない人にクーポンを使ってもらいたいというものがありました。

このあたりの目標や課題を明らかにしつつ、ある程度ヒアリングできたらプロトタイプの作成に入ります。

プロトタイプを通し課題の具体的な解決策を提案

ヒアリングした内容を元にプロトタイプを作成していきます。企画者の課題を解きほぐし、シンプルかつ骨太な方法で複雑な問題を解決することを目指し、試行錯誤を繰り返します。議論の中であやふやだったイメージも、プロトタイプを作成することで輪郭が与えられ、議論にはっきりとした軸が生まれ始めます。

結果として、以下のようなプロトタイプに落ち着きました。

(※画面はイメージです。画面は開発中のものです。)

ブランドごとのクーポン画面にアクセスしやすいよう、画面上部にブランドのボタンを並べてあります。また同時に、誰もが見たことのあるメジャーなブランドが最初に目に飛び込んでくるようにすることで、この画面に親近感を感じてもらえ、また自分の日常生活に直接関わりがあるチャンネルなのだと伝えることを目的としています。

クーポンのセルは通常のニュースのセルと明確に区別できるようなレイアウトにし、かつ一般的な紙のクーポンを想起できるような縦横比にしてあります。

(※画面はイメージです。画面は開発中のものです。)

また、並行しておこなった既存の紙のクーポンに関するアンケートの結果の一つに「クーポンを使うのが恥ずかしい」というものがありました。自身の経験を振り返ってみると、確かにわざわざ事前に紙のクーポンを切り取って持ち歩き、財布の中で少しヨレヨレになったクーポンをスタッフに提示するのは少し恥ずかしいものがあります。

SmartNews のクーポンチャンネルでは、普段使っているニュースアプリにクーポン機能が追加されるため、事前に切り取って持ち歩く必要もなく「スマートにクーポンを使える」という点でその恥ずかしさを大いに解決できているものではありますが、より積極的にクーポンを使ってもらうために以下を実現することとしました。

「食べたい」という気持ちを呼び起こし、行動につなげるビジュアルデザイン

スタッフに提示するのが恥ずかしくないビジュアルデザイン

研究のために既存の紙のクーポンやクーポンアプリをいろいろと見てみると、値引き額が大きめに表示され、商品の写真が追いやられて小さめに表示されているケースがよくあるようです。商品の写真すら配置されていないクーポンもありました。一方、参加予定のブランドのウェブサイトを見てみると、とても美味しそうな商品写真がずらりと並んでおり、思わず「食べたい！」という気持ちが沸き起こってくるデザインになっていると気づきました。

そこで、食べ物の写真の魅力を最大限に活かし、まるで商品が目の前に現れたかのような臨場感を出すため、商品の写真を画面全体を覆うように配置し、商品名や価格情報・UI を商品写真に組み込むようなレイアウトを提案しました。

(※画面はイメージです。画面は開発中のものです。)

各ブランドが所持している写真素材は横長のものが多いため、最適な素材が集まるかどうか悩ましい決断でしたが、このデザインがクーポンの使用をより促すことに期待するということで企画者と合意し、この形でリリースすることになりました。

プロトタイプを「絵に描いた餅」にしないために

プロダクトデザインの過程で大切なことの 1 つに、実現可能性の確保があります。プロトタイプが「絵に描いた餅」になってはいけません。グラフィックツールや動画編集ツールでプロトタイプを作成するとどうしてもイメージが先行し、モバイルアプリで実現不可能な挙動や、不自然なアニメーションが生まれがちです。

そのため、プロトタイプは Xcode や Android Studio など、ネイティブな環境で作成します。そうすることで技術的な難所や工数感をある程度把握でき、かつ現実的な仕様の前提の中で魅力を感じられるプロダクトを設計することができます。そのため、弊社のプロダクトデザイナーは少なくともゼロから一通りアプリを仕上げることができる程度の技術力を持ちあわせています。

その上でエンジニアに既存の SmartNews の仕様をヒアリングし、アドバイスを受けながら、実際に実装可能なプロトタイプに仕上げていきます。その後仕様書を作成し、クライアント開発チームでの実装が始まります。

結果的にクーポンチャンネルはリリース 1 ヶ月で 1 億 PV を達成し、ユーザーの皆様から非常に好意的なフィードバックを頂いています。また、参加していただいている多くのブランドの皆様からも「期待以上の効果だ」と喜んで頂いております。

プロジェクトの開始からリリースまで 3 ヶ月という余裕のないスケジュールでしたが、プロトタイプを作成することですばやく方向性が決定し、スケジュール通りにリリースすることをサポートできました。プロトタイプは企画者のイメージを非常に具体的に表したもので、チームのイメージを一つにできるため、議論を効率化します。そしてプロジェクトの目標地点も明確になるため、リリースまでストレートに進行することができるようになります。

クーポンチャンネルがリリースされた当日、あるプロジェクトメンバーから「自分が知る限りここ 1〜2 年で一番チームのテンションがあがったリリースのひとつ」という言葉を聞くことができました。このように、大きな企画に対してチーム一丸となって取り組む状況を支援することができてとても良かったと思っています。今後も弊社のプロダクトデザイナーは、プロジェクトを具体的に推進する役割を担い、SmartNews をよりよいものにデザインしていきます。

もしプロダクトデザイナーとしてスマートニュースに関わりたいと感じていただけましたら、現在募集中ですのでぜひ応募をご検討ください。また、プロダクトデザイナーがいる環境で働いてみたいという方も、様々なポジションを募集しておりますので、こちらもご検討いただければ幸いです。