第10回 使いやすさの最先端? 気になる3種類のCMSをレビュー | デザインってオモシロイ -MdN Design Interactive-

第10回 使いやすさの最先端? 気になる3種類のCMSをレビュー

2019.2.23 SAT

生きたサイト運営を実現するための
実践CMS導入・運用ガイド


文=清水 誠文=清水 誠
実践系Webコンサルタント。DTP・印刷・ネットビジネスの分野を中心に、ITとIAによる業務カイゼン を手がける。印 刷物とWebへ画像をシングルソースするためのカラーマネジメント、文字情報をシングルソースするECM・XML・自動組版、ビジネスを加速するITイノ ベーションが最近のテーマ。1995年国際基督教大学卒


第10回
使いやすさの最先端?
気になる3種類のCMSをレビュー


CMS業界が熱くなってきた。欧米系のベンダーは過去最高の売り上げを発表、日本でもオープンソースから商用製品まで、CMSの選択肢が増えつつある。CMSのレビュー記事もよく目にするようになってきた。今回は、そんな状況の中で、まだ知名度は低いがユニークで将来性があり気軽に導入できるCMSを3種類選定し、実際に使いながら詳しくレビューしてみた。


新感覚の「bingo!CMS」

ユニークな国産CMSが登場

最近リリースされたCMSの中で特に印象的だったのが、デザイナーでも使いこなせるという「bingo!CMS」だ【1】。従来のデザイナー向けCMSは、「テンプレートはHTMLにコメントタグを入れるだけなのでDreamweaverでも編集できる」というものが多かったが、bingo!CMSの場合はCMSのUIを進化させ、Web上の直感的な操作でページの編集が行えるようにした点がユニークだ。

サーバにインストールするタイプのCMSで、PHPとMySQLで動作する。

【1】bingo!CMS(www.bingo-cms.jp/)企画・開発・販売:(株)アイ・ティー・ディー
【1】bingo!CMS(www.bingo-cms.jp/)企画・開発・販売:(株)アイ・ティー・ディー


テンプレート=ラフな台紙

bingo!CMSでは、テンプレートを、ヘッダーとフッターなどの共通要素を含む台紙として位置づける【2】。PAGE CONTENTSと書かれたグレーの部分が、このテンプレートを使ってページを作成するときに自由にレイアウトや構成要素を決められるコンテンツエリアだ。

【2】デフォルトで付属するテンプレートのひとつ。PAGE CONTENTSと書かれたグレーのエリアは、ページ作成時に自由にレイアウトできる
【2】デフォルトで付属するテンプレートのひとつ。PAGE CONTENTSと書かれたグレーのエリアは、ページ作成時に自由にレイアウトできる


コンテンツ部分のカラム数やパーツの有無によってテンプレートのバリエーションを作成するタイプのCMSとは異なり、bingo!CMSの場合はレイアウトやパーツの組み合わせをページ作成時に個別指定することができる。テンプレートの数を抑えて管理や変更の負担を減らしつつ、柔軟なレイアウトを実現できるのだ。ハイエンドなCMS以外でこれを実現したのは珍しい。


ドラッグ&ドロップでページ完成

ページを作成する際は、中央のコンテンツエリアに、レイアウトコンテナーと呼ばれる枠のようなものをドラッグ&ドロップしていく【3】。カラム数や幅の比率が異なるレイアウトコンテナーがいくつか用意されている。枠を縦方向に重ねることも可能だ。

【3】コンテンツエリアにレイアウトコンテナをドロップすると、レイアウトが反映される。※黒いバーをドラッグして移動も可能
【3】コンテンツエリアにレイアウトコンテナをドロップすると、レイアウトが反映される。※黒いバーをドラッグして移動も可能


次に、ユニットと呼ばれるコンテンツ部品を枠の中にドロップする【4】。何をどこに入れるかの組み合わせは自由で、ひとつの枠に複数のユニットを重ねることもできる。入れるユニット次第で、枠やページの高さは伸縮する。一度配置したユニットをドラッグして移動することも可能で、試行錯誤しながらページ構成を決めることができる。

【4】次に、枠ごとにユニット(子組み)をドロップすると、AJAXですぐに反映される。※ドロップ直後はダミーコンテンツが表示される(既存ページの場合は実際のコンテンツになる)
【4】次に、枠ごとにユニット(子組み)をドロップすると、AJAXですぐに反映される。※ドロップ直後はダミーコンテンツが表示される(既存ページの場合は実際のコンテンツになる)


