作らなきゃいけないページが大体決まったので、次はWebページのレイアウトを考えた。

調べてみると、今時大体のサイトはヘッダーがあり、フッターがあり、サイドバーがあり、メイン記事がありという感じでもはや定番化しているので、その中から選んで自分なりにモディファイしただけ。
この段階で決めたレイアウトが、結局ほとんどそのまま実際にこのWebサイトで使われているので、どのようなレイアウトを採用したかはみなさんご覧の通りだ。

そのようにレイアウトの決め方は適当だったのだが、一方でページの横幅や、ヘッダー、フッター、サイドバーのサイズなどは結構気を遣った。

サイトを訪れてくる人のディスプレイ解像度は様々なので、その様々な解像度のディスプレイで見られた場合にどのように見えるかはよく考えておかないといけない。実際にヘッダー、フッター、サイドバーなど、Webページ上の各スペースの枠を表示するHTMLを作って、画面の解像度をいろいろ変えてどう見えるかのテストもした。

この段階で100％厳密に決める必要はないが、Webページ上の各スペースの大体の大きさのイメージは掴んでおいた方がいい。

ちなみに、このサイトの最大の目玉であり肝である漫画ページの画像サイズも、ここでいろいろテストして決めた。

HTMLのコーディングに入る前に、サイトの階層構造とURLはあらかた決めてしまおう。
コーディングしながらちまちまとHTMLファイル名を考えていたのでは、製作に手間取る原因になる。
※ちなみにコーディングというのはプログラミングの世界の用語で、プログラミング言語によってプログラムを作ることをいいます。

私の場合は表計算ソフトにサイトトップページからの階層構造と各ページのファイル名を書き込む形にした。
あとで追加、修正する場合も表計算ソフトだと便利だ。