ワイヤーフレームをPowerPointやExcelで作ってはいけない。【画面設計書】
ワイヤーフレーム・画面設計書の作成ツール。PowerPointやExcelは非効率すぎる。
webサイトのワイヤーフレーム・・・私は画面設計書と呼びますがそれを、PowerPointやExcelを使って作っている人がいますが、圧倒的に非効率です。
今すぐやめましょう。
そもそも用途が違う。
なぜなら、、シンプルに言えば、PowerPointやExcelは、そもそも画面設計を作るためのアプリケーションではないからです。
PowerPointはプレゼンテーションソフト、Excelは表計算ソフトです。
UI、レイアウト、コンテンツを定義するアプリケーションではありません。
では、次にPowerPointやExcelで画面設計することが非効率と考える理由を、具体的に5点挙げます。
1. 編集画面のサイズが固定で融通が効かない。
Powerpointというと、基本のサイズはA4横に相当する「210mm x 297mm」で設定されています。
ページの設定でサイズの変更はできるものの、ページ個別での変更はできず、一括変更になってしまいます。
ページに入る情報量に合わせて、ページサイズを柔軟に変更することができないということです。
その昔「ページは短い方がいい。」という時代もあったので、そのときはそれで良かったかもしれません。
しかし、最近は下層ページやスマートフォン用のページなどは、どうしても長くなってしまいます。
それをこのA4横の画面サイズに納めながら設計するのは至難の業です。
情報が入らなくなったら、次のページに「続き」で書けばいい、という声もあるかもしれません。
しかし、後になってから間に要素を追加したいとか、入ってくるコンテンツ量が思いのほか多かったとか、そういうときに、ページ間の調整なんてやってられないです。正直。
つまり画面サイズが固定、という状態で設計するのは、あまりにも非効率だということです。
Excelだと、編集画面のサイズは可変できますが、お世辞にも使い勝手がいいとは言えません。
2. UIが使いにくい。操作しにくい。重い。
これは前述のPowerPointはプレゼンテーションソフト、Excelは表計算ソフトだというところで止むを得ないことだと思います。
PowerPointやExcelを責めるのは可哀想ではありますが、正直何がどこにあるのか直感的に把握しにくいです。。。
Powerpointのメニューは、
「ホーム、挿入、描画、デザイン、画面切り替え、アニメーション、スライドショー、校閲、表示、Acrobat、図形の書式設定、操作アシスト」
の12個です。
Excelのメニューも似たようなもので、
「ホーム、挿入、描画、ページレイアウト、数式、データ、校閲、表示、Acrobat、図形の書式設定、操作アシスト」
の10個です。
ただ、実際画面設計を作るときに使うメニューは、
「ホーム、挿入、図形の書式設定」
くらいだと思います。
やっていることは、要素を挿入して、その要素の書式設定をするくらいなんです。それPowerPointやExcelにこだわる必要がありますか？って話です。
あと、要素の移動とかもしにくいです。重いし。
例えば、UIデザイン作成ツールだと、Shiftキーを押しながら矢印ボタンを押すと、10ピクセル単位で要素を移動できます。
それはデザインをする人にとっては、暗黙の了解の操作方法だったりするのですが、PowerpointやExcelではそれが違う操作になってしまいます。
とにかく細かい作業がしづらいです。
3. ページという単位で印刷しにくい。
先のページサイズが固定、という話に関連しますが、画面設計１ページをPowerPointの1ページで完結できないので、印刷をしようとすると、どうしても、ページが分割されてしまいます。
そうするとどうしても前後関係が見えにくくなり、ストーリーの把握が難しくなります。
4. 「定義したパーツを流用する」という概念がない。
webサイトの画面設計をすると、100ページのコーポレートサイトだったとしても、その各ページを構成する表現のパターンというのはどれくらいでしょうか。
- 見出し
- リード文
- リスト
- 表
- 画像とテキストの組み合わせ
- カード形式のボタン
- コンバージョンボタン
など色々あるとは思いますが、多くても50パターンくらいには収まるものです。
別のツールだと、シンボルとかコンポーネントという呼び方の単位で管理できます。
その要素を画面に配置し、その要素に乗っかる情報をさらに追加編集する、という進め方ができます。
これは、サイト全体のルール定義、あと、ページデザイン数にも関わってくるところで、制作の大幅な効率化につながるところです。
しかし残念ながら、PowerPointやExcelだと、そのパーツのパターン定義が出来ません。
5. プラグイン/拡張機能がない
PowerPointやExcelには、画面設計を作る上で、便利な機能の拡張が出来ません。
UIデザインツール（SketchやXDなど）ではかゆいところに手が届く拡張機能が豊富です。
別の機会に紹介しますが、私はSketchというアプリケーションを使っています。
Sketchでは、「ページの自動整列」、「ページに含む要素に合わせたのオートリサイズ」、「シンボル・コンポーネントの簡単呼び出し」、「アイコンフォントの利用」など本当にたくさんのものがあります。
あくまで拡張機能なので、必要なものだけ入れればよいですが、便利な拡張機能は、本当に作業の効率化に有効です。
PowerpointやExcelならではのメリットもある？
ただ、次のような意見もあると思います。
- クライアントが持っているのがPowerpointやExcelだから。
- 自分のパソコンに入っているのがPowerpointやExcelだから。
「クライアントが持っているのがPowerpointやExcelだから。」
まず、1つ目。
「クライアントが持っているのはPowerpointやExcelだから。」
という点について。
クライアントに画面設計書を渡すメリットとして考えられるのは、クライアントが直接画面設計書に対してフィードバックを書き込める、というところだと思います。
正直そこは、あまりメリットには感じません。なぜなら、設計のソースデータを渡すということは、その主導をクライアントに委ねているようなものだからです。
まずは設計意図を、設計者側から説明する必要があるでしょう。
その上で、クライアントからフィードバックをもらうと思うのですが、
「ボタンをここに配置してください。」
「この情報をこの間に持ってきてください」
という指示を直接画面設計書に書き込まれるのは、ちょっとクライアントにやらせすぎだと思うのです。
建築士が「間取図」を顧客に見せることはあっても、
「間取図の元データをお渡しするので気になったことがあったら編集してもらえますか？」
なんてやらないですよね。
それと一緒です。
クライアントからもらう フィードバックの粒度は「もっとこのことを伝えたい」とか「ここへの導線を強調したい」といった「指示」ではなく「要望」であるべきだと思うのです。
「要望」であれば、わざわざ、画面設計書のデータをお渡しして、それに書き込んでもらう必要はありません。
設計の主導はいうまでもなく設計者です。
「クライアントが持っているのはPowerpointやExcelだから。」というのは理由にはなりません。
「自分のパソコンに入っているのがPowerpointやExcelだから。」
2つ目。
設計者自身が、画面設計に最適なアプリケーションを所有しておらず、PowerpointやExcelならあるので、という理由もあるかもしれません。ただ、これの回答は、それ専用のツールがあるのでそれを使ってください、って結論です。
アプリケーションを購入するコスト以上の、時間の節約ができます。
Time is Money.
やっぱり画面設計書をPowerPointやExcelで作るのは非効率すぎる。
今回は「画面設計書の作成のにPowerPointやExcelは非効率すぎる。」という話をしました。
昔は自分も苦労して、PowerPointやExcelを使って頑張って設計してました。
でも続ければ続けるほど私は、Officeやマイクロソフトのことを嫌いになっていきました。あまりにも使いにくいから。
でもよくよく考えると、PowerPointはプレゼンテーション作成ソフトで、Excelは表計算ソフトです。
本来の用途と全く違う使い方をして「使えねー、むかつくー」というのはこちらの都合です。
今は、やることに特化した便利なツールがあります。なので、画面設計を作るのであればその用途に合致したものを使いましょう、ということです。
では何を使うのが良いの？という話ですが、上の方で少し触れたSketchやXDがおすすめです。
これらを使うメリットは、今回お伝えしたPowerPointやExcelのデメリットが全部解決できることです。
具体的にはまた別の機会に紹介したいと思います。