ドロップ直後のユニットには、ダミーコンテンツが表示されている。マウスを乗せると表示される「編集」ボタンをクリックすると編集フォームが開き、画像の指定やテキストの入力を行うことができる。すべてのユニットにコンテンツを投入すれば、ページが完成だ【5】。

【5】最後にそれぞれのコンテンツを入力すると、ページが完成する
【5】最後にそれぞれのコンテンツを入力すると、ページが完成する


自由度と制約のバランスが絶妙

このように、枠や部品をドラッグ&ドロップしながら、直感的にページを構成できるのがユニークで新鮮だ。直感的な操作を実現するために、AjaxのWYSIWYGエディタを実装したCMSが多いが、自由度が高すぎてデザインやUIの統一ができない、生成されるHTMLコードの品質を保証できない、などの理由であまり使われていないのが現実だ。

bingo!CMSの場合、サイト内で使えるUIパーツをユニットとして登録しておけば、UIの統一と更新の簡易化、構造化されたクリーンなHTMLを同時に実現できる。テキスト部分のWYSIWYGエディタでは最低限のスタイル指定しかできないようになっているため、ブランドカラーから逸脱した色を使ったり、tableタグを使ってレイアウトを変更したり、といった現場のハックも抑制できる。

さらにカテゴリやユーザーごとに使えるユニットを制限できたり、プレビュー画面上でコンテンツのインライン編集もできれば、ページ編集の理想系に近いといえるのではないだろうか。


導入後の変化に柔軟に対応できる

このbingo!CMSの方式だと、テンプレートの数が少なくてすむため、初期構築時の作業量が減るだけでなく、追加や変更などのメンテナンスの負担が低減されるというメリットもある。

一方、条件分岐などのロジックを含む複雑なテンプレートを実装せざるを得ないCMSの場合、ちょっとした変更のために開発者の作業が必要になることがある。外部に発注する場合は、書類手続きだけでも手間がかかってしまう。変更のコストは、運用開始後にじわじわと効いてくるのだ。CMSを導入したために気軽にデザインや構造を変更できなくなってしまう、というような事態は避けたいところだ。


わかりやすいナビゲーション管理

ナビゲーションに関しても、シンプルに設計されている。まず、メニューと呼ばれるカテゴリ構造を定義するのだが、このメニュー構造はURL構造と同一になる【6】。FTPと同じように、ディレクトリをつくり、その中にページを入れていくようなイメージだ。

【6】bingo!CMSでは、メニュー構造とURL構造が同じになる
【6】bingo!CMSでは、メニュー構造とURL構造が同じになる


静的にファイルを書き出すタイプのCMSではないのにもかかわらず、物理的なファイルシステムの振る舞いを再現しているのがおもしろい。

複雑なCMSの場合のナビゲーション機能

参考までに、複数のナビゲーション項目から同一ページにリンクしたり、ナビゲーション構造とは異なるURL構造をもたせることができるCMSもある【7】。リンク切れやSEO対策のために、運用中にURLを極力変えたくない場合に有効な機能だが、うまく使わないと管理が煩雑になってしまうので注意が必要だ。

【7】動的CMSの多くは、実態とメニューが独立する
【7】動的CMSの多くは、実態とメニューが独立する


カテゴリは2階層まで

カテゴリ(bingo!CMSでは「メニュー」と呼ぶ)は、2階層までしかネストさせることができないようになっている。第1階層目はグローバルナビゲーションとして扱われ、第2階層はローカルナビゲーションになる。メニュー項目は、それぞれに表示順番、URL(ディレクトリ名)、ナビゲーションに表示するかどうかを設定することができる。

カテゴリごとにテンプレートを指定

また、カテゴリ(=メニュー)ごとに、その中のページで使うテンプレートの種類や、SSLの有無、編集担当者の指定などを行う。同じカテゴリの中で設定が異なるページを混在させたい場合はどうするのか? と思ってしまいがちだが、bingo!CMSの場合はひとつのテンプレートで多様なバリエーションに対応できるため、カテゴリ単位でもそれほど大きな問題にはならないだろう。制約というよりはむしろ、「サイトはカテゴリ単位で管理されることが多いはず」という現実を想定した設計思想の表れといえる。

商用とオープンソースを選べる

bingo!CMSは基本的に商用製品であり、企業によって開発され提供されているが、ユニット数が少ない無償のオープンソース版も配布されている。サポートは不要、自力で使い倒したいという場合は、オープンソース版に挑戦するのもいいだろう。

