拡張性のあるデータ配置を模索する

そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。

下の図はページを大まかに4つに別けて、異なる配置を考えたものです。

※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。

ナビゲーション

サイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多い

コンテキスト / データセット

現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。パンくずがあるケースも

メインコンテンツ

ページのなかで最も重要とされるデータ。ブログであればブログエントリーのことを指す

関連データ / フィルター

メインコンテンツに何かしらの形で関連したデータであったり、メインコンテンツを操作するためのコマンドがあるエリア

どれが拡張する可能性があるのか見極める

グローバルナビゲーションはサイト全体を大まかに見渡すことが出来る重要なエリアですが、サイトによっては幾つか増える可能性がある場合もありますし、ネーミングを長くしなければならないこともあるでしょう。そういった場合、ナビゲーションを横に配置すると、２列になってしまうなど限界が出てしまいます。名称が長いと、配置出来るナビゲーションの数も減っていくでしょう。そういう可能性があらかじめ分かっている場合であれば、横ではなく縦に配置したほうが良いです。

例えば Amazon.com の書籍ページをみてみましょう。「ベストセラー」「バーゲン」といった要素はそう変更されるわけでもないので、横のナビゲーションとして配置しています。しかし、書籍のカテゴリは再び再編成したり増やす可能性があるので縦に配置しているのが分かります。２種類の違うナビゲーションも今後どのように拡張するかによって明確に配置の仕方が違って来るわけです。

デザインも拡張出来ているかチェック

Photoshop や Fireworks でピクセルパーフェクトなモックアップを作るのは良いですが、どのようなデータがきても良いようなデザインにしておく必要もあります。例えば左図のように常にナビゲーションの名称が１行で済むわけではなく、時には２行になることもあります。そのときに矢印が中央に来るように CSS でマークアップしているかどうか、そして背景が途中で切れていたり不自然な形でリピートしていないか考慮する必要があるでしょう。

それは縦だけでなく、横のナビゲーションでも同じです。下図のように Amazon.com では、文字のサイズを変えても中央揃えに文字がきれいに配置されているだけでなく、分割線の下がグラデーションがかかって不自然ではありません。こうした配慮はアクセシビリティとデザインを上手く同居させるのに必要なテクニックです。

どのデータが拡張される可能性があるのかを考えることは、ワイヤーフレームを考える上で重要なだけでなく、デザインやマークアップを考慮する際にも忘れてはならない重要なことです。データを細かく分散して情報の配置を考える前に、まずは大まかにデータをグループ別けし、拡張する可能性があるデータはどこに配置したら良いのか模索するというやり方は、ひとつのスタートになると思います。