20140904 One Coin College CMSを使いこなすスキル

39
(c) Diverta.Inc 株式会社ディバータ ― イケてるディレクターに必要なCMSスキルとは!? ― サイトの目的に応じてCMSを使いこなす! Tetsuo Morikawa 2014/09/04

description

サイトの目的に応じてCMSを使いこなすために必要なスキルとは?

Transcript of 20140904 One Coin College CMSを使いこなすスキル

Page 1: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc

株式会社ディバータ

― イケてるディレクターに必要なCMSスキルとは!? ―

サイトの目的に応じてCMSを使いこなす!

Tetsuo Morikawa2014/09/04

Page 2: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 1

講師紹介

■バックグラウンド

ディレクション・企画経験

カカクコムの保険カテゴリのコンテンツ責任者として、集客責任を持ったWebディレクションを経験。

エンジニア経験大学在学中にWebアプリケーションの受託事業を立ち上げ、自らも開発を経験。

データ統合経験

ミスミグループ本社のEC部門にて、データ主導

マーケティングの導入に携わり、大量データの分析・統合などを経験。

その他

2013年グロービスMBA、2007年中小企業診断士。

■森川哲夫

• 株式会社ディバータ

取締役 経営企画兼Webディレクター

• RCMSというSaaS型のCMSを提供している会社

• おかげさまで1800社を超えて導入頂いております

• CMSメーカー側の立場と、これまでWeb

に関わってきた経験から、今回のお話をするに至りました

Page 3: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 2

ゴール

• 「こういうサイトは、こういう風にCMSを使うのがいい!」と言い切れる

• 「選ぶ(選択)」「作る(導入・構築)」「回す(運用)」の3面から見て勧められるものを。

目的

えらぶ つくる まわす

CMS選定 CMS導入・構築 CMS運用

サイトの

意思決定者

IT担当者制作会社 導入企業

プロセス

関係者

ディレクター割と重要な立場

Page 4: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 3

目的

• 大別して2つ。集客増か、コスト減。

• 集客増はマーケティング課題、コスト減はオペレーション課題。

目的

マーケティング効果

オペレーション効率

分解!

大別して2つ! Function

CostValue=

提供する価値の算式

Page 5: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 4

目的/マーケティング

• マーケティングにもいくつかある

• みなさんに関わりが深いのは、おそらくコンテンツ・マーケティング

デジタル・マーケティング オムニチャネル

コンテンツ・マーケティング

リスティングSEO

DMP/DSP

リアル

O2Oアプリ

ブランディング

オウンドメディアテキスト

ストーリー

動画

ムービークリップ

マーケ

Page 6: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 5

目的/マーケティング/コンテンツマーケティング

• コンテンツはあらゆる活動に不可欠。コンテンツ・マネジメントは永遠の課題。

• コンテンツのオーナーや発信主体は事業主。目先のトレンドに振り回されず、大きく構える。

消費者 事業者

事業者

コンテンツ発信!

受け手にとって有益な情報

• オウンドメディア• パブリシティ• イベント• メディア• 広告• サイネージ

手段いろいろ

マーケ的成果

認知・評価

コンテンツ・マーケティング

ただ発信するのではなく、事業的に意味のある継続的な活動にすることが大事

Page 7: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 6

そもそもCMS

• CMSとは?

CMS本体

発祥

多くの機能を取り込み進化、Webサイトを構築する基盤になっている

Page 8: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 7

CMS/共用システムの大きな矛盾「汎用性と先進性」

• CMS化される=汎用的で枯れたもの<=>Web/スマホ/Deviceなどテクノロジーの進化は止まらない

• どこまでを取り込むか、どのようにシステム環境を進化させるか、どのように時代についていくか

http://evolutionofweb.appspot.com/?hl=ja#/evolution/day

画面更新

HTML直書き

動的にできる

ブラウザ対応

ガラケー

スマホ アプリ

Tech

User図・グラフ:http://evolutionofweb.appspot.com/

Page 9: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 8

CMS/とらえ方

• CMSの切り口として、使われ方やサイトの特性から類型しておく

• ディレクターの立場からCMSを眺めたときには、作るよりも使う意識を強く持つ

• いま何が実現できるかという視点と、何を作らなくてよくなるか、何をしなくて良くなるか?という視点を持つ

