← エピソード一覧に戻る Episode 181 Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5
0:00 / 0:00
スクリプト
Chapter 1 オープニング ― 何もない画面が最初の離脱点になる
タカシ
今日は SaaS デザインの空状態設計です。実は Notion では、過去一年だけでテンプレートの複製が五千百“万回”も起きています。つまり多くの人が、空白のまま始めるより、最初の型や見本を求めているわけです。
ミカ
五千百万人回じゃなくて五千百“万回”ですか。すごいですね。たしかに SaaS って登録直後、ダッシュボードも一覧もチームも空で始まることが多いですし、そこで戸惑う人はかなり多そうです。
タカシ
ええ。しかも B2B SaaS では、空なのが普通なんです。まだ案件がない、連携が済んでいない、部下も招待していない。だから最初の画面は、見た目の問題ではなく、次に何をすべきかを決める経営上の導線になります。
ミカ
なるほど。空状態って、単なる余白じゃなくて最初の意思決定ポイントなんですね。今日は『何もない』をどう設計すると活用につながるのか、パターンごとに整理したいです。
Chapter 2 原則 ― 空状態は一種類ではない
タカシ
まず原則です。IBM の Carbon Design System は、空状態を no data、user action、error management に分けています。初回利用でまだ何もないのか、検索ゼロ件なのか、権限不足なのかで、同じ空画面でも伝えるべき情報が全く違います。
ミカ
たしかに、それを全部『データがありません』で済ませたら危ないですね。新規ユーザーは作ればいいけど、権限不足の人は作れないかもしれない。原因が違うのに、同じ案内だと判断を誤りそうです。
タカシ
その通りです。Atlassian も、初回利用の blank slate と、作業完了後の empty state は分けて考えるべきだとしています。前者は始め方を教える場で、後者は『完了しました、次はこれです』と後押しする場なんですね。
ミカ
同じ空白でも、初回は不安、完了後は達成感、エラー時は復旧が知りたい。感情も次の行動も違うわけか。空状態を一枚絵でまとめると、そこでズレが起きるんですね。
Chapter 3 具体例 ― サンプルとテンプレートで価値を先に見せる
タカシ
具体例で見ると分かりやすいです。Intercom は、初回サインイン時に真っ白な受信箱を見せず、編集して送れる sample messages を表示しています。空状態を『操作の見本』に変え、価値を文章ではなく画面で理解させているわけです。
ミカ
それ、いいですね。説明を読むより、最初から『こう使うのか』が見えたほうが早いですもんね。特に B2B の複雑な製品ほど、空の一覧表よりサンプルの一件のほうが安心できそうです。
タカシ
Notion はもっと徹底しています。公式発表では、過去一年でテンプレートの複製が五千百“万回”あり、利用者は約一千百万人でした。Template Gallery も六百から五千超へ広げ、完成形の仕事の流れを最初から見せています。
ミカ
つまり『好きに作ってください』より『まずこの型から始めましょう』のほうが、実際には歓迎されているわけですね。自由を与えるより、最初の成功例を渡したほうが立ち上がりは速いんだなと分かります。
Chapter 4 応用 ― 練習場を作ると複雑な SaaS でも動きやすい
タカシ
Miro の公式ブログも示唆的です。彼らは、初見では Miro を overwhelming に感じる人がいると認めた上で、最初から template を使い、Getting Started の案内を board に埋め込み、さらに五分以上試せる play 用テンプレートまで勧めています。
ミカ
なるほど、空のキャンバスをそのまま渡さないんですね。まずは壊しても困らない練習場を渡して、『触ってよい』『ここを動かせばいい』を体で覚えさせる。複雑な管理画面にも応用できそうです。
タカシ
ここで大事なのは、空状態に全部を詰め込まないことです。Carbon も、複数の選択肢を一画面へ盛りすぎるなと言っています。Create、Import、Invite、Watch demo を全部並べると、親切そうで実は判断コストを増やします。
ミカ
ありますね。案内が多すぎて、結局どれが本命なのか分からない画面。しかも権限不足なのに柔らかいイラストだけ出して原因を書かないと、ユーザーは自分が悪いのか設定が足りないのかも判断できません。
Chapter 5 まとめ ― 空画面から最初の行動率を追う
ミカ
今日の話をまとめると、空状態設計の失敗は三つありそうです。全部同じ文言で済ませる、CTA を増やしすぎる、そしてコア機能なのに見本を出さない。これだと『何もない』がそのまま離脱理由になりますね。
タカシ
その通りです。経営者や PM がまずやるべきは、主要画面の空状態を初回ゼロデータ、完了後、検索ゼロ件、権限不足、設定不足に棚卸しすることです。その上で各画面に一つだけ主導 CTA を置き、必要ならテンプレートや仮データを足します。
ミカ
追う数字も変わりそうですね。空状態が何回見られたかより、その画面から最初のレコード作成や招待、連携開始につながったかを見るべきだなと感じました。そこで初めて、空画面が導線になっているか分かるわけだ。
タカシ
ええ。空状態はデザインの端ではなく、立ち上がりの売上と定着率に効く面です。皆さんの製品でも、最初の空画面が dead end になっていないか、見本と次の一歩があるか、ぜひ今日のうちに一つ確認してみてください。それではまた次回です。