UXってなんだろう⑨〜きれいなUIは後で。まず鉛筆と紙で画面を描く〜

こんにちは。デザイナーのスギヤマです。

前回の第8回では、USM（ユーザーストーリーマッピング）を実際に作るときに起きる「4つの罠」をご紹介しました。
USMで「何を作るか」が決まったら、次のステップはいよいよ画面（UI）を設計するフェーズです。

「Figmaとか使えないし…」
「デザインセンスがないから無理かも…」
「何から手をつければいいかわからない…」

最初に必要なのは、鉛筆と白い紙だけです。まずはペーパープロトタイプから始めます。

いきなりきれいなUIを作ってはいけない理由

UI設計のフェーズに入ると、つい「見た目をきれいに整えること」に意識が向いてしまいがちです。しかし、この段階でFigmaを開いてピクセルを整えたり、色を選んだりするのは逆効果と考えます。なぜなら、この段階でまだ決まっていないことが山ほどあるからです。

● この画面に何を置くべきか
● ボタンはどこにあるべきか
● ユーザーはどの順番で操作するのか

こういった「構造」の問題を解決しないまま見た目を作り込んでしまうと、後から「やっぱりこのボタン、ここじゃなかった」となったときのやり直しコストが大きくなります。

まずは荒い形、つまり紙に鉛筆で描く「ペーパープロトタイプ」から始めることで、構造を素早く、低コストで試すことができます。

用意するものは2つだけ

● 白いコピー用紙
● 鉛筆

紙は方眼紙などもおすすめされていますが、自分はできるだけ何も印刷されていない真っ白な紙を使っています。これは、方眼紙やノートの罫線がノイズのように感じられることが多かったからです。線が目に入ると、無意識にそれに合わせて描こうとしてしまい、自由な発想を妨げる印象を受けていました。そのため、真っ白な紙を使用しています。

たくさん書く

白い紙に、鉛筆でざっくり描きます。とにかくたくさん描きます。

ペーパープロトで大事なのは、1枚で完成させようとしないことではないでしょうか。「トップ画面はどんな構成がいいだろう？」と思ったら、まず思いつくままに描いてみる。次に「ボタンをもっと上に置いたら？」「一覧じゃなくてカード型にしたら？」と、パターンを変えながらどんどん描いていきます。

上手く描く必要はなく、四角と線と文字だけで十分だと感じます。「こんな雑でいいのか？」と思うくらいです。

描けたら並べて、指でポチポチしてみる

一通り描けたら、紙を並べてみます。そして、実際にスマホでタップ・画面をクリックで操作するように、指で画面を「押して」みます。

「このボタンを押したら次はこの画面に行く」という流れを、紙の上で指でたどっていくだけで、不思議と「あ、ここ操作しにくいな」「この画面、情報が多すぎるな」という気づきが生まれます。

講座によっては、ハサミで切り取ったパーツをのりで貼ったり、ギミックを作り込んだりすることもあります。もちろんそれも有効ですが、ここまでやらなくていいと感じています。

紙に描いて、並べて、指でポチポチ押す。それだけでも、画面の流れとイメージをざっくり掴むことはできます。

既存のUIを参考にする

白い紙を前にして、「何を描けばいいかわからない…」と手が止まってしまうことがあります。そんな時は、無理に0から生み出そうとしなくても問題ないと考えます。

まず、普段自分がよく使っているアプリやサービスの画面を開いてみます。「このアプリのログイン画面、どんな構成だっけ？」と眺めながら、紙に模写してみるのが一番の近道です。

参考にすることは、パクリではありません。なぜなら、世の中に出回っているUIは、多くのユーザーテストや改善を経て洗練されたものだからです。「なぜこのボタンはここにあるのか」「なぜこの順番で情報が並んでいるのか」を意識しながら観察することで、UI設計の引き出しが増えていきます。

「描けない」は「センスがない」のではなく、「まだ引き出しが少ない」だけだと考えます。参考UIを1枚模写したら、次は「ボタンの位置を変えたら？」「情報の順番を入れ替えたら？」と、少しずつ自分のアイデアを足していく。そうやって少しずつ、自分の画面が生まれていきます。

簡易なペーパープロトの例（ぼかしをいれています）

AIがUIを作れる時代に、なぜ紙に描くのか

最近では、ClaudeやV0といったツールを使えば、テキストを打ち込むだけで一瞬でUIの叩き台が生成される時代になりました。実際、現場でもAIが生成したプロトタイプをチームで回しながら議論する、というやり方が取り入れられつつあります。

ただ、AIが生成した画面は「それっぽく」見えてしまうがゆえに、「これでいいか」という思考が止まりやすいのではないか、という危惧があることも事実です。

鉛筆を走らせながら「あ、このボタンここじゃないな」と気づく。描き直しながら「そもそもこの画面、必要だっけ？」と立ち止まる。手を動かすプロセスの中にこそ、生まれる思考もあると感じています。

以前のプロジェクトで、デザイナー2人で大きな紙を広げて、画面の構造を手書きしながら進めたことがありました。短時間で終わったし、描きながら「あ、この画面の流れ、おかしいな」と構造の間違いにその場で気づくことができました。

AIは「作ること」を圧倒的に速くしてくれます。でも「考えること」「問いを立て続けること」は、紙と鉛筆の方が得意なこともあります。ペーパープロトタイプは、完成品を作るための手段ではなく、頭を整理するための道具です。AIと手書き、うまく使い分けられると良いなと考えています。

おわりに

ペーパープロトタイプは、完成品ではありません。

「こういう画面にしたい」というイメージを、チームで共有するための会話のきっかけです。汚くていい、雑でいい。大事なのは、頭の中にあるイメージを紙の上に出すことだと考えます。