• 手段としては、フレームワーク、パッケージソフト、SaaSなどCMSの特性を押さえておく

目的

サイトのゴール ディレクター

手段としてのCMS

「つかう」意識 「つくる」意識

•使われ方はどうか•サイトの特性は何か

•何を作らなくてよくなるか?•何をしなくてよくなるか?

•あれが実現できる•これも入れよう

「つくる」意識よりも、「つかう」意識を強く持つ。

•フレームワークとして

•パッケージとして

•SaaSとして

いますぐ実現できるか?何が得られるか?どう役立つか?

Page 10: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 9

えらぶ

CMSそのもの

• 数がある

• 特性がある

• 費用がある

• 利用者

• 構築者

• 選定の切り口は様々

ネタとして比較データをもっておくのは良いが、細かい比較はあまり意味がない

Page 11: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 10

えらぶ/CMS/数

• ものすごい数、ECまで入れるとさらに

• どこまでをCMSと呼ぶかもあいまい

• 6選、15選などあるが、使って試したことのあるひとは実際どれくらい・・・?

英語のWikipediaのリストで180(日本のCMSは入っていない)http://en.wikipedia.org/wiki/List_of_content_management_systems

数が多い

分野が広い

ECSite Social Smart

情報がない・・

結局 WordPressとか、知っているCMSの情報しかなかったりする

180

andOthers

Page 12: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 11

えらぶ/CMS/特性がある

• 機能はいろいろ、特性もいろいろ、出来ることだけで見ると差がでないことも

• 「設計思想」や「スタンス」も見たほうがいい

• かっこよくいえば「プロダクト・ビジョン」が明確かどうか

http://wordpress.org/about/philosophy/

Out of the Box

Design for the Majority

Decisions, not Options

Clean, Lean, and Mean

Striving for Simplicity

Deadlines Are Not Arbitrary

The Vocal Minority

Our Bill of Rights

コンテンツは蓄積し、Webサイトは進化させる世の中の9割のWEBサイトはシステム化できる関連によってコンテンツを多種多様に表現する「車輪の再発明」をなくす情報発信の楽しさを広めたい

数多くのテンプレート充実した拡張

使いやすさと裾野の広がり

コンテンツとデザインの分離開発リソースの代替策

高機能なWebサイトの実現

デザイン性の高いサイトより簡単な構築

構築プロセスの支援機能2000年当初からずっとSaaS

Page 13: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 12

えらぶ/CMS/特性/動的・静的

• 動的:お知らせページのように、テンプレート(型)にあてはめてページを量産するもの

• 静的:丁寧に1ページずつ手作りしていくようなもの

量産型(動的ページ) 手作り型(静的ページ・スタティックページ・静的コンテンツ)

概要

メリット 1. 同じようなレイアウトのページを、管理画面からで比較的簡単に量産できる。2. ページをページが所属するグループやカテゴリによって

グループ・カテゴリごとにページを階層化し、自動的に一覧を生成することができる。3. ページの情報を変更すると、自動的に一覧にも変更が反映される。

1. オリジナリティの高いレイアウトをつくることができる。2. イレギュラーな階層構造を実現できる。

デメリット 1. レイアウトをイレギュラーに変えることができない。2. 階層構造をイレギュラーに変えることができない。

1. 管理画面で簡単に更新することは難しく、HTML等でページをひとつひとつ作成する工数・知識が必要。

2. ページが増えた場合、情報の整理、階層を手動で設定する必要がある。3. 一覧ページを設ける場合も手作りする必要がある。4. 詳細ページを修正した場合、作成した一覧ページの情報は手動で修正する必要がある。

向いているページ

(例)

更新頻度の高いページ、量が多いページ、追加発生する可能性が高いページ外部データと連携するページ、CSVで一括取込(作成)したいページ など

• 新着情報• 製品の詳細情報• 求人情報 etc…

特殊性の高い1枚きりのページ、オリジナリティの高いレイアウトのページ、イレギュラーなページ、定型化が難しいページ など

• 会社情報• 特設ページ• 個人情報のお取扱いについて etc…

詳細

詳細

一覧

階層が整理され、一覧が

自動生成され、一覧と詳

細は相互にリンクしている

同じレイアウトのページを管

理画面を使って比較的簡

単に量産できる

量産するページ

手作りするページ

一覧

