拡張性のあるデータ配置を模索する
そろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。これは Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。もちろん、すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。
下の図はページを大まかに4つに別けて、異なる配置を考えたものです。
※ ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。
- ナビゲーション
- サイトのグローバルナビゲーションに当たるエリア。Webアプリケーションにおいては機能を示すことが多い
- コンテキスト / データセット
- 現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。パンくずがあるケースも
- メインコンテンツ
- ページのなかで最も重要とされるデータ。ブログであればブログエントリーのことを指す
- 関連データ / フィルター
- メインコンテンツに何かしらの形で関連したデータであったり、メインコンテンツを操作するためのコマンドがあるエリア
どれが拡張する可能性があるのか見極める
グローバルナビゲーションはサイト全体を大まかに見渡すことが出来る重要なエリアですが、サイトによっては幾つか増える可能性がある場合もありますし、ネーミングを長くしなければならないこともあるでしょう。そういった場合、ナビゲーションを横に配置すると、2列になってしまうなど限界が出てしまいます。名称が長いと、配置出来るナビゲーションの数も減っていくでしょう。そういう可能性があらかじめ分かっている場合であれば、横ではなく縦に配置したほうが良いです。
例えば Amazon.com の書籍ページをみてみましょう。「ベストセラー」「バーゲン」といった要素はそう変更されるわけでもないので、横のナビゲーションとして配置しています。しかし、書籍のカテゴリは再び再編成したり増やす可能性があるので縦に配置しているのが分かります。2種類の違うナビゲーションも今後どのように拡張するかによって明確に配置の仕方が違って来るわけです。
デザインも拡張出来ているかチェック
Photoshop や Fireworks でピクセルパーフェクトなモックアップを作るのは良いですが、どのようなデータがきても良いようなデザインにしておく必要もあります。例えば左図のように常にナビゲーションの名称が1行で済むわけではなく、時には2行になることもあります。そのときに矢印が中央に来るように CSS でマークアップしているかどうか、そして背景が途中で切れていたり不自然な形でリピートしていないか考慮する必要があるでしょう。
それは縦だけでなく、横のナビゲーションでも同じです。下図のように Amazon.com では、文字のサイズを変えても中央揃えに文字がきれいに配置されているだけでなく、分割線の下がグラデーションがかかって不自然ではありません。こうした配慮はアクセシビリティとデザインを上手く同居させるのに必要なテクニックです。
どのデータが拡張される可能性があるのかを考えることは、ワイヤーフレームを考える上で重要なだけでなく、デザインやマークアップを考慮する際にも忘れてはならない重要なことです。データを細かく分散して情報の配置を考える前に、まずは大まかにデータをグループ別けし、拡張する可能性があるデータはどこに配置したら良いのか模索するというやり方は、ひとつのスタートになると思います。
- everything might happen tomorrow 最新エントリ
- 新着記事
- 特集
- ブログ
- 企画特集
-
特集:ビジネスを止めるな!
-
クラウドバックアップお悩み相談室
-
隗より始めよ
-
ビジネスの大きな転換点で勝者に!
-
明治創業の鉄道企業がAWSに挑戦
-
ウルトラ帳票文化を乗り越える!
-
2020年代を勝ち抜くインフラ
-
レポート:NWセキュリティの未来
-
意識してますか?PCの「信頼性」
-
講演レポ:ポスト2020時代の基盤
-
下した決断は「ハイブリッドへ」
-
ITシステムは永久のβ版思考で
-
新時代にはゼロトラストが不可欠
-
サブスクモデルのSaaSで業務改善
-
「脱レガシー」なくしてDXはない
-
RPAがニガテなExcelをどう使う
-
実現まで10年「ゼロトラスト」
-
Office 365にもFWが必要?
-
DX成功の鍵はセキュリティにあり
-
働き方改革は身近な「改善」から
-
働き方、生産性を根底から底上げ!
-
分析されたデータを活用できるか?
-
AI活用が激変する新たなインフラ
-
データ活用を加速するエコシステム
-
レガシーなインフラ設計を見直す
-
どこまで可能?企業を究極の自動化
-
働き方改革にモニターが有効なワケ
-
特集:ポスト2020時代のCX再考
-
変化への対応はリアルタイム経営で
-
攻めと守りのクラウド活用とは!?
-
ビジネス成功の砦はここにあり!
-
Why ワークプレース?