まとめ

オリンピックを見ていて人が感動するのは、チームが一体となって高い目標に向かって努力するのを目の当たりにするからだろう。bingo!CMSや公式サイトを見ていて、同じような感動を覚えた。開発者やデザイナー、マーケッター、経営者が一丸となって、本当に使いやすい最高のCMSをつくり、安価に提供したい、という気持ちが伝わってくる製品だ。

オンラインデモやオープンソース版で気軽に試すことができる。デザイナーやビジネスユーザーにレイアウトを含む編集権限を提供したい小・中規模のサイトで、導入を検討してみるといいだろう。


Wikiを超えた『MindTouch Deki』

ギーク向けではないWiki

Wikiは、特殊な入力記法や、コミュニティサイトに特化した限定的な機能、ドライなデザインなどが理由で、一般受けしにくい状況が続いていたが、最近は操作性が改善され、企業での利用にも耐えうるようになってきた。Wetpaint、JotSpot、Confluence、Socialtextなど、使いやすさを重視したWikiをASPとして提供する企業も次々に登場した。このうち、JotSpotはGoogleによって買収され、最近発表されたGoogle Sitesのベースになっている(GoogleはWikiという名称をあえて使わなかったのだ)。

ダウンロード可能なビジネスWiki

MindTouch Dekiも同様に、Web上の簡単な操作で、サイトを構築することができるタイプのWikiだ【8】。ほかの類似Wikiと決定的に異なるのは、MindTouch Dekiはダウンロードして自分でインストールすることができるという点だ。社外にデータを置くことが禁止されている企業でも、Google Sitesのような手軽で簡単なサイト構築と管理を社内ネットワーク上で実現できるのだ。

【8】MindTouch Deki(wiki.mindtouch.com/)販売:MindTouch社
【8】MindTouch Deki(wiki.mindtouch.com/)販売:MindTouch社


C#とPHPで開発され、Monoなどあまり一般的ではないライブラリを活用して構築されている。環境が特殊なため、レンタルサーバでの稼働は難しい。専用サーバへのインストールを技術者に依頼する必要があるだろう。

ただし、Linuxにインストールした状態のVMwareイメージも提供されているため、PCやMac上の仮想マシンで動作させて試すことができる。

絞り込まれたWYSIWYG入力

Wikiでは伝統的に、大中小などの見出しを入れながら構造的なコンテンツを作成することが推奨される。そのトレンドを受け、MindTouch Wikiの入力も見た目ではなく構造を指定する機能が中心だ【9】。

【9】シンプルなWYSIWYGエディタ
【9】シンプルなWYSIWYGエディタ


充実の連携機能

外部のサイトやサービスとの連携機能も充実している。たとえば、Web API(Webサービス)と連携する公式エクステンションが100以上付属する【10】。また、LinkedInやSalesforce、SugarCMRとデータをやりとりするためのアダプタも利用可能だ(一部有償)。

【10】各種のWebサービス(API)と連携する公式エクステンションが100以上提供されている
【10】各種のWebサービス(API)と連携する公式エクステンションが100以上提供されている


さらに、デスクトップからコンテンツを操作することも可能だ【11】。

【11】WebではなくPCからのコンテンツ編集も可能
【11】WebではなくPCからのコンテンツ編集も可能


Desktop Connector:
Windowsのエクスプローラでフォルダ構造を操作したり、ファイルのダウンロードや添付が可能

Outlook Connector:
OutlookのメールスレッドをWikiページ化できる。本文だけでなく、添付ファイルも添付として残る

こういった連携機能が公式に提供されるのは、ハイエンドなCMS製品以外では珍しい。実は、MindTouch Dekiはプラットフォームであり、Wikiはフロントエンドのひとつにすぎないのだ。有償のエンタープライズ版では、外部データベースとの連携なども可能だ。

ホスティングサービスも

MindTouch Wikiはソースコードがオープンソースで公開されているが、サーバにインストールされたホスティング形式の有償サービスを購入することもできる。インストールやサーバの保守管理を外部委託したい場合に、安心のサービス形態だ(ただし、日本法人はないので英語でのやりとりになる)。

また、wik.isというホスティングサービスも提供されている。設定できる範囲が限られるが、個人利用に限り無償で利用できる。試しに利用してみて、企業の中で本格的に導入する場合は有償契約するという方法もあるだろう。