一覧が必要な場合は手

動で階層の整理、一覧

ページの作成が必要

自由にレイアウト、

階層整理ができる

Page 14: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 13

サイト管理機能ページ設定、サイトパラメータ設定、更新履歴、バッチ処理設定、QRコード自動生成、バナー広告、ベーシック認証、アクセス制限、etc…

コンテンツ管理機能ブログ、トピックス、写真、カレンダー、地図情報、動画、会社概要、沿革、採用情報、スポーツ情報、外部データ連携機能(ぐるなび、フォト蔵)、簡易ショッピング、Q&A、用語辞典、etc…

メンバー管理機能会員管理、権限管理、ログイン履歴、ワンタイムパスワード発行、メンバー情報一括アップロード、メンバー解析、etc…

コミュニケーション機能お問い合わせ管理、アンケート、掲示板、コメント受付、トラックバック、メールマガジン、Twitter連携、投票(記事のお役立ち度)、関連商品表示、etc…

その他機能オンライン画像編集機能、RSSリーダー、ファイル管理、WYSIWYGエディタ、多段式承認ワークフロー、サイトマップ自動生成、ページコピー、目的別管理画面の表示、etc…

解析機能GoogleAnalytics、アクセス解析、ヒートマップ、アンケート結果集計&グラフ表示、タグ埋め込み式解析ツールとの連携、etc…

サイト向上機能 SEO、LPO、EFO、サイト紹介&集計、関連記事表示、投票、etc…

えらぶ/CMS/特性/機能/主な機能の一例

RCMS標準機能の一例

• 今の機能も大事。だが、状況は数年後に変わっていくことも考えておくこと

• 機能名だけではなく、本当に必要なものは具体的に細かく機能差を比較すること

Page 15: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 14

えらぶ/CMS/特性/機能/多言語機能の例

コンテンツを言語毎に入力するだけで、サイトへの反映・構築は自動で行われる。

英語版

日本語版

スペイン語

フランス語

TOP

英語版

日本語版

スペイン語

フランス語

英語版

日本語版

スペイン語

フランス語

複数サイト必要でサイト構造も変わる

日本語版

TOP

スペイン語

TOP

フランス語

TOP

英語版

TOP

日本語版日本語版日本語版

スペイン語スペイン語スペイン語

フランス語フランス語フランス語

英語版英語版英語版

言語の分だけ、管理するサイトが存在する。

ワンタイムパスワードを発行し、翻訳者へ依頼のメールを送付することもできる。

1サイトの1コンテンツに翻訳データを持つので、構造は同じ

• 例えば「多言語機能」でも、データの持ち方は様々

• 別サイト・別ページ構造でデータを持つ場合、1段落単位あたりでデータを持つ場合、など

RCMS翻訳機能の例

Page 16: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 15

えらぶ/CMS/特性/機能/検索

誰でも気軽に使えるというものではないが、都道府県検索や条件検索などは標準機能の組み合わせで構築しやすく出来ている

WordPress RCMS

• 例えば「検索」でも様々

• カテゴリでの絞り込みが出来ればいいものから、エリア、職業、こだわり条件などで絞るものまで

カスタムフィールド設定

データ抽出用のカスタマイズ

表示側に表示用記述

拡張項目設定

データ抽出パラメータ設定

表示側に表示用記述

本体機能は軽量につくられているので物件検索部分はクエリ部分からカスタマイズが発生

例えばWPとRCMSで不動産検索サイトを作ろうとすると・・・

違い

Page 17: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 16

えらぶ/CMS/費用

• 有償・商用と、無償・オープンソース

• SaaS型は運用費込、パッケージはホスティング別、ホスティング業者が無料CMS提供の場合も

グラフィック・デザイン

コーディング(動的)

CMS基本設定

コーディング(静的)

テスト・検証

CMS組込・適用(動的)

CMS組込・適用(静的)

データ移行

ドキュメント

WEBデザイン

組込

カスタマイズ開発開発

移行

スマホ

n%

n%

PC +

×

×

進行管理

ディレクション+

ライセンス費用+ +

×

資料・検証+

×

構築 保守・月額

CMS

OSS(無料)

保守サーバ(クラウド)

SaaS

保守SaaS (+カスタマイズ)

商用 保守サーバ(クラウド)

パッケージ

SaaS

