デザイン参考収集といえば、装飾美などデザインのあしらいのデザイン収集をイメージするかと思いますが、UIの機能や遷移を考える際も欠かせない作業です。今回は「機能のデザイン参考収集」をする際に意識していることをご紹介したいと思います。
そして参考収集を頼まれた時は、ただ集めるだけではもったいない…！収集しているときの考え方なども少し交えているので、これを読んだ後、デザイン収集の質が少しでも上がるような内容になればと思います。
目次
収集の範囲
例があるとイメージしやすいので、今回は「マッチングアプリの会員登録画面を作成する場合」を例としてご紹介します。
収集の範囲は機能のデザイン収集に限らずほぼすべてこの収集方法で行っています。
それは、ジャンルに囚われず幅広く収集すること。
今回でいうと、マッチング系に限らずに収集することです。
私はよく
- メジャーなアプリ（音楽,漫画,ゲームなど程遠そうなものなども）
- 競合（マイナーなものも含めほぼ全て）
- リリースしたてのアプリ
- Apple StoreのTodayに上がっているアプリ
- 話題になったアプリ
などを収集します。
グルーピング
収集したUIを様々な観点でグルーピングをしていきます。
ジャンル/テイスト/画面設計/〇〇〇〇…
など。
各項目を入力させるタイミングや順番も注意深く観察し、類似する設計もまとめます。
さらにグルーピングしたUIをさらに4象限でマッピングしたりします。
競合の機能の中に潜んでいる共通点の抽出
競合を考察する上で私が特に意識してやっていることは、共通する点（競合の中の法則）を見つけ出すことです。
その「共通する点」がマッチングアプリの会員登録らしさに繋がってきます。
そこをガン無視すると、「いい感じのデザインだけどマッチングアプリっぽくない」UIになりユーザーはどのようにプロフィールを使いこなしていけばいいか迷子になったりします。
さらに言うと振る舞い方が分からなくなるので、そのサービスが使いこなせなくなります。
共通点の見つけ出し方
ざっくりいうと、
「競合他社のUIを並べて要素を分解し、共通点を見つける」
です。
機能、ボタンのデザイン、文言、文字数、遷移の仕方、〇〇〇〇〇〇、…
様々な観点で要素を分解します。
そして、共通点を見つける。
共通する点が守られていれば、サービスらしさを盛り込んで新しい表現に挑戦してみたりするのもありだと思います。
前代未聞のサービスの場合
逆に、競合のいない前代未聞のサービスを作っていくのであればHIGやMaterialDesignGuidelineに沿ったUIを構築するのがユーザーにとって使いこなしやすく親切なサービスになると考えています。
認知度も広まってリピーターが増えたところから新しい表現を試行したりしてサービスを育てるのがいいのではないかと私は思います。（もちろん例外もあるし、これが全てではない）
「良い点 / 悪い点」を言語化する
参考収集＋言語化する理由
良いと思ったら頭の中で完結させず説明するように言語化することで、思考が整理されアイディアが出やすくなったりアウトプット時の提案力も強化されます。
最初はいざやってみると言葉が出てきません。
私は当初自分の語彙力の無さや勉強不足を痛感しました。
さらに、思ったことを書いてみると「自分の感想」になってしまいがちです。
「感想」にならないように、エビデンスを用いながら言語化すると良いと思います。
どうしてそう思ったのかには理由があるので言語化できない時は調べまくります。
悪い点もメモしておくことで良いUIはなぜいいのかという新たな発見にも繋がります。
また、どうしてそこが悪いと思ったのか「何故を言語化する」ことで自分の意見を俯瞰でき「自分にだけ使いづらいのかも」と気づくことができることもあります。
良くない体験からも理由を探り知見にする
参考を集めた中で「こうした方がユーザビリティがいいのではないか」と思うこともたくさん出てくると思います。
しかしデザインしている会社もただサービスを作っている訳ではなく「競合調査をした上で、紆余曲折あり、現在のデザインに落とし込んでいる(であろう)」ということを忘れてはいけません。
「ではなぜ使いづらいデザインになったのか？」
様々な要因はあるかと思いますが、開発の関係でそうせざるをえなかった場合もあります。
（登録のフローなどでは実装上挟まなければいけない認証が各会社によってあったりなど）
さらに踏み込んでそのサービスを制作/運用している会社概要ページなどまで調査すると、組織体勢などの背景が見えてきたりしてサービスの理解度が深まります。（普通はここまでやる必要はないかと思いますが）
そこまでデザインを考察すれば、クライアントへ＋αな提案ができたり実装を考慮したデザインが組めたりするのではないでしょうか。
まとめ
今回は「機能のデザイン収集」の取り組み方と、一部ではありますがデザイン収集そのものの考え方をご紹介させていただきました。
はじめてデザイン収集をする方にもこの記事が少しでもお役に立てたら幸いです。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
