UIデザインの引き出しを増やす「触れる」「読む」「調べる」習慣

2024年12月1日 09:32

この記事は 株式会社ログラス Productチーム Advent Calendar 2024 のシリーズ 2、1日目記事です。

ログラスのプロダクトデザイナーのkouです。普段はLoglass経営管理というBtoB SaaSのデザインしています。

日々UIデザインに関わる中で、「もっとデザインの引き出しがあれば…」と感じたことはありませんか？
スタイルといった表層のデザインからレイアウトなどの骨格、さらにはプロダクトの全体の構造まで、さまざまなレベルで、「もっと引き出しがあれば…」と感じることが多々あります。
UIデザインをしていく上では、世の中のプロダクトやデザインを研究し知識を蓄積していくことが必要不可欠です。
このnoteでは、私自身が実践してきた「触れる」「読む」「調べる」という3つの習慣を通して、UIデザインの引き出しを増やす方法をご紹介します。

この内容が皆さんのデザインの参考になることを願っております。

触れる：自分で使ってみる

自分が普段触っているWebサービスやモバイルアプリは、格好のリサーチ対象です。コンシューマー向けプロダクトならアプリをインストールすれば誰でも触ることができます。自分がユーザーになることで、使いやすさや嬉しいポイントを直感的に感じ取ることができます。
実際に触れることで、細かいデザインを確認しながら画面遷移やインタラクションの仕組みを理解できたり、どんなオブジェクトがあるのかを想像しながら触ることでプロダクトの構造への理解も深めることもできます。表層的なデザインから構造まで幅広く学ぶことが可能です。
今まさに読んでいるnoteのデザインもとても参考になります。

読む：書籍を読む

書籍で学ぶのもおすすめです。以下の2冊は少し古い本ではありますが、コンポーネントやパターンが網羅的にまとめられており、今でも参考になる部分が多いです。
ラジオボタンやチェックボックスなど基本的なUIのコンポーネントは、時代によってスタイルに変化はあるものの、構造やパターンは大きく変わっていません。今読んでも参考になる箇所は多いと思います。

第４版が今年日本語訳されたABOUT FACEも、インタラクションデザインの原則やパターンを理解するのに非常に役立つ一冊です。

書籍は実物のデザインを確認するのには向きませんが、UIコンポーネントの仕組みやパターンを体系的に理解するには非常に有用です。

調べる：デザインシステムを見る

公開されているデザインシステムに目を通すことも、とても参考になります。
新しくデザインしようとしているコンポーネントやパターンが、他社でどのように実装されているかを知ることで、デザインの引き出しを広げるヒントが得られます。

海外のデザインシステムを見る

AppleのヒューマンインターフェイスガイドラインとGoogleのMaterial Designは、UIデザインをしている人なら知らない人はいないでしょう。
私は最近のアップデートを追えていなかったので、この機会に読み返そうと思います。

国内で有名なデザインシステムを見る

近年は国内のサービスでもデザインシステムを公開するケースが増えてきました。例えば、SmartHRやfreeeのデザインシステムは、とても参考になります。

デザインシステムをまとめたギャラリーサイトを見る

さらに、デザインシステムをコンポーネントごとにまとめたギャラリーサイトも便利です。以下のようなサイトでは、複数のデザインシステムを横断してリサーチできます。
デザインシステムはコンポーネントレベルでの理解は役立つ一方で、ページやナビゲーションデザインの引き出しを増やすには向きません。その場合は、実際にプロダクトを触ったり、次に紹介する方法を試すのがおすすめです。

調べる：気になるプロダクトを探す

AIと一緒に探索する

最近はChatGPTなどのAIを活用しながらリサーチすることも増えてきました。
サービスの情報を自分一人ですべて調べていくのはとても大変です。特に、海外のサービスやコンシューマー向けではないサービスの場合は、自分で触ることのは難しく、リサーチに時間がかかります。英語の動画を見たりヘルプページを読むのは自分にとってはハードルがありました。

今はChatGPTなどのAIの力を借りれば、対話をしながらサービスをリサーチしていくことができます。例えばサービスサイトやヘルプページ、デモ動画などのリンクと一緒に以下のようなプロンプトを渡して、AIと話しながらサービスを理解していきます。

このサービスはどんなものですか？
このサービスで扱う代表的なオブジェクトはなんですか？
このサービスでデータをエクスポートする方法を教えてください

AIは間違った情報を含むこともあるため、表示された情報を仮説として捉えて、リサーチを進めていきます。データの検証の必要はありますが、AIの強力なサポートを受けながらサービス理解を進められるので、以前よりかなりスムーズにリサーチを進めていけるようになりました。

調べたことをストックする

調べた内容や印象に残ったことはなるべく一箇所にメモするようにしています。私は、iPhoneやMacからすぐにアクセスできるiOSのメモアプリを愛用しています。サービスごとやパターンで、フォルダやメモを分けておけば、その後の活用も楽になります。

リサーチ結果を活用する

リサーチした内容は自身のデザインの際に活用するのはもちろんですが、所属している組織にレポートなどの形で共有するのも効果的です。
私も先日まで趣味で調べていたサービスの内容をデザインチームや開発チームに共有しました。リサーチした内容が自分だけでなく、メンバーの思考を刺激して、さらによいプロダクトづくりに生かされると良いなと考えています。

おわりに

デザインの引き出しを増やすには、日々の積み重ねが大切です。このnoteで紹介した「触れる」「読む」「調べる」という習慣が、皆さんやチームのデザインの引き出しを増やすきっかけになることを願っています。