サイト構築

Page 18: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 17

カスタマイズをした時の守備範囲価格 高

価格 低

規模 小 規模 大

商用CMS

【ブログタイプ】・MT・WordPress etc…

えらぶ/CMS/ポジショニングの例

デフォルト時の守備範囲

RCMSの説明で用いている図

Page 19: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 18

えらぶ/利用者

• 導入の目的・サイト規模のレベル感は異なるので、手段を合わせる

• 更新手段になじむか(リテラシー)、運用を担うことができるか

• 目的・手段を理解するための切り口を類型化しておくと便利

個人事業主 ベンチャー 中堅B2C/B2B 大企業/上場

数多くの利害関係者

少ない利害関係者 アーリーアダプター 限定された取引先

方針次第リテラシー個人依存 少数精鋭 IT担当

運用効率コンテンツ少ない コンテンツ充実化 企画してつくる

少人数片手間で運用 兼任で運用 1部門だけで担当

閲覧者

対応力

掲載量

体制

Function

CostValue= 本気度

利用者のタイプによって、会う前に想定する例として・・・

Page 20: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 19

えらぶ/構築者

• 慣れている

• QCD高い

• 再利用できる(応用・展開できる)、スクラッチ or CMS

慣れている不慣れ

再利用できる

最初から

QCD高い

QCD低い

自社開発CMS

減少

慣れていないCMSは、パスを明確に

Page 21: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 20

えらぶ/まとめ比較表の効率よい作り方

• 選定基準は様々、比較方法そのものの類型をしていくのが良さそう

• 絞り込み/星どり表/選抜方式など、選び方も様々。複数組み合わせるのがいい。

大分類で絞る

B動的

静的

Aホスティング

SaaS

多言語 マルチデバイス

細かく比較する

CMS機能 コスト 運用・セキュリティ

A ○ × ○ ○ △ ○ ×

B ○ △ ○ × ○ △ ○

C ○ △ ○ △ ○ ○ ○

C

A or B or C

Page 22: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 21

つくる

• 分業か単独か

• デザインかコンテンツか

• パターン化か個別カスタマイズか

• 要件を管理可能か否か削れるか、次期フェーズあるか、予算あるか、リテラシ・経験あるか

Page 23: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 22

つくる/CMS構築フロー

データ

要件

サイトマップ モジュール決定

HTML/CSS

組み込み

検証

項目設定(表示・検索) マスタデータ

テンプレート編集コンテンツ設定+配置

ブロック単位で切り出し

ブロック単位で分解

変数を用いて表示制御

キーによって分岐をかける(要件による)

デザイン

構成・ワイヤ

イメージする

設計する

制作する

一般的な案件の流れ

CMS案件の流れ

事前に確定すべき要素

CMS特有の設計工程

作業工程

CMS特有の作業工程画面イメージ(カンプ)

制作

• CMSを使いこなすには、情報設計と組込理解のスキルを持っていることが重要

情報設計できる?

組込管理できる?

Page 24: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 23

つくる/分業か単独か

• 分業する場合は、組み方を考える

• 単独の場合は自分だけで完結するので、あまり考えなくていい

ディレクション

Page 25: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 25

つくる/項目のパターン化の例

• 動的サイトを効率よく構築するには、パターンをコンテンツごとに定義し、見合ったテンプレートを持っておくとよい

• 下記は「お知らせ・コラム系の設定・テンプレート」一例

見出し H1

日付

【拡張項目】

・繰り返しブロックA:・見出し(H2)

・画像・本文・画像位置指定(親)・画像なし/右/左/動画

・動画 ID(画像が動画選択の場合)画像 テキスト/テキスト/テキスト/テキス

ト/テキスト/テキスト/テキスト/テキスト

見出し H2

繰り返しブロックA

【個別指定】・画像幅高さ・本文長さ制限

画像テキスト/テキスト/テキスト/テキスト/テキスト/テキスト/テキスト/テキスト

画面構成(詳細)

画像

※更新頻度と更新者によって設計し、ユーザー側のリテラシーに配慮すること。細かく枠を決めるのは、HTMLを触りたいコンテンツ更新者には向かない。

画像

クリックで拡大写真(lightboxなど)

基本パターン

右配置

拡大

横全幅

【画像配置パターン】

テキスト/テキスト/テキスト/テキスト/テキスト

