writeWired CMS 開発日誌

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

実例で学ぶコンテンツ管理の設計 Part1― 旅行検索サイトトップ

「構造型CMS」「データベース型CMS」という特性を持ったCMSのコンテンツ管理の設計手法の定番をご紹介します。

2013年 10月 23日

writeWired CMS Platform は「構造型CMS」「データベース型CMS」という特性のおかげで、旅行会社さまのツアー検索、予約サイトとして導入していただく機会が多くあります。デザインは多種多様ですが、サイトの構造は定番化しているようで、導入を続けているうちにコンテンツ管理の設計手法も定番化してきました。そこで、一般的なサイトのサンプルを用いて writeWired CMS Platform でどのようにコンテンツの管理方法を設計しているのか、シリーズでお届けしたいと思います。

各コンテンツの管理手法については、これで完璧、最適と言えるものばかりではないので、感じた課題なども合わせてお伝えいたします。また writeWired だから、という観点ではなく管理対象のコンテンツをどのように分解していったかという観点で、考え方を中心にお伝えしたいと思います。
サイトは特定のCMSで管理することを前提としておらず、ユーザビリティを優先にデザインされたものをサンプルとして使用します。またツアーの検索機能は基幹データベースと連携してシステムを開発しているのでここでは触れません。さらに、各支店の担当者とは別にサイト全体のコンテンツを管理するWeb管理者がいる前提です。

というわけで、第一回は旅行会社のツアー検索サイトのトップ画面のコンテンツ管理です。

鴻田

サンプル - ツアー検索サイトのトップ

サンプルのサイトトップ画面のデザインです。最近の旅行検索サイトではごく一般的なものだと思います。
この中の要素を8個に分けて検討を行いますが、便宜的に要素に名前をつけています。

ブランドパネル
一番目に着く情報で、6枚の画像とリンク文字列をJavaScriptで切り替えて表示します。
早いもの勝ちツアー
新聞に掲載したツアーを紹介するためのエリアです。
今が旬のツアー特集
各特集へのリンクが表示されます。
出発地別お勧めツアー
出発地をタブにして、画像バナーとテキストを6枠、小さい画像と複数のテキストがセットになった枠を最大8枠
ツアー検索
条件を指定して検索を押すとツアー検索結果に遷移します。ここはシステムによりツアーのデータを使って生成しますので、コンテンツ管理の対象外とします。
月別・都市別航空券
当月と翌月の都市別、行き先別の最安値を表示します。最安値はシステムで計算したものを表示しますが、都市別の行き先はコンテンツで管理できるようにします。
フリーワード検索
検索を押すとツアー検索結果に遷移します。ここはコンテンツ対象外とします。
共通バナーエリア
お勧めのリンクをバナー形式で表示します。

1. ブランドパネル

要望

担当支店の担当者がそれぞれ画像をテキストを編集して運用したい
他支店が何を登録しているかは見えなくしたい
バナーは掲載期間を設け入れ替えられるようにしたい

対応
支店担当者がそれぞれ別に登録でき、掲載期間設定をできるように、ということで、1コンテンツに1バナーを登録するような形式にしました。トップページを表示するテンプレートが動的に複数のコンテンツを集めて表示します。

気になったこと
コンテンツを分けたことにより各バナーの表示順の制御に課題が残りました。コンテンツの優先順位は設定できるのですが、どの支店も一番上に、と思うのでどれも一番高い優先順位になります。Web管理者が順位を都度見る、などの案もありましたが最終的にコンテンツの更新日時が新しいもの、という運用に落ち着きました。枠ごとに期間はこのコンテンツ、などのような制御もやれば出来るのかもしれませんが、運用が大変ですね。

2. 早いもの勝ちツアー

要望

登録はWeb担当者一人
各バナーは掲載期間を設け入れ替えられるようにしたい

対応
ここも「ブランドパネル」と同じように1コンテンツに1バナーを登録するような形式にしました。トップページを表示するテンプレートが動的に複数のコンテンツを集めて表示します。

