kigoulab アプリでもウェブサイトでも、設計段階で、ワイヤーフレームを作る場面は多いと思います。手書き、PowerPoint、Cacoo、Illustrator、Sketchと、ワイヤーフレームを描くツールはさまざまですが、守るべきルールが1つあります。それは実寸で（実比率で）作るということです。
ワイヤーフレームは場所取り合戦
ワイヤーフレームとは、「何を、どこに、どのくらいの大きさで」表示するのかを設計する、画面設計書です。実際に画面を実装する段階で悩まないように、事前に設計図を作るのが目的です。
画面のなかで、伝えたい事、目立たせたい機能は山ほどあります。それらをすべて大きく目立つところにレイアウトすることはできません。機能をグルーピングし、強弱をつけて画面に配置してゆく必要があります。まさに、画面要素の場所取り合戦なのです。
実装前にワイヤーフレームでお客様と共有
全ての画面を、デザインした画面で確認できればよいですが、機能が複雑になってきた昨今、デザインは主要画面でブランドイメージを確認してもらうだけにとどめ、下部階層の要素確認はワイヤーフレームで行うケースが多くなりました。
特にアプリやシステムのからんだ、ウェブページは機能漏れがないか確認するためにも、詳細なワイヤーフレームが必要です。場合によっては、ワイヤーフレームをつかってペーパープロトタイピングのテストを行うことも良くあります。
実寸で作ってないと、こんな悲劇が
場所取り合戦であるワイヤーフレームを、実寸（実比率）で作ってないと、どうなるでしょう。なんとなく、すべての要素がうまく収まってしまう場合があります。そして実際の実装の場面になって、実データーをいれてレイアウトしてみたら、実際は入らないと言うことがままあります。
手書きの場合や、PowerPointで作られている場合によくありがちです。要素のサイズが表示されないからです。
まだ構想段階のラフなワイヤーフレームであれば、これでも問題ないですが、デザイナーに渡す実際のワイヤーフレームは、実データーをいれても破綻しないよう設計されてなければなりません。
おすすめはIllustrator、そしてSketch
ワイヤーフレームを作るのに、まずおすすめしたいのはIllustratorです。要素のサイズは実寸でつくれますし、複数のアートボードを持つことができるので、複数画面の設計が容易です。ポイントはIllustratorだからといって色を使ったりしないこと、あくまでもワイヤーフレームですからモノクロでストイックに作るのが重要です。
さらに、最近なにかと話題になっているSketch。Mac版しかありませんが、動作も軽く、デバイスにあわせたアートボードを複数もてるのに加え、iOSの場合、基本的なUIステンシルがすでに内蔵されていて、それらを並べていくだけでワイヤーフレームをこえてプロトタイプができてしまう便利さです。これから注目のソフトでしょう。
デザイナーがワイヤーフレームを作る時代
ワイヤーフレームを作るのはディレクターやシステムエンジニアで、Illustrator、Sketchを扱うのは荷が重いと言う話も聞こえてきそうです。その場合、組織の役割分担を見直して、デザイナーがワイヤーフレームを作るのはどうでしょう。デザイナーに、いままでより上流の仕事を任せてみるのです。
いわゆるIAの仕事は、デザインを本質から考える仕事でもあり、デザイナーのキャリアパスとしては最適な仕事です。ディレクターが一方でスケジュール管理や予算管理をしながら、画面設計もやるのも考えようによっては無理があります。
実寸ワイヤーフレームをはやらせよう
以上、ワイヤーフレームは実寸で作るべしというお話でした。最後にデザイナーのキャリアパス、ディレクターやエンジニアとの仕事の分担にまで話が広がりましたが、ワークフローは、業務にあわせて最適化してゆけばよいと思います。みなさんの仕事の見直しにつながれば良いと思っています。
(担当：小山智久）
キゴウラボでは、ワイヤーフレームを書くお仕事を募集中です。ウェブサイトのサイト構成や、アプリの画面設計書のような資料から、実寸で本番に耐えられるワイヤーフレームを作ります。さらにワイヤーフレームをもとにペーパープロトタイピングを行い、最終的なデザインまで作成することも可能です。ぜひご相談ください。