Ex)

記事:お知らせ、ニュース、事業紹介カテゴリ:適時開示、ニュース(PR)、トピックス拡張:エリア(アジア、欧州、北米)、

部門(エネルギー、金属、情報)

【情報設計/階層】3階層の組み合わせ。1)記事グループ・扱う情報構造が異なる場合は分ける。2)カテゴリ(一覧表示、アイコン出しに向いている)・同カテゴリの新着記事一覧を出すなど容易。3)拡張項目(検索キーに向いている・複合検索)

画像.説明

設定情報

留意点

Page 26: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 26

つくる/要件を管理可能か

• 削れるか

• 予算あるか

• 次期フェーズあるか

• リテラシ・経験あるか

進行 次期

金額

予算

要件

特に、CMSで出来る範囲と、カスタマイズになる範囲の境界線については、事前に合意するのは難しい

Page 27: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 27

まわす

• サーバシステム構成(インフラ)、SLA等の要求水準

• セキュリティ・アップデート

• 画像・バナーなどの作成・更新

• レイアウト追加、テンプレート化

Page 28: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 28

まわす/サーバ構成

• ホスティング(オンプレ+パッケージ)、クラウドなどにパッケージインストールするケース

• SaaS型サービスを選び、共通インフラの上にサイトを開設するケース

1サイトWebサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

Webサイト

CMS

PHP(プログラム)データベース

1サイト

PHP(プログラム) データベース

CMS(RCMS)

Webサイト Webサイト Webサイト Webサイト Webサイト Webサイト WebサイトSaaS型

クラウド型ホスティング型

Page 29: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 29

まわす/セキュリティ・アップデート

• 後回しになりがちなので気を付ける

• 運用予算の範囲で考えておいたほうがいい

• ポリシー設計や役割分担を

ジェニファー・ローレンスのヌード写真はなぜ流出したのか―ハッカーから身を守るには?http://jp.techcrunch.com/2014/09/02/20140901heres-

what-we-know-so-far-about-the-celebrity-photo-hack/

脆弱性だけではない セキュリティ・アップデートは必要

検知システムも。。

【情報の入手】IPA 独立行政法人情報処理推進機構:重要なセキュリティ情報一覧http://www.ipa.go.jp/security/announce/alert.html

Google Alert で 「セキュリティ 脆弱性」https://www.google.com/alerts?hl=ja

流出といっても様々な経路とパターンの可能性がある

Page 30: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 30

まわす/画像・バナー等の作成

• 社内(インハウス?外注?)

• 継続して請負?

社内 外注

出来る限り自由裁量リッチに

出来る限り決めてテキスト・写真中心に

請負

予算の範囲にて

Page 31: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 31

まわす/レイアウト追加・テンプレート化

• リニューアル?追加開発?

デザイン

コンテンツ

CMS本体

移行

リプレイス

新CMS本体

新デザイン

コンテンツ

デザイン

コンテンツ

CMS本体

追加開発

改修CMS

改修デザイン

デザイン

コンテンツ

CMS本体

デザイン・リニューアル

改修デザイン

大掛かりでコストもかさむ 資産は活かせるが、メンテは大変 もっとも負荷は少なく、変わった感でる

Page 32: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 32

技術

• HTML5/CSS3/JS(jQuery)

• REST/JSON

• XML

• スマホアプリ連携

• クラウド連携

CMS スマートフォンアプリ

JSONデータをアプリに取り込む

RCMS内のデータをJSONデータとして出力

HTML作成の感覚でJSON用のテンプレートが作成可能

JSONデータ

Page 33: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 33

技術/HTML5/CSS3/JS

• デザインとコンテンツの分離はWebやソフトウェア・アーキテクチャの大きな志向

• 具体的には、レスポンシブ、Bootstrap

http://expo.getbootstrap.com/

Bootstrap Expo

Page 34: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 34

技術/JSON

JSON

同じ内容のデータであってもJSONはXMLと比べてデータサイズが小さいです。そのため、クライアントとサーバー間の冗長なネットワーク上の通信量が軽量化されます。

通信量の軽量化によってネットワーク間の処理速度を速めることが可能です。

タグを反復し、複雑な構造で構成されるXMLに比べ、JSONはテキスト形式であり、非常にシンプルな構造で構成されています。そのため、人にもコンピューターにも判読しやすい特徴があります。

