Jamstackの社内プレゼン

私は現在某公立高校で教員として勤務しています。
教員の働き方改革と学校の情報発信をより良いものにするために社内でプレゼンを行っています。
この資料はその時のものになります。ぜひ、 Jamstack導入と教育現場の現状について書いたので、参考にしてみてください(また資料に不備などありましたら、ご指摘いただけると大変ありがたいです).

Transcript

1. ~○高の情報発信をデザインする~
   Yohei Nozaki
   

   View Slide

2. コロナ禍のいま、情報発信を
   はじめませんか？
   

   View Slide

3. とは言っても〇〇高校は情報発信に
   すでに力を入れています。
   

   View Slide

4. 〇〇高校の情報発信のいま
   学校HP
   

   View Slide

5. ・70000以上のアクセス(2020/7/8)
   ・連絡事項や部活動実績、日誌など　
   の定期的な情報発信
   

   View Slide

6. 成功しているように見えるが……
   

   View Slide

7. ○高の課題①　先生の疲労
   最重要課題！！！
   部活動紹介→　紙で提出
   定期的な更新、リアルタイム
   の発信が困難。
   決済を回したりするのはとても大変
   

   View Slide

8. ○高の課題②　
   モチベーションが上がらない
   文章書くのって正直きつい。
   HPの更新意味ある？他にも仕事あるし。。。
   管理をしている人に業務が集中。
   なので、内容が業務的な報告になりがち。
   

   View Slide

9. ○高の課題③　デザイン　
   ・他校との差別化が出来ていない
   ・アクセシビリティを考慮したデザイン
   (ユニバーサルデザイン）にするのは公
   教育機関としての義務
   

   View Slide

10. 課題:デザインのカスタマイ
    ズに限界があるので、ページ
    が遅い。ユニバーサルデザ
    インになっていない
    

    View Slide

11. 他校の実践例：秩父高校
    https://chichibu-highschool.com/
    ・部活動紹介
    ・施設紹介
    ・OBOGの声を集　
    めたページが　と
    ても魅力
    

    View Slide

12. ○高はどうやって情報発信をデ
    ザインする？
    

    View Slide

13. ○高で働く先生を幸せに
    ・私の過労で休職になった経験
    ・サイト運営の業務をスムーズにした
    い。
    ・外部に発信するコンテンツの制作過
    程の業務改善は先生の働き方改革
    への大きなメッセージになる
    

    View Slide

14. ○高で働く先生を幸せに
    ・「更新方法簡単になったから、たまに
    はHP更新してみるか....」
    ・コンテンツ管理以外をやる必要がなく
    なったから、業務が楽になった！
    という世界を実現するのが目的
    

    View Slide

15. ○高の生徒の取組を発信
    ・生徒の生き生きとした取組を伝える。
    ・生徒のモチベーションに
    ・(生徒自身が情報発信をして、情報教
    育や総探的な活動をすることも可能。)
    

    View Slide

16. どう実現する？
    

    View Slide

17. -Jamstack-という技術
    を使ってコンテンツ管理を身近
    で手軽なものに！！
    参考：https://microcms.io/blog/what-is-jamstack/
    

    View Slide

18. Jamstackとは？
    JavaScript
    API
    Markup
    コンテンツのこと
    技術的な面倒は他が解
    決。教員はこのコンテン
    ツ制作に集中することが
    出来る。
    

    View Slide

19. microCMS
    コンテンツ管理・入稿をブラウザ上で身
    近かつ手軽に！
    https://microcms.io/
    

    View Slide

20. microCMSの導入事例
    「コニカミノルタ株式会社」
    https://microcms.io/blog/usecase-konicaminolta
    「TaoTao株式会社」
    https://microcms.io/blog/interview-taotao
    　　　　　　　　　　　　　　　　など多数
    

    View Slide

21. microCMS
    ・セキュリティ○
    ・編集のしやすさ
    ・権限管理(アップロードを一部の　人
    しか出来なくするなど）
    ・唯一の日本製のHeadlessCMS
    

    View Slide

22. デモ
    

    View Slide

23. 使用例：
    ・生徒会や部活動の生徒に記事や　
    活動報告を書いてもらう(教員が　
    チェック)。
    ・部活動や学校の施設を動画で紹　
    介する。
    ・総探の発表の一貫で外部に発信　
    する。　 etc….
    

    View Slide

24. 使用例：
    Jamstackなら、生徒も巻き込んだり
    して、教員の働き方にも無理のない
    持続可能なサイト運営が可能！！
    

    View Slide

25. アプリのようにデスクトップに追
    加、通知を送ったりすることも出
    来る機能
    Jamstackで作成されたサイトの
    スコア
    

    View Slide

26. Jamstack比較表
    従来(ネットコモンズ) Jamstack(microCMS)
    更新
    紙ベースor更新の仕方が分かり
    づらい。更新する気が起きない。
    重労働。
    投稿する場所がWEB上で別で管理され
    ているので分かりやすい。ドキュメントも
    内包。
    デザイン
    多くの制限あり。アクセシビリ
    ティ×保守性×
    自由にデザイン。コンテンツ管理とデザイ
    ンが分かれているので、サイトの保守・管
    理もしやすい。
    セキュリティ 紙による決済・チェックが必要。
    権限管理を自由に設定。 WEB上での
    チェック、アップロードも可能 (生徒の参加
    も)。
    

    View Slide

27. デザインのカスタマイズも可能
    魅力的・保守性のあるサイトへ
    

    View Slide

28. 料金 https://microcms.io/pricing/
    

    View Slide

29. Jamstackのサイトはプロが作成
    すると100万〜...。
    (アマチュアですが....)私、野崎洋
    平がサイト制作無料で承ります。
    

    View Slide