(UCD/HCD)ウェブサイトの画面設計をまとめるにあたって、よく使うのが、ワイヤーフレームという手法です。いう意味で、詳細なビジュアルデザインまでは施さない形の、画面構成図/画面設計書のことを言います。ワイヤーフレームを作るのか?ワイヤーフレームには、大きくふたつの意義があります。直接プロトタイピングしながらデザインを詰めてゆくケースも増えているようです。(レスポンシブデザイン)、複雑なインタラクションの体感的な検証、システム側のつなぎの同時検討、といった面でメリットがありますが、小規模な組織やプロダクトでない限り、それとは別に立ち返るべき仕様書は不可欠だと経験上感じていて、その意味で、ワイヤーフレームは今も重要だと思います。して捉えるならば、それは、プロジェクト内における有用なコミュニケーションとして機能しなければなりません。設計意図や、各関係者の作業に必要な情報が、誤解なく伝わる必要があります。そのためワイヤーフレームの作成においては、単に画面構成を視覚的に描くだけでなく、具体的な注釈も記述します。情報構造やマークアップに関する指示、ユーザビリティやアクセシビリティを担保するための要件、インタラクションの挙動、クリック/タップしたときのリンク先、といった情報です。絵的な完成度よりも、むしろこうしたノートの記述が重要だったりします。いった他のドキュメントと併存するケースが多いことでしょう。他のドキュメントのどの記述に相当するかを明示的に紐づけておくと、関係者の理解を促すことができます。ひとつ、ワイヤーフレームがコミュニケーションとして機能し続けるためには、その作成過程においてプロジェクト関係者みんなが関与することが大事です。しかたなどを含め、プロジェクトに合ったやりかたで工夫してみるとよいでしょう。私の場合、ワイヤーフレームを作る前に、関係者に参加してもてもらう形で、ペーパープロトタイピングのセッションをすることが多いです。セッションを通じて合意形成されたペーパープロトタイプをワイヤーフレーム化することによって、自ずと関係者がインボルブされる形になるからです。ワイヤーフレーム作成の勘所ワイヤーフレームの作りかたに唯一の正解はありませんが、押さえておきたい勘所はいくつかあります。(ワイヤーフレームの前にペーパープロトタイピングをする場合は、ペーパープロトタイピングの段階から、下記を意識するのが有効だと思います)。(チャンク)、ビジュアルヒエラルキーを検討し、レイアウトに落とし込みます。面から意識することも不可欠です。情報構造の適切さは、アクセシビリティに大きく影響するからです。サポートできているか?を意識します。メインコンテンツ内の文脈的なナビゲーションにおいては、ユーザーにとって望ましい「動線」をサポートすべく、適切に「導線」が提示できているか?を意識します。コンポーネントの一貫性を意識します。(ヘッダー、フッター、各種リンクの提示、ボタン、見出し、アイコンの使用、画像とキャプションの位置関係、各種インタラクションおよびフィードバックの提示、などなど...)。いうのも有効でしょう。...」「テキストテキストテキスト...」といったダミーテキストがよく使われますが、その後の制作工程で実際にコンテンツを当て込んでみると、量感や表現のトーンが、ワイヤーフレーム作成時に抱いていたイメージと異なることがしばしばあります。CTA)、くらいはなるべく実際のラベルを入れるように心がけています。リニューアル案件であれば既存コンテンツを活かしてワイヤーフレームに当て込んでみるのも有効ですし、場合によっては競合サイトのコンテンツを当て込んでみるのも一考でしょう。配色ワイヤーフレームにおいては、事前にカラースキームが決まっている場合を除き、基本的に色は使わないようにしています。アクセシビリティの観点で、情報の識別を色に依存することは適切でないからです。意味がユーザーに伝わることが大事だと思います。インタラクションワイヤーフレームは「静的」で、昨今のインタラクティブなアプリケーション設計には向かないという考えかたもあるようです。ものであって、ワイヤーフレームがインタラクティブに動かなくても大きな問題は無いと考えています。ユーザーの認知を助けたり、ユーザーにより確かなフィードバックを与えて安心感を高めたり、といった優れた利点はあるものの、本来はそれが無くても十分にアクセシブル/ユーザブルであるべきだと思うからです。不適切だと基本的なユーザビリティを阻害してしまう類のインタラクションもあるので、それについては、フィードバック前後の画面構成をそれぞれ静的なワイヤーフレームに盛り込めばよいと思います。想定して、代表的な画面サイズごとに複数のワイヤーフレームを作らなければならないのか、という懸念があるかもしれません。案件によるかもしれませんが、個人的には「モバイルファースト/コンテンツファースト」の考えかた則って、ワイヤーフレームはスマートフォンでの利用を前提にした画面設計でよいのでは、と考えています。ものと位置づけ、注釈として記述するか、どうしても必要であれば、補足的に画面構成を描くのがよいかな、と思います。以上、ウェブサイトのワイヤーフレームを作るにあたって、私自身が心がけていることなどをまとめてみました。