writeWired CMS 開発日誌

多くの大規模サイトを支えた開発基盤を利用し、
大規模Webサイト向けに設計・開発されたCMS、"ライトワイヤード"の開発スタッフブログです。

コンテンツ管理の設計－データ構造を最適化する方法

コンテンツ管理の設計方法についてご説明します。コンテンツ管理にいっても最近は実にさまざまなCMS製品があり、製品や、管理したい目的により方法は代わります。

2013年 10月 13日

こんにちは。

今回は、コンテンツ管理の設計方法についてご説明したいと思います。コンテンツ管理にいっても最近は実にさまざまな製品があり、製品や、管理したい目的により方法は代わりますが、現状世の中であるコンテンツ管理とは、以下の3つに分かれるのではないかと思います。

ブログ型CMS
WYSIWYGエディタでページを生成
構造管理型CMS
管理するサイトの構造に合わせて専用のフォームを用意してページ生成
ファイル管理型
HTMLや画像ファイルそのものを管理してWebサーバーにファイル自体を送信する

writeWiredは、特に「2) 構造管理型CMS」に強いコンテンツ管理機能を持ちますので、今回はこの手法についてご説明します。使うツールによらず、このタイプのコンテンツ管利の設計手法として利用できると思います。

1.サイト全体から共通領域を分解します。

まず、サイト全ページから、共通する大きな部分を共通領域として分解します。
領域として以下のようなレベルまで分解します。この時点でコンテンツ管理の対象にするか否かを決定します。
ヘッダーやフッターなど、頻繁に更新されない領域は固定にしてしまう場合が多いのですが、全ページで共通で表示されるので、キャッチコピーなどは以外と変えたいと思うことが多いようなので、コンテンツ管理の対象になることが多いです。

ヘッダー
グローバルメニュー
サイドメニュー
サイドエリア
バナーエリア
メインコンテンツ部分
フッター

2.メインコンテンツ部分以外の共通領域の中でさらにパーツに分解します。

共通領域はサイト全体に関わるものなので、更新できるユーザーの権限の決定も必要です。
また共通領域は、ロゴ画像のアップロード、サイト名のテキスト入力、などのようにそれぞれ個別の項目を用意する場合もありますが、ヘッダーやフッターはHTMLの構造ごと書き換えたい、という場合もあります。これは更新する人がHTMLをよく理解していている場合です。
こういったケースではヘッダーHTMLの入力項目をひとつ用意し、そこにまるごと入れてしまったほうが管理がしやすくなります。
どの入力方法を選択するかは、誰が更新するか、運用をしっかりと想定した上で決定しましょう。

ヘッダー
- ロゴ画像、ロゴ画像キャプション
- サイト名
- サイトキャッチコピー
- よくある質問、会社概要、問合せなど、複数のリンク文字列とURL
グローバルメニュー
- 複数のリンク文字列とURL、画像
- パンくず
  デザイン時に各ページで表示する条件は明確に決めておきましょう。ディレクトリ、ページの構成が複雑になると、パンくずとして表示できるディレクトリ構造でない場合が多く、トラブルの元になります。
サイドメニュー
- 複数のリンク文字列とURL、画像。複数階層
  サイドメニューはメニューが多い場合、開いているページの内容によりプログラムにより動的に生成するケースが多いのですが、単純にディレクトリ構造を出すだけではないケースも多いので、表示する条件はしっかりと決めておきましょう。
サイドエリア
- 「製品のお問合せ」「資料請求」「お知らせ」など。さらにパーツにして分解します。
  「製品のお問合せ」＝タイトル、内容、リンク先URL
  「資料請求」＝タイトル、内容、リンク先URL
  「お知らせ」＝日付、内容、リンク先URL
バナーエリア
- 画像、画像キャプション、リンク先URL、新規ウィンドウで開くか。
メインコンテンツ部分
- ※後述します
フッター
- プライバシーポリシー、サイトマップ、会社概要、問合せなど、複数のリンク文字列とURL
- フッター画像

実際の設計資料サンプル

3.メインコンテンツの入力方法の決定

メインとなるコンテンツページの種類により管理方法を決定します。大きくは下記のように分類できます。

1.お知らせ、ニュース

ページタイトルと複数の見出し、本文を登録

ほとんどの場合、WYSIWYG形式で事足りますが、一見テキストと画像だけのように見えるページでも、見栄えをよくするためにHTMLがしっかりと組まれていて、元のデザイン通りにならないことがあります。構築するサイトのデザインにや要望に合わせてWYSIWYG形式にするか検討したほうがいいと思います。

2.ブログ

ページタイトルと複数の見出し、本文を登録

ブログに関しては、WYSIWYG形式が最適だと思います。

3.複数の固定レイアウトの組み合わせにより構成される。固定レイアウトの順序や回数は不定。

ページタイトルとそれぞれ固定レイアウトの内容を登録

サイト全体を見渡しながら固定レイアウトを共通パーツ化として設計します。

4.製品ページなど、カタログや雑誌の紙面の固定のレイアウト

ページタイトルとそれぞれ固定レイアウトの内容を登録

ページを構成する固定レイアウトから入力項目を洗い出し設計します。

4.表示するコンテンツと表示に利用されるコンテンツの分類

ページの構成内容により、1コンテンツに登録しきれずに他のコンテンツをパーツとして利用する場合も多くあります。
例えば、サイドエリアに表示する「製品のお問合せ」が複数種類あり、表示するコンテンツにより、どの「製品のお問合せ」を表示するか選択形式にする、などです。コンテンツで選択して「製品のお問合せ」のコンテンツの中身を取り込んで、常に最新の「製品のお問合せ」を表示することができます。
「製品のお問合せ」のようなマスターとして、あるいはコンテンツ自体がパーツとして利用されるものを分類してコンテンツを設計します。

