サービス・UI研究をFigma＋Notionで効率的にやってみる
Ateam Lifestyle Inc. Advent Calendar 2020、18日目はデザイナーのmgmgmが担当します。
皆さんWebサイトやアプリのUIの研究をするときどんなツールを使っていますか？
私は普段Figmaを使って行っていますが、更に効率的する方法はないかなと思い、今回新しくNotionというツールを使ってみようと思っています。
この記事ではサービス・UIの研究にNotionを使ってみた感想をまとめています。こんな方の役に立つと嬉しいです。
・UIの研究・ストックツールに悩んでいる方
・Notionに興味があるけど、まだ使ったことのない方
・便利なドキュメントツールを探している方
はじめに：普段やっている方法
まずサービス・UIの研究という表現をしていますが、主に行っていることはWebサイトやアプリを見て気づいたことの言語化です。
私が普段やっている方法はこんな感じです。
・参考になりそうなサービスを見つけて、キャプチャを取る
・キャプチャをFigmaに貼る
・キャプチャの周りに、情報設計・UIで気づいた点を言語化する
Webサービスの想定される情報（コンセプトやターゲットなど）や、気づいた点・考えうる改善点など、すべてFigmaにまとめています。
Figmaもとても便利ですが、下記のような点が上手く使いこなせていません...
・「あのUI探したい！」というとき見つけにくい
・スマホで撮ったキャプチャをまとめるのを忘れがち
Notionで解決しないかやってみる
では上記の悩みが他のツールを使うことで解決しないかやってみようと思います。
今回はNotionというツールを選びました。
Notionはドキュメントツールとしてとても優秀という話をよく聞くことがあり、それであればサービス・UI研究にも活用する事ができるかも...と思い選びました。
個人利用であれば無料で使うことができるのも嬉しいです。
Notionを触ってみる：テンプレートを選んでページを作成
では早速Notionを触ってみます！
サイドバーの"Add a Page" から新規のテンプレートを作成できます。
DesignやEngineeringなど...各カテゴリ毎に複数あるテンプレートの中から土台にするものを選べます。
どんなサイトストックがあるか一目でわかるようにしたいため、今回は"Mood Board"を選択しました。
1サービス1ページにし、サムネイルで何のサービスかわかるように設定してみます。
また、タグを付けることができるため、業種やWebサービスの種類、テーマカラーを付けしてみました。
できたものがこちらです。（今回はサンプルとして画像はすべて自社サービスのものを使っています）
どんなストックがあるか、一目でわかるようになりました！
タグで絞り込むこともできるため、後で検索したいときも楽にできそうです。
これで1つ目の悩み
・「あのUI探したい！」というとき見つけにくい
は解消です！
各サービスのページを作っていく
次に各サービスのページを作っていきます。
iconやcoverを自由にカスタマイズできるところが楽しいですね。
まずサービスのコンセプトや想定しうるターゲット象、サービスのコンバージョンポイントなどを言語化します。
ドキュメントツールなので、やはりテキストをまとめるのはとてもやりやすいです！
"/"を入力することで、挿入したい内容を簡単に選ぶことができます。
次にサービスのキャプチャを撮って貼っていきます。
キャプチャはページ全体を撮りたいときは、Awesome Screenshot、スクリーンショットで部分的に撮りたいときはMacのショートカットキー（command+shift+4。クリップボードにコピーしたいときは、+control）で行っています。
Notionに画像を貼ることは簡単できますが、スマホのように縦に長いキャプチャは幅をとってしまうし、好きな位置に自由に書き込みをしたいときは少々やり辛い...
こういう時はやはりFigmaが便利です。
そこで調べてみると、NotionとFigmaが連携できることがわかりました！
NotionとFigmaを連携
連携の仕方はとても簡単！
テキストを入力するときと同じように"/"を入力し"EMBEDS"の中から"Figma"を選び、URLを貼るだけです！
貼り付けられた見た目はこちらです。
拡大も全画面表示もできるため、見るだけであればNotion内で完結します。
データを触りたいときは、Figmaに遷移することもすぐできます。
これは便利ですね！
マルチデバイスで、PC・スマホ間も連携
またNotionはマルチデバイス対応で、スマホ用のアプリも出ています。
スマホで見つけたUIなどをこのようにパーツごとに貼り、気づきや学びになった点をメモしておけば、せっかく撮ったスクリーンショットも見失わずに済みそうです。
同期のスピードもとても速く、どちらかのデバイスで変更した内容はすぐに反映されました。
これで2つ目の悩みだった
・スマホで撮ったキャプチャをまとめるのを忘れがち
も解消です！
まとめ
今回サービス・UIの研究をFigmaに加え、Notionを使用したことにより、課題に感じていた点は解消されました。
・キャプチャに自由に書き込みしたいときはFigma
・言語化した情報をまとめ、検索できるようにするのはNotion
のように使い分け、すべてNotionからアクセスできるようにしておくと効率的にできそうです。
ひとまずこちらのやり方で続けて見ようと思います。
最後に
ここまで読んでくださってありがとうございました！
少しでも何か参考になることがあれば嬉しいです。
また「こんなツール使っているよ」や「もっと効率的にやれるよ」などのご意見があれば、聞かせていただけるととてもとても嬉しいです...！！
今回新しく使用したNotionは2021年中に日本語対応する予定もあるそうです。とても便利なツールなので、これからの発展が楽しみですね！
Ateam Lifestyle Inc. Advent Calendar 2020 19日目はmadge27が「事務職の私が、エンジニアとのコミュニケーションの失敗と学びをシェアします」というタイトルで記事を書いてくれます。事務職×エンジニアの共創ということで、どんな話かとても楽しみですね！！
この記事が気に入ったらサポートをしてみませんか？