WCAN 新潟出張版 2018でお話しした内容です。

1. 有限会社アップルップル 森⽥かすみ
WCAN 新潟出張版 2018 sponsored by a-blog cms
CMS
B I ABC

2. 森⽥かすみ
有限会社アップルップル
@KasumiMorita
趣味はかっぱの
イラストを描くこと。
デザイナー

3. 名古屋の⼈だけど
実は3⽉の新潟グラムに
ひっそり（？）参加していました

4. そして、今⽇はお話をする側に

5. “ブロックタイプエディタ”
聞いたことありますか？

6. ブロックタイプエディタ
すごくいいですよ
（かれこれブロックタイプエディタ歴6年⽬突⼊…）

7. Movable TypeWordPress
Movable Type7 2018年5⽉16⽇〜時期は未定 Ver.5.0搭載予定
最近よく話題になっている理由

8. ブロックタイプエディタ普及の問題点
今までWYSIWYGエディタ使ってた⼈は
WYSIWYG
エディタがいい って⾔う

9. ブロックタイプエディタを使って変わったこと
あれ？マークアップが変わってる…！？
WYSIWYG使⽤中 ブロックタイプエディタ使⽤後
https://mkasumi.com/entry-29.html

10. ⽂章構造を意識した原点は
ブロックタイプエディタを使い始めて
と知ったところから
「B」と「⾒出し」は違う

11. ⽂章構造を意識し始めたのはブロックタイプエディターがきっかけでした。
「⾒出し」を知ってからは構造的に⽂章を書くことを意識しはじめました。
…ん？
「⾒出し」って
なんだろう
「B」っぽい
のはこっちに
あるし…
ブロックタイプエディタのおかげで
HTMLわからない私が⾒出しの存在に気づいた…！

12. 結果、ここまで成⻑しました
⾒出しに「◇」書いてた⼈が 332いいね、116はてブ、218ポケット
https://mkasumi.com/thinking-visual-without-color.html⾊に頼らないビジュアル表現を考える
ブロックタイプエディタを通して、読みやすい⽂章構造を意識しはじめた
私が⾒出しに「◇」や「B」を使うような⼈のままだったら
ここまで数字は伸びなかったと思う

13. ブロックタイプエディタ は
コンテンツを書くことに集中できる
HTMLの崩壊などの本質とは別の問題では悩まない
書いてる最中に装飾に気を回さないから集中できる
つまり、書きやすくなる
1.
2.

14. もうWYSIWYGエディタには
戻りたくない！
⼀度、味をしめたら
…って思うはず！

15. “ブロックタイプエディタ”
ちょっと気になってきましたか？

16. 今⽇のアジェンダ
• ブロックタイプエディタとは
• WYSIWYGエディタの問題とは
• 各CMSのエディタ⽐較

17. B I ABC
ブロックタイプエディタとは

18. デモ

19. 実は他にもたくさんのCMSが導⼊している
（プラグインで対応）

20. Concrete5はブロック型CMS
余談ですが
Not ブロックタイプエディタ

21. B I ABC
WYSIWYGエディタの問題とは

22. 以前まではWYSIWYGエディタが主流だった

23. WYSIWYGエディタが
抱えていた問題とは

24. 意図しないソースコードが出⼒されてしまう

25. 思ったようにレイアウトできない
正解のレイアウト WYSIWYGで組んだレイアウト

26. 2カラムの実装正しいHTML
ブロックタイプエディタでは
⼤体の
問題解決できます
なかにはWYSIWYGエディタ引き継いでるエディタもある…

27. B I ABC
各CMSのエディタ⽐較

28. ブロックタイプエディタを
採⽤しているCMS

29. ブロックタイプエディタ
と⾔っても、CMSによって
全然使い⽅や考え⽅が違う

30. 呼び⽅もそれぞれ異なる
Gutenberg
BurgerEditor
ブロックエディタ
Matrix Fields
ユニット

31. グループ分けしてみた

32. 使いやすさ
直感
重視
管理
重視
使いやすさ

33. サイトの規模でも分けられる
サイトの規模
個⼈サイト
〜
⼩規模サイト
⼩規模サイト
〜
⼤規模サイト
直感
重視
だからこそ！
管理
重視
だからこそ！

34. 直感重視タイプ

35. Jimdo

36. Wix

37. 直感重視タイプにいえること
• 管理画⾯に⼊らない
• カスタマイズすることをあまり想定していないので⼊⼒
者側の気持ちを第⼀優先にしてUI設計されている

38. いいとこどりタイプ

39. WordPress(Gutenberg)

40. Baser CMS(Burger Editor)

41. いいとこ取りタイプにいえること
• 管理画⾯に⼊ってから⼊⼒画⾯がある
• ⾒えてるまま更新できると思ったら、閲覧側ページが読
み込んでるスタイルによって表⽰が変わるのでユーザー
が⼾惑う可能性は否めない

42. Gutenbergについて
https://ja.wordpress.org/gutenberg/

43. UIがCMSというよりウェブサービスっぽい
Gutenbergの⾯⽩いところ
noteDropbox Paper
書く⼈のユーザー体験の向上を重視しているように⾒受けられる

44. 管理重視タイプ

45. Craft CMS

46. Movable Type

47. a-blog cms

48. 管理重視タイプにいえること
• 管理画⾯に⼊ってから積まれたブロック（⼊⼒画⾯）が
ある
• 直感的とは⾔えずレイアウトする際は予想する⼒が必要
になるけれど、デザインとコンテンツを分離して管理で
きる

49. 他のタイプとの考え⽅の違い
ブロックエディタの導⼊でデザインとコンテンツを分離すること
で、コンテンツの可搬性を⾼めることが可能になるという。
http://ascii.jp/elem/000/001/676/1676990/

50. 他のタイプとの考え⽅の違い
コンテンツファーストな考え⽅を持つ

51. スタイルのシンボル化
※「シンボル化」はSketchや
Adobe XDに導⼊されている機
能で、スタイルを⼀括管理で
きる
⾒出しにだって種類はいっぱいある

52. 特にブロックを活かしているのは
初期から導⼊してるCraft CMSとa-blog cms
ブロックの⾮表⽰機能 ステップの少ないUI

53. a-blog cms の「ユニット」
Unit 単位=
コンテンツの を意味する最⼩の単位

54. 特定のユニットだけを取り出す
REST APIでも結果としてできるかも
しれない
もともと⽤意されている機能と拡張し
てできることは結果は同じようでまた
違った意味を持つ
ギャラリー
ページが
作れる！

55. B I ABC
各エディタの調査結果まとめ

56. ⼀⾔にブロックタイプエディタと⾔っても、
CMSによって全然使い⽅や考え⽅が違う
直感的な操作を重視？
コンテンツの管理しやすさ重視？

57. まだまだ本質的に発展途上の
ブロックタイプエディタが多い

58. ブロックタイプエディタ
これからもっとよくなれるよ…！
WYSIWYGエディタに戻らないで！
ん...？って思っても

59. 最後に

60. ブロックタイプエディタは
いいぞ！
ブロックタイプエディタで構造を意識して読みやすい⽂章つくろう

61. ありがとうございました！
「ほんわか かっぱさん」LINEスタンプもあるよ！
KasumiMorita
kasumi.morita.750
https://mkasumi.com