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