トワイライツ・ノーツ

読書感想と自転車と雑記

【Web】制作後のサイトの構造を守らせるか、自由度を上げるか

私は社内でも新しくサイトを制作する部署にいますので、極端なことを言えば「作るだけは作るが管理のことは考えない」といった仕事の仕方も可能です。が、できるだけそれはしないようにと努めています。

その後サイトを管理する人が困るのは良心が咎めますし、それ以前にそういう作り方をするのが気分的に嫌なのです*1

そのため可能な限りシンプルに、余分なものを削いだテンプレートを作って、こまめにマイナーチェンジを繰り返しています。

その辺りは詳しくはこちら。

【日記】2015年10月21日~10月22日 コーディング用テンプレートは極力シンプルに - たそがれノート

そういった中で悩み続けていることのひとつが『構造を守らせる作りにする』か『自由度を上げる』かのバランスです。

制作者以外の人間がサイトを運用する際の問題点

よくあるのが、運用段階で担当者が変わった際に意図せずに構成を崩してしまう、ということ。
既に用意しているスタイルなのに重複して作ってしまったり、必要なものを記述していなかったり、うっかり全ページに影響が出る修正をしてしまったり……こうなるとどんどんスパゲッティ状態のコードになっていきます。

構造を守らせるコーディング

たとえば、コーディング時h1タグに下記のようにスタイルを設定したとします。

h1 {
font-size: 20px;
font-weight: bold;
color: red;}

こうしておくと、<h1>h1見出し</h1>と記述するだけで、勝手に赤字・太字・フォントサイズ20pxのスタイルがつきます。
特に意識しなくてもh1には必ず同一のスタイルが適用されますし、htmlへの記述量は少なくて済みます。

また、作業者に見出しレベルについての理解が一定以上あるか、あるいはデザインを守るならh1→h2→h3……の順で記述していくしかないので、ある程度は構造を守ることが期待できます。

一方、この方式だとh2部分にh1と同じスタイルを使いたいんだけど……といった場合に融通がききません。

ある程度自由がきくコーディング

上のデメリット部分を解消する方法のひとつが、スタイルとコードを分離させることです。下のようにクラスを作ってスタイルを割り当てます。

CSSファイル

.title_h1 {
font-size: 20px;
font-weight: bold;
color: red;}

.title_h2 {
font-size: 16px;
font-weight: bold;
color: green;}

htmlファイル

<h1 class="title_h2">大見出し</h1>
<h2 class="title_h1">大見出し</h2>

htmlファイルの方を見ると、それぞれクラスをつけることによって見た目はh1だけど構造としてはh2、というようなことが可能です。

この方式のメリットは、見た目と構造を分離しているので、h1の直下にh3の見出しデザインを配置しなければならない場合でも、<h2 class="title_h3">といった感じにしてやれば済むところです。

一方のデメリットとして、見出しレベルに無頓着だとデザイン部分の正誤だけ見て、コピペで、

htmlファイル

<h2 class="title_h1">見出し1</h2>
<h1 class="title_h2">見出し2</h1>

という記述になってしまうかも知れませんし、あるいは、

htmlファイル

<h1>見出し1</h1>
<h2>見出し2</h2>

とクラスをつけずに記述してここだけスタイルがついてない、ということが起こることも……。

基本的には構造を守らせる作りの方を採用

私は自由度よりもサイト全体の構造やデザインの統一性が崩れる方が問題だと考えているので、なるべく「構造を守らせる作り方」をしています。サイトは運用していくものですし、自分を含めて人間はミスをするし、自分以外の人が運用しても壊れにくくする、というのがまず頭にあるからです。

そのため見出しに限らず、使いまわしの部分はできるだけhtmlファイルの方に記述を増やさなくても済むようにしています。

たとえば、見出しの前に記号がつくスタイル(表示例:「■見出し」など)は、

CSSファイル

h1:before {
content: "■";
}

htmlファイル

<h1>見出し</h1>

こういう風にしておくと、自動で「■」が見出しの先頭につきます。いちいちhtmlファイルの方に<h1>■見出し</h1>と書かなくて済むし、別の箇所で「■」を付け忘れてしまった、というミスもなくなります*2

また、上の自由がきくコーディング方式で、例外的にh2にh1のスタイルを適用するということを行っていると、まとめてh2のスタイルを変えたい、という場合に作業が煩雑になります。

同じ理由で、ひとつのタグに複数のクラスを指定するのも、うっかり抜けしやすいですし、煩雑で好きではありません。そのためなるべく1タグにつき1クラスを基本にしています。

おそらく、コーディング的にはある程度自由のきく方が推奨されているのだと思いますが、私は制作したサイトを他の人が運用するということが常なのでこんな感じです。

さっと調べてみても、こういう「サイトの構造を守らせる」という考え方が見当たらなかったのですが、他の方はどうなんでしょうか。検索ワードが良くないだけかも知れないですけど……。

修正のしやすさと崩れにくさの両立のバランスが難しい。

*1:制作時点での知識不足や考慮不足で、結果的にそうなってしまった場合はごめんなさいと言う他ない。

*2:そういう抜けやミスは結構ある