気になっていたことが大きな課題に
この領域の登録担当者は一人、というのとコンテンツが分かれていることで、並び順の不便さと、単純に更新が面倒、というのが大きな課題になりました。同じ画面に表示されるものですが、リンクを並べ替えるのにも、中身を変更するにも、いちいちコンテンツを一覧から開いて更新する必要があります。また一覧では登録内容まではわからないので、更新したいリンクが登録されたコンテンツを一覧から探す、という作業も大変な負荷でした。

この、同じ領域に、同じパーツを複数登録する場合は見える単位で登録できたほうが楽、という考えから次の「出発地別お勧めツアー」のような形式を取ることしました。

なぜ項目単位？

ここでちょっと話がそれますが、このページをご覧になっている方は

――何故パーツ、項目単位に分割して登録する必要があるの？WYSIWYGエディタで編集すればいいんじゃない？

と疑問に思う方もいらっしゃるかも知れませんが、単純に見える「早いもの勝ちツアー」のサンプルでもHTMLは複雑に作りこまれている場合がほとんどです。デザインはあくまでも情報を表現するための手段で、もし、コンテンツである情報を登録する人が、WYSIWYGエディタを使って、あるいは直接HTMLを編集する、というのは本来の目的から外れますし、それに時間を費やすのは本末転倒で滑稽な話です。

「構造型CMS」「データベース型CMS」は用途に合った登録フォームを作ることができ、必要な情報（文字、画像）を登録すれば、デザインに沿って出力することができるため、このサンプルのようなサイトには最適といえます。

3. 今が旬の注目情報

要望

登録はWeb担当者一人
各リンクのパーツは掲載期間を設け入れ替えられるようにしたい
掲載枠は最大12

対応
ここでは、表示される領域は同じ画面で管理ができるように設計しました。複数の項目で構成される1パーツを、想定できる数分定義します。掲載枠は最大12なので、期間を調整して管理ができるように20個の項目を用意しました。ひとつのパーツで、画像、リードなど12個の項目。掛ける20で240の項目を定義したことになります。

管理画面はパーツ単位に並べ1画面で表示される領域をすべて登録できるようにし、公開側のテンプレートではデータが登録されていて掲載期間が有効なパーツを上から順に、最大12パーツ出力します。

思った以上の管理のしやすさ
この形式は思った以上に管理がしやすく、のちのち多くの場面で採用する方法になりました。

4. 出発地別お勧めツアー

支店がタブになっていて、タブをクリックするとしたの部分が切り替わります。

要望

担当支店の担当者がそれぞれ画像をテキストを編集して運用したい
他支店が何を登録しているかは見えなくしたい
バナーは掲載期間を設け入れ替えられるようにしたい

対応
この部分でも、今が旬の注目情報と同じように一画面で登録できるようにしたかったのですが、大きい画像サイズのバナーと、小さい画像と多数のテキストがあるバナーと違う種類があるため、パーツの集まりを二つに分けてました。パーツの数×項目の数になりますので、数は多くなります。

管理画面はパーツ単位に並べ1画面で表示される領域をすべて登録できるようにしました。ただ、パーツの種類は二つありますので、タブを使って切り替える方式で上段、下段に分けて一画面で管理できます

パーツの項目化

また話がそれますが、パーツの項目化についてのお話です。

CMSは人が運用することを想定して設計することが必要です。いくら見た目を考慮してデザインしたサイトでも、それを運用を想定している人が管理できないとなると何の意味もありません。場合によっては運用できる形にデザインを変更することも必要です。

例えば、サンプルで使っている簡単に見える左のパーツでも、人が運用できるようにいくつかの変更を経てこのような形式になりました。

最初のデザインでは、同じようなパーツを横に並べていますが、太字だったり、赤字だったりと、それぞれ微妙な差があります。

これを運用する人が文字情報の入力で登録ができるよう、項目に分解する、ということもやってできないわけではありません。例えば、以下のようになります。

