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

2008-03-11 01:21:30

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

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

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

基盤になるワイヤーフレーム

ナビゲーション
サイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多い
コンテキスト / データセット
現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。パンくずがあるケースも
メインコンテンツ
ページのなかで最も重要とされるデータ。ブログであればブログエントリーのことを指す
関連データ / フィルター
メインコンテンツに何かしらの形で関連したデータであったり、メインコンテンツを操作するためのコマンドがあるエリア

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

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

Amazon.com のブラウジング

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

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

拡張性のあるマークアップ

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

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

文字サイズを変更したときの比較

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

※このエントリは ブロガーにより投稿されたものです。朝日インタラクティブ および ZDNet Japan編集部の見解・意向を示すものではありません。
  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]