商用とオープンソースのダブルライセンス

コミュニティで開発されるオープンソース製品の場合、開発者の興味や多忙状況、人間関係などによって開発の方向性や品質が左右されることがある。コミュニティの規模が大きいと、優秀な開発者が集まり、コミュニティの自浄効果によって適切な意思決定がされ、開発も安定してくる。ところが、小さなコミュニティの場合、最初の開発者自身が使わなくなり、そのあとだれもメンテナンスを引き継がずに機能や追加モジュールがフリーズしてしまう、ということがある。

一方、今回の2製品のように企業によって営利目的で開発されている製品がオープンソース版も提供している場合、経営が成り立っている限りは開発やサポートが安定するので、安心感がある。特に、モジュールやスキンなどの周辺機能がきめ細かくメンテされ、本体のメジャーアップグレードに遅れることなくバージョンアップされていくのは心強い。

こんな場合に

WikiがWikiであってWeb CMSと異なるのは、(不)特定多数のユーザーによる編集を想定した各種の機能を持ち、それ以外の機能を切り捨てているためだ。

Wikiならではの機能:
・コメント
・バージョン間の比較
・更新時の通知メール
・ページに対するファイル添付

切り捨てられた機能:
・複数テンプレート対応
・ワークフロー

敷居が低く使いやすいWikiを、一般ユーザーに対して自社ブランドで提供したい場合や、社内に分散するシステムのコンテンツを統合したイントラネットを構築したい場合に、検討したい製品だ。


FTPベースの『CushyCMS』

最後に、発想の転換でユニークなサービスを提供するCMSを紹介したい。CushyCMSは、既存サイトのページに特定のCSSクラスを追加するだけで、その部分の更新が行えるようになるという変わったタイプのCMSだ【12】。

【12】CushyCMS(www.cushycms.com/)販売:Stateless Systems
【12】CushyCMS(www.cushycms.com/)販売:Stateless Systems


入力フォームを自動で生成

CushyCMSのサイトで登録をすませたあとは、管理対象サイトの追加を行う。ここで、FTP情報を入力すると、CushyCMSがFTPでサーバにアクセスし、HTMLファイルを取得してリストアップしてくれる【13】。その中から管理対象のページを選択すると、該当HTMLファイルがFTP経由でCushyCMSのサーバにダウンロードされ、HTMLの中から特定のCSSクラスが設定された部分を抜き出し、オンラインフォーム画面を表示する【14】。そのフォームに記入して更新を実行すると、書き換えられたHTMLファイルが、サーバにFTPでアップロードされるのだ【15】。

【13】サーバのFTP情報を登録すると、HTMLファイルがリストアップされる
【13】サーバのFTP情報を登録すると、HTMLファイルがリストアップされる

【14】対象ページのHTMLソースでclass=
【14】対象ページのHTMLソースでclass="cushycms"が設定された画像またはテキスト部分の編集フォームが、自動で生成される

【15】編集後に「Publish」ボタンをクリックすると、コンテンツが反映されたHTMLファイルがWebサーバにFTPでアップロードされる
【15】編集後に「Publish」ボタンをクリックすると、コンテンツが反映されたHTMLファイルがWebサーバにFTPでアップロードされる


編集用アカウントを発行できる

CushyCMSに登録したユーザーは、特定のページのみ更新できる制限ユーザーアカウントを発行することができる。たとえば、制作会社がCushyCMSを導入し、クライアント向けにコンテンツ更新のみが可能な編集フォームを提供する、ということができる。

こんな場合に

テンプレートやワークフローは不要で、一部コンテンツの編集のみをクライアントやビジネスユーザーに許可したい、という場合に最適だ。既存ページのHTMLを少し書き換えるだけなので、半日で導入することができるだろう。また、月28ドル払うと、ロゴやドメインをカスタマイズすることができる。

ただし、Webサーバに外部からFTPまたはSFTPでアクセスできる必要がある。セキュリティが厳しいホスティングやハウジング、社内ネットワークでの導入は難しく、レンタルサーバでの利用が中心になるだろう。


本記事は『Web STRATEGY』2008年11-12 vol.18からの転載です
この号の特集など、ほかの記事の紹介はこちら!

『Web STRATEGY』最新号の情報はこちら!

Amazon.co.jpでの購入はこちら!
定期購読はMdN Squareで!

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

MdN 最新刊

MdN BOOKS|デザインの本

週間アクセスランキング

2.11-2.17