Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

最近よく聞くブロックタイプエディタを
CMSごとに調べてみた

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

最近よく聞くブロックタイプエディタを
CMSごとに調べてみた

  1. 1. 有限会社アップルップル 森⽥かすみ WCAN 新潟出張版 2018 sponsored by a-blog cms 
 CMS B I ABC
  2. 2. 森⽥かすみ 有限会社アップルップル @KasumiMorita 趣味はかっぱの
 イラストを描くこと。 デザイナー
  3. 3. 名古屋の⼈だけど
 実は3⽉の新潟グラムに
 ひっそり(?)参加していました
  4. 4. そして、今⽇はお話をする側に
  5. 5. “ブロックタイプエディタ” 聞いたことありますか?
  6. 6. ブロックタイプエディタ
 すごくいいですよ (かれこれブロックタイプエディタ歴6年⽬突⼊…)
  7. 7. Movable TypeWordPress Movable Type7 2018年5⽉16⽇〜時期は未定 Ver.5.0搭載予定 最近よく話題になっている理由
  8. 8. ブロックタイプエディタ普及の問題点 今までWYSIWYGエディタ使ってた⼈は WYSIWYG
 エディタがいい って⾔う
  9. 9. ブロックタイプエディタを使って変わったこと あれ?マークアップが変わってる…!? WYSIWYG使⽤中 ブロックタイプエディタ使⽤後 https://mkasumi.com/entry-29.html
  10. 10. ⽂章構造を意識した原点は
 ブロックタイプエディタを使い始めて と知ったところから 「B」と「⾒出し」は違う
  11. 11. ⽂章構造を意識し始めたのはブロックタイプエディターがきっかけでした。
 「⾒出し」を知ってからは構造的に⽂章を書くことを意識しはじめました。 …ん?
 「⾒出し」って
 なんだろう 「B」っぽい のはこっちに あるし… ブロックタイプエディタのおかげで
 HTMLわからない私が⾒出しの存在に気づいた…!
  12. 12. 結果、ここまで成⻑しました ⾒出しに「◇」書いてた⼈が 332いいね、116はてブ、218ポケット https://mkasumi.com/thinking-visual-without-color.html⾊に頼らないビジュアル表現を考える ブロックタイプエディタを通して、読みやすい⽂章構造を意識しはじめた 私が⾒出しに「◇」や「B」を使うような⼈のままだったら
 ここまで数字は伸びなかったと思う
  13. 13. ブロックタイプエディタ は
 コンテンツを書くことに集中できる HTMLの崩壊などの本質とは別の問題では悩まない 書いてる最中に装飾に気を回さないから集中できる つまり、書きやすくなる 1. 2.
  14. 14. もうWYSIWYGエディタには 戻りたくない! ⼀度、味をしめたら …って思うはず!
  15. 15. “ブロックタイプエディタ” ちょっと気になってきましたか?
  16. 16. 今⽇のアジェンダ • ブロックタイプエディタとは • WYSIWYGエディタの問題とは • 各CMSのエディタ⽐較
  17. 17. B I ABC ブロックタイプエディタとは
  18. 18. デモ
  19. 19. 実は他にもたくさんのCMSが導⼊している (プラグインで対応)
  20. 20. Concrete5はブロック型CMS 余談ですが Not ブロックタイプエディタ
  21. 21. B I ABC WYSIWYGエディタの問題とは
  22. 22. 以前まではWYSIWYGエディタが主流だった
  23. 23. WYSIWYGエディタが
 抱えていた問題とは
  24. 24. 意図しないソースコードが出⼒されてしまう
  25. 25. 思ったようにレイアウトできない 正解のレイアウト WYSIWYGで組んだレイアウト
  26. 26. 2カラムの実装正しいHTML ブロックタイプエディタでは ⼤体の 問題解決できます なかにはWYSIWYGエディタ引き継いでるエディタもある…
  27. 27. B I ABC 各CMSのエディタ⽐較
  28. 28. ブロックタイプエディタを 採⽤しているCMS
  29. 29. ブロックタイプエディタ
 と⾔っても、CMSによって 全然使い⽅や考え⽅が違う
  30. 30. 呼び⽅もそれぞれ異なる Gutenberg BurgerEditor ブロックエディタ Matrix Fields ユニット
  31. 31. グループ分けしてみた
  32. 32. 使いやすさ 直感 重視 管理 重視 使いやすさ
  33. 33. サイトの規模でも分けられる サイトの規模 個⼈サイト
 〜
 ⼩規模サイト ⼩規模サイト 〜
 ⼤規模サイト 直感 重視 だからこそ! 管理 重視 だからこそ!
  34. 34. 直感重視タイプ
  35. 35. Jimdo
  36. 36. Wix
  37. 37. 直感重視タイプにいえること • 管理画⾯に⼊らない • カスタマイズすることをあまり想定していないので⼊⼒ 者側の気持ちを第⼀優先にしてUI設計されている
  38. 38. いいとこどりタイプ
  39. 39. WordPress(Gutenberg)
  40. 40. Baser CMS(Burger Editor)
  41. 41. いいとこ取りタイプにいえること • 管理画⾯に⼊ってから⼊⼒画⾯がある • ⾒えてるまま更新できると思ったら、閲覧側ページが読 み込んでるスタイルによって表⽰が変わるのでユーザー が⼾惑う可能性は否めない
  42. 42. Gutenbergについて https://ja.wordpress.org/gutenberg/
  43. 43. UIがCMSというよりウェブサービスっぽい Gutenbergの⾯⽩いところ noteDropbox Paper 書く⼈のユーザー体験の向上を重視しているように⾒受けられる
  44. 44. 管理重視タイプ
  45. 45. Craft CMS
  46. 46. Movable Type
  47. 47. a-blog cms
  48. 48. 管理重視タイプにいえること • 管理画⾯に⼊ってから積まれたブロック(⼊⼒画⾯)が ある • 直感的とは⾔えずレイアウトする際は予想する⼒が必要 になるけれど、デザインとコンテンツを分離して管理で きる
  49. 49. 他のタイプとの考え⽅の違い ブロックエディタの導⼊でデザインとコンテンツを分離すること で、コンテンツの可搬性を⾼めることが可能になるという。 http://ascii.jp/elem/000/001/676/1676990/
  50. 50. 他のタイプとの考え⽅の違い コンテンツファーストな考え⽅を持つ
  51. 51. スタイルのシンボル化 ※「シンボル化」はSketchや Adobe XDに導⼊されている機 能で、スタイルを⼀括管理で きる ⾒出しにだって種類はいっぱいある
  52. 52. 特にブロックを活かしているのは 初期から導⼊してるCraft CMSとa-blog cms ブロックの⾮表⽰機能 ステップの少ないUI
  53. 53. a-blog cms の「ユニット」 Unit 単位= コンテンツの を意味する最⼩の単位
  54. 54. 特定のユニットだけを取り出す REST APIでも結果としてできるかも しれない もともと⽤意されている機能と拡張し てできることは結果は同じようでまた 違った意味を持つ ギャラリー
 ページが
 作れる!
  55. 55. B I ABC 各エディタの調査結果まとめ
  56. 56. ⼀⾔にブロックタイプエディタと⾔っても、
 CMSによって全然使い⽅や考え⽅が違う 直感的な操作を重視?
 コンテンツの管理しやすさ重視?
  57. 57. まだまだ本質的に発展途上の
 ブロックタイプエディタが多い
  58. 58. ブロックタイプエディタ
 これからもっとよくなれるよ…! WYSIWYGエディタに戻らないで! ん...?って思っても
  59. 59. 最後に
  60. 60. ブロックタイプエディタは いいぞ! ブロックタイプエディタで構造を意識して読みやすい⽂章つくろう
  61. 61. ありがとうございました! 「ほんわか かっぱさん」LINEスタンプもあるよ! KasumiMorita kasumi.morita.750 https://mkasumi.com

×