2019年11月16日 MTDDC Meetup TOKYO 2019 のスライドです。AI（人工知能）が注目を集めています。これまでのITに代わって、まさにゲームチェンジの役者になろうとしています。CMSは、この流れのなかで、どのように変わっていくのでしょうか。長年にわたり大規模CMSの導入を進め、今はAIの導入にたずさわる立場から、「AIとCMS」を考えます。

1. AI（⼈⼯知能）とCMS
IBM Champion / HCD-Net認定 ⼈間中⼼設計専⾨家
⽻⼭ 祥樹 @storywriter
1
2019年11⽉16⽇（⼟）

2. 2
AI（⼈⼯知能）がブームです。

3. 3
「わかりやすく、⼿軽に使える AI」も増えてきました。
やってみましょう。

4. 4
⾳声データを聞き取って⽂字にする
只今 ワトソン の テスト 中
本⽇ は 晴天 なり
只今
ワトソンのテスト中
本⽇は晴天なり

5. 5
⾳声データを聞き取って⽂字にする
短いプログラミングで、かんたんにできる。
curl -X POST -u "apikey:{apikey}"
--header "Content-Type: audio/flac"
--data-binary @audio-file-ja.flac
"https://gateway-tok.watsonplatform.net/speech-to-text/api/v1/
recognize/?model=ja-JP_NarrowbandModel"

6. 6
チャットボットとして会話する
LOHACOでは
請求書の発⾏は・・・
請求書を発⾏したい

7. 7
LOHACO マナミさん
引⽤：https://lohaco.jp/support/

8. ⽻⼭ 祥樹 @storywriter
v HCD-Net認定 ⼈間中⼼設計専⾨家
• 使いやすいプロダクトをつくる専⾨家
v Web業界に20年くらい、Watsonは3年ほど
• IBM Champion for 2018-2019
v 主な実績など
• 2009年 ⽇経パソコン 企業サイトランキング2009
⽇本の主要企業696サイト中、ユーザビリティ／アクセシビリティ分野で第3位
• 2011年 Webユーザビリティランキング2011 企業サイト編
⽇本の⼤⼿企業150サイト中、第4位
v 主な専⾨分野
• ユーザーエクスペリエンス、⼈間中⼼設計、情報アーキテクチャ、
アクセシビリティ、ライター、NOREN、IBM Watson
8

9. 9
IBM Champion 2018-2019

10. 10
現場で使える! Watson開発⼊⾨
Watson API、Watson StudioによるAIアプリ開発⼿法
Amazonで購⼊
https://www.amazon.co.jp/dp/4798158496/

11. 11
AI（⼈⼯知能）が注⽬を集めています。
これまでのITに代わって、
まさにゲームチェンジの役者になろうとしています。

12. 12
CMSは、この流れのなかで、
どのように変わっていくのでしょうか。

13. 13
僕とCMS
2010年より
⼤規模CMS「NOREN」の導⼊責任者として
⾃社を「⽇本⼀のNORENユーザー企業」と
いわれるまで育てる。

14. 14
僕とCMS
構築したことのあるCMSは
• NOREN
• eZ Platform（eZ Publish）
• WordPress
• a-blog cms
• Movable Type

15. 15
僕とAI（⼈⼯知能）
2016年より CMS をはなれ、IBM Watson に携わる。
現在はAIシステムのUXデザインを担当。

16. 16
⻑年にわたり⼤規模CMSの導⼊を進め、
今はAIの導⼊にたずさわる⽴場から、
「AIとCMS」を考えます。

17. 17
AI（⼈⼯知能）とは？

18. 18
AIとはなんでしょうか。
とても賢い？ あらゆる会話を理解してくれる？
仕事をなんでも肩代わりしてくれる？
正体不明で怖い？

19. 19
「⼈⼯」の「知能」ときくと
なんかこういうものを想像しますが

20. 20
残念ながら、
⼈間と⾃由⾃在に会話できる機械は
まだこの世に存在しません
（たくさんの研究者が⽇夜
そのようなAIをつくろうと
研究にいそしんでいます）

21. 21
ITとAI
ITは、コードでプログラミングする。
AIは、データでプログラミングする。
IT AI
コード データ

22. 22
コードでプログラミングする
「柴⽝」の写真を判定する：
if ⾜が4本:
if ⽿がある:
if ⿐がある:
if ⽬がある:
・・・

23. 23
データでプログラミングする
「柴⽝」の写真を判定する：
引⽤：https://www.google.com/

24. 24
データでプログラミングする
柴⽝って
ようはこんな感じ

