「よーし、俺様のサイトをオープンしちゃうぞ！」と作ってはみたものの、どこからみてもシロートまるだし。「あれ？こんなはずじゃ……」とお悩みのみなさんに、手軽にできる「脱・シロートテクニック」を大公開。 デザインも内容もテクニックも、めざせバージョンアップ！ 白熊　吾郎 　 GORO SHIROKUMA Web & 映像業界で生きる（モーション）グラフィックス屋。マスコミインハウスからフリーに。 ■バックナンバーへ ■ サンプルサイト制作（3） Webサイトの制作手順は人それぞれですが、私は大きいものや後ろになるものから順に作るようにしてます。理由は簡単。大きいものや後ろになるものほど、後で直すのが大変だから。 これは過去に何度も失敗して学んできた上での「私」の経験則です。ですから違うやり方もたくさんあるはず。Web制作はこまごまとした繰り返し作業がとても多い職種。少しでも安全な近道が見つかれば、それを何度も繰り返して消化し、仕事or趣味の制作に生かせれば、それがあなたの制作スタイルだと思います。 テーブルの組み方を考える 背景画像の次はインターフェイス周りのパーツを切り出していきます。ここで大事なのが、画像をどう切ってはめ込むか？　しっかり設計すればなんの問題もありません。 ここで使うのがテーブル。もとは表組みを作るためのタグですが、これをレイアウトに使うのは常識です。文字やボタンやらをセンタリングや左右揃えだけで並べているサイトをよく見かけますが、細かなレイアウトができない＝テーブルが使えない、というのがバレバレです。 テーブルは外から大きく、なるべくシンプルに区切るのが成功のコツ。テーブルは入れ子（テーブルの中にテーブルを作ること）も可能です。 テーブルのひとつひとつの枠内のことをセルといいます。セルは連結したり分割することもできますが、あまりやりすぎるとテーブルが崩れてしまいます。表計算ソフトのノリでいじってしまうと、たいてい表示がおかしくなるので注意してください。 テーブルの区切り方を設計する。ひとつのテーブルはシンプルにし、 複雑な部分は入れ子にする。まず全ページで共通のテーブルを決める。 まずラフスケッチを見ながら、まず大きな区切りを考えます。これは全ページで共通となる骨格です。今回はページの最大幅が720ピクセル／全体的に左寄せ、となっていますので、それが狂わないように 　１行目：ヘッダ（上インターフェイスエリア） 　２行目：左インターフェイスエリア／コンテンツ 　３行目：フッタ としました。テーブルとしては２列×３行で、１行目を横に連結、２〜３行目の１列目を縦に連結です。この程度の連結ならテーブルが崩れることはありません。 各セルの寸法はラフスケッチに描いてあるはずですが、実際に画像を作ってみてバランスが悪ければ変更も可能です。変更したらテーブルの設計もやり直すのを忘れずに。 コーナーごとのテーブル設計。将来コーナーが増える予定なので、 縦方向にボタンが追加できるようにしてあるのがポイント。 次にインターフェイスエリアのテーブルを考えます。今回はコーナーごとの変化とサブコーナーの変化もあるので、それぞれを独立して調整できるようにしてあります。 まずコーナー選択は６コーナー＋トップページに戻るボタン、その間の飾りで計８個。テーブルは１列×８行となりますが、将来コーナーを増やす予定にしてあるので（#13参照）、ボタンが増やせるようスペースが必要です。今回は縦に配置するので、コーナーが増えてもセルを１行増やしてボタンを挿入すれば対応できます。飾りの部分も独立して移動するので問題ありません（→081参照）。 　 サブコーナーのテーブル設計。コーナーごとにサブコーナーの数が違うので、 ３行目の２列目は画像の増減で調整する 最後はサブコーナーのテーブルです。左上にロゴが来るのでセルを縦に連結し、各行の２列目にボタンなどのパーツをはめ込みます。１行目はサイトタイトルが、２行目にはコーナー名が、３行目にはサブコーナーの選択ボタンが入ります。サブコーナーの数はコーナーによって違うので、サブコーナー選択ボタンは左寄せにして配置します。 これで大まかなテーブルが設計できました。なおコンテンツの部分はページごとにレイアウトが変わるので、ここではまだ未決。逆に各ページごとにレイアウトの自由度を残しておく、とも言えますね。 【Point】 086：テーブルは役割別に入れ子にしてレイアウトせよ！ [ NEXT→]