新リリース：microCMSテンプレート

microCMS Online Meetup 2023での発表資料です。

Transcript

1. #microcms_meetup
   柴田 和祈
   新リリース：
   microCMSテンプレート
   

   View Slide

2. 自己紹介
   2
   #microcms_meetup
   柴田 和祈 / Kazuki Shibata
   @shibe97
   株式会社microCMSの共同創業者 / CXO
   元デザイナー兼フロントエンドエンジニア
   

   View Slide

3. microCMSとは
   3
   ● Webサイトやアプリ内のコンテンツを
   管理するシステム（CMS）の一種
   ● APIをベースに柔軟にコンテンツを操作
   できるヘッドレスCMS
   #microcms_meetup
   

   View Slide

4. ヘッドレスCMS
   4
   ● ヘッドレス = ビューを持たない
   ● APIベースなのでどんな技術とも連携可能
   ● マルチプラットフォーム対応が可能
   ● SaaSなのでサーバー管理不要
   ● サイトの一部分のみのCMS化が可能
   データベース
   管理画面
   Webサイト モバイルアプリ
   自社サービス
   更新
   microCMS
   API
   表示面
   運用者
   #microcms_meetup
   

   View Slide

5. 5
   全部載せ VS 領域特化
   カスタマイズ性高い
   カスタマイズ性低い
   工数かかる
   工数少ない
   領域特化
   （ハイコード）
   全部載せ
   （ノーコード）
   #microcms_meetup
   

   View Slide

6. 6
   全部載せ VS 領域特化
   カスタマイズ性高い
   カスタマイズ性低い
   工数かかる
   工数少ない
   領域特化
   （ハイコード）
   全部載せ
   （ノーコード）
   #microcms_meetup
   

   View Slide

7. 7
   全部載せ VS 領域特化
   カスタマイズ性高い
   カスタマイズ性低い
   工数かかる
   工数少ない
   領域特化
   （ハイコード）
   全部載せ
   （ノーコード）
   #microcms_meetup
   

   View Slide

8. 敵は工数にあり！
   #microcms_meetup
   

   View Slide

9. 9
   なぜ工数がかかるのか？Case-1
   9
   ヘッドレスCMSならAPIベースなので
   マルチデバイス対応可能！！
   😆
   #microcms_meetup
   

   View Slide

10. 10
    なぜ工数がかかるのか？Case-1
    10
    ただし、表示面は全部自分で作ってね
    #microcms_meetup
    😧
    

    View Slide

11. 11
    なぜ工数がかかるのか？Case-2
    11
    モダンフロントエンドで実装できるの最高！！
    😆
    #microcms_meetup
    

    View Slide

12. 12
    なぜ工数がかかるのか？Case-2
    12
    え、App Router？何それ？
    ISR？Revalidate？わけわかめ！
    󰷺
    #microcms_meetup
    

    View Slide

13. 13
    なぜ工数がかかるのか？Case-3
    13
    ヨシ！ブログの一覧と詳細ができたぞ！
    もう完成は近い！！
    😆
    #microcms_meetup
    

    View Slide

14. 14
    なぜ工数がかかるのか？Case-3
    14
    ページネーション、コンテンツプレビュー、検索
    Core Web Vitals、デプロイ先、レスポンシブ対応
    レンダリング最適化、Analytics対応・・・
    😧
    #microcms_meetup
    

    View Slide

15. 工数がかかる＝お金がかかる
    より品質の高いものは作れるが・・・
    #microcms_meetup
    

    View Slide

16. 今回はW○rdPressで！
    󰱣
    クライアント
    とりあえず・・・
    #microcms_meetup
    

    View Slide

17. 😌
    

    View Slide

18. ● 表示面（フロントエンド）の実装が必要
    ● 最新技術のキャッチアップが必要
    ● 実案件として公開するための細かい実装が多い
    18
    工数がかかる理由まとめ
    #microcms_meetup
    

    View Slide

19. #microcms_meetup
    柴田 和祈
    microCMSテンプレートで
    ゲームチェンジを起こしたい
    

    View Slide

20. 最新技術を用いた質の高いサイトやアプリケーションを
    誰でもすぐに立ち上げられる
    面倒な実装はすでに終わっているため、必要なし
    ブランディングや、他システムとのより高度な連携に注力できる
    20
    どんなゲームチェンジを起こしたいのか？
    #microcms_meetup
    

    View Slide

21. 21
    #microcms_meetup
    

    View Slide

22. DEMO
    22
    #microcms_meetup
    

    View Slide

23. View Slide

24. 24
    microCMSテンプレートが生成するもの
    フロントエンド
    バックエンド
    API
    （ソースコード一式）
    （コンテンツ）
    #microcms_meetup
    

    View Slide

25. 25
    WebアプリやモバイルアプリもOK
    #microcms_meetup
    

    View Slide

26. 26
    誰でも作成・公開できる
    #microcms_meetup
    ● 申請して審査を通せば誰でも
    テンプレートは公開可能
    ● テンプレートの販売についても
    今後対応していく予定
    

    View Slide

27. まとめ
    27
    ● microCMSテンプレートは、microCMSと対をなすフロントエンド実装が
    セットになったテンプレート
    ● テンプレートを利用することで、最新技術を用いた質の高いサイトや
    アプリケーションを誰でもすぐに立ち上げられるようになる
    #microcms_meetup
    

    View Slide

28. Coming soon...
    28
    #microcms_meetup
    

    View Slide

29. Thanks :)
    29
    #microcms_meetup
    https://discord.gg/K3DPqw4EJ2
    @micro_cms
    

    View Slide