25. 25
Watson Visual Recognition （画像認識）
引⽤：https://www.ibm.com/watson/services/visual-recognition/demo/

26. 26
備考
AIと「意思をもつシステム」は切り離して考えよう。
話を混ぜると、わけわからなくなる。
（意思をもつ、というコンセプトがロマンなんだけど）

27. 27
CMS（コンテンツ・マネジメント・システム）とは？

28. 28
CMSは、ウェブサイトを管理するもの。

29. 29
と、思い込んでいませんか？
CMSの本当の可能性を⾒逃しているかも。

30. 30
CMSの価値を広げる試みは、
じつはだいぶ前からあります。
（以下、所属は当時のもの）

31. 31
ウェブと紙のコンテンツを統合管理したい
2003年〜2008年、⽇本アムウェイ 清⽔ 誠さん。
素材は、カタログにも、ウェブにも、同じものを使うので、
企業レベルでの統合リポジトリを⽬指した。
引⽤：https://www.jagat.or.jp/past_archives/story/11593.html

32. 32
グローバルPIM（商品情報管理）
2008年〜2010年、FatWire、グローバル家電メーカー。
グローバルでの素材管理に膨⼤な⼿間がかかっていた。
企業での統⼀リポジトリを⽬指した。
引⽤：https://www.itmedia.co.jp/im/articles/1105/19/news126.html

33. 33
バランス・スコアカード（BSC）で導⼊効果を評価
2009年〜2010年、CMS学会。
ロフトワーク、キャノンマーケティング 増井 達⺒さん。
経営ツールのBSCで、CMSの導⼊効果を評価。
引⽤：https://webtan.impress.co.jp/g/cms%E5%AD%A6%E4%BC%9A

34. 34
バランス・スコアカード（BSC）で導⼊効果を評価
富⼠通デザイン ⾼橋 宏祐 さん
「経営者がわかる標準的な指標であることが重要。
なぜならCMS導⼊は投資⾦額も⼤きくなり、
経営層に投資の是⾮を承認いただく場⾯が増える」
引⽤：http://wiki.loftwork.com/pages/viewpage.action?pageId=7700766 （*現在はリンク切れ）

35. 35
バランス・スコアカード（BSC）で導⼊効果を評価
財務の視点
顧客の視点
業務プロセスの視点
学習と成⻑の視点
引⽤：https://webtan.impress.co.jp/e/2010/02/02/7181

36. 36
ユーザーエクスペリエンス（UX）のためのCMS
2010年〜、⽻⼭。
CMSを、ウェブサイトのユーザーにとっての価値向上に
つなげて評価することを提案。

37. 37
ユーザーエクスペリエンス（UX）のためのCMS
ユーザー（社外） ユーザー（社内）
コンテンツの
流通促進
欲しい情報が
豊富にある
購買⼼理に応じた
情報が提供される
専⾨家のノウハウを
CMSへ機能化
個⼈のスキルに
依存しない制作品質
コンテンツ内容の
向上に⼯数シフト
欲しい情報に
アクセスしやすい
CMS拡張ツール
の量産
柔軟な
レポーティング
社員満⾜
外部システムとの
接続
顧客満⾜

38. 38
「ユーザーエクスペリエンス（UX）のためのCMS」
を⼟台にして、さまざまな施策をしていった。

39. 39
CMS管理画⾯のフルカスタマイズ
たとえば、検索の体験（≒SEO）のため、
title要素を32⽂字以内にする。
これを100⼈の制作者が、そのスキルによらず、
⾃然にできるようにするためには？ 教育？ 意識づけ？
タイトル

40. 40
CMS管理画⾯のフルカスタマイズ
管理画⾯でアラートが出ればよい。
ノウハウをシステム化して、⾃然に再現されるように。
思いが詰まりに詰まってとにかく長いタイトルをつけてし
タイトル
タイトルは32⽂字以内にしましょう。
Googleで表⽰される上限です。

41. 41
ノウハウをシステムに埋め込んでいく
ノウハウをどんどんCMSのシステムに埋め込むことで、
ユーザー体験が⾃然と良くなる仕組みをつくった。

42. 42
ウェブサイトの帳票システムとしてのCMS
CMSのパブリッシュ先として、公開環境とは別に、
「帳票環境」を⽤意。専⽤テンプレートをセット。

43. 43
ウェブサイトの帳票システムとしてのCMS
ウェブサイト運営に必要なさまざまな帳票やcsvを
⼿軽につくり、ガンガン出せる環境をつくる。

