ワイヤーフレームを作る意義と方法を前回まで述べた。規模によってワイヤーフレームが必要な画面数に違いはあるだろうが、標準的なサイトならホーム以下のカテゴリのトップページと、それ以下の文字情報掲載画面のフレーム構成までを考えておけば万全である。さっそく、ホーム以下のページに必要な機能とその構成を見てみよう。

カテゴリの紹介に特化したトップページ

　ホームからグローバルナビゲーションを介して訪れるカテゴリのトップページは、そのカテゴリの情報をダイジェスト的に紹介する場所である。基本的な編集方針はホームと同じでも、ホームと比較すると読む内容が多い体裁となる。サイトによってはローカルナビゲーションを、ホーム以下のページで初めて表示する構成のものあり、むしろこちらのページのほうがホームよりも細かい画面分割になることもある。

　サイトIDの位置やグローバルナビゲーションの体裁は全ページ共有のために位置、スタイルともに固定だ。ブランディング領域を占めるこれらの要素に変化が与えられないぶん、ホーム以下のどの部分にカテゴリ固有のスタイルを持たせるかは考えどころだろう。機能配置の構成をある程度変更して画面の切り替えを強調するのかなど、サイトのスタイルに関わる事柄もある程度視野に入れながらの作業になる。



記事の読みやすさが重要な詳細ページ

ホーム、トップと、コンテンツをまとめて紹介するページを経てたどり着く詳細情報の掲載ページは、ずばり記事の読みやすさに注視した画面設計が課題だ。定型のナビゲーションのほかは、おすすめなどアグリゲーション項目の提供は控え、パン屑リストのように閲覧履歴の経路探索を助けるツール配置にスペースを割く。

　ちゃんと読めて、しかも読んだあと自分が今どのカテゴリにいるのかが分かるという２大要件に対し、解決策を用意する段階が詳細ページのフレーム構成作りのキモである。ニュースなど本文の長い記事の場合、文字サイズの拡大縮小や、印刷ボタンなどの機能をここで初めて搭載する構成のサイトもあるが、こうした細かいツールを入れるかどうかもこの段階で考えておきたい事柄だ。

　レイアウトサイズの決定やワイヤーフレーム作りの手順確認は、HTMLなどコードに対する理解と同じくらい大切なことといえる。コードは暗記していなくてもツールでつくれる。しかし、レイアウトの下準備を肩代わりしてくれるツールはないのだから、こうして確認する段階が必要なのも頷いてもらえるだろう。

　次は、ツール任せにする前に知っておきたいコードのことについて、お話する予定だ。



【ラフの重要性】
　ソフトウエアの基本的な描画ツールで作れるワイヤーフレームだが、試行錯誤を効果的に繰り返すにはあえて手書きでラフを起こすこともおすすめしたい。PCを使うとどうしてもソフトの操作に没頭しがちではないだろうか。人間が一番慣れ親しんでいるはずの道具である手と鉛筆は、直感を反映しやすいという即効性に加えて、考えの方向性を直しやすいという良さもある。プリントアウトしたPC版ワイヤーフレームは、出来上がってしまった感じが強く、後からなにか修正を加えることを面倒にさせる。手書きなら、人の意見をどんどん加えて、その都度修正、加筆できる柔軟さが最後まで保てる。ワイヤーフレーム用グリッドの罫線だけをPCで作って、機能を書き入れる段階は手書きでやるという方法もある。