01:21:30ツイート印刷コメントを書くそろそろ大まかな形でワイヤーフレームを作っていこうと思っているわけですが、その前にいろいろ準備しておきたいことも幾つかあります。そのひとつが、拡張性を考えて、どのようなデータをどの辺りに配置するのがベストかを考えること。Webアプリケーション開発において特に重要になってくることだと思いますが、大幅な改変をしなくても、機能やミニコンテンツといったコンポーネントを付け加えることが出来るように設計しておく必要があります。すべての可能性を考慮することは不可能ですが、あらかじめ拡張されることを考慮して設計を始めるか始めないかでは大きな違いがあります。下の図はページを大まかに4つに別けて、異なる配置を考えたものです。ワイヤーフレームの基盤のような存在なので、実際のサイトのワイヤーフレームを作っているわけではありません。ナビゲーションサイトのグローバルナビゲーションに当たるエリア。データセット現在観覧しているページがどういったページが示していたり、サイト全体からみたページの位置を示しているエリア。パンくずがあるケースもメインコンテンツページのなかで最も重要とされるデータ。フィルターメインコンテンツに何かしらの形で関連したデータであったり、メインコンテンツを操作するためのコマンドがあるエリアどれが拡張する可能性があるのか見極めるグローバルナビゲーションはサイト全体を大まかに見渡すことが出来る重要なエリアですが、サイトによっては幾つか増える可能性がある場合もありますし、ネーミングを長くしなければならないこともあるでしょう。いった場合、ナビゲーションを横に配置すると、2列になってしまうなど限界が出てしまいます。名称が長いと、配置出来るナビゲーションの数も減っていくでしょう。いう可能性があらかじめ分かっている場合であれば、横ではなく縦に配置したほうが良いです。書籍ページをみてみましょう。「ベストセラー」「バーゲン」といった要素はそう変更されるわけでもないので、横のナビゲーションとして配置しています。書籍のカテゴリは再び再編成したり増やす可能性があるので縦に配置しているのが分かります。2種類の違うナビゲーションも今後どのように拡張するかによって明確に配置の仕方が違って来るわけです。ピクセルパーフェクトなモックアップを作るのは良いですが、どのようなデータがきても良いようなデザインにしておく必要もあります。左図のように常にナビゲーションの名称が1行で済むわけではなく、時には2行になることもあります。マークアップしているかどうか、そして背景が途中で切れていたり不自然な形でリピートしていないか考慮する必要があるでしょう。それは縦だけでなく、横のナビゲーションでも同じです。文字のサイズを変えても中央揃えに文字がきれいに配置されているだけでなく、分割線の下がグラデーションがかかって不自然ではありません。した配慮はアクセシビリティとデザインを上手く同居させるのに必要なテクニックです。どのデータが拡張される可能性があるのかを考えることは、ワイヤーフレームを考える上で重要なだけでなく、デザインやマークアップを考慮する際にも忘れてはならない重要なことです。データを細かく分散して情報の配置を考える前に、まずは大まかにデータをグループ別けし、拡張する可能性があるデータはどこに配置したら良いのか模索するというやり方は、ひとつのスタートになると思います。ブロガーにより投稿されたものです。Japan編集部の見解・意向を示すものではありません。permission.×このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。