Webサイトコーディングをトップページではなく下層ページから着手した方が良い理由

Webサイトのデザインを行なう場合、トップページが最も重要視されます。トップページはWebサイトの顔であり、基本的に最もアクセス数の多いページです。ユーザーに与えるサイトの印象を左右するのもトップページと言えるでしょう。

そのため、まず初めにデザインを作成するのはトップページです。デザインコンペなどの場合には、トップページしか作成しないというケースもあります。

しかし、制作フェーズがコーディングに進んだ場合は、トップページから取り掛かるのはお勧めできません。なるべく記事ページ、詳細ページなどと言われる本文のページからコーディングしましょう。本記事ではその理由を解説します。

トップページはサイト全体で見るとイレギュラーなレイアウト

トップページは最も重要なページであるがゆえに、サイト全体から見ると逸脱したレイアウトやデザインになっている場合が多いです。そのため、トップページで作成する要素はトップページにしか登場しないレイアウトであったり、独自のデザインであることが多くなります。

このイレギュラー性が、トップページからコーディングした際に多くの問題をもたらすのです。

コーディングは共通要素から作業すると格段にスムーズ

サイト全体でCSSの記述量が膨大になる場合は、コンテンツごとにCSSファイルを分割して作成します。例えばサイト全体にかかわるCSSは「common.css」、概要ページのものは「about.css」、トップページのものは「top.css」といった具合です。

このとき、作成していく順序としては、できれば「common.css」などのサイト全体にかかわるものから進めていきたいです。なぜなら、「common.css」などの共通・全体へのスタイルはCSSのカスケーディングの最も上流に位置するからです。

きちんとデザインされたWebサイトであれば、「about.css」でのみ登場する独自の要素は「common.css」に記述されているものの細部を変更したものであるはずです。例えば少し文字サイズが大きく、バックグラウンドカラーの異なる見出しなどです。文字サイズと背景色が異なっていても、見出しの上下の余白やフォントは他のページと共通しているはずです。そのような場合においては先に「common.css」を記述したほうが絶対的に楽です（というか、そのようにCSS自体が設計されています）。

楽なだけではなく、メンテナンスの点からもこのような作りが重要です。例えば後からサイト全体のフォントを変更するといった作業が発生した場合に、適切にカスケーディング設計をしていれば記述を一か所変えれば済みます。これが不適切だと、大量のCSSファイルを修正しなければならなくなってしまいます。（逆にサイト全体のフォントを変えるような場合に、あるページだけは変わってほしくないというケースもあります。そのような場合にはもちろん、あえてカスケーディングを断ち切るような設計をします。）

トップページのデザインがイレギュラーなのであれば、トップページは後からコーディングしたほうがスムーズということになります。

同じ命令は何度も書きたくない

トップページでイレギュラーなのはレイアウトだけではありません。見出しやボタン、リスト、表などの細かい要素も、トップページだけデザインをかえることが多々あります。

Webサイトにおいて、見出しやリストなどサイトを構成しているパーツのデザインには、サイト全体を通して一貫性を持たせます。とはいえ、アクセス数が多く、伝えたいことの多いトップページでは、その一貫性よりもトップページ独自の要件の達成を優先させる場合が多いです。そうすると、トップページにのみ独自の見出しやボタンが出現することになります。

その見出しやボタンが、下層ページの要素とはかすりもしないデザインなのであれば問題ないのですが、細部が微妙に異なるような変化であれば、前述の理由でトップページは後回しにしたいです。

また、プログラミング言語全般に通じる話ですが、可能な限り同じ意味の記述は一度だけしか書きたくないものです。当然CSSにおいても同じです。細部が微妙に異なるだけの見出しが2つある場合は、共通要素が書かれたCSSと、細部の差分だけのCSSで実現したいです。

もしトップページに、共通の見出しとは細部が異なるだけの見出しがあるのに、トップページからコーディングしてしまうと、どうなるでしょう。同じ意味の記述を「common.css」と「top.css」両方に書かれてしまうか、あとから「top.css」の内容を一部「common.css」に書き写すなどの手間が発生します。これはナンセンスです。

記事ページなどの詳細ページをコーディングする際には、サイトで登場するすべての見出しやボタン、リストなどを一挙にコーディングします。詳細ページからコーディングすればサイト全体に登場する要素が出そろうことになるので、ナンセンスな事態を防ぐことができます。

へッダーやフッターもトップページではイレギュラーなことが多い

またへッダーやフッターなどの、配置さえサイト全体で共通となっている要素であっても、トップページでは若干デザインや挙動が異なるということがあります。

HTMLを記述していく際、全ページで共通している要素などはインクルードなどを使用してソースとしては一か所にしたいです。ところがトップページだけはそれが異なる場合があると、制作が非常に厄介になります。このあたりもやはり下層の詳細ページなどから着手して行きたいです。

さいごに

私も長い間、トップページから先にコーディングを行うということをしてきました。なにしろデザインが最初にできるのがトップページであり、お客さんが最初にコーディングされたものを見たがるのもトップページだからです。

しかしそのために不適切なコーディングを沢山してきてしまいました。例えば、トップページ以外のすべてのページのbody要素に「second_page」という要素を付けてしまったり……完全に、全体が見えていません。

お客さんが見たがったり、そもそもトップページしかデザインができていないなど、進行上の問題というのは多々あるのですが、できればコーディングは詳細ページから着手していくのが良いです。それが実現するように、スケジューリングや進行管理を行うようにしていきたいです。