ワイヤーフレームは、結局紙とペンで書くのがおすすめ

こんにちは、UIデザイナーのさめまる(@samemaru_saxo)です。

こちらは「Design Tools Advent Calendar 2018」4日目の記事です。デザインツールの話ならなんでもOKということで、ワイヤーフレームツールをいろいろ試した結果、紙とペンに行きついた話をしたいと思います。

ワイヤーフレームのツールってほんとにいっぱいある

私は現在SmartHRというスタートアップでUIデザインをしているのですが、それまでは3年半ほど受託アプリ開発会社でUIデザインをしてきました。受託開発ではサービスの立ち上げに関わることが多く、ゼロベースでUI設計する機会によく恵まれました。しかしサービス全体のUI構成の検討や、ワイヤーフレーム作成のツールがなかなかくせもので、長い間しっくりくるものに出会えませんでした。
試していたのは、Keynoteなどのプレゼンツール、
Prott、whimsical といったワイヤーツール、
Sketch、Xd、Illustrator といったデザインツール、
iPadでいうとPaper、AdobeCompなどです。
どれも違和感を感じたり、失敗したりして、結局いまは紙とペンに行きつきました。正確にいうとA3コピー用紙とフリクションです。まさかのどアナログです。しかし意外とメリットがたくさんあるんです。

1. コメントやメモを気がねなく書ける

画面単位のワイヤーフレームの前に、まずはざっくりとしたUI設計の構成図から考えます。サービスのメインの機能は何か?サブの機能ならメインフローからは外そう...まさにUIの骨子を作るフェーズです。
このときよく困るのが「こんな仕様がよさそう」「こんなアイデアが使えるかも」といった思いつきをどこに書くかです。
Illustratorなどだと、テキスト色を変えてコメントを書いてみても、「あとから一括で非表示ができるようにコメントは専用のレイヤーに分けようかな」「あ、別レイヤーに入れちゃったから修正しないと…」など、余計な作業をしてしまっていました。
紙とペンならこうはなりません。私は3色フリクションを使っているんですが、ワイヤーを黒、コメントを赤・青で書き分けるだけです。仕上がりはなかなかの汚さになりますが、シンプルがゆえに、余計なことが気にならず、積極的にコメントを書くようになりました。


2. 紙を広げる・切る・並びかえる・分類する

UIの全体構成図は、全体を見て抜け漏れをチェックしたり、内容によっては1画面の詳細を検討したり、全体と詳細を行き来しながら検討することが多いと思います。このとき紙だと広げたり、並べ変えたり、横断して矢印を引いたりできるのでとても便利です。どのディスプレイより大きく、解像度高く見れます。

3. UIひとつひとつ、最適かを考えないと書けない

全体構成が固まってきたところで、今度は画面ごとのワイヤーフレームを書きます。
Prottやwhimsicalには標準的なUIキットが準備されており、ドラッグアンドドロップで簡単かつにスピーディーに発想を形にできます。
しかし私にとっては落とし穴でした。たとえば3択のUIが必要だったとします。さてどうしようとUIキットを開くと、そこにはずらりと並ぶキットの中のドラムロールが目に入ります。そうそうコレ良さそうとさくっとドラッグしがちのですが、本当にその選択正しいんでしょうか。選択肢が少ないならピッカーがいいかもしれないし、複雑な選択肢だとしたらキットにはない図入りボタンがいいかもしれません。
ただそこに使いやすいツールがあることで、無意識に「考える」ではなく「選択する」という作業になってしまっていました。ワイヤーフレームでこんなUIを間違うと、なかなかこの後に気づくことは難しいです。
そこでおすすめなのが手書きです。ゼロから書くとなると「まずどういうUIを書けばいいんだっけ」とまず考える作業が必要になります。ひとつひとつ「なぜこのUIにすべきなのか?」を地道に問いながら書いていく。仕上がりは雑に見えますが、設計は丁寧にできるように感じてます。

4. ツールのUIで気が散らない

集中してUI設計をしているときの私たちは、いわば「UIめちゃ目につくモード」です。
そうなると、使っているツールのUIに目がいってしまうことありませんか?私はKeynoteなどのツールで設計していると、こんなことがよくあります。
「あー、このボタンよく使うのになんでこんな操作ステップが多いんだ。常に右下に表示されてればいいのに。いやそうすると画面の邪魔か?だとしたらメニュー構成を入れ替えて…」
気がつくとKaynoteのUIを検討しているんです…。
私は紙とペンで余計なUIを排除することで、やるべき作業を集中できるようになりました。(書いてて気づきましたが、たんに私が注意散漫人間の可能性ありますね?)

5. 誰にでもワイヤーだと伝わる

手書きワイヤーのすごいところは、プロジェクトメンバーはもちろん、まったく開発経験のないクライアントにだって「これは仮だ」ということが伝わることです。
デザインツールで作成したワイヤーを見せると「ここもうちょっと下にさげて…」「あ、すみません、こういうデザインなわけじゃなくて、仮のデザインでして、だからボタンの位置はここで確定ではなくてですね…」といった認識の齟齬が生まれがちです。実はこのコミュニケーションロスはかなり面倒なので、地味ながら大きなメリットになっています。

6. ワイヤーフレームの仮デザインに引っ張られない

ワイヤーフレームが完成したら、いよいよデザインカンプ作成です!
Sketchで書いたワイヤーを書いてたころは、ワイヤーをコピペして、カンプ用に形を整えて…と、サクッとカンプが完成します。ただ、なんだか統一感がない、違和感がある…。ふと気づくと仮のはずだったフォントサイズ、マージン、Radiusがそのままになってしまっていました。仮デザインだったのに「UIとして最適か」というふるいをかけるタイミングを失ってたんです。
そこでそもそも事故が起こらないよう、手書きにしてしまいました。

もちろんデメリットも。

みなさんご存知のとおりアナログは共有しづらいし、作業がブラックボックス化してしまうといったデメリットがあります。やりづらく感じることもままありますが、ワイヤーをスキャンしてQiitaにあげて進捗を見える化したり、コミュニケーションでカバーしようと日々試みています。

手間と注意は必要ですが、設計の落とし穴が少ない紙とペン、おすすめです。みなさんのUI設計ツール選びのヒントになれば嬉しいです。それでは素敵なUIデザイナーライフを!


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

99

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。