この記事が対象としている「サイト」とは、LPのようなキャッチーさが求められたり公開期間が限定されているページのことではなく、ある程度の定期的な更新が見込まれている静的サイトを指しています。
具体的な実装方法は割愛し理念を中心に書いたポエムです。
はじめに
「更新しやすいサイト」 とはどんなサイトのことでしょうか？
フロントエンドからの視点からパッと思い浮かぶのは、
- 属人性が低い（コードが理解しやすく作業者が限定されない）
- 作業コストが低い（作業時間が短くて済む）
- 影響範囲が把握しやすい（意図せぬ箇所への影響がない）
といったところでしょうか？
そんな 「更新しやすいサイト」 を作るためには、 チーム（ディレクター、デザイナー、フロントエンドエンジニア） でどのような意識を共有すればよいのかをあらためて整理してみました。
結論をひとことでいうと
「CMSでないサイトでもCMSであるかのような意識を持つこと」
です。
以下、その理由を説明していきます。
CMSとは？
CMSとは「Content Management System」の略で、WordPressのようなコンテンツ管理システムのことです。
クライアント自身が更新したいというニーズに応えるために導入されるケースが多いのですが、しっかりと作られたCMSではたとえWebの知識がない人でも 安全で簡単に更新作業を行うこと ができます。
要素を消したり順番を並び替えたりなどの大幅な変更でも問題ありません。
つまりCMSに実装する意識を持って設計・デザイン・実装されたサイトは、 安全で簡単に更新作業を行うこと ができるということです。
イレギュラーは最小限にする
- この見出しだけ文字がこぼれてしまうので、ここだけフォントサイズを気持ち小さくする。
- この画像だけ背景色に溶け込んでしまうので、ここだけ囲み線をつける。
- 日本語と比べて英語が小さく感じるから、英語だけ大きくする。
- このアイコンだけ隙間が空いているように感じるから、ここだけ隙間を詰める。
これらのイレギュラー対応は基本的には 「CSSによる上書き」 になります（HTMLへの独自クラスの付与や、場合によってはJavaScriptも）。
イレギュラー箇所が増えれば増えるほど 「属人性が高く」 なり、 「作業コストが高く」 なり、「影響範囲が把握しにくく」 なります。
これらの問題に対応するとしたら、
- 該当の見出しの文字数の変更、または全見出しのフォントサイズの調整
- 該当の画像の修正、または全画像へ囲み線を適用
- フォントの種類を変更する
- アイコン画像を調整する
といった感じでしょうか。
「もしこれがCMSだったら」 と考えたら個別の対応はできないと思います。
デザインルールを構築する
デザインは部分部分ごとの小さな視点での調整ではなく、大局・俯瞰的な 「ルール」 として構築することが肝要だと思います。
文字サイズやマージンなどのルールが定まっていれば、基本的には部分部分ごとの調整の必要はなく、局所的な崩れも発生しにくくなります。
「もしこれがCMSだったら」 と考えたら、ルール構築の重要性がより実感できると思います。
マークアップの視点で考える
設計やデザインは HTMLでのマークアップ 意識しているとベターです。
この意識がないと レスポンシブ対応 も困難になります。
境界線は見えなくてもブロックが積まれていて、入れ子構造になっていることが意識されていれば、マージンやパディングなどは自然とルールにのっとって反映されているはずです。
最終的にはHTMLに落とし込むわけですから、設計やデザイン段階でもHTML構造の視点を持つことが望まれます。
そして設計もデザインも実装も コンポーネント 単位で考えることが大切です。
「もしこれがCMSだったら」 と考えたら、コンテンツの有無や量の増減に対応できる構造の重要性がより実感できると思います。
まとめ
「こんな考え方では『独創的』で『斬新』なサイトは作れないだろう」「実装が面倒なだけじゃないの？」「ただの怠慢」などと思われるかたもいらっしゃるかもしれません。
でもぼくはこれが長所も短所も含めた 「Webの特性」 であると思っています。
チームが一丸となってクライアントとともに満足できるようなWeb制作の理想に少しでも近づけるよう、これからもいろいろ考えていきたいと思います。