はじめてのUIデザインを読んで実践したら多くの変化があった
「さあ、デザインするぞ！」
そう思ってmacに向かい、デザイナーなりたてホヤホヤの1年前の私はいきなり画面のビジュアルからつくり始めました。情報設計せず、最初からワイヤー書いて、色をつけていく…。今思い返すと失神しそうです😇
デザイナーになりたての方、もしくはデザイナーになろうとしている方のなかには「デザイナーはイケてるデザインを作るのが仕事」と思っている方も一定数いるのではないでしょうか。(決して間違ってはないけどね！)
でも私は今こう思っています
「良いインターフェースは見た目から始まるわけではない」と。
今回は「はじめてのUIデザイン」を参考に自分が歩んだプロセスをしっかりと文字にして残しておきたい&私の経験が誰かの役に立てたら、と思いこの記事を書いています。
さ！前置きはこれくらいにして始めよう💨
[目次]
1.「はじめてのUIデザイン」について
2.私がデザインを担当したプロダクト
・プロダクト概要
・担当領域
3.UIの見えない部分を学ぶ
・情報設計
・シナリオ作り
・コンテンツの選定
4.UIをデザインする
・UIモデルの設計
・ペーパープロトタイピング
・デザインツールでビジュアル作成
5.UIデザインができたら
・プロトタイプ の作成
・ユーザーテスト
6.デザイナーとしての心得
・駆け出しデザイナーが躓くこと&早めに習得した方がいいこと
・失敗エピソード
・デザイナーとしての心の変化
7.デザイナーとしての自分がちょっと見えた
1.「はじめてのUIデザイン」について
Basecampの坪田さんをはじめとするデザイン業界の第一線で活躍する皆さんの共著です。UIの歴史、プロダクトの骨格からUIデザインに至るまでの作業プロセス、デザイナーとして心得まで必要な知識がギュギュッと詰まっています。私のような駆け出しデザイナーだけでなくデザイナー教育の立場にある方も読むべき一冊です！
2.私がデザインを担当したプロダクト
ARクラウドアプリ「POSHA」(クライアント:タビアン株式会社 https://tabian.co.jp/)のUIデザインを担当しました。
ざっくり説明するとポスターをアプリ内のカメラで撮影し、実際に撮影した人のみにプレゼントやキャンペーン参加権、限定ECへのアクセス権などの特典を得るサービスです。渋谷や池袋でよく見かける、アニメファンやアイドルファン「ポスターを撮る」という行為をさらなる体験へ繋げることを目的としています。ターゲットは「コアなオタク」です。リリースは6月予定。
ユーザーインタビューの実施
ターゲットである「コアなオタク」を訪問し、インタビューを行いました。
私自身、アニメは少し見る程度でそこまで詳しいわけではないです。
なのでターゲットが作品やクリエイターに対してどれほどの熱量を持っているのか、聖地巡礼やストアに足を運ぶ彼らの原動力はなんなのか、など心理的な話を聞くことを意識しました。質問事項は事前に準備し、回答をいただいた中で共通しているところや、どんなコンテンツに魅力を感じるのかわかりました。
あとはツイッターで「池袋 ポスター」「渋谷 ポスター」とエゴサーチをしまくりました。実際に池袋サンシャインに行ってポスターを撮影している人々を観察したりもしました。予想以上に人がいました。びっくり🌰(当時は刀剣乱舞のポスターが貼ってあった)実際に足を運んでみることも大事。
ユーザーインタビューの前はこちらの本を読み、話の引き出し方の基本を学びました。この本は有名ですよね、おすすめです。(インタビューは訓練が必要なので最初はうまくは行かないです！私も正しい訓練を積まなければ…)
💡「ユーザーインタビュー」の学びポイント
・質問は事前に用意しておくこと。
・一問一等形式の断片的な質問だけでなく、オタ活をしている日の1日の流れなど、ストーリーを詳しく聞いておくとこの後の作業がスムーズになる！
・サービスを関連のある場所を訪れてみる。
・(知ってたけど)インタビューは難しい………正しい訓練が必要……
3-1.UIの見えない部分を学ぶ
さてさて、ここからはユーザーインタビューやリサーチの結果を元にプロダクトの骨格を作っていきます。ここでのタスクはこちら。
・ペルソナの作成
・ユーザーストーリーの作成
・必要な要素を整理する
ペルソナの作成
項目としては以下が含まれます。(顔写真・氏名・性別・年齢・人物像・1 日の行動イメージ ・達成したい目標 ・現状の課題etc...)
ユーザーストーリーの作成
ユーザーの認知や行動の特性を紐解いていきます。ペルソナを動かすシナリオ作りです。ユーザーインタビュー、リサーチの結果とサービスコンセプトをもとに、作成していきます。(ここはモザイクで失礼)
💡「ユーザーストーリーの作成」の学びポイント
・一人でやろうとしちゃだめ。プロダクトに関わる人たち数人でやって、チーム内でユーザーへの理解を深めよう。
・質の高いアウトプットをするにはバイアスを取り払うこと(訓練が必要だ…私ならできる…できるぞ…)
・この工程を考えてユーザーインタビューに行かないとインタビューが無駄になってしまう。計画的に！
コンテンツの探し方の設計
書き出した操作シナリオを元に、ユーザーが必要な情報を見つけるための要素を整理し、コンテンツページ(ホーム)でどんな情報を表示するか、目的の情報にたどり着くための検索軸を決定します。このアプリが扱うコンテンツはポスターなのでポスターの属性を書き出していきます。
上記の全てを採用すると馴染みのない属性も含まれるため返ってユーザーを混乱させてしまいます。あとは技術的な条件を考慮する必要もあります。そちらも踏まえて以下を検索軸に決定しました。
検索軸
📄そもそも自分がいける場所にポスターがあるのか？ →エリア📍
📄自分が興味のある作品のポスターか？ →カテゴリ📝
📄ポシャすると自分にどんなメリットがあるのか？ →特典🎁
ホーム画面で表示する情報(コンテンツ一覧)
📄そもそも自分がいける場所にポスターがあるのか？ →エリア📍
📄ポシャすると自分にどんなメリットがあるのか？ →特典🎁
📄ポスターの掲載期間内いけるか？ →掲載期間🎁
📄どんなポスターか →ポスター画像🎁
📄なんのポスターか、どんな特典なのか →タイトル🎁
💡「必要な要素の整理・分類」の学びポイント
・分類軸を決めたらチーム内に共有しよう
・技術的な条件も考慮する必要があるからエンジニアに相談は必須だ！
・馴染みがあり、慣用的な軸を採用しよう。
4.UIモデルを設計する
ささ！コンテンツを機能の整理が完了しました。ここからは「ユーザーがどう行った手順で操作をしていけば目標を達成できるのか」を考えていきます。ここでのタスクはこちら。
・UIフローの作成
・ペーパープロトタイピングの作成
UIフローの作成
ユーザーが「何を見て」「どんなアクションを起こすか」をビュー単位でつなげていくものです。「対象ポスターを探す」→「ポスターの詳細を確認する」→「現場に行ってポスターを撮影する」→「特典を受け取る」一連の流れを繋げて、プロダクトの全体を把握します。
ペーパープロトタイピングの作成
この作成したシナリオとUIフローを元に複数パターンのペーパープロトタイプを作成しました。「どんなレイアウトにしたらユーザーは欲しい情報をキャッチし、アクションに移せるか」を考えて作成します。30個ほどの参考アプリを調査し、その後スピーディにパターン出し。
ペーパープロトタイプを社内で共有し、フィードバックをもらいました。
実際に感じた利点もあります。
・エンジニアやプロマネと対面で話し合う時に2人で紙を見ながら指差し確認できる。
・デザインツールを使いなれていない非デザイナーが「こういう方がいいんじゃない？」と紙にササーっと頭に描いているものを書いてくれるのでコミュニケーションコストが低い。
逆に「ペーパープロトタイプだといまいちイメージできないから何とも言えない」という意見もありました。デザイナーの私は何となくイメージが頭にあるからいいけどそうじゃない人が見せられたところで「え〜と、何をコメントすればいい？」となる。確かに、これは手法というよりはわたしの説明力が原因ですね。反省。
💡「UIモデルを設計する」学びポイント
・複数パターン出して、チームメンバーと意見を出し合おう
・細かいデザインよりも「どんなレイアウトにしたらユーザーは欲しい情報をキャッチし、アクションに移せるか」を考えて作成する。
デザインツールでビジュアル作成
ツールはFigmaを使用しました。自社開発でFigmaを採用するメリットやちょっとした操作方法は先日noteにしたのでよかったらぜひ読んでください！
font-sizeやボタンのサイズ・位置、要素の配置に至るまで、その意図を説明するのがデザイナーの必須の役割です。
周りからの質問に対してはしっかり答えられないといけません。
人間の行動原理を理解することも重要です。私はこの本を読んで、基本的な原則を頭に入れました。自分のデザインに説得力を持たせたり、自分が迷った時の１つの判断軸になります。
加えてエンジニアが実装しやすいようにFigmaを綺麗に整理しておくこと、コンポーネントに意味のある命名をすることを常に意識しました。(エンジニアに何回か突っ込まれたので…)
命名規則わからん〜という人は「はじめてのUIデザイン」の2章をじっくり読みましょう。あとはiosのUIElementを落として見たり、Matereal designの場合はこのサイトを見て、それぞれのコンポーネントにどんな名前が付いているか確認しましょう。
「このデザインってどのコンポーネントの想定？」という確認も発生しないのでエンジニアもデザイナーもハッピーです。
💡「デザインツールでビジュアル作成」の学びポイント
・人間の行動原則を理解しよう。
・「どうしてこのデザイン？」と周りに聞かれたら説明できるか、常に自分に問いかけよう。
・コンポーネントの命名は根拠のあるものにしよう。
・デザインデータはみんなが見るもの。常に整理整頓を。
5.プロトタイプの作成＆ユーザーテスト
でき上がった画面に遷移をつけて、実際に操作できるようにします。
プロトタイプはFigma mirrorを使用しました。
・特典のページはもっと特別感があったほうがいいよね
・この画面ってこの場合どうなるのかな？
・リリース初期はコンテンツが少ないから見せ方を工夫したほうがいい
・足りない画面がある
…などなどたくさんの指摘をいただき修正に入りました。
💡「プロトタイプの作成&ユーザーテスト」学びポイント
・周囲からのツッコミを恐れるな！！！！
・戦わない
・相手を論破するのが目的ではない。力を合わせて問題解決。
こんな感じでデザイン作業は一区切り。エンジニアのみなさんが実装してくださってるのをチロチロ見ながら、適宜修正をしました。
6.【まとめ】デザイナーとしての心得
今回に限らず、デザインする上で本当に難しいなあと思う＆これから力を入れて訓練したいと思うのは
・ユーザーインタビュー
・デザインの落とし所の決定力
インタビューは本を読めばできるようになるものでもないので、普段の会話から取り入れています。例えば誰かとランチに何を食べるか決める時に「何食べたい？」から始めるのではなく「昨日のランチ何食べた？」「その前の日のランチ何食べた？」のように掘り下げていって、その人が食べたいものを探っていく、とか🍚🍛🍗
落とし所の決定は開発コストや時間の制約を考えた時に、それを解決する最善のデザインはなんだ、と考えること。もしくは「ここはものすごく重要だから実現してほしい」と説明できる力。この２つは集中して伸ばしていこうと決めました。エンジニアとの関係づくりも関わってきます。
はずかし失敗エピソード
実はこのプロダクトをデザインするの２回目なんです。当初作ったものを全部壊し、作り直しの過程をこのnoteにしました。
冒頭にも書きましたが、デザイナーになりたての頃の私はペルソナ作りも、ストーリー作りも、インタビューさえもせずに参考アプリの観察だけをして「こんな感じでいいんじゃないかな〜」と思いながらUIを作っていました。
でも去年、はじめてのUIデザインを読んで、自分がいかに何も考えてなかったのか痛感しました。
一緒に働く人たちや、このサービスを使いたいと言ってくれたユーザーのためにも「こんな形で世の中に出すのはアカン…」と思いました。
幸い、実装に入るまでに時間があったのでタビアンの代表にお願いしてもう一度イチからやらせてくれないかとお願いし、お許しをいただきました。(いや、ほんと…ありがとうございます)
本に書いてあるプロセスをただ実施するだけでは意味はなく、結局はUIに落とし込めていないといけません。シナリオ作りで深〜く質の高いアウトプットを出せるようになりたい…。あとはデザインのパターンの引き出しを頭にたくさん入れておくこと。まだまだだ…。
デザイナーとしての心の変化
「一人でなんでもできちゃうデザイナー」こそ価値があるんだと思っていました。サクッとこなせるのがかっこいいんだと。
ここ１年、たくさん失敗して、周りの人たちに助けられて「あ、全て完璧にできなくてもいいんだ」と知りました。
チームでやることに価値があるんだ、とわかりました。
誰からもツッコまれないデザインができるデザイナーではなく、そのツッコミに向き合って解決していけるデザイナーであろう、と決めました。
7.デザイナーとしての自分がちょっと見えた
冒頭にも書いた「良いデザインは見た目から始まるわけではない」という言葉がわたしの中のテーマになっています。
はじめてのUIデザインを読んで一番変わったことは知識や思考力ではなくデザイナーとしての心構えでした。この本に書いてあるプロセスを実行しようとすると当然ですがかなりの時間を要します。言い換えると「長い時間をかけてプロダクトとチームメンバーと向き合っていく」ということです。
この1年、個人で何件かお仕事をお受けして、わたしがデザイナーとしてサービスと、人とどう向き合っていきたいかなんとな〜く見えてきました。ビジネスとして価値があるかは前提にして、「このチームのために頑張れるか」「どれだけその志に共感できるか」が重要だな、と感じました。イケてるものは作りたいけど、やっぱそれを好きにならないとな！！人間なんで！！
最終的なアウトプットの質はこれからガンガンあげるとして、わたしが考えるデザイナーとって一番大切な能力は向き合う力です。契約上、一緒に仕事する人たちはクライアントだけど、そこにどこまで入り込んでいって、自分のポジションを確立するか。周りからの指摘にどれだけ向き合えるか、施策がうまくいかなくても、諦めずに何度も再チャレンジできるか。そんな力が必要なんじゃないかと。
(プロダクトデザインでは)わたしは一発でクライアントを唸らせるデザインを作ることは目指してません。提案できるUIのパターンを持って行って、その後のチームで議論するためのストーリーを用意することを理想としています。最終的なジャッジはデザイナーとしてすべき時はあるけど、チームで考えることを大切にしたい。チームで動くデザイナーとしてそのマインドが大事じゃないかなあと考えています。そしてそんなデザイナーを求めているクライアントが多いです。
「良いデザインは見た目から始まるわけではない」
じゃあどこから始まるんだろうか🤔
プロダクトのコンセプト？それともチーム？私たちデザイナー？それはシチュエーションによって様々ですが、その始まりに私も立っていたいな、と思います。
-------------------------------------
最後まで読んでくださりありがとうございました。素敵な本を書いてくださったデザイン界の先輩方、そして人生の転機になる一冊に出会えた幸運に感謝です。これからデザイナーとしてやっていくための大事な価値観を手に入れられたことが一番の変化でした。
このnoteでは一連のプロセスを学びポイントを交えて書いたのでデザインする上で配慮したことや「どうしてこういうデザインにしたのか」詳しい説明はしていません。そちらについては後日ポートフォリオに載せようと思います。(現在作成中)
ではまた⭐️⭐️
==================================================
twitter:@kiyo_design1225
==================================================
はじめてのUIデザインの購入はこちらから(勝手に宣伝)