Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

microCMS

May 31, 2023
Tweet

More Decks by microCMS

Other Decks in Technology

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. 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