テーブル・レイアウトにより、スペースが行や列に分割された結果セルが出来ます。ほとんど場合、6 x 6 のレイアウトで十分です。ですが、時には特定のアリアに関しては、より高いレベルでの統制が必要な場合があります。
図 15 – ネストされたレイアウト
図 16 では、Web ページに既に 3 行 3 列のレイアウトが設定されています。パネルが行 2 列 2 にドロップされ、サイズは高さと幅に合わせるようになっています。またこのパネルには、独自の 9 x 9 のレイアウトが与えられています。
この結果、ページ内の一部のエリアがより細かいレイアウトになり、全ページを 27 x 27 のグリッドで埋める必要がありません。
ここで、リボンにレイアウト情報が 2 組表示されていることにも注目してください。左側では、9 x 9 レイアウト詳細を変更でき、右側は 3 x 3 内でパネルをどのようにレイアウトするか決定できます。
このようにレイアウトにパネルを組み込むことは 1 つのオプションですが、複雑な UI を作成する時は、再利用可能パーツを作成した方が良い場合が比較的多いです。
図 16 – 別のパーツを利用
図 17 はより複雑なレイアウトが示されています。この例はまだ比較的シンプルな方ですが、複雑になり始めているところです。時間が経つにつれて、更なる機能や新しい特徴が加えられていく予定です。この場合、複数の再利用可能パーツを作成して、デザインのプロセスを簡素化すると良いでしょう。
簡単な分割方法としては、ヘッダー、リストとエディターに分け、各ピースとも利用時に使えるスペースを埋めるように設計します。分割することにより、各ピースを個別に動かせるようになり、全体のレイアウト要件を簡素化できます。
複数のパーツの作成は、不必要でメンテナンスのオーバーヘッドのように思えるかもしれませんが、この分割により、長期的には作業量の軽減につながる場合が多いです。各ピースは 1 つのタスク専用となり、より小さく、管理しやすくなります。
