3月13日、デザイナーのtibi氏が「Practical UX for startups surviving without a designer（デザイナーなしで生き残るスタートアップのための実践的なUX）」と題したブログ記事を公開し、大きな話題となっている。この記事では、デザイナー不在のスタートアップが実践できる実用的なUXの考え方について詳しく紹介されている。
以下に、その内容をポイントを絞って紹介する。詳しくは原文にあたっていただきたい。
スタートアップにおいては、デザイナーを雇うまでに時間がかかることが多い。採用やオンボーディングは数か月を要するため、 その間も「デザイナーなし」で製品を完成させねばならない場合がある わけだ。
しかし実際には、デザイナーを必要とする独創的な新機能はプロダクトのごく一部に過ぎない。たとえばアカウント作成やパスワードリセットなど、ほとんどのソフトウェア製品で共通する要素に関しては、すでに大手企業が膨大な時間を費やして考え抜いており、それを活用すれば短期間で優れた体験を実現できる可能性が高い。
以下では、そうした実用的なUXを素早く構築するための考え方やポイントをまとめる。
1. 既存のコンポーネントライブラリを活用する
GoogleのMaterial UIのようなコンポーネントライブラリを使えば、基本的なビジュアル要素は揃う。ただし、それだけではユーザーフロー全体を最適化してくれるわけではない。どの要素をどこに配置し、どのような動線で繋ぐのかは自ら考える必要がある。
また、アカウント作成など多くの製品に共通する処理については、 あえて新しいデザインを考え直すよりも「既存の優れたパターンを取り入れる」ほうが合理的な場合が多い。 限られた時間は、プロダクトの差別化要素の作り込みに注ぐべきである。
2. 参考にすべきもの、避けるべきもの
そして、デザインを始めるにあたって参考にすべきものとそうでないものがある。
まず、参考にすべきでないものは以下の通り。
- デザインアワード系のWebサイト：オリジナリティを重視しており、必ずしも使いやすさを重視しているわけではない。
- Dribbble：見た目の美しさを重視する傾向が強く、実際のユーザーフローや実用性を把握しづらい。
参考にすべきものは以下の通りだ。
- 競合製品：実際にアカウントを作って画面を確認し、スクリーンショットを取り、ユーザーフローを把握する。
- サンプルやパターンを集めたサイト：PageFlowsやMobbinなどが代表例。パスワード強度チェックや確認フローなどのパターンをすばやく参照できる。
多くの製品が同じやり方を取っている部分には、往々にして妥当な理由がある。一方で、一部の企業があえてユーザーに手間をかけさせるようなフローを採用している場合、それはあえて「本気のユーザーだけを集めたい」などの意図がある可能性もある。その点を見極め、ユーザーがなるべくスムーズに行動できる設計にするか、あるいはあえてハードルを設定するかを判断するとよい。
3. 他業界のUXを参照する
同じ業界に類似事例がない場合、視野を広げて別の業界を探すのも有効だ。たとえば医療データを収集するなら、住宅ローンや税金手続きなど、重要度の高いデータを扱う他のサービスがどのようにUXを設計しているかを参考にするとよい。
4. 「何を実現したいのか」を明確にし、具体的な問いを立てる
サインアップページなら「メールアドレスとパスワードを入力させて登録完了」という表面的な視点ではなく、 「利用者に手間を感じさせず、直感的に登録を完了してもらうにはどうするか」を問いとして設定する。 すると、パスワードの強度を事前に可視化するなど、必要な施策が具体的に見えてくる。
また、以下のような新たな疑問も自然と生まれる。
- ユーザーは登録後すぐにログインできる状態が望ましいのか、それともメール認証を挟むべきか
- 登録完了ページを用意するべきか、それとも画面上に完了メッセージを表示するだけでよいのか
5. ユーザーは常に急ぎがちで不注意だと想定する
現実のユーザーは説明を読み飛ばしたり、焦って入力をミスしたりする。そうした状況下でどのようなエラーが起き、どのように修正できるかを事前に考えておく必要がある。
- 入力フィールドごとに「間違いが起きたときどうなるか」を想定する
- ユーザーフロー全体でどのようなトラブルが起きうるかを考える
不親切なUXは「見た目の問題」よりも、 「ユーザーが何をどう操作すればよいのかわからない」ことから生まれるケースが多い。
たとえばパスワード関連では、次のような事態が想定される。
- ユーザーが適当にパスワードを入力してしまい、後からロックアウトされる
- パスワードが一致しないエラーで登録できないが、エラー表示がわかりにくい
これらに対処するため、
- 「パスワード確認用フィールド」を用意し、再入力を促す
- 再入力の段階でパスワード不一致をリアルタイムに警告表示する
といった工夫が考えられる。
6. ChatGPTなどのツールをUXのチェックに活用する
ChatGPTなどのAIツールを使ってUX設計をチェックする方法もある。完璧ではないが、客観的な視点を得る一助になる。
例えば、以下のようにAIに問いかけてみる。
- Red Team vs. Blue Team:「このサインアップフローにおけるユーザーのつまずきポイントを指摘してほしい」vs.「このデザインの直感的な部分を擁護してほしい」
- 業界標準:「トップSaaS企業のサインアップフローはどのように設計されているのか」
- イレギュラーケース:「ユーザーがメールアドレスをタイプミスした場合、気づかないまま進んだらどうなるか」
7. 計測できる指標を決めておく
「良いUX」とは「デザインが美しい」だけではない。実際にどれだけコンバージョンが向上したか、ユーザーがリピートしているか、あるいは満足度が高いかなど、定量的に測定できる指標を設定するほど、主観に惑わされずに済む。
8. シンプルな色使いと言葉選び
- 色はプライマリ・セカンダリ・アクセントの3種類程度にとどめる
- ユーザーがなじみやすい表現を優先し、「データベースエラー」のような開発者向け語彙を避ける
スタートアップは迅速な開発が求められるため、デザインの美しさに過度にこだわるより、まずは使いやすさを重視することが重要だ。
まとめ: プロダクトのコアバリューに集中しよう
すでに確立されたUIパターンやUXをあえて独自に作り直すのは、ユーザーに余計な学習コストを課すことになりかねない。競合製品が一般的に採用する慣習を取り入れることで、ユーザーは初めての操作でもスムーズに使いこなせる可能性が高い。革新が必要なのはプロダクトのコアとなる部分であり、それ以外の要素は「定番のパターンを踏襲する」ほうがメリットが大きい。
詳細はPractical UX for startups surviving without a designerを参照していただきたい。
