Blog2019.02.12hoshidaWebサイトコーディングをトップページではなく下層ページから着手した方が良い理由Web制作HTML・CSSコーディングWebディレクターシェアTweetWebサイトのデザインを行なう場合、トップページが最も重要視されます。トップページは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」という要素を付けてしまったり......完全に、全体が見えていません。お客さんが見たがったり、そもそもトップページしかデザインができていないなど、進行上の問題というのは多々あるのですが、できればコーディングは詳細ページから着手していくのが良いです。それが実現するように、スケジューリングや進行管理を行うようにしていきたいです。postsよく読まれている記事です。1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。posts1MBは何GB?データ容量の単位を整理してみた!決定!2020年の流行色Photoshopで画像の書き出しができない時の対処法!Photoshopで書き出したjpg画像の色が変わる時の原因と対処Webデザインで使用できるフォント徹底解説。XDイラストお知らせ運用Fireworksクリエーターフォントまとめ初心者サーバ用語PHPスマホアプリjQuery息抜きDreamWeaverWebディレクターJavaScriptプログラミング仕事効率PhotoshopAdobeWordPress作業効率コーディング便利ツールHTML・CSSWEB制作現場デザイン。