いかがでしょうか？項目で分けるとなると上記のような複雑な構造に対し、何をいれたらどう表示される、ということを把握しながら登録する必要があります。当初はWYSIWYGエディタを使う、あるいはこのイメージに沿うよう画像を作成する、という案も出ましたが、管理を行う人は各支店の営業担当で日々の業務に支障の無く、かつ見易さは損なわない程度のデザインにするべく、以下のような表示と入力形式になりました。

次は実際にデータを投入してみないと事前にはわからないケースです。レイアウトを決めるときにサンプルでおく文字は固定にしてしまいがちです。静的HTMLの場合は作った時点で調整したりもできますがCMS化を前提にするとサンプルの文字は置き換わる想定のため、同じ文字を使いがちです。そうすると実際のテキストを入れた場合に以下のように微妙にレイアウトが崩れます。

テキストの量が変化しても崩れないよう、HTMLを調整するか、レイアウトを変更する必要があります。サンプルでは位置を変更しました。

最後に何の変哲もないPRのテキストリードですが、入力をどのようにするかで結果が変わります。左のサンプルのようなものですが、以外に難しかったりします。

一行(input×1)
意図しないところで改行され、かつ好きな位置で改行できない
複数テキスト(textarea)
文字数によっては意図しないところで改行され、無制限に改行できてしまう
3行(input×3)
入力する人が改行を意識でき、1行の文字数制限を行うことで意図しないところでの改行を防げる

このような試行錯誤を繰り返し、最終的に以下のような入力形式になりました。項目を適度に分割してあるのでレイアウトの変更、PC、スマホというマルチデバイスでの出力でも適切に出力することができ、汎用性、再利用性が高まります。

コンテンツ管理に構造型CMSを使用する場合は、どこまでデータ項目を分割するか、設計でもっとも重要な部分といえます。不十分ですとせっかくの再利用性が低くなりますし、細かすぎると運用が非現実なものになります。

6. 月別・都市別航空券

要望

担当支店の担当者が月別にお勧めしたい航空券の行き先を表示したい
行き先の表示順序を制御したい
表示する金額は日々変わるのでシステムで自動計算されたものを表示
行き先は掲載期間を設け入れ替えられるようにしたい

対応
これまで同様、表示される領域は同じ画面で管理ができるように設計しました。支店、月別に登録するコンテンツを分けています。

管理画面はパーツ単位に並べ1画面で表示される領域をすべて登録できるようにし、公開側のテンプレートではデータが登録されていて、当月と翌月のコンテンツを取得して、その中で東京などの出発地をプルダウンにし、月か出発地が変更されると、それに合致するコンテンツを取得、システムでその月、出発地、行き先のあらかじめ計算してデータ化した最安値料金をシステムにより取得して表示します。

あらかじめ計算された料金をどれをどこに出すか、ということを設定するためのコンテンツ管理ですので、システム設定といってもいいかも知れません。

8. 共通バナーエリア

要望

Web管理者が表示するバナーを登録したい
バナーの表示順序を制御したい
バナーは掲載期間を設け入れ替えられるようにしたい

対応
これまで同様、表示される領域は同じ画面で管理ができるように設計します。

管理画面はパーツ単位に並べ1画面で表示される領域をすべて登録できるようにします。

まとめ

今回は、構造化CMSを用いて一般的な旅行ツアー検索サイトのデータ構造の設計方法についてご紹介しました。運用時の入力しやすさや、現実的に運用できるのかなど、設計対象の要素は非常に多く時間がかかるものですが、しっかりと設計をすればサンプルのような入り組んだサイトでも、HTMLの知識の無い方が、画像と文字の必要な情報を登録する形式で効果的に運用することができるようになります。

もちろんWeb管理者がいて、HTMLが自在に操ることができれば、トップ画面の更新などもできるのかも知れませんが、営業からの公開したい情報の共有、掲載期間の制御や細かいHTMLの修正など、実際には難しいのではないかと思います。

サンプルでは旅行会社のトップ画面という形でご紹介しましたが、構造化の際の項目の粒度レベルなどは参考になるのではいかと思います。