5.コンテンツ要素の共通パーツの設計

もっとも労力のかかる重要な作業です。この設計がうまくいかないとテンプレートを作成時に項目が足りないなどの後戻りが発生するので、正確に行う必要があります。
サイト全体のページで構成要素を分解して、ひとつひとつの項目までブレークダウンします。分解する粒度、レベルは設計するサイトによって違います。

注意するのは、サイトデザインを忠実に再現する必要がある場合、HTMLの構成を理解して設計した項目に入力してHTMLを作れるか、ということといってもいいでしょう。例えば、名前でも「姓名」なのか、「姓、名」なのか、などです。特にワイヤーフレームの時点ではひとつの項目のように見えたとしてもHTMLが出来上がってくるとタグで複数の項目に分解されてデザインされている場合、同様に項目を分けないとHTMLを作ることができません。
項目にはID、入力できる文字の型（英数字、文字、数字など）、入力形式(単一行、複数行、選択、択一など)、文字の長さ、画像の場合は縦横サイズ、容量、すべてを決定します。ほとんどの場合、登録された情報をコンテンツに出力する場合、IDを使うことになるのでネーミングルールを決めておきましょう。

サイトの規模、構成にもよりますが、過去の経験だと、100以上の項目を持った共通パーツが数十個ある、というケースも珍しくありません。

実際の設計資料サンプル

6.固定レイアウトページの項目の設計

注意することは「5.コンテンツ要素の共通パーツの設計」と同様ですが、単体ページだけに注力できるので、比較すると多少楽かも知れません。作成する設計資料は「5.コンテンツ要素の共通パーツの設計」とほぼ同じものになります。

コンテンツ管理は文書構造の設計

コンテンツ管理は「何をどのように登録管理するか」ということではないかと思います。アウトプットに必要な要素を正確に調べ、それに対応したインプットを適切に設計し、入力できる箱を作る。表示する情報があれば、テンプレートを開発することで適切に表現できますし、インプットをデザインと切り離して管理することで再利用することが出来ます。

設計時に気をつけたいこと

新規にCMS化する場合、サイトデザイン時に「タイトルタイトルタイトル」や「テキストテキストテキストテキストテキスト」というサンプルで決定するのはやめましょう。実際にページを作ったとき、おもったより書くことがなく歯抜けのようになってしまったり、2,3行のつもりが10行を超え、レイアウトが崩れてしまうという事態を回避するためです。
すでにある静的サイトをCMS化する場合、「このページだけ字が入らないのでちょっとフォントを小さくしてしまえ」ということがありがちですが、こういった揺らぎも整理する必要があります。
静的HTMLの場合は作ってから変わることがありませんがCMS化して入力を始めると、レイアウトの高さがpxで指定のためあふれてしまう、ということがありがちです。HTMLは文字あふれを意識して制作してもらいましょう。
静的HTMLの場合、ページごとに読み込むcssを変えたり、コンテナーなど、XHTMLのdivの基本の構造を変える場合がありますが、CMS化はほとんどのケースでヘッダーは共通パーツ化します。例えば<div id="container" class="main">のようなXHTMLがあり、トップページはtop.css、下層ページはsub.cssというようにcssの中身で切り替える、という方法がありますが、これだとid="container"が共通パーツ化できないので、<div id="container">をつくり、その下に<div class="top_main">、<div class="sub_main">のような構造にするとCMS化しやすくなります。
登録できる現実的なコンテンツ構成、登録スケジュールを考えましょう。ある製品の紹介ページをつくり製品概要、特徴、用途、メリット、お勧めポイントなど、非常にリッチな構成のページをデザインしたとします。製品は数十種類ありますので、その分ページを作らないと公開できません。デザイン決定時は1ページなので力を入れてコンテンツを当てはめますが、実際に数十ページを量産となると想像以上の労力で登録が遅々として進まず公開が数ヶ月遅れる、というケースも珍しくありません。登録するためのリソースが少ないのであれば、それに見合ったコンテンツ構成を、どうしてもそのコンテンツ構成で公開するのであれば、1ページ作る時間を想定し、きちんとした無理ないスケジュールを立てましょう。

CMS選定は何をしたいかで決める。

ここまで、細かなコンテンツ管理についてご説明してきましたが、どこまでやるかは費用対効果をきちんと考えて決めましょう。
例えば、紙面のようなレイアウトのページでも頻繁に更新されないのであれば、都度制作会社に頼んだほうが費用を抑えることができますが、そのようなページがサイト立ち上げ時に数百ページあり継続して増えていく場合はCMS化したほうがコストを抑えられる場合があります。

頻繁に更新されない紙面のようなレイアウトのページ
CMS化した場合： 30万(開発費、更新は自社)
都度制作会社に依頼： 12万(三ヶ月に一回依頼。一回単価1万として3年分)

製品カタログのような頻繁に更新され、量の多いページが100ページ。
CMS化した場合： 30万(開発費、量産は自社で)
都度制作会社に依頼： 200万(ページ単価2万）

構築したいサイトの目的によって使うツールも変わります。会社概要、サービスなどの頻繁に更新されないページと、お知らせは頻繁に追加したいというサイトなのであれば、今回ご紹介したような構造化CMSは高い費用を使って導入しても効果はないと思います。このようなサイトの場合は静的ページ+Wordpressのようなツールが最適だと思います。
一方で、上のように製品カタログのようなページが大量にあるサイトをのブログ系のCMSで構築するのは無理があります。初期費用は抑えられるかも知れませんが、コンテンツ制作時にデザインと同じHTMLを入れていく必要が出てくるので、知識のない人にそれを登録する労力を強要するか、あるいはもともとのデザインとはかけ離れたページが大量に生産され、決して成功とはいえない結果になるでしょう。