Home > ロフトワークの強さ > キーワード・コラム > マルチブランド時代のCMS活用術 着せ替えテンプレートのススメ
「新しい商品が発売されるのでWebサイトを立ち上げたい！」
「外注費用を削減するために流行のCMSを利用してみたい！」
近年のWeb制作の現場において、このような声を多く聞く事があります。
Webサイトを利用した情報発信の重要性が増し、企業が続々と自社サイトの運用を増加させている一方で、
運用に必要なコストを少しでも削減するために、CMSの導入を検討される企業が増えているようです。
しかしその一方で、近年ではこのような声も聞かれるようになりました。
「たくさんの製品ブランドがあるのでデザインが固定されてしまうCMSは利用できない」
「製品やブランドごとにCMSを立ち上げるのは費用的に難しい」
このように、製品ごとのブランディングイメージが大きく異なる業界、例えば携帯電話メーカーや出版社、アパレル業界などでは、CMSのメリットの１つである「固定されたデザインを維持して誰が更新しても崩れない」という点がデメリットとなり、CMSを活用しづらいという課題がありました。
では、このような課題を解決し、
・製品ごとに複数のサイトを立ち上げが可能
・最短/低コストで立ち上げが可能
・ブランドごとのイメージを反映する事が可能
なCMSを実現するためには、どうすればいいのでしょうか？
そのためのアイデアとして私は、デザインの着せ替えが可能な“着せ替えCMSテンプレート”をおススメします！
出来る限り最短かつ低コストでCMSサイトを立ち上げるためには既存のCMSサイトを複製し改修する方法が有効です。
そのためにはまず、簡単に既存のCMSサイトを複製する事が可能なCMSを利用する事が必要となります。
例えばFrame Works Softwareが提供するWebRelease2では、サーバー上に複数のWebサイトを作成することができ、それぞれのサイトは個別のドメインにページを配信する事が可能です。
またサイトのエクスポート/インポート機能が搭載されているので、誰もが簡単にWebサイトを複製する事が可能です
通常のCMSサイトであれば、１ページを更新するだけで関連ページ全てに反映されるような、出来る限り自動化された仕様を設計し更新者の手間を省く事が大多数です。
しかし自動化を行えば行う程、当初想定をしていた構造以外のサイトを作成する事が難しくなります。
例えば、単一の製品を紹介するサイトと複数の製品をまとめて紹介するブランディングサイトの場合、サイト構造は大きく異なります。
そのため、自動化された部分を最小限に抑え、汎用性を重視した仕様設計を行う事が必要となります。
多くのサイトに必要となる最低限のCMSテンプレートは以下の5点でしょう。
この他のCMSテンプレートについては取り扱う製品の情報特性にあわせて追加をしていく事になります。
お知らせなど最新情報の一覧を掲載するテンプレートです。
お知らせ詳細で作成されたページへのリンクを日付順に自動で表示します。
お知らせの詳細な情報を掲載するテンプレートです。
汎用的に利用可能な一覧ページのテンプレートです。
リンクを表示したページを指定することで任意の一覧を作成します。
汎用的に利用可能な詳細ページのテンプレートです。
WYSIWYGを搭載することで、より汎用性を高める事が可能です。
グローバルメニューや見出し画像など、サイトの印象を大きく左右する画像パーツがあります。
通常であればこれらのパーツはCMSテンプレートの中に埋め込まれ変更する事が出来ません。
しかし、これらの画像パーツを登録/変更できるような”共通設定テンプレート”を用意すれば、サイト内で使用するパーツをユーザーが一括変更出来るようになります。
この仕組みを利用すれば、サイトごとに使用する画像パーツを変更するだけでサイトデザインを簡単に変更する事が可能になります。
ここまでのポイントをまとめると、以下の3つが重要です。
（１）汎用性の高いテンプレートのCMSを作成し、これをフォーマットとする。
（２）新規サイトの制作が必要な際はこのフォーマットを複製して利用する。
（３）複製をしたサイトへ製品イメージにあわせてデザインされた画像パーツを登録する。
以上のようなポイントを踏まえ“着せ替えテンプレート”を取り入れるにより、製品のイメージのにあわせたデザインのCMSサイトを低コスト/最短で複数立ち上げる事が可能になるのです。
ここまで解説をしてきたポイントを踏まえ、実際に制作された事例があります。それがNHK出版様の書籍紹介サイト「すてきにハンドメイド」と「きれいの魔法」です。主に書籍の情報を取り扱い、それに付随する情報及び編集部ブログ等を掲載しています。
これらのサイトではWebRelease2を利用したCMSが導入されています。CMS導入以前には毎月十数万円の外注費用をかけて運用をされていました。また複数の編集部からのオーダーを5名程度の部署が取りまとめ外注を行う、という運用負荷の高い制作フローがとられていました。
今回のCMS導入によるサイトリニューアル後にはこれらの制作フローが改善され、更新・修正をすべて社内で実施できるようになりました。それにより、外注コスト・運用負荷の改善に加え、更新スピードの大幅な改善を実現することができました。
また、今回のCMS導入の大きなポイントであるサイト内の画像パーツを登録/変更可能なテンプレートでは下画像の赤枠部分を管理しています。ふたつのサイトでは同じCMSテンプレートを利用していますが、画像を着せ替えることで異なるデザインのサイトを実現しているのです。
2つのサイトは登録画像で印象を変えている
なお、今回の制作の際では第一段階として「すてきにハンドメイド」のCMSを2か月かけて制作しています。その上で、「きれいの魔法」用の画像を2週間で作成し新規サイトを立ち上げたスケジュールとなっています。
つまり上記のような手法を用いることで、今後新しいサイトを立ち上げる際にも最短2週間で立ち上げが可能となったのです。そして新しいサイトを立ち上げるのに必要なコストは画像パーツの制作費用のみになります。
このように複製可能なCMSの機能をうまく利用し、汎用的なテンプレートで複数サイトを構築・運用する場合に役立つ３つのTipsがあります。
Webサイトへ訪れたユーザーが始めに目にするTOPページのメイン画像は出来るだけ大きくします。それにより同じCMSを使用したサイトごとの印象を大きく変化させる事が可能になります。またこの部分へスライドショー等を搭載する事で、よりサイトの印象を差別化する事ができるでしょう。
グローバルメニュー
将来作成される新サイトのコンテンツを予測する事は難しいことです。 そのため、どのようなコンテンツがどれだけ追加されても対応が可能なように配慮をする必要があります。 一般的な横並びのデザインも実装することは可能ですが、掲載数の変化にあわせてボタン画像のサイズ等を調整する必要が出てきます。 グローバルメニューを縦ならびのデザインにしておくことで、既存のメニューボタンに影響する事なくコンテンツを追加する事が可能になります。
サイトで取り扱う情報により、見出しに入れられる文章の長さが大きく変化します。 例えばメイクやIT系の場合は横文字が多く見出し文章が長くなりがちです。 また掲載する製品ターゲットが高年齢向けになった場合は、ユーザーのブラウザ文字設定が大きくなっている場合も考慮しなければいけません。 そのため、見出しの背景として登録する画像についても、長文化を考慮した大きめの画像を用意しておく必要があります。
「きれいの魔法」サイトではこのように約３行分までテキストが長くなる事を想定した画像を登録しています。
いかがでしたでしょうか？
以上のように一般的に単一のWebサイト構築に利用される事が多いCMSですが、仕様設計を工夫すれば単一のCMSで複数のデザインのWebサイトを立ち上げる事が可能になるのです。
あんなことが出来たらいいな。こんなことが出来るようになるといいな。でもCMSではなぁ・・・と考えられている皆さん！
CMSは工夫次第で、一般に想像されているよりも柔軟に利用することができ、無限の可能性を秘めいています。ぜひ一度、今まで諦めていたCMSの利用を検討されてみてはいかがでしょうか。
部署・役職 ： クリエイティブディレクター
立命館大学卒業後、ロフトワークに入社。クリエイティブディレクターとして、大手コミュニティサイトのアバターパーツやアイテム制作、大学サイトのCMS導入などモバイルコンテンツの企画・制作から大規模なサイト構築まで幅広い案件を担当。
2010/06/02 マーケティング オウンドメディア推進チーム loftwork.jp Webマスター 山口 謙之介
FabCafe ・ ソーシャルゲーム ・ プロジェクトデザイン ・ スマートフォン ・ アクセス解析 ・ ソーシャルメディア ・ ライフハック ・ オウンドメディア ・ 教育・研究機関 ・ Webアプリケーション ・ BtoB ・ クリエイターコラボレーション ・ コミュニティサイト ・ クロスメディア ・ SaaS ・ CMS ・ ブログ ・ アバター ・ プロジェクトマネジメント ・ Webサイト ・ ECサイト ・ SNS ・ SEO ・ 携帯 ・ デコメール ・ 映像 ・ loftwork.com ・ Flash ・ 印刷
Copyright© 2000-2012 Loftwork inc. ALL Rights Reserved.
