生きたサイト運営を実現するための
実践CMS導入・運用ガイド
文=清水 誠
実践系Web/CMSコンサルタント。コンテンツの見せ方(情報デザイン)、伝え方(IA、プレゼン、執筆)、管理方法(CMS)の研究と実践を続けて13年。DTPの領域も取り込むECM/CMSプロジェクトを企業側で推進中。1995年国際基督教大学卒
第3回
CMSで解決できる分類・ナビゲーションの課題とは
CMSにはいろいろな機能があるが、実際のところどう役に立つのか? 今回はコンテンツの分類とナビゲーションに着目し、サイト設計からCMS選定、導入までの具体的な事例を紹介する。
■分類・ナビゲーションの悩みどころ
前回のまとめ
CMSの導入は、Webにかかわる業務フローを整理することを意味する。サイトや組織の成長に合わせて進化させられるようなサイト設計、CMS選定、運用体制が重要というのが本連載の趣旨だ。
前回は、CMSの機能でも比較的シンプルなコンテンツ入力方法についての評価を行った。今回はサイトの設計にも影響を与える重要なコンテンツ分類とナビゲーションを取り上げる。
なお、CMSの最新動向を紹介するため、国内では知名度が低いCMSを取り上げるが、サイトやCMSの考え方、プロジェクトの進め方は応用・展開が可能なはずだ。
分類・ナビゲーションの課題
CMSなどを使わずにサイトを管理する場合は、ファイルシステム(フォルダとファイル)を使ってコンテンツを管理することになる。たとえば、企業の沿革を紹介するページを「company」というフォルダの中の「history.html」というファイルとして管理すれば、サイト訪問者にとっても管理者にとってもユーザビリティが高まる。ところが、コンテンツの量が増えたり更新頻度が高まってくると、分類やページ構成を見直す必要が生じるため、【1】のような管理上の問題を抱えることになる。
【1】フォルダとファイルによる管理の問題点
ナビゲーションに強いCMSを探す
このような課題はCMSで解決しやすいが、要件を満たす適切なCMSを選ぶ必要がある。たとえば、WikiやBlog系のツールは一般的に分類やナビゲーション機能がシンプルなことが多い。次ページで紹介する事例では、目指すナビゲーションが現実的に実現できることを確かめるために、いろいろなCMSのオンラインデモを公開しているサイト【2】を活用して簡易評価とプロトタイプ作成を行った。その結果、ひとつのコンテンツを複数のカテゴリに分類することができるCMSは意外と少ないが、外部モジュールで拡張すればDrupal 5.1で実現可能なことがわかった。
▼画像 cms03_02.gif
【2】OPEN SOURCE CMSでは、オンラインデモを多数公開している
■まずはサイトの設計から見直そう
事例:家事のコミュニティサイト
事例を用いて具体的に見てみよう。「penchanとおうち」は家事に関するコミュニティサイトだ。1996年の立ち上げ以来、家事に関するコンテンツを配信し続けた結果、ページ数が8,000を突破し、管理の負荷が高まっていった。特に分類とナビゲーションに関して前述のような課題に直面し、気軽な更新ができない状態になっていった。
CMS選定の前にコンテンツを再分類
これらの課題を解決するため、過去に何度かCMSを入れ替えてきた。今回は長期的に破たんしないCMSツールを選定するため、過去のコンテンツをすべて洗い出し、ライフスタイルの変化に応じて今後どのような家事関連コンテンツが増えるかを予測しながら、分類方法を決定した【3】。
【3】コンテンツの分類方法
家事を8つのチャンネルに分割し、各チャンネルのコンテンツを下記のように分類することにした。
・記事
ノウハウ紹介やストーリーなどの恒久的な記事。家事の習熟度や経験が増えるにつれて、コンテンツの質や量が変化していく。
・Blog
日々の記録。時間とともに蓄積していく。編集があまり加えられていない状態。
・レファレンス
書籍や道具紹介など、記事やBlogから参照される細切れのコンテンツ。
・コミュニティ
現時点では掲示板のみ。今後増える可能性があるため、掲示板のみに限定しないで定義した。
分類とナビゲーションは同時に検討
分類と表裏一体のナビゲーションについても、同時に検討する必要がある【4】。
【4】メニューの設計
Blogのナビゲーションとしては、何年も運営しているとエントリーが膨大に蓄積されるので、よくある更新日順に加えてテーマ別でまとめたナビゲーションも用意したい。たとえばおやつのチャンネルの場合、現在はおやつの種類別のみだが、作品が増えたときに季節別、手づくり難易度別、などの切り口を足せるようにしておきたい。
また、手づくりの家事というコンテンツの性質上、手づくりお菓子や手づくりソーイングなどの作品紹介が多くなるため、記事へのリンクにはタイトルと紹介文に加えて縮小画像も掲載したい。また、コンテンツが多いためにどうしてもカテゴリが多階層になってしまう。奥にあるコンテンツがイメージできるように、カテゴリに関する説明文とイメージ画像を掲載したい【5】。
【5】要件としてのナビゲーション設計
チャンネルによって規模の違いはあるが、これらの基本的な考え方は今後10年経っても変わらないはずだ。この設計(IA)をしっかりしておかないと、将来にCMSが足かせになったり、入れ替える必要が生じたりしてしまう。
■次にCMSの設定と実装を行う
Drupalの考え方
このように選定されたDrupalについて、基本的な考え方を紹介しながら実際の設定方法を解説していこう。
●カテゴリ
コンテンツを格納するフォルダのようなもの。設定したカテゴリがサイト内のナビゲーションに自動で反映される【6】。
【6】カテゴリ=ナビゲーション
カテゴリのページには、所属するサブカテゴリやコンテンツへのリンクが自動で表示される。また、カテゴリ自身が本文や画像などのコンテンツをもつことができる点が、フォルダと大きく異なる。
【7】はおやつ>種類別>タルトの編集画面だ。メニューの中で表示する短縮した題名を設定したり、順番を指定することも可能だ。
【7】カテゴリの編集画面
●コンテンツタイプ
コンテンツがどのような項目をもつかの定義。コンテンツの特性に合わせて項目を追加したり、順番を変えることができる。
【8】は「お菓子Blog」と名付けたコンテンツタイプでコンテンツを作成したときの編集画面だ。所属カテゴリを複数選択できるように設定してある。
【8】コンテンツの編集画面
コンテンツはカテゴリから独立して存在しているため、所属カテゴリを変更してもURLが変わらないのがメリットだ。URLはコンテンツに自動的に付与されるIDを基に「/node/598」というようなURLになるが、手動でURLを指定することもできる。
●ビュー(View)
コンテンツの表示方法を定義したテンプレートをDrupalではビューと呼ぶ。表示対象とするコンテンツの抽出方法、並び順番、レイアウトなどを定義する。
たとえば、「サマリー」は記事へのリンクのビューであり、カテゴリページや新着リンクで表示される。題名に加えて、コンテンツの編集画面で指定されたサマリー用紹介文、それがない場合は本文の最初の100文字を抽出して表示するよう定義した。また、「お菓子Blog」や「お菓子ページ」の画像が指定されていればサマリーの右側にサムネール画像を表示し、クリックすると拡大画像のページへリンクするようにした。コンテンツを構成する項目を細かく追加定義する意義はここにある。項目が本文から独立して登録されていれば、その項目のみを抽出して特別な表示方法を定義することができるのだ。
●ブロック
何をいつどこに表示するかの定義。画面エリアをヘッダ、フッタ、左右サイドバー、中央コンテンツに分け、表示すべきコンテンツやビューを指定する【9】。エリアが固定になるため、4カラム構成にできないなどレイアウトの自由度が落ちるが、管理はしやすい。サイトによっては不向きな考え方なので注意したい。
【9】ブロックは、画面エリアを分けて表示すべきコンテンツやビューを指定するという手法
このように、同じ機能でもCMSによって考え方が異なる。選定時にこの違いを明確にしておくとよいだろう。
楽になった更新作業
運用がスタートして数カ月になる。コンテンツライターはカテゴリやURL(ファイル名)を気にすることなくコンテンツを入力できるようになった。ブラウザ上で入力でき、HTMLの知識やエディタも不要になった。ナビゲーションやHomeの新着情報にリンクを追加する手作業からも解放された。
また、コンテンツが編集されると分類担当者が通知メールを受信し、そのコンテンツを適切なカテゴリへ所属させるという役割を分担した運用フローが可能になった。コンテンツの増加に応じてカテゴリ構成を全体的に見直したり、複数のカテゴリにひとつのコンテンツを所属される、ということも可能だ。その際はURLが変わらないため、リンク切れが発生したり、SEO効果が下がるというようなこともない。
次回は、サイト内のドキュメント(画像やPDFなど)を扱う方法について検討していく。
本記事は『Web STRATEGY』2007年 7-8月号 vol.10からの転載です
この号の特集など、ほかの記事の紹介はこちら!
『Web STRATEGY』最新号の情報はこちら!
Amazon.co.jpでの購入はこちら!
定期購読はMdN Squareで!
実践CMS導入・運用ガイド
文=清水 誠
実践系Web/CMSコンサルタント。コンテンツの見せ方(情報デザイン)、伝え方(IA、プレゼン、執筆)、管理方法(CMS)の研究と実践を続けて13年。DTPの領域も取り込むECM/CMSプロジェクトを企業側で推進中。1995年国際基督教大学卒
第3回
CMSで解決できる分類・ナビゲーションの課題とは
CMSにはいろいろな機能があるが、実際のところどう役に立つのか? 今回はコンテンツの分類とナビゲーションに着目し、サイト設計からCMS選定、導入までの具体的な事例を紹介する。
■分類・ナビゲーションの悩みどころ
前回のまとめ
CMSの導入は、Webにかかわる業務フローを整理することを意味する。サイトや組織の成長に合わせて進化させられるようなサイト設計、CMS選定、運用体制が重要というのが本連載の趣旨だ。
前回は、CMSの機能でも比較的シンプルなコンテンツ入力方法についての評価を行った。今回はサイトの設計にも影響を与える重要なコンテンツ分類とナビゲーションを取り上げる。
なお、CMSの最新動向を紹介するため、国内では知名度が低いCMSを取り上げるが、サイトやCMSの考え方、プロジェクトの進め方は応用・展開が可能なはずだ。
分類・ナビゲーションの課題
CMSなどを使わずにサイトを管理する場合は、ファイルシステム(フォルダとファイル)を使ってコンテンツを管理することになる。たとえば、企業の沿革を紹介するページを「company」というフォルダの中の「history.html」というファイルとして管理すれば、サイト訪問者にとっても管理者にとってもユーザビリティが高まる。ところが、コンテンツの量が増えたり更新頻度が高まってくると、分類やページ構成を見直す必要が生じるため、【1】のような管理上の問題を抱えることになる。
【1】フォルダとファイルによる管理の問題点
ナビゲーションに強いCMSを探す
このような課題はCMSで解決しやすいが、要件を満たす適切なCMSを選ぶ必要がある。たとえば、WikiやBlog系のツールは一般的に分類やナビゲーション機能がシンプルなことが多い。次ページで紹介する事例では、目指すナビゲーションが現実的に実現できることを確かめるために、いろいろなCMSのオンラインデモを公開しているサイト【2】を活用して簡易評価とプロトタイプ作成を行った。その結果、ひとつのコンテンツを複数のカテゴリに分類することができるCMSは意外と少ないが、外部モジュールで拡張すればDrupal 5.1で実現可能なことがわかった。
▼画像 cms03_02.gif
【2】OPEN SOURCE CMSでは、オンラインデモを多数公開している
■まずはサイトの設計から見直そう
事例:家事のコミュニティサイト
事例を用いて具体的に見てみよう。「penchanとおうち」は家事に関するコミュニティサイトだ。1996年の立ち上げ以来、家事に関するコンテンツを配信し続けた結果、ページ数が8,000を突破し、管理の負荷が高まっていった。特に分類とナビゲーションに関して前述のような課題に直面し、気軽な更新ができない状態になっていった。
CMS選定の前にコンテンツを再分類
これらの課題を解決するため、過去に何度かCMSを入れ替えてきた。今回は長期的に破たんしないCMSツールを選定するため、過去のコンテンツをすべて洗い出し、ライフスタイルの変化に応じて今後どのような家事関連コンテンツが増えるかを予測しながら、分類方法を決定した【3】。
【3】コンテンツの分類方法
家事を8つのチャンネルに分割し、各チャンネルのコンテンツを下記のように分類することにした。
・記事
ノウハウ紹介やストーリーなどの恒久的な記事。家事の習熟度や経験が増えるにつれて、コンテンツの質や量が変化していく。
・Blog
日々の記録。時間とともに蓄積していく。編集があまり加えられていない状態。
・レファレンス
書籍や道具紹介など、記事やBlogから参照される細切れのコンテンツ。
・コミュニティ
現時点では掲示板のみ。今後増える可能性があるため、掲示板のみに限定しないで定義した。
分類とナビゲーションは同時に検討
分類と表裏一体のナビゲーションについても、同時に検討する必要がある【4】。
【4】メニューの設計
Blogのナビゲーションとしては、何年も運営しているとエントリーが膨大に蓄積されるので、よくある更新日順に加えてテーマ別でまとめたナビゲーションも用意したい。たとえばおやつのチャンネルの場合、現在はおやつの種類別のみだが、作品が増えたときに季節別、手づくり難易度別、などの切り口を足せるようにしておきたい。
また、手づくりの家事というコンテンツの性質上、手づくりお菓子や手づくりソーイングなどの作品紹介が多くなるため、記事へのリンクにはタイトルと紹介文に加えて縮小画像も掲載したい。また、コンテンツが多いためにどうしてもカテゴリが多階層になってしまう。奥にあるコンテンツがイメージできるように、カテゴリに関する説明文とイメージ画像を掲載したい【5】。
【5】要件としてのナビゲーション設計
チャンネルによって規模の違いはあるが、これらの基本的な考え方は今後10年経っても変わらないはずだ。この設計(IA)をしっかりしておかないと、将来にCMSが足かせになったり、入れ替える必要が生じたりしてしまう。
■次にCMSの設定と実装を行う
Drupalの考え方
このように選定されたDrupalについて、基本的な考え方を紹介しながら実際の設定方法を解説していこう。
●カテゴリ
コンテンツを格納するフォルダのようなもの。設定したカテゴリがサイト内のナビゲーションに自動で反映される【6】。
【6】カテゴリ=ナビゲーション
カテゴリのページには、所属するサブカテゴリやコンテンツへのリンクが自動で表示される。また、カテゴリ自身が本文や画像などのコンテンツをもつことができる点が、フォルダと大きく異なる。
【7】はおやつ>種類別>タルトの編集画面だ。メニューの中で表示する短縮した題名を設定したり、順番を指定することも可能だ。
【7】カテゴリの編集画面
●コンテンツタイプ
コンテンツがどのような項目をもつかの定義。コンテンツの特性に合わせて項目を追加したり、順番を変えることができる。
【8】は「お菓子Blog」と名付けたコンテンツタイプでコンテンツを作成したときの編集画面だ。所属カテゴリを複数選択できるように設定してある。
【8】コンテンツの編集画面
コンテンツはカテゴリから独立して存在しているため、所属カテゴリを変更してもURLが変わらないのがメリットだ。URLはコンテンツに自動的に付与されるIDを基に「/node/598」というようなURLになるが、手動でURLを指定することもできる。
●ビュー(View)
コンテンツの表示方法を定義したテンプレートをDrupalではビューと呼ぶ。表示対象とするコンテンツの抽出方法、並び順番、レイアウトなどを定義する。
たとえば、「サマリー」は記事へのリンクのビューであり、カテゴリページや新着リンクで表示される。題名に加えて、コンテンツの編集画面で指定されたサマリー用紹介文、それがない場合は本文の最初の100文字を抽出して表示するよう定義した。また、「お菓子Blog」や「お菓子ページ」の画像が指定されていればサマリーの右側にサムネール画像を表示し、クリックすると拡大画像のページへリンクするようにした。コンテンツを構成する項目を細かく追加定義する意義はここにある。項目が本文から独立して登録されていれば、その項目のみを抽出して特別な表示方法を定義することができるのだ。
●ブロック
何をいつどこに表示するかの定義。画面エリアをヘッダ、フッタ、左右サイドバー、中央コンテンツに分け、表示すべきコンテンツやビューを指定する【9】。エリアが固定になるため、4カラム構成にできないなどレイアウトの自由度が落ちるが、管理はしやすい。サイトによっては不向きな考え方なので注意したい。
【9】ブロックは、画面エリアを分けて表示すべきコンテンツやビューを指定するという手法
このように、同じ機能でもCMSによって考え方が異なる。選定時にこの違いを明確にしておくとよいだろう。
楽になった更新作業
運用がスタートして数カ月になる。コンテンツライターはカテゴリやURL(ファイル名)を気にすることなくコンテンツを入力できるようになった。ブラウザ上で入力でき、HTMLの知識やエディタも不要になった。ナビゲーションやHomeの新着情報にリンクを追加する手作業からも解放された。
また、コンテンツが編集されると分類担当者が通知メールを受信し、そのコンテンツを適切なカテゴリへ所属させるという役割を分担した運用フローが可能になった。コンテンツの増加に応じてカテゴリ構成を全体的に見直したり、複数のカテゴリにひとつのコンテンツを所属される、ということも可能だ。その際はURLが変わらないため、リンク切れが発生したり、SEO効果が下がるというようなこともない。
次回は、サイト内のドキュメント(画像やPDFなど)を扱う方法について検討していく。
本記事は『Web STRATEGY』2007年 7-8月号 vol.10からの転載です
この号の特集など、ほかの記事の紹介はこちら!
『Web STRATEGY』最新号の情報はこちら!
Amazon.co.jpでの購入はこちら!
定期購読はMdN Squareで!