ワイヤーフレームの役割とポイント
ここまでで事前の下ごしらえが終わり、やっとデザインや実装に取り掛かることになりますが、その前に「ワイヤーフレーム」を作成していきます。Webサイトやアプリなどのプロジェクトでは、通常ここから取り掛かるという場合も少なくないでしょう。これはナビゲーションデザイン（画面遷移）やインターフェイスデザイン（どこに何を配置するか）を設計するものです。こうした最低限の情報であらかじめ設計を検証することで、デザイン時の手戻りを少なくすることができます。また、工数の把握やチーム内の認識合わせにも有用です。
ワイヤーフレームでは、情報の分類を的確に行うことが大切です。サービス内にどんな名称のコンテンツがあるのかを意識し、違う場所に似たような情報がないようにするのがポイントです。また、将来的にコンテンツが拡充していったときに耐え得る情報構造になっているかにも配慮しましょう。
制作ノウハウと便利ツール
ワイヤーフレームをつくる方法は、手描きやデザインソフトなど人それぞれです。チームディスカッションをしながら手描きする場合はホワイトボードなども使いますが、個人で行う場合は紙や付箋などに描きます。ワイヤーフレームを描くためのノート「Prottノート」も便利です。
ソフトで作る場合は、プロトタイピングツール「Prott」のワイヤーフレーム機能やSketch（https://www.sketchapp.com/）などのデザインソフトがよく使われています。
ワイヤーフレームは、デザイン時にさらにブラッシュアップしていくので、あまりビジュアルに時間をかけて作り込みすぎないことが重要です。色やビジュアルの要素を省くことで検証すべき画面の情報設計だけに意識が向くので、議論が進みやすいというメリットがあります。
ここまで終えてからやっと、デザインや実装にとりかかっていくのです。手間暇かけて検証をしているので、きっとその後も明確なゴールに向かってムダなく有意義な制作を行っていけるでしょう。
グッドパッチ社で販売している、手描きのプロトタイピングやワイヤーフレームを描くためのノート。スマホの枠がほぼ実寸で描いてあるので、イメージを掴みやすい。Amazonで購入できる
前出のプロトタイピングツール「Prott」にはワイヤーフレーム機能もある。ナビゲーションやインターフェイスに必要なパーツがあらかじめ用意されていて、それらをドラッグ＆ドロップするだけで配置し、ワイヤーフレームを作成できる。動作確認もモニタ上で行える
関連記事