XMLほど手順を踏む必要はなく、直接的にデータを扱うことができ、データをパースする処理の記述を大幅に軽減することができます。

JSONの構文はJavaScriptにおけるオブジェクトの表記法をベースとしていますが、JavaScript専用のデータ形式ではありません。

ほとんどの言語において、単純な処理によってJSONは書き出しや読み込みができるため別言語での再利用が可能です。ECMA標準のObject/Array形式で保存するため汎用性があります。

JSONはJavaScriptのオブジェクトベースのため、JavaScriptとの親和性が非常に高いです。

eval()関数という関数によってJavaScriptオブジェクトに変換することができるという特徴があります。この関数は引数で渡された文字列をJavaScriptコードとして評価し、その結果を返します。

データ軽量化による処理速度の向上

再利用性・汎用性 JavaScriptとの高い親和性

可読性

• JSONにはデータサイズを軽量化するメリットがあり、ユーザーやコンピューターに判読かつ編集しやすいという特徴がある

• 多くの言語でサポートされているため再利用性が高い

RCMSのJSON設定マニュアルより

Page 35: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 35

技術/XML

• データ連携はJSON主流に

• コンテンツのメタデータ管理が主に

SVG

Office Open XML

WordPress

wxrWordPress

wxrCSVXPath

意味・階層を持たせて抽出・変換が可能

HTML

CSSをあてて見た目を変える、マイクロフォーマット、構造化データ

+ CSS

+ メタデータ

Page 36: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 36

設計

• デザインとコンテンツの分離

• コンテンツはためる、デザインは変える

• システムは両者をコントロールする

C M S

Frontend

Contents

ロジ

ック

入力項目

画面操作

テンプレート

運用構築時

Source Code

基本構造

拡張性

コ ア

標準機能

レイヤ

グラフィック

機能

情報設計

HTML

CSS

jQuery

Lang

DB

Frame

work

デザイン

コンテンツ

時代に合わせ変える

資産として蓄積する

サイトの成長

システム基盤として支える

Page 37: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 37

設計/MVCモデル、拡張モデル

• ソフトウェア・アーキテクチャとしては、MVCのような基本パターンで捉えられる

• Add-on、Plug-in、拡張、言い方よりも組み込み方を見る

• 「何を分けて、どう統合するか?」は、設計思想に依存する

http://ja.wikipedia.org/wiki/Model_View_Controller

MVC Plug-in

本体CMS

本体CMS

本体から離れ開発されるもの数は増えやすいが、互換性に乏しい

本体に近いところで開発されるもの数は増えにくいが、互換性は高い

Page 38: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc 38

まとめ

• えらぶ、つくる、まわすの各段階で、目的やサイトのゴールを見据えて考える

• 適切なツールと手段を選んで、実装に落とし込んでいく

目的

えらぶ

つくる

まわす

マーケティング効果 オペレーション効率

機能だけではなくCMSの設計思想のようなところも大事

情報設計はサイトの質を決めるコンテンツは蓄積する

コンテンツを充実してもらうのが成功への近道

サイトの成長を見据えて、継続アップデート・拡張を考えておく

動的構築(組込)のノウハウを貯めるデザインやテンプレートは汎用化する

効率のよい更新作業は、コスト削減だけでなくコンテンツ増量にも効く

Page 39: 20140904 One Coin College CMSを使いこなすスキル

(c) Diverta.Inc

株式会社ディバータ

RCMS

Diverta Inc.

Official https://www.r-cms.jp/

Support http://rcms-support.r-cms.jp/

Facebook https://www.facebook.com/rcms.on.social

Company http://www.diverta.co.jp/

Recruit https://www.wantedly.com/companies/diverta

ーWebサイト構築プラットフォーム-

▼ディレクション標準フォーマット ガイドブック・ファイル名:RCMS_Direction_guidebook.zip

https://www.r-cms.jp/direct/fileserver/fileserver_download/file_id=36

▼ディレクション標準フォーマット(Excel)・ファイル名:RCMS_Direction_template.zip

https://www.r-cms.jp/direct/fileserver/fileserver_download/file_id=37

Webサイト構築のお問い合わせ・ご相談はhttps://www.r-cms.jp/inquiry_list/

0120-963-604まで