見出し画像

NewsPicksのデザイン言語をつくりました

こんにちは、NewsPicksのUIデザイナーのよっしーです。現在NewsPicksのUIデザイナーは3名それぞれ別の事業を担当しています。チームの中で起きる問題の一つが「NewsPicksらしさとは」というテーマについて議論がいつまで経っても終着しないことでした。「らしい、らしくない」といってデザインレビューのたびに議論をし、判断にいつも悩んでいました。ユーザーの幅も機能もコンテンツも事業拡大に合わせて大きく裾野を広げ、また担当領域や社歴によって見え方も異なり、ブランドへの考え方がすり合わせにくくなっていました。

このままでは個人で判断がぶれ、プロダクトとしてあるべき姿ではなくその瞬間のデザイナーの感覚的な意思決定に依存してしまう。そこで既存のルールや問題を一度排除して、純粋な気持ちでユーザーやプロダクトに向き合い「あるべき姿」をメンバーで議論し切り、原理原則を再構築していくことに決めました。

新しい原則をゼロから考えるワークショップ

正解を見出す以前に、まずはメンバーが納得感を持てるよう議論し切ることが最重要だと考えていました。アナロジー思考を取り入れてワークショップを行い、らしさの源泉を見つけていきます。

1. サービスについてジャンルの異なる類似製品はあるか

ある対象について議論するとき、別ジャンルの物事に置き換えることによってその製品の特徴を一側面や状態から離れて直感的にイメージしやすくなります。抽象化して引き上げて別の場所に移動させる、そんなイメージです。抽象化が早く例え話が上手な人は知識や情報を応用するのが得意です。

「NewsPicksを他の製品に例えると何?」という質問から掘り下げていきます。すると、古書店やセレクトショップなどの『店主が厳選した商品を置いているイメージ』を持つ人、銀座という地域の人種をユーザーに例えて街の歴史を比較して思い浮かべる人もいました。また、一般的なイメージからエンタメ(バラエティ)の要素を感じ取ったという意見も。どの角度から切り取るかによって対象の姿が幾つも存在していることがよくわかってきます。

2. 類似製品の共通点を見出す

次に、挙げられた製品を細かく分解してまとめていきます。銀座やヴィトンなど大人のハイブランドな世界観、古書店やRHODIAの様に厳選の商品が並び選ぶ楽しみまで演習される世界観、carecoの様に手軽にいつでも試せる気軽さのある世界観。Figmaでワークスペースを作り、書き出したカードをまとめ分類していきます。ここまでで私たちの想像の中で対象がどんなイメージを持つかを、ある程度具体例に落とし込むことができました。

画像1

3. リサーチの結果に当てて特徴をピックアップ

そして次に、実際の製品の役割がどうあるかを照らし合わせていく作業です。ニーズや使用方法、製品への印象、特にターゲットとなるユーザー
顕在化しているものもあれば潜在的に感じている場合もあります。

画像2

4.ユーザーが最も頻繁に言及しているものから並び替える

特に言及しているものを赤、そうでないものをグレイとして色分けし、優先順位を決めました。

画像3

5. より普遍なものに言葉を置き換える

意見を出していくと言葉が少しずつ変わっていきます。

「"シンプル" ってよく使うけど考え方がそれぞれ違って難しい」
「そもそも "シンプル" って標準的な考えで、あえて明示する必要はあるの?」
「情報を扱うサービスだからこそ冷たくなり過ぎないよう "人が集っている雰囲気" が重要なのかも」
「Appleのデザインガイドライン以上に何か規定する必要あるのかな」

既存の考え方に引っ張られていたのか、これまで疑問に感じなかった理屈が通らないこと、言っているようで実は何も言っていないこと、実は大事だったことも、そんな部分をメンバーと一緒に見出していきました。

Enhance(強化する)

画像5

これらの議論のなかで、Enhance(強化する)という言葉が見つかりました。そうして、ユーザーやビジネス、ブランドやコンテンツをEnhanceすることがプロダクトの役割であり私たちの役割であると結論づけました。

ここまでお互いの考えを概念レベルまで引き上げて話し合ったことで、考えの原点は同じところから来ていたことや、分解していくと同じ要素を多く持っていたことなど、見えていなかったことに気づいていきました。

Enhanceをデザイン言語へ

ワークショップ後、Enhanceを中心に事例リスト化を何度か繰り返していきます。「イラストにはビジネスパーソンのいる世界感に合うような大人らしさを意識しよう」「ユーザーの感情以上の表現を盛らない・過剰な代弁をしない・押し付けない」といったUI表現の細かな考え方とそれに合わせて「メッセージに!や?は使わない」「ハートを使ってもピンクは使わない」といった具体的な事例と一緒にまとめていきます。

具体例を話し合う頃には相互理解が深まり、ブレストレベルの視点の共有やアイデアなど驚くほど多く発言されるようになっていきました。課題だった抽象的な「らしさ」に対する意識の統一に向かって進んでいった結果、コミュニケーションの頻度や質が上がり、議論のポイントについてFBが伝えやすく互いに納得しやすくなっていました。まだ、イレギュラーを認めるボーダーラインは曖昧です。これからは守るべき部分の優先順位やレベル感などを考えていく必要がありそうです。

HIGやマテリアルガイドラインは十分素晴らしいガイドラインで本来これだけでも十分なのですが、このようにサービスやプロダクトごとに考え方をまとめるのは、運用し続ける人間のために必要だからですよね。一般的なデザインシステムを用いてプロダクトとしての品質を最低限担保しつつ、ブランドのらしさのバランスを掻い摘んでアウトプットを出すにはブレない判断軸があればこそ。それも誰かが作ったルールのままでは自分ごと化されず形骸化していくので、システムは作り更新し続けるしかないのだと考えてこういう機会をたまにやっています。

もし共感して一緒にプロダクトをつくりたいと感じたらお問い合わせください👋

ちなみにアナロジー思考ワークショップの参考記事


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
yoshikawa akane

サポートいただけたら一層頑張れそうです!

ありがとうございます!嬉しいです。
24
CS出身のUI/UXデザイナー。トーマツ子会社や株式会社LIGのCSを経て、2017年一念発起でデザイナーへ転身。業務委託先や個人でwebやアプリデザインをひたすら作り続け、2018年9月よりNewsPicks。Portfolio: https://akanyoshi.com