Tweet
Tweet

Slide 1

Slide 1 text

📮 microCMSを使った ビジネスサイドとのコミュニケーション meijin / 株式会社NoSchool CTO

Slide 2

Slide 2 text

自己紹介 - meijin / 株式会社NoSchool CTO - Twitter: @Meijin_garden - 最近はReact / React Nativeをよく書いてる - Webフロントエンドとソフトウェア設計が好き - 趣味は将棋☗ 2

Slide 3

Slide 3 text

📌 本スライドの要点 3 - microCMSの良いところを語るスライドです - microCMSはビジネスサイドと一緒に 管理画面を見ながらデータ構造を設計できる - 何ができる/できないのイメージ共有がしやすい - カテゴリー分けとカスタムフィールドを紹介

Slide 4

Slide 4 text

microCMSを使った ビジネスサイドとの コミュニケーション 対象のJamstackサービスと 運営体制 4

Slide 5

Slide 5 text

マナリンクTeachers - https://for-teachers.manalink.jp/ - Next.js(ISR) + microCMS - オンライン家庭教師向けの情報メディア インタビュー記事や指導のコツなどを掲載 5

Slide 6

Slide 6 text

6

Slide 7

Slide 7 text

運営体制 - 󰡈 ビジネスサイド1名 - 企画、先生へのインタビューなど - 󰞵 開発サイド1名（私） - 日頃アプリや決済機能なども開発しているので、 工数を抑えて開発するためにバックエンドはmicroCMS！ - サーバー費用も安い（Vercel） 7

Slide 8

Slide 8 text

microCMSを使った ビジネスサイドとの コミュニケーション 要件定義の例① 記事のカテゴリー分け 8

Slide 9

Slide 9 text

記事のカテゴリー分けとは - https://for-teachers.manalink.jp/useful/job-side - ポイント - 大カテゴリと小カテゴリがある - 各カテゴリごとに一覧があり、URLとTitleとDescription等があ る - 各記事につき必ず大小1つずつ紐づく 9

Slide 10

Slide 10 text

STEP1 各カテゴリごとの仕様を表で整理 10

Slide 11

Slide 11 text

STEP2 カテゴリごとに”動的に”変わる点を洗い出し - URL(に使われる英単語) - カテゴリの名前 - Title / Description - どの大カテゴリに属するか※小カテゴリのみ 11

Slide 12

Slide 12 text

STEP3 microCMSでAPIを作成 動的に変わる部分を スキーマとして設計 12

Slide 13

Slide 13 text

ポイントは、 ここまでの流れをすべて ビジネスサイドの方でも自分でできること👍 13

Slide 14

Slide 14 text

󰳕󰳖最初は一緒にAPIを作成 ↓ 󰳕「では同じ調子で作成してください」 「わかりました」󰳖 「他のAPIのカテゴリ作成もできました！」󰳖 󰳕「内容OKです！ 　　ダミーデータ入稿お願いします！」 14

Slide 15

Slide 15 text

この開発フローの良いところ 15 - 早い段階からダミーデータの入稿に入れるため、 要件をビジネスサイドにイメージしてもらいやすい - リレーションとかスキーマみたいな概念を肌で感じてもらい やすい（microCMSさんのワーディングが上手）

Slide 16

Slide 16 text

microCMSを使った ビジネスサイドとの コミュニケーション 要件定義② 記事本文中に吹き出しを埋めたい 16

Slide 17

Slide 17 text

こんな感じで記事に吹き出しを入れたい要望 17 会話を載せたいコンテンツ - 先生へのインタビュー - 先生方との勉強会

Slide 18

Slide 18 text

普通にmicroCMSを使った場合 本文に指定するリッチエディタフィールドは 単純に大きいHTMLなので、吹き出しを埋めるのは困難 18

Slide 19

Slide 19 text

STEP1 カスタムフィールド 19

Slide 20

Slide 20 text

STEP2 カスタムフィールドの繰り返しを設定 20

Slide 21

Slide 21 text

STEP3 React実装 21

Slide 22

Slide 22 text

企画の流れ 󰳕「microCMSこんなことできるみたいです〜」 　（Slackに記事をシェア） 「記事に吹き出しを埋めたいです」󰳖 󰳕「たぶんできそうなのでやってみます(勘)」 　「実装できたので入稿お願いします！」 「入稿しました！」󰳖 22

Slide 23

Slide 23 text

コミュニケーションのポイント 📌 社内でmicroCMSのノウハウ記事をシェアする 📌 管理画面から入力可能なデータ形式なら実装可能、と いう話をする。できる/できないのイメージ共有がしやすい 23

Slide 24

Slide 24 text

24

Slide 25

Slide 25 text

microCMSを使った ビジネスサイドとの コミュニケーション まとめ 25

Slide 26

Slide 26 text

microCMSを使ったコミュニケーション 📌 管理画面を一緒に見ながら要件定義を進める 📌 何ができる/何ができないのイメージ共有をする 📌 慣れてきたら自分でAPI作成・改修ができる （UIによるITリテラシの底上げがノーコードやローコードの本質なのかも？） 26

Slide 27

Slide 27 text

microCMSを使った ビジネスサイドとの コミュニケーション 告知 27

Slide 28

Slide 28 text

オンライン家庭教師マナリンクはエンジニア採用中！ 以下のサービスを開発しています 28 先生を集客するメディア 先生を探せるWebサイト オンライン指導専用アプリ

Slide 29

Slide 29 text

29

Slide 30

Slide 30 text

マナリンクTeachers (https://for-teachers.manalink.jp/) めっちゃ面白いインタビュー記事を多く 掲載しているのでぜひ 読んでいただきたいです （右のは私の個人的なおすすめ） 30

Slide 31

Slide 31 text

ご清聴ありがとうございました 発表内容等についてもっと知りたい /カジュアル面談のお申込みはコチラ 　　　@Meijin_garden 31