44. 44
ウェブサイトの帳票システムとしてのCMS
CMSは、アクセス解析ツールと連動させ、
社外と社内をつなぐ起点になる。組織の活動が⾒える。
CMSにしか
ない情報
部署 ページ数 合計PV コンバージョン
販売1課 36 1564 8
販売2課 12 362 3
販売3課 28 761 7
アクセス解析ツールにしか
ない情報

45. 45
ウェブサイトの帳票システムとしてのCMS
ヘッダー・フッターのない「本⽂だけ」の純粋なデータ。
サイト内検索エンジンやレコメンドエンジンに連携。

46. 46
独⾃拡張ツールの量産
CMSの運⽤業務をどんどん効率化するため、
CMSのAPIを使ったツールを量産した。

47. 47
独⾃拡張ツールの量産
Selenium や PhantomJS のヘッドレスブラウザで
CMSを⾃動操縦。
さまざまな制約でインポートができないデータも
ラクラク⼤量投⼊。

48. 48
CMSをウェブサイトの管理ツールととらえていると
可能性は広がらない。

49. 49
ゲームチェンジは、視点のスイッチからはじまる。

50. 50
AIとCMS

51. 51
AIとCMS ＝ 教師データの貯⽔池としてのCMS

52. 52
ウェブサイトのデータをAIに学習させる
数万ページの⾮構造化データ。
これをAIに学習させる。

53. 53
柔軟な検索エンジンとしてのAI
検索意図を推定して回答する。
ピザがほしい 検索
ピザを注⽂したい 検索
ピザください 検索
ピザのご注⽂ですね。商品リストです。
マルガリータ
カプリチョーザ・・・

54. 54
MA（マーケティングオートメーション）としてのAI
アクセス解析データとコンテンツデータとの連携。
ユーザーの⾏動
レコメンド
おすすめのピザはカプリチョーザです。

55. 55
きれいなデータが必要だ！
ウェブサイトのHTMLそのままでは、
学習の邪魔になる、たくさんのゴミが含まれている。

56. 56
きれいなデータが必要だ！
JavaScript
ヘッダ
フッタ
ナビゲーション
このページ固有の
情報でない＝ノイズ

57. 57
きれいなデータが必要だ！
たとえば「⼤学案内」というナビゲーションが
全ページに埋まっているままで学習した検索エンジンは、
「⼤学案内」というキーワードで検索したら
全ページがヒットしてしまう。

58. 58
きれいなデータが必要だ！
レコメンドであれば、
すべてのページに、すべてのページを推奨するという
意味不明な状況に。

59. 59
きれいなデータが必要だ！
そこでCMSが価値を発揮する。

60. 60
CMSは「本⽂のみ」のデータを保持している
CMSでは「本⽂」が独⽴したカラムとして保存されている。
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
メタデータ

61. 61
CMSはメタデータだけを抽出できる
メタデータも独⽴。教師データの「ラベル」になる。
道⽞坂⼤学
ニュースリリース
ニュース記事
学科・コース
学⽣⽣活
⼊試情報
就職情報
⼤学院
新規記事の登録
タイトル
サブタイトル
公開⽇
年 ⽉ ⽇ カレンダー
プレビュー
本⽂
ドラフトを保存送信して公開 下書きの破棄
メタデータ
URL Title メタデータ
/product-a/ 製品A 決裁者向け
/product-a/feature/ 製品A-特⻑ 担当者向け
/product-b/ 製品B 決裁者向け

62. 62
CMSなら、きれいなデータをAIに渡せる
CMSなら、ノィズのない、必要な部分だけを、
必要なかたちに加⼯して、AIに渡すことができる。

63. 63
CMSは教師データの貯⽔池になる
CMSに貯まった⼤量のデータは、
AIの教師データになる。

64. 64
CMSは教師データの貯⽔池になる
さまざまな企業活動がウェブに収束する時代、
データの終着点がウェブ＝CMSになる。

65. 65
まとめ

66. 66
まとめ
1. AI（⼈⼯知能）は「データでプログラミングする」
2. 「CMSはウェブサイトを管理するもの」という
思い込みを外したとき、可能性は広がる。
3. CMSは、AIのためのデータの貯⽔池になる。

67. 67
ありがとうございました。
⽻⼭ 祥樹
Twitter: @storywriter
Facebook: storywriter.jp
Facebook、ぜひ、つながってください！

68. ⽻⼭のプレゼンのアレ が、
スタンプになりました！
スタンプ名：ハーミィ（CSS編） 作者名：⽻⼭ 祥樹
https://store.line.me/stickershop/product/1228201/ja
Web・CSSネタ
全40種類