SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
(c) Diverta.Inc 
株式会社ディバータ 
―イケてるディレクターに必要なCMSスキルとは!?― 
サイトの目的に応じてCMSを使いこなす! 
Tetsuo Morikawa 
2014/09/04
(c) Diverta.Inc 
1 
講師紹介 
■バックグラウンド 
ディレクション・企画経験 
カカクコムの保険カテゴリのコンテンツ責任者とし て、集客責任を持ったWebディレクションを経験。 
エンジニア経験 大学在学中にWebアプリケーションの受託事業を 立ち上げ、自らも開発を経験。 
データ統合経験 
ミスミグループ本社のEC部門にて、データ主導 マーケティングの導入に携わり、大量データの分 析・統合などを経験。 
その他 
2013年グロービスMBA、2007年中小企業診断士。 
■森川哲夫 
•株式会社ディバータ 取締役経営企画兼Webディレクター 
•RCMSというSaaS型のCMSを提供している 会社 
•おかげさまで1800社を超えて導入頂い ております 
•CMSメーカー側の立場と、これまでWeb に関わってきた経験から、今回のお話を するに至りました
(c) Diverta.Inc 
2 
ゴール 
•「こういうサイトは、こういう風にCMSを使うのがいい!」と言い切れる 
•「選ぶ(選択)」「作る(導入・構築)」「回す(運用)」の3面から見て勧められるものを。 
目的 
えらぶ 
つくる 
まわす 
CMS選定 
CMS導入・構築 
CMS運用 
サイトの 
意思決定者 
IT担当者 
制作会社 
導入企業 
プ ロ セ ス 
関 係 者 
ディレクター 
割と重要な立場
(c) Diverta.Inc 
3 
目的 
•大別して2つ。集客増か、コスト減。 
•集客増はマーケティング課題、コスト減はオペレーション課題。 
目的 
マーケティング 
効果 
オペレーション 
効率 
分解! 
大別して2つ! 
Function 
Cost 
Value 
= 
提供する価値の算式
(c) Diverta.Inc 
4 
目的/マーケティング 
•マーケティングにもいくつかある 
•みなさんに関わりが深いのは、おそらくコンテンツ・マーケティング 
デジタル・マーケティング 
オムニチャネル 
コンテンツ・マーケティング 
リスティング 
SEO 
DMP/DSP 
リアル 
O2O 
アプリ 
ブランディング 
オウンドメディア 
テキスト 
ストーリー 
動画 
ムービークリップ 
マーケ
(c) Diverta.Inc 
5 
目的/マーケティング/コンテンツマーケティング 
•コンテンツはあらゆる活動に不可欠。コンテンツ・マネジメントは永遠の課題。 
•コンテンツのオーナーや発信主体は事業主。目先のトレンドに振り回されず、大きく構える。 
消費者 
事業者 
事業者 
コンテンツ 
発信! 
受け手にとって 
有益な情報 
•オウンドメディア 
•パブリシティ 
•イベント 
•メディア 
•広告 
•サイネージ 
手段いろいろ 
マーケ的成果 
認知・評価 
コンテンツ・マーケティング 
ただ発信するのではなく、事業的に意味のある継続的な活動にすることが大事
(c) Diverta.Inc 
6 
そもそもCMS 
•CMSとは? 
CMS本体 
発祥 
多くの機能を取り込み進化、 
Webサイトを構築する基盤になっている
(c) Diverta.Inc 
7 
CMS/共用システムの大きな矛盾「汎用性と先進性」 
•CMS化される=汎用的で枯れたもの<=>Web/スマホ/Deviceなどテクノロジーの進化は止まらない 
•どこまでを取り込むか、どのようにシステム環境を進化させるか、どのように時代についていくか 
http://evolutionofweb.appspot.com/?hl=ja#/evolution/day 
画面 
更新 
HTML 
直書き 
動的に 
できる 
ブラウ ザ対応 
ガラ ケー 
スマホ 
アプリ 
Tech 
User 
図・グラフ:http://evolutionofweb.appspot.com/
(c) Diverta.Inc 
8 
CMS/とらえ方 
•CMSの切り口として、使われ方やサイトの特性から類型しておく 
•ディレクターの立場からCMSを眺めたときには、作るよりも使う意識を強く持つ 
•いま何が実現できるかという視点と、何を作らなくてよくなるか、何をしなくて良くなるか?という視点を持つ 
•手段としては、フレームワーク、パッケージソフト、SaaSなどCMSの特性を押さえておく 
目的 
サイトのゴール 
ディレクター 
手段としてのCMS 
「つかう」意識 
「つくる」意識 
•使われ方はどうか 
•サイトの特性は何か 
•何を作らなくてよくなるか? 
•何をしなくてよくなるか? 
•あれが実現できる 
•これも入れよう 
「つくる」意識よりも、「つかう」意識を強く持つ。 
•フレームワークとして 
•パッケージとして 
•SaaSとして 
いますぐ実現できるか? 
何が得られるか? 
どう役立つか?
(c) Diverta.Inc 
9 
えらぶ 
CMSそのもの 
•数がある 
•特性がある 
•費用がある 
•利用者 
•構築者 
•選定の切り口は様々 
ネタとして比較データをもっておくのは良いが、細かい比較はあまり意味がない
(c) Diverta.Inc 
10 
えらぶ/CMS/数 
•ものすごい数、ECまで入れるとさらに 
•どこまでをCMSと呼ぶかもあいまい 
•6選、15選などあるが、使って試したことのあるひとは実際どれくらい・・・? 
英語のWikipediaのリストで180(日本のCMSは入っていない) 
http://en.wikipedia.org/wiki/List_of_content_management_systems 
数が多い 
分野が広い 
EC 
Site 
Social 
Smart 
情報がない・・ 
結局WordPressとか、知っているCMSの情報しかなかったりする 
180 
and 
Others
(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
(c) Diverta.Inc 
12 
えらぶ/CMS/特性/動的・静的 
•動的:お知らせページのように、テンプレート(型)にあてはめてページを量産するもの 
•静的:丁寧に1ページずつ手作りしていくようなもの 
量産型(動的ページ) 
手作り型(静的ページ・スタティックページ・静的コンテンツ) 
概要 
メリット 
1.同じようなレイアウトのページを、管理画面からで比較的簡単に量産できる。 
2.ページをページが所属するグループやカテゴリによって グループ・カテゴリごとにページを階層化し、自動的に一覧を生成することができる。 
3.ページの情報を変更すると、自動的に一覧にも変更が反映される。 
1.オリジナリティの高いレイアウトをつくることができる。 
2.イレギュラーな階層構造を実現できる。 
デメリット 
1.レイアウトをイレギュラーに変えることができない。 
2.階層構造をイレギュラーに変えることができない。 
1.管理画面で簡単に更新することは難しく、HTML等でページをひとつひとつ作成する 工数・知識が必要。 
2.ページが増えた場合、情報の整理、階層を手動で設定する必要がある。 
3.一覧ページを設ける場合も手作りする必要がある。 
4.詳細ページを修正した場合、作成した一覧ページの情報は手動で修正する必要がある。 
向いている ページ 
(例) 
更新頻度の高いページ、量が多いページ、追加発生する可能性が高いページ 外部データと連携するページ、CSVで一括取込(作成)したいページなど 
•新着情報 
•製品の詳細情報 
•求人情報etc… 
特殊性の高い1枚きりのページ、オリジナリティの高いレイアウトのページ、 イレギュラーなページ、定型化が難しいページなど 
•会社情報 
•特設ページ 
•個人情報のお取扱いについてetc… 
詳細 
詳細 
一覧 
階層が整理され、一覧が 自動生成され、一覧と詳 細は相互にリンクしている 
同じレイアウトのページを管 理画面を使って比較的簡 単に量産できる 
量産するページ 
手作りするページ 
一覧 
一覧が必要な場合は手 動で階層の整理、一覧 ページの作成が必要 
自由にレイアウト、 階層整理ができる
(c) Diverta.Inc 
13 
サイト管理機能 
ページ設定、サイトパラメータ設定、更新履歴、バッチ処理設定、QRコード自動生成、バナー広告、 ベーシック認証、アクセス制限、etc… 
コンテンツ管理機能 
ブログ、トピックス、写真、カレンダー、地図情報、動画、会社概要、沿革、採用情報、スポーツ情報、 外部データ連携機能(ぐるなび、フォト蔵)、簡易ショッピング、Q&A、用語辞典、etc… 
メンバー管理機能 
会員管理、権限管理、ログイン履歴、ワンタイムパスワード発行、メンバー情報一括アップロード、メン バー解析、etc… 
コミュニケーション機能 
お問い合わせ管理、アンケート、掲示板、コメント受付、トラックバック、メールマガジン、Twitter連携、 投票(記事のお役立ち度)、関連商品表示、etc… 
その他機能 
オンライン画像編集機能、RSSリーダー、ファイル管理、WYSIWYGエディタ、多段式承認ワークフロー、 サイトマップ自動生成、ページコピー、目的別管理画面の表示、etc… 
解析機能 
GoogleAnalytics、アクセス解析、ヒートマップ、アンケート結果集計&グラフ表示、タグ埋め込み式解 析ツールとの連携、etc… 
サイト向上機能 
SEO、LPO、EFO、サイト紹介&集計、関連記事表示、投票、etc… 
えらぶ/CMS/特性/機能/主な機能の一例 
RCMS標準機能の一例 
•今の機能も大事。だが、状況は数年後に変わっていくことも考えておくこと 
•機能名だけではなく、本当に必要なものは具体的に細かく機能差を比較すること
(c) Diverta.Inc 
14 
えらぶ/CMS/特性/機能/多言語機能の例 
コンテンツを言語毎に入力するだけで、サイトへの反映・構築は自動で行われる。 
英語版 
日本語版 
スペイン語 
フランス語 
TOP 
英語版 
日本語版 
スペイン語 
フランス語 
英語版 
日本語版 
スペイン語 
フランス語 
複数サイト必要でサイト構造も変わる 
日本語版 
TOP 
スペイン語 
TOP 
フランス語 
TOP 
英語版 
TOP 
日本語版 
日本語版 
日本語版 
スペイン語 
スペイン語 
スペイン語 
フランス語 
フランス語 
フランス語 
英語版 
英語版 
英語版 
言語の分だけ、管理するサイトが存在する。 
ワンタイムパスワードを発行し、翻訳者へ 依頼のメールを送付することもできる。 
1サイトの1コンテンツに翻訳データを持つので、構造は同じ 
•例えば「多言語機能」でも、データの持ち方は様々 
•別サイト・別ページ構造でデータを持つ場合、1段落単位あたりでデータを持つ場合、など 
RCMS翻訳機能の例
(c) Diverta.Inc 
15 
えらぶ/CMS/特性/機能/検索 
誰でも気軽に使えるというものではないが、 都道府県検索や条件検索などは標準機能の組 み合わせで構築しやすく出来ている 
WordPress 
RCMS 
•例えば「検索」でも様々 
•カテゴリでの絞り込みが出来ればいいものから、エリア、職業、こだわり条件などで絞るものまで 
カスタムフィールド設定 
データ抽出用のカスタマイズ 
表示側に表示用記述 
拡張項目設定 
データ抽出パラメータ設定 
表示側に表示用記述 
本体機能は軽量につくられているので 
物件検索部分はクエリ部分からカスタマイズが発生 
例えばWPとRCMSで不動産検索サイトを作ろうとすると・・・ 
違い
(c) Diverta.Inc 
16 
えらぶ/CMS/費用 
•有償・商用と、無償・オープンソース 
•SaaS型は運用費込、パッケージはホスティング別、ホスティング業者が無料CMS提供の場合も 
グラフィック・デザイン 
コーディング(動的) 
CMS基本設定 
コーディング(静的) 
テスト・検証 
CMS組込・適用(動的) 
CMS組込・適用(静的) 
データ移行 
ドキュメント 
WEBデザイン 
組 込 
カスタマイズ開発 
開 発 
移 行 
スマホ 
n% 
n% 
PC 
+ 
× 
× 
進 行管理 
ディレク ション 
+ 
ライセンス 
費用 
+ 
+ 
× 
資料・検 証 
+ 
× 
構築 
保守・月額 
CMS 
OSS(無料) 
保守 
サーバ 
(クラウド) 
SaaS 
保守 
SaaS (+カスタマイズ) 
商用 
保守 
サーバ 
(クラウド) 
パ ッ ケ ー ジ 
SaaS 
サイト構築
(c) Diverta.Inc 
17 
カスタマイズをした時の守備範囲 
価格高 
価格低 
規模小 
規模大 
商用CMS 
【ブログタイプ】 
・MT 
・WordPress etc… 
えらぶ/CMS/ポジショニングの例 
デフォルト時の守備範囲 
RCMSの説明で用いている図
(c) Diverta.Inc 
18 
えらぶ/利用者 
•導入の目的・サイト規模のレベル感は異なるので、手段を合わせる 
•更新手段になじむか(リテラシー)、運用を担うことができるか 
•目的・手段を理解するための切り口を類型化しておくと便利 
個人事業主 
ベンチャー 
中堅B2C/B2B 
大企業/上場 
数多くの 
利害関係者 
少ない利害関係者 
アーリーアダプター 
限定された取引先 
方針次第 
リテラシー個人依存 
少数精鋭 
IT担当 
運用効率 
コンテンツ少ない 
コンテンツ充実化 
企画してつくる 
少人数 
片手間で運用 
兼任で運用 
1部門だけで担当 
閲覧者 
対応力 
掲載量 
体制 
Function 
Cost 
Value 
= 
本気度 
利用者のタイプによって、会う前に想定する例として・・・
(c) Diverta.Inc 
19 
えらぶ/構築者 
•慣れている 
•QCD高い 
•再利用できる(応用・展開できる)、スクラッチor CMS 
慣れている 
不慣れ 
再利用できる 
最初から 
QCD 
高い 
QCD 
低い 
自社開発 
CMS 
減少 
慣れていないCMSは、パスを明確に
(c) Diverta.Inc 
20 
えらぶ/まとめ比較表の効率よい作り方 
•選定基準は様々、比較方法そのものの類型をしていくのが良さそう 
•絞り込み/星どり表/選抜方式など、選び方も様々。複数組み合わせるのがいい。 
大 分 類 で 絞 る 
B 
動的 
静的 
A 
ホスティング 
SaaS 
多言語 
マルチデバイス 
細 か く 比 較 す る 
CMS 
機能 
コスト 
運用・セキュリティ 
A 
○ 
× 
○ 
○ 
△ 
○ 
× 
B 
○ 
△ 
○ 
× 
○ 
△ 
○ 
C 
○ 
△ 
○ 
△ 
○ 
○ 
○ 
C 
A or B or C
(c) Diverta.Inc 
21 
つくる 
•分業か単独か 
•デザインかコンテンツか 
•パターン化か個別カスタマイズか 
•要件を管理可能か否か 
削れるか、次期フェーズあるか、予算あるか、リテラシ・経験あるか
(c) Diverta.Inc 
22 
つくる/CMS構築フロー 
データ 
要件 
サイトマップ 
モジュール決定 
HTML/CSS 
組み込み 
検証 
項目設定(表示・検索) 
マスタデータ 
テンプレート編集 
コンテンツ設定+配置 
ブロック単位で切り出し 
ブロック単位で分解 
変数を用いて 表示制御 
キーによって 
分岐をかける 
(要件による) 
デザイン 
構成・ワイヤ 
イメージする 
設計する 
制作する 
一般的な案件の流れ 
CMS案件の流れ 
事前に確定すべき要素 
CMS特有の設計工程 
作業工程 
CMS特有の作業工程 
画面イメージ(カンプ) 
制作 
•CMSを使いこなすには、情報設計と組込理解のスキルを持っていることが重要 
情報設計 
できる? 
組込管理 
できる?
(c) Diverta.Inc 23 
つくる/分業か単独か 
• 分業する場合は、組み方を考える 
• 単独の場合は自分だけで完結するので、あまり考えなくていい 
ディレク 
ション
(c) Diverta.Inc 
25 
つくる/項目のパターン化の例 
•動的サイトを効率よく構築するには、パターンをコンテンツごとに定義し、見合ったテンプレートを持っておくとよい 
•下記は「お知らせ・コラム系の設定・テンプレート」一例 
見出しH1 
日付 
【拡張項目】 
・繰り返しブロックA: 
・見出し(H2) 
・画像 
・本文 
・画像位置指定(親) 
・画像なし/右/左/動画 
・動画ID(画像が動画選択の場合) 
画像 
テキスト/テキスト/テキスト/テキス ト/テキスト/テキスト/テキスト/テ キスト 
見出しH2 
繰り返しブロックA 
【個別指定】 
・画像幅高さ 
・本文長さ制限 
画像 
テキスト/テキスト/テキスト/テキス ト/テキスト/テキスト/テキスト/テ キスト 
画面構成(詳細) 
画像 
※更新頻度と更新者によって設計し、ユーザー側のリテラシーに配慮すること。 
細かく枠を決めるのは、HTMLを触りたいコンテンツ更新者には向かない。 
画像 
クリックで拡大写真(lightboxなど) 
基 本パ タ ー ン 
右 配 置 
拡 大 
横 全 幅 
【画像配置パターン】 
テキスト/テキスト/テキスト/テキスト/テキスト 
Ex) 
記事:お知らせ、ニュース、事業紹介 
カテゴリ:適時開示、ニュース(PR)、トピックス 
拡張:エリア(アジア、欧州、北米)、 
部門(エネルギー、金属、情報) 
【情報設計/階層】 
3階層の組み合わせ。 
1)記事グループ 
・扱う情報構造が異なる場合は分ける。 
2)カテゴリ(一覧表示、アイコン出しに向いている) 
・同カテゴリの新着記事一覧を出すなど容易。 
3)拡張項目(検索キーに向いている・複合検索) 
画像.説明 
設定情報 
留意点
(c) Diverta.Inc 
26 
つくる/要件を管理可能か 
•削れるか 
•予算あるか 
•次期フェーズあるか 
•リテラシ・経験あるか 
進行 
次期 
金額 
予算 
要 件 
特に、CMSで出来る範囲と、カスタマイズになる範囲の境界線については、事前に合意するのは難しい
(c) Diverta.Inc 
27 
まわす 
•サーバシステム構成(インフラ)、SLA等の要求水準 
•セキュリティ・アップデート 
•画像・バナーなどの作成・更新 
•レイアウト追加、テンプレート化
(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型 
クラウド型 
ホスティング型
(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 
流出といっても様々な経路とパターンの可能性がある
(c) Diverta.Inc 
30 
まわす/画像・バナー等の作成 
•社内(インハウス?外注?) 
•継続して請負? 
社内 
外注 
出来る限り自由裁量 
リッチに 
出来る限り決めて 
テキスト・写真中心に 
請負 
予算の範囲にて
(c) Diverta.Inc 
31 
まわす/レイアウト追加・テンプレート化 
•リニューアル?追加開発? 
デザイン 
コンテンツ 
CMS本体 
移行 
リプレイス 
新CMS本 体 
新デザイ ン 
コンテンツ 
デザイン 
コンテンツ 
CMS本体 
追加開発 
改修CMS 
改修 
デザイン 
デザイン 
コンテンツ 
CMS本体 
デザイン・リニューアル 
改修 
デザイン 
大掛かりでコストもかさむ 
資産は活かせるが、メンテは大変 
もっとも負荷は少なく、変わった感でる
(c) Diverta.Inc 
32 
技術 
•HTML5/CSS3/JS(jQuery) 
•REST/JSON 
•XML 
•スマホアプリ連携 
•クラウド連携 
CMS 
スマートフォンアプリ 
JSONデータを 
アプリに取り込む 
RCMS内のデータを 
JSONデータとして出力 
HTML作成の感覚で 
JSON用のテンプレートが作成可能 
JSONデータ
(c) Diverta.Inc 
33 
技術/HTML5/CSS3/JS 
•デザインとコンテンツの分離はWebやソフトウェア・アーキテクチャの大きな志向 
•具体的には、レスポンシブ、Bootstrap 
http://expo.getbootstrap.com/ 
Bootstrap Expo
(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設定マニュアルより
(c) Diverta.Inc 
35 
技術/XML 
•データ連携はJSON主流に 
•コンテンツのメタデータ管理が主に 
SVG 
Office Open XML 
WordPress 
wxr 
CSV 
XPath 
意味・階層を持たせて抽出・変換が可能 
HTML 
CSSをあてて見た目を変える、マイクロフォーマット、構造化データ 
+CSS 
+メタデータ
(c) Diverta.Inc 
36 
設計 
•デザインとコンテンツの分離 
•コンテンツはためる、デザインは変える 
•システムは両者をコントロールする 
CMS 
Frontend 
Contents 
ビ ジ ネ ス 
ロ ジ ッ ク 
入力項目 
画面操 作 
テンプ レート 
運用 
構築時 
Source Code 
基本構造 
拡張性 
コア 
標準機能 
レイヤ 
グラフィック 
機能 
情報設計 
HTML 
CSS 
jQuery 
Lang 
DB 
Framework 
デザイン 
コンテンツ 
時代に合わせ 
変える 
資産として 
蓄積する 
サイトの成長 
システム 
基盤として 
支える
(c) Diverta.Inc 
37 
設計/MVCモデル、拡張モデル 
•ソフトウェア・アーキテクチャとしては、MVCのような基本パターンで捉えられる 
•Add-on、Plug-in、拡張、言い方よりも組み込み方を見る 
•「何を分けて、どう統合するか?」は、設計思想に依存する 
http://ja.wikipedia.org/wiki/Model_View_Controller 
MVC 
Plug-in 
本体 
CMS 
本体 
CMS 
本体から離れ開発されるもの 
数は増えやすいが、互換性に乏しい 
本体に近いところで開発されるもの 
数は増えにくいが、互換性は高い
(c) Diverta.Inc 
38 
まとめ 
•えらぶ、つくる、まわすの各段階で、目的やサイトのゴールを見据えて考える 
•適切なツールと手段を選んで、実装に落とし込んでいく 
目的 
えらぶ 
つくる 
まわす 
マーケティング効果 
オペレーション効率 
機能だけではなくCMSの設計思 想のようなところも大事 
情報設計はサイトの質を決める 
コンテンツは蓄積する 
コンテンツを充実してもらうのが成 功への近道 
サイトの成長を見据えて、継続アップ デート・拡張を考えておく 
動的構築(組込)のノウハウを貯める 
デザインやテンプレートは汎用化する 
効率のよい更新作業は、コスト削減だ けでなくコンテンツ増量にも効く
(c) Diverta.Inc 
株式会社ディバータ 
RCMS 
DivertaInc. 
Officialhttps://www.r-cms.jp/ 
Supporthttp://rcms-support.r-cms.jp/ 
Facebookhttps://www.facebook.com/rcms.on.social 
Companyhttp://www.diverta.co.jp/ 
Recruithttps://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.ziphttps://www.r-cms.jp/direct/fileserver/fileserver_download/file_id=37 
Webサイト構築のお問い合わせ・ご相談は https://www.r-cms.jp/inquiry_list/ 
0120-963-604 
まで

Contenu connexe

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

自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合Yukinori SAEKI
 
ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略Concent, Inc.
 
ウェブ社内報セミナー
ウェブ社内報セミナーウェブ社内報セミナー
ウェブ社内報セミナーShinya Kobayashi
 
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!FatWireKK
 
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大Takafumi Tsuda
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようMasayuki Abe
 
クラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフトクラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフトkurikiyo
 
IBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
IBM XCITE Spring 2015 - XPages application success story and IBM BluemixIBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
IBM XCITE Spring 2015 - XPages application success story and IBM BluemixAtsushi Sato
 
Find Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorFind Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorNobuya Sato
 
ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略Concent, Inc.
 
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかなぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかYusuke Suzuki
 
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツールAWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツールAmazon Web Services Japan
 
クラウド座談会資料
クラウド座談会資料クラウド座談会資料
クラウド座談会資料知礼 八子
 
基調講演「データのグループウェア化」
基調講演「データのグループウェア化」基調講演「データのグループウェア化」
基調講演「データのグループウェア化」Cybozucommunity
 
IA+CMSにより、コンテンツの制作・管理・配信はこう変わる
IA+CMSにより、コンテンツの制作・管理・配信はこう変わるIA+CMSにより、コンテンツの制作・管理・配信はこう変わる
IA+CMSにより、コンテンツの制作・管理・配信はこう変わるMakoto Shimizu
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile ApproachShinya Yanagihara
 
20130126 mtddcms
20130126 mtddcms20130126 mtddcms
20130126 mtddcmsyokonaka
 
最新事例にみるサービスデザインという新潮流(I・CON2014)
最新事例にみるサービスデザインという新潮流(I・CON2014)最新事例にみるサービスデザインという新潮流(I・CON2014)
最新事例にみるサービスデザインという新潮流(I・CON2014)IMJ Corporation
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]Daisuke Yamazaki
 

Similaire à 20140904 One Coin College CMSを使いこなすスキル (20)

自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合自社組織でのCXとは クラウドサインの場合
自社組織でのCXとは クラウドサインの場合
 
ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略
 
ウェブ社内報セミナー
ウェブ社内報セミナーウェブ社内報セミナー
ウェブ社内報セミナー
 
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
運用まで見越したWeb CMS導入のチェックポイント[効率化] Webマスター必見!
 
こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大こうやったら売れる!インターネット活用 販路拡大
こうやったら売れる!インターネット活用 販路拡大
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
クラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフトクラウドがもたらすパラダイムシフト
クラウドがもたらすパラダイムシフト
 
IBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
IBM XCITE Spring 2015 - XPages application success story and IBM BluemixIBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
IBM XCITE Spring 2015 - XPages application success story and IBM Bluemix
 
Find Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web CreatorFind Your Ability: IA for a novice Web Creator
Find Your Ability: IA for a novice Web Creator
 
ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略ビジネスを加速するためのウェブサイト運営戦略
ビジネスを加速するためのウェブサイト運営戦略
 
なぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのかなぜ「マイクロサービス“化”」が必要なのか
なぜ「マイクロサービス“化”」が必要なのか
 
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツールAWS における Microservices Architecture と DevOps を推進する組織と人とツール
AWS における Microservices Architecture と DevOps を推進する組織と人とツール
 
クラウド座談会資料
クラウド座談会資料クラウド座談会資料
クラウド座談会資料
 
基調講演「データのグループウェア化」
基調講演「データのグループウェア化」基調講演「データのグループウェア化」
基調講演「データのグループウェア化」
 
IA+CMSにより、コンテンツの制作・管理・配信はこう変わる
IA+CMSにより、コンテンツの制作・管理・配信はこう変わるIA+CMSにより、コンテンツの制作・管理・配信はこう変わる
IA+CMSにより、コンテンツの制作・管理・配信はこう変わる
 
Cloud Native and Agile Approach
Cloud Native and Agile ApproachCloud Native and Agile Approach
Cloud Native and Agile Approach
 
20130126 mtddcms
20130126 mtddcms20130126 mtddcms
20130126 mtddcms
 
最新事例にみるサービスデザインという新潮流(I・CON2014)
最新事例にみるサービスデザインという新潮流(I・CON2014)最新事例にみるサービスデザインという新潮流(I・CON2014)
最新事例にみるサービスデザインという新潮流(I・CON2014)
 
Web
WebWeb
Web
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
 

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

  • 1. (c) Diverta.Inc 株式会社ディバータ ―イケてるディレクターに必要なCMSスキルとは!?― サイトの目的に応じてCMSを使いこなす! Tetsuo Morikawa 2014/09/04
  • 2. (c) Diverta.Inc 1 講師紹介 ■バックグラウンド ディレクション・企画経験 カカクコムの保険カテゴリのコンテンツ責任者とし て、集客責任を持ったWebディレクションを経験。 エンジニア経験 大学在学中にWebアプリケーションの受託事業を 立ち上げ、自らも開発を経験。 データ統合経験 ミスミグループ本社のEC部門にて、データ主導 マーケティングの導入に携わり、大量データの分 析・統合などを経験。 その他 2013年グロービスMBA、2007年中小企業診断士。 ■森川哲夫 •株式会社ディバータ 取締役経営企画兼Webディレクター •RCMSというSaaS型のCMSを提供している 会社 •おかげさまで1800社を超えて導入頂い ております •CMSメーカー側の立場と、これまでWeb に関わってきた経験から、今回のお話を するに至りました
  • 3. (c) Diverta.Inc 2 ゴール •「こういうサイトは、こういう風にCMSを使うのがいい!」と言い切れる •「選ぶ(選択)」「作る(導入・構築)」「回す(運用)」の3面から見て勧められるものを。 目的 えらぶ つくる まわす CMS選定 CMS導入・構築 CMS運用 サイトの 意思決定者 IT担当者 制作会社 導入企業 プ ロ セ ス 関 係 者 ディレクター 割と重要な立場
  • 4. (c) Diverta.Inc 3 目的 •大別して2つ。集客増か、コスト減。 •集客増はマーケティング課題、コスト減はオペレーション課題。 目的 マーケティング 効果 オペレーション 効率 分解! 大別して2つ! Function Cost Value = 提供する価値の算式
  • 5. (c) Diverta.Inc 4 目的/マーケティング •マーケティングにもいくつかある •みなさんに関わりが深いのは、おそらくコンテンツ・マーケティング デジタル・マーケティング オムニチャネル コンテンツ・マーケティング リスティング SEO DMP/DSP リアル O2O アプリ ブランディング オウンドメディア テキスト ストーリー 動画 ムービークリップ マーケ
  • 6. (c) Diverta.Inc 5 目的/マーケティング/コンテンツマーケティング •コンテンツはあらゆる活動に不可欠。コンテンツ・マネジメントは永遠の課題。 •コンテンツのオーナーや発信主体は事業主。目先のトレンドに振り回されず、大きく構える。 消費者 事業者 事業者 コンテンツ 発信! 受け手にとって 有益な情報 •オウンドメディア •パブリシティ •イベント •メディア •広告 •サイネージ 手段いろいろ マーケ的成果 認知・評価 コンテンツ・マーケティング ただ発信するのではなく、事業的に意味のある継続的な活動にすることが大事
  • 7. (c) Diverta.Inc 6 そもそもCMS •CMSとは? CMS本体 発祥 多くの機能を取り込み進化、 Webサイトを構築する基盤になっている
  • 8. (c) Diverta.Inc 7 CMS/共用システムの大きな矛盾「汎用性と先進性」 •CMS化される=汎用的で枯れたもの<=>Web/スマホ/Deviceなどテクノロジーの進化は止まらない •どこまでを取り込むか、どのようにシステム環境を進化させるか、どのように時代についていくか http://evolutionofweb.appspot.com/?hl=ja#/evolution/day 画面 更新 HTML 直書き 動的に できる ブラウ ザ対応 ガラ ケー スマホ アプリ Tech User 図・グラフ:http://evolutionofweb.appspot.com/
  • 9. (c) Diverta.Inc 8 CMS/とらえ方 •CMSの切り口として、使われ方やサイトの特性から類型しておく •ディレクターの立場からCMSを眺めたときには、作るよりも使う意識を強く持つ •いま何が実現できるかという視点と、何を作らなくてよくなるか、何をしなくて良くなるか?という視点を持つ •手段としては、フレームワーク、パッケージソフト、SaaSなどCMSの特性を押さえておく 目的 サイトのゴール ディレクター 手段としてのCMS 「つかう」意識 「つくる」意識 •使われ方はどうか •サイトの特性は何か •何を作らなくてよくなるか? •何をしなくてよくなるか? •あれが実現できる •これも入れよう 「つくる」意識よりも、「つかう」意識を強く持つ。 •フレームワークとして •パッケージとして •SaaSとして いますぐ実現できるか? 何が得られるか? どう役立つか?
  • 10. (c) Diverta.Inc 9 えらぶ CMSそのもの •数がある •特性がある •費用がある •利用者 •構築者 •選定の切り口は様々 ネタとして比較データをもっておくのは良いが、細かい比較はあまり意味がない
  • 11. (c) Diverta.Inc 10 えらぶ/CMS/数 •ものすごい数、ECまで入れるとさらに •どこまでをCMSと呼ぶかもあいまい •6選、15選などあるが、使って試したことのあるひとは実際どれくらい・・・? 英語のWikipediaのリストで180(日本のCMSは入っていない) http://en.wikipedia.org/wiki/List_of_content_management_systems 数が多い 分野が広い EC Site Social Smart 情報がない・・ 結局WordPressとか、知っているCMSの情報しかなかったりする 180 and Others
  • 12. (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
  • 13. (c) Diverta.Inc 12 えらぶ/CMS/特性/動的・静的 •動的:お知らせページのように、テンプレート(型)にあてはめてページを量産するもの •静的:丁寧に1ページずつ手作りしていくようなもの 量産型(動的ページ) 手作り型(静的ページ・スタティックページ・静的コンテンツ) 概要 メリット 1.同じようなレイアウトのページを、管理画面からで比較的簡単に量産できる。 2.ページをページが所属するグループやカテゴリによって グループ・カテゴリごとにページを階層化し、自動的に一覧を生成することができる。 3.ページの情報を変更すると、自動的に一覧にも変更が反映される。 1.オリジナリティの高いレイアウトをつくることができる。 2.イレギュラーな階層構造を実現できる。 デメリット 1.レイアウトをイレギュラーに変えることができない。 2.階層構造をイレギュラーに変えることができない。 1.管理画面で簡単に更新することは難しく、HTML等でページをひとつひとつ作成する 工数・知識が必要。 2.ページが増えた場合、情報の整理、階層を手動で設定する必要がある。 3.一覧ページを設ける場合も手作りする必要がある。 4.詳細ページを修正した場合、作成した一覧ページの情報は手動で修正する必要がある。 向いている ページ (例) 更新頻度の高いページ、量が多いページ、追加発生する可能性が高いページ 外部データと連携するページ、CSVで一括取込(作成)したいページなど •新着情報 •製品の詳細情報 •求人情報etc… 特殊性の高い1枚きりのページ、オリジナリティの高いレイアウトのページ、 イレギュラーなページ、定型化が難しいページなど •会社情報 •特設ページ •個人情報のお取扱いについてetc… 詳細 詳細 一覧 階層が整理され、一覧が 自動生成され、一覧と詳 細は相互にリンクしている 同じレイアウトのページを管 理画面を使って比較的簡 単に量産できる 量産するページ 手作りするページ 一覧 一覧が必要な場合は手 動で階層の整理、一覧 ページの作成が必要 自由にレイアウト、 階層整理ができる
  • 14. (c) Diverta.Inc 13 サイト管理機能 ページ設定、サイトパラメータ設定、更新履歴、バッチ処理設定、QRコード自動生成、バナー広告、 ベーシック認証、アクセス制限、etc… コンテンツ管理機能 ブログ、トピックス、写真、カレンダー、地図情報、動画、会社概要、沿革、採用情報、スポーツ情報、 外部データ連携機能(ぐるなび、フォト蔵)、簡易ショッピング、Q&A、用語辞典、etc… メンバー管理機能 会員管理、権限管理、ログイン履歴、ワンタイムパスワード発行、メンバー情報一括アップロード、メン バー解析、etc… コミュニケーション機能 お問い合わせ管理、アンケート、掲示板、コメント受付、トラックバック、メールマガジン、Twitter連携、 投票(記事のお役立ち度)、関連商品表示、etc… その他機能 オンライン画像編集機能、RSSリーダー、ファイル管理、WYSIWYGエディタ、多段式承認ワークフロー、 サイトマップ自動生成、ページコピー、目的別管理画面の表示、etc… 解析機能 GoogleAnalytics、アクセス解析、ヒートマップ、アンケート結果集計&グラフ表示、タグ埋め込み式解 析ツールとの連携、etc… サイト向上機能 SEO、LPO、EFO、サイト紹介&集計、関連記事表示、投票、etc… えらぶ/CMS/特性/機能/主な機能の一例 RCMS標準機能の一例 •今の機能も大事。だが、状況は数年後に変わっていくことも考えておくこと •機能名だけではなく、本当に必要なものは具体的に細かく機能差を比較すること
  • 15. (c) Diverta.Inc 14 えらぶ/CMS/特性/機能/多言語機能の例 コンテンツを言語毎に入力するだけで、サイトへの反映・構築は自動で行われる。 英語版 日本語版 スペイン語 フランス語 TOP 英語版 日本語版 スペイン語 フランス語 英語版 日本語版 スペイン語 フランス語 複数サイト必要でサイト構造も変わる 日本語版 TOP スペイン語 TOP フランス語 TOP 英語版 TOP 日本語版 日本語版 日本語版 スペイン語 スペイン語 スペイン語 フランス語 フランス語 フランス語 英語版 英語版 英語版 言語の分だけ、管理するサイトが存在する。 ワンタイムパスワードを発行し、翻訳者へ 依頼のメールを送付することもできる。 1サイトの1コンテンツに翻訳データを持つので、構造は同じ •例えば「多言語機能」でも、データの持ち方は様々 •別サイト・別ページ構造でデータを持つ場合、1段落単位あたりでデータを持つ場合、など RCMS翻訳機能の例
  • 16. (c) Diverta.Inc 15 えらぶ/CMS/特性/機能/検索 誰でも気軽に使えるというものではないが、 都道府県検索や条件検索などは標準機能の組 み合わせで構築しやすく出来ている WordPress RCMS •例えば「検索」でも様々 •カテゴリでの絞り込みが出来ればいいものから、エリア、職業、こだわり条件などで絞るものまで カスタムフィールド設定 データ抽出用のカスタマイズ 表示側に表示用記述 拡張項目設定 データ抽出パラメータ設定 表示側に表示用記述 本体機能は軽量につくられているので 物件検索部分はクエリ部分からカスタマイズが発生 例えばWPとRCMSで不動産検索サイトを作ろうとすると・・・ 違い
  • 17. (c) Diverta.Inc 16 えらぶ/CMS/費用 •有償・商用と、無償・オープンソース •SaaS型は運用費込、パッケージはホスティング別、ホスティング業者が無料CMS提供の場合も グラフィック・デザイン コーディング(動的) CMS基本設定 コーディング(静的) テスト・検証 CMS組込・適用(動的) CMS組込・適用(静的) データ移行 ドキュメント WEBデザイン 組 込 カスタマイズ開発 開 発 移 行 スマホ n% n% PC + × × 進 行管理 ディレク ション + ライセンス 費用 + + × 資料・検 証 + × 構築 保守・月額 CMS OSS(無料) 保守 サーバ (クラウド) SaaS 保守 SaaS (+カスタマイズ) 商用 保守 サーバ (クラウド) パ ッ ケ ー ジ SaaS サイト構築
  • 18. (c) Diverta.Inc 17 カスタマイズをした時の守備範囲 価格高 価格低 規模小 規模大 商用CMS 【ブログタイプ】 ・MT ・WordPress etc… えらぶ/CMS/ポジショニングの例 デフォルト時の守備範囲 RCMSの説明で用いている図
  • 19. (c) Diverta.Inc 18 えらぶ/利用者 •導入の目的・サイト規模のレベル感は異なるので、手段を合わせる •更新手段になじむか(リテラシー)、運用を担うことができるか •目的・手段を理解するための切り口を類型化しておくと便利 個人事業主 ベンチャー 中堅B2C/B2B 大企業/上場 数多くの 利害関係者 少ない利害関係者 アーリーアダプター 限定された取引先 方針次第 リテラシー個人依存 少数精鋭 IT担当 運用効率 コンテンツ少ない コンテンツ充実化 企画してつくる 少人数 片手間で運用 兼任で運用 1部門だけで担当 閲覧者 対応力 掲載量 体制 Function Cost Value = 本気度 利用者のタイプによって、会う前に想定する例として・・・
  • 20. (c) Diverta.Inc 19 えらぶ/構築者 •慣れている •QCD高い •再利用できる(応用・展開できる)、スクラッチor CMS 慣れている 不慣れ 再利用できる 最初から QCD 高い QCD 低い 自社開発 CMS 減少 慣れていないCMSは、パスを明確に
  • 21. (c) Diverta.Inc 20 えらぶ/まとめ比較表の効率よい作り方 •選定基準は様々、比較方法そのものの類型をしていくのが良さそう •絞り込み/星どり表/選抜方式など、選び方も様々。複数組み合わせるのがいい。 大 分 類 で 絞 る B 動的 静的 A ホスティング SaaS 多言語 マルチデバイス 細 か く 比 較 す る CMS 機能 コスト 運用・セキュリティ A ○ × ○ ○ △ ○ × B ○ △ ○ × ○ △ ○ C ○ △ ○ △ ○ ○ ○ C A or B or C
  • 22. (c) Diverta.Inc 21 つくる •分業か単独か •デザインかコンテンツか •パターン化か個別カスタマイズか •要件を管理可能か否か 削れるか、次期フェーズあるか、予算あるか、リテラシ・経験あるか
  • 23. (c) Diverta.Inc 22 つくる/CMS構築フロー データ 要件 サイトマップ モジュール決定 HTML/CSS 組み込み 検証 項目設定(表示・検索) マスタデータ テンプレート編集 コンテンツ設定+配置 ブロック単位で切り出し ブロック単位で分解 変数を用いて 表示制御 キーによって 分岐をかける (要件による) デザイン 構成・ワイヤ イメージする 設計する 制作する 一般的な案件の流れ CMS案件の流れ 事前に確定すべき要素 CMS特有の設計工程 作業工程 CMS特有の作業工程 画面イメージ(カンプ) 制作 •CMSを使いこなすには、情報設計と組込理解のスキルを持っていることが重要 情報設計 できる? 組込管理 できる?
  • 24. (c) Diverta.Inc 23 つくる/分業か単独か • 分業する場合は、組み方を考える • 単独の場合は自分だけで完結するので、あまり考えなくていい ディレク ション
  • 25. (c) Diverta.Inc 25 つくる/項目のパターン化の例 •動的サイトを効率よく構築するには、パターンをコンテンツごとに定義し、見合ったテンプレートを持っておくとよい •下記は「お知らせ・コラム系の設定・テンプレート」一例 見出しH1 日付 【拡張項目】 ・繰り返しブロックA: ・見出し(H2) ・画像 ・本文 ・画像位置指定(親) ・画像なし/右/左/動画 ・動画ID(画像が動画選択の場合) 画像 テキスト/テキスト/テキスト/テキス ト/テキスト/テキスト/テキスト/テ キスト 見出しH2 繰り返しブロックA 【個別指定】 ・画像幅高さ ・本文長さ制限 画像 テキスト/テキスト/テキスト/テキス ト/テキスト/テキスト/テキスト/テ キスト 画面構成(詳細) 画像 ※更新頻度と更新者によって設計し、ユーザー側のリテラシーに配慮すること。 細かく枠を決めるのは、HTMLを触りたいコンテンツ更新者には向かない。 画像 クリックで拡大写真(lightboxなど) 基 本パ タ ー ン 右 配 置 拡 大 横 全 幅 【画像配置パターン】 テキスト/テキスト/テキスト/テキスト/テキスト Ex) 記事:お知らせ、ニュース、事業紹介 カテゴリ:適時開示、ニュース(PR)、トピックス 拡張:エリア(アジア、欧州、北米)、 部門(エネルギー、金属、情報) 【情報設計/階層】 3階層の組み合わせ。 1)記事グループ ・扱う情報構造が異なる場合は分ける。 2)カテゴリ(一覧表示、アイコン出しに向いている) ・同カテゴリの新着記事一覧を出すなど容易。 3)拡張項目(検索キーに向いている・複合検索) 画像.説明 設定情報 留意点
  • 26. (c) Diverta.Inc 26 つくる/要件を管理可能か •削れるか •予算あるか •次期フェーズあるか •リテラシ・経験あるか 進行 次期 金額 予算 要 件 特に、CMSで出来る範囲と、カスタマイズになる範囲の境界線については、事前に合意するのは難しい
  • 27. (c) Diverta.Inc 27 まわす •サーバシステム構成(インフラ)、SLA等の要求水準 •セキュリティ・アップデート •画像・バナーなどの作成・更新 •レイアウト追加、テンプレート化
  • 28. (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型 クラウド型 ホスティング型
  • 29. (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 流出といっても様々な経路とパターンの可能性がある
  • 30. (c) Diverta.Inc 30 まわす/画像・バナー等の作成 •社内(インハウス?外注?) •継続して請負? 社内 外注 出来る限り自由裁量 リッチに 出来る限り決めて テキスト・写真中心に 請負 予算の範囲にて
  • 31. (c) Diverta.Inc 31 まわす/レイアウト追加・テンプレート化 •リニューアル?追加開発? デザイン コンテンツ CMS本体 移行 リプレイス 新CMS本 体 新デザイ ン コンテンツ デザイン コンテンツ CMS本体 追加開発 改修CMS 改修 デザイン デザイン コンテンツ CMS本体 デザイン・リニューアル 改修 デザイン 大掛かりでコストもかさむ 資産は活かせるが、メンテは大変 もっとも負荷は少なく、変わった感でる
  • 32. (c) Diverta.Inc 32 技術 •HTML5/CSS3/JS(jQuery) •REST/JSON •XML •スマホアプリ連携 •クラウド連携 CMS スマートフォンアプリ JSONデータを アプリに取り込む RCMS内のデータを JSONデータとして出力 HTML作成の感覚で JSON用のテンプレートが作成可能 JSONデータ
  • 33. (c) Diverta.Inc 33 技術/HTML5/CSS3/JS •デザインとコンテンツの分離はWebやソフトウェア・アーキテクチャの大きな志向 •具体的には、レスポンシブ、Bootstrap http://expo.getbootstrap.com/ Bootstrap Expo
  • 34. (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設定マニュアルより
  • 35. (c) Diverta.Inc 35 技術/XML •データ連携はJSON主流に •コンテンツのメタデータ管理が主に SVG Office Open XML WordPress wxr CSV XPath 意味・階層を持たせて抽出・変換が可能 HTML CSSをあてて見た目を変える、マイクロフォーマット、構造化データ +CSS +メタデータ
  • 36. (c) Diverta.Inc 36 設計 •デザインとコンテンツの分離 •コンテンツはためる、デザインは変える •システムは両者をコントロールする CMS Frontend Contents ビ ジ ネ ス ロ ジ ッ ク 入力項目 画面操 作 テンプ レート 運用 構築時 Source Code 基本構造 拡張性 コア 標準機能 レイヤ グラフィック 機能 情報設計 HTML CSS jQuery Lang DB Framework デザイン コンテンツ 時代に合わせ 変える 資産として 蓄積する サイトの成長 システム 基盤として 支える
  • 37. (c) Diverta.Inc 37 設計/MVCモデル、拡張モデル •ソフトウェア・アーキテクチャとしては、MVCのような基本パターンで捉えられる •Add-on、Plug-in、拡張、言い方よりも組み込み方を見る •「何を分けて、どう統合するか?」は、設計思想に依存する http://ja.wikipedia.org/wiki/Model_View_Controller MVC Plug-in 本体 CMS 本体 CMS 本体から離れ開発されるもの 数は増えやすいが、互換性に乏しい 本体に近いところで開発されるもの 数は増えにくいが、互換性は高い
  • 38. (c) Diverta.Inc 38 まとめ •えらぶ、つくる、まわすの各段階で、目的やサイトのゴールを見据えて考える •適切なツールと手段を選んで、実装に落とし込んでいく 目的 えらぶ つくる まわす マーケティング効果 オペレーション効率 機能だけではなくCMSの設計思 想のようなところも大事 情報設計はサイトの質を決める コンテンツは蓄積する コンテンツを充実してもらうのが成 功への近道 サイトの成長を見据えて、継続アップ デート・拡張を考えておく 動的構築(組込)のノウハウを貯める デザインやテンプレートは汎用化する 効率のよい更新作業は、コスト削減だ けでなくコンテンツ増量にも効く
  • 39. (c) Diverta.Inc 株式会社ディバータ RCMS DivertaInc. Officialhttps://www.r-cms.jp/ Supporthttp://rcms-support.r-cms.jp/ Facebookhttps://www.facebook.com/rcms.on.social Companyhttp://www.diverta.co.jp/ Recruithttps://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.ziphttps://www.r-cms.jp/direct/fileserver/fileserver_download/file_id=37 Webサイト構築のお問い合わせ・ご相談は https://www.r-cms.jp/inquiry_list/ 0120-963-604 まで