もう不毛なコピペ作業はこりごり。3年ごとのリニューアル・サイクルから抜け出す方法はないですか？

10年以上ひとつの組織のウェブサイトを運営してきて、4回ほど全面的なリニューアルを経験しています。リニューアルのたびに数千ページものHTMLを書き直すという作業をやってきました。その不毛とも思えるコピペ作業に、そろそろ終止符を打ちたいと考えています。

でも、どうすればそれを実現できるのか？
解決策はまだないんですけど、問題解決の第一歩は課題を明確にすることだと信じてます。とりあえず、いまの悩みを整理して打開策の手がかりにしたいと思います。技術も進歩してますし、5年、10年先に不毛な作業をしなくて済むように、今のうちに準備しておきたいと思ってます。

同じ悩みを抱えている方の何かの役に立てば幸いです。ていうか、すでに解決されてる方がいたら、ぜひご教授いただきたい。。。

全面的なリニューアルの目的とは？

「全面的なリニューアルなんて意味ないのでは？」という声が聞こえてきそうです。

僕もそう思います。

A/Bテストなどをやって部分最適を重ねてウェブサイトを改善していく ほうが、効果的な場合も多いすし、費用対効果という意味でも無難です。ただ、同じフレームワーク（デザイン、ナビゲーション・システム、レイアウト・システム、パターン・ライブラリなど）でやり続けていると、部分最適化にも限度があり、結果が頭打ちになるのではないかとも考えています。

また、3年も経つとユーザ環境や技術がだいぶ進化（または変化）しているので、時代に寄り添えるプラットフォームに乗り換えないとユーザには背を向けられ、競合からは取り残される危険性が高まります。

やっぱり、以下のような「リニューアル」をしなくてはならないタイミングがどこかで出てきます。

1. 見た目のリフレッシュ
2. コンテンツの確認と再整理
3. コンポーネントの棚卸しとUIの最適化

リニューアルの技術的な課題と切実な悩み

僕が運営に携わっているウェブサイトも、そろそろリニューアル準備の時期に入っていて、いま以下の2つのようなことで悩んでいます。リニューアルサイクルでの不毛な作業をなくすために、5年後の自分（または後任の人）のために、どうにか基盤を構築したいと思って試行錯誤中です。

1. デザインを刷新したいけど、コンテンツとスタイルが完全に分離できていなくてHTMLも更新する必要がある
2. CMSを導入したくても、次のリニューアルに耐えうるシステムを構築できるかわからない

この2つの課題の解決の目処を立ててからリニューアルしないと、結局、大量なHTMLの修正作業という精神的にも体力的にもよくない不毛サイクルから抜け出せる気がしません。CMSを導入してもしっかり設計ができてないと、次のリニューアルサイクルで逆に作業が増えそうです。

コンテンツとスタイルを分離するには？

例えば、以下のようなBootstrapのグリッドシステム を例にとって考えてみます。

<div class="row">
  <div class="col-md-8">本文</div>
  <div class="col-md-4">画像</div>
</div>

これを入れちゃうとレイアウトが挿入したclassに依存することになります。「4つ分のコラムサイズ」とか「8つ分のコラムサイズ」というスタイル要素をそのまま構造に書き込んじゃってますからね。構造とコンテンツがガチガチに絡み合って切ってもきれない関係になっていますよね。現実的に考えると仕方ないんですけど。

やりたいこと

で、何がやりたいかというと、例えば以下のような要素の入ったコンテンツがあったとします。

<h1>タイトル</h1>
<img>
<img>
<p>本文　段落1</p>
<p>本文　段落2</p>
<h2>サブタイトル</h2>
<p>本文　段落3</p>
<h2>関連リンク</h2>
<ul>
  <li>リンク</li>
  <li>リンク</li>
  <li>リンク</li>
</ul>

これをHTMLを変更せずに<div class="col-md-8">のようなレイアウト構造を示すclassを入れずに、CSSだけで以下のような様々なレイアウトを構築できれば、<div>とclassで構築する「グリッドシステム」に依存せずにすみます。

検証できていませんが、たとえば、以下のようにFlexboxと:nth-childを使えば実現できるのでしょうか？

全体の構造を示す.containerのようなclassは必要になりますが、構造を示すclassを最小限に抑えたHTMLの記述ができ、コンテンツとスタイルの分離ができそうです。※以下Sassの記述です。

.container {
  display: flex;

  img:nth-child(2){
    order: 7;
  }
  ul {
    order: 8;
  }
}

あとはコンテンツとスタイルの紐付け方とかCMSの構築の仕方が課題でしょうか？（こんなことを考えていたら、CSS Zen Garden のことを思い出しました。Dan Mallさんがデザインしてるし。）

コンテンツ・パターンと表示パターンを分けて考える

先日、Dan Mall氏の「Content & Display Patterns 」というブログ記事を読んで「コンテンツとスタイルを完全に分離させるヒントはここにある！」と思わされました。

• 同じコンテンツ・パターンでも複数の表示パターンで表現できる
• 同じ表示パターンでも複数のコンテンツ・パターンを表現できる

この2点を考慮してコンテンツ・パターンと表示パターンの設計をすれば、リニューアルのたびにHTMLを書き直さなくて済むようなウェブサイトにできそうです。

詳しい説明は今後にとっておくとして、Danさんが記事中で紹介している「Fake CMS」のようなものが導入できれば、きっと不毛なリニューアルサイクルから抜け出せるのではないかと思っています。

今後、参考になると思われる情報

多分、以下あたりが今後のヒントになるんだろうなぁと考えています。また一つ一つ勉強して紐解いて実践していきたいと思います。解決策が見えてきたら、またここでシェアさせていただきます。

コンテンツ・パターンとCMS

• Content & Display Patterns
• Atomic Design
• Headless and decoupled CMS: the essential guide

FlexboxとGrid Layout

• Grid, Flexbox, Box Alignment: Our New System for Layout — 24 Ways
• A Complete Guide to Flexbox — CSS-Tricks
• A Complete Guide to Grid — CSS-Tricks
• Flexbox Playground
• Understanding the Difference between CSS3 Flexbox & Grid Layout

2016年1月26日に公開され、2016年1月27日に更新された記事です。

この記事をシェアする

• ツイート
• シェアする
• ブックマーク
• Pocketに保存