---
title: Kurocoを利用したプロジェクトの進行イメージ
description: Kurocoを利用したプロジェクトの進行イメージについて説明します。今回は会員制社内ポータルサイトを構築する場合を想定し、実際にプロジェクトをどのように進めるのか、必要なツールは何か、それぞれの対応内容と役割は何かをまとめました。
---

本ドキュメントでは、Kurocoを利用したプロジェクトの進行イメージについて説明します。

今回は会員制社内ポータルサイトを構築する場合を想定し、実際にプロジェクトをどのように進めるのか、必要なツールは何か、それぞれの対応内容と役割は何かをまとめました。プロジェクトの進め方の流れの参考としてご利用ください。

:::caution
実際には案件によって仕様やプロジェクトメンバー、ツールが異なります。あくまでも参考としてご確認ください。
:::

## 案件概要

今回は、下記案件を想定しています。

### 開発するWebサイトの仕様

- 会員制社内ポータルサイト構築
- 新規ドメイン取得

### 利用するフレームワークについて

本プロジェクトで利用するフレームワークです。

|利用フレームワーク |概要 |
| :--- | :--- |
|Kuroco|バックエンドシステム|
|[Vuetify](https://vuetifyjs.com/ja/)|UIフレームワーク|
|[Figma](https://www.figma.com/)|Figma|

### 作業範囲と担当者

本プロジェクトの作業範囲と担当者です。

|No |フェーズ |作業範囲 |担当者 |
|:--- | :--- | :--- | :--- |
|1 |プロジェクト設計 |[要件定義・システム・UX設計](#1-要件定義・システム・ux設計)|プロジェクトマネージャー<br/>デザイナー|
|2 | |[画面・UI設計](#2-画面・ui設計)|プロジェクトマネージャー<br/>デザイナー|
|3 | |[データ構造・API設計(Kuroco)](#3-データ構造・api設計kuroco)|バックエンドエンジニア<br/>フロントエンドエンジニア|
|4 |デザイン |[UIデザイン](#4-uiデザイン)|デザイナー|
|5 | |[コーディング](#5-コーディング)|コーダー|
|6 |開発 |[マイクロサービス開発](#6-マイクロサービス開発)|バックエンドエンジニア|
|7 | |[API設定](#7-api設定)|バックエンドエンジニア<br/>フロントエンドエンジニア|
|8 | |[外部API連携](#8-外部api連携)|バックエンドエンジニア|
|9 | |[フロントエンド構築(含APIの呼び出し)](#9-フロントエンド構築含apiの呼び出し)|フロントエンドエンジニア|
|10 | |[環境構築](#10-環境構築)|バックエンドエンジニア|
|11 | |[データ移行](#11-データ移行)|バックエンドエンジニア|
|12 |テスト |[総合テスト](#12-総合テスト)|テスター|
|13 | |[動作検証(受入)](#13-動作検証受入)|顧客|
|14 |リリース |[リリース](#14-リリース)|プロジェクトマネージャー|
|15 |運用 |[サイト運用](#15-サイト運用)|プロジェクトマネージャー<br/>バックエンドエンジニア<br/>フロントエンドエンジニア|

:::tip
役割分担については、[[営業資料] -> [プロジェクト役割分担表]](/ja/docs/about/sales/#プロジェクト役割分担表)をご確認ください。
:::

### 管理ツール

プロジェクト管理やコミュニケーションツールとして、次のサービスを利用します。

ツールは複数に分散するほど管理が煩雑になり、見落としのリスクを高めます。そのため以下のツールに限定し管理しています。  

|ツール |用途 |概要 |
| :--- | :--- |:--- |
|[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)|設計|ページ一覧、ページごとの期限、ステータス管理、Issue管理などに利用します。<br/>参考：[WBS・タスクリストのサンプル](https://docs.google.com/spreadsheets/d/1uWbBbQ96JFTFrEI5LyeDi54A9YjBY4nRZ_0Mie_GUsk/edit?usp=sharing)|
|[Backlog](https://backlog.com/ja/) |課題管理<br/>議事録共有 |課題管理やミーティング議事録として利用し、共有します。社内と社外向けをそれぞれ用意します。|
|[Slack](https://slack.com)|コミュニケーション|連絡コミュニケーションツールとして利用します。|
|[Google Meet](https://apps.google.com/intl/ja/meet/)|コミュニケーション|オンラインミーティングに利用します。|

### コミュニケーション計画

クライアント企業および社内でのミーティングを次のように設定します。

|項目 |概要 |参加者 |頻度 |
| :--- | :--- |:--- |:--- |
|キックオフ |プロジェクト開始時に開催します。 |全メンバー |１回。プロジェクト開始時 |
|定例ミーティング(クライアント) |クライアント企業との進捗管理ミーティングです。(※1) |フェーズ毎該当メンバー |週１回 |
|定例ミーティング(社内) |社内メンバー向けの進捗管理ミーティングです。 |社内メンバー |週1回 |
|運用レクチャー |クライアント向けの運用方法のレクチャーです。 |全メンバー |1回。運用フェーズ |

#### **※1. 定例ミーティングでの議題内容**
定例ミーティングの主な内容は次の通りです。

- 仕様の確認
  - 仕様に関する不明点の確認
  - Kurocoの実装方法の提案
- 進捗確認
  - スケジュール、作業状況確認、残課題の確認
  - 作業が遅れている場合は、疑問点や問題点について具体的に確認

## 1. 要件定義・システム・UX設計

要件定義・システム・UX設計は、次のような手順で行います。

### サイトマップ作成

Googleスプレッドシートを用いて、サイトマップを作成します。これを用いて、クライアント企業とページや機能の過不足を確認します。

### ページ単位での構成要素の定義

作成したサイトマップをベースに、各ページごとの構成要素を定義、確認します。ページをまたがって共通化できる部品があれば、グループ化して定義します。

### 動作環境の確定
サイトの実行動作環境についてクライアント企業と確認します。

## 2. 画面・UI設計

### ワイヤーフレーム制作

サイトマップ・ページ構成要素をもとに、Figmaを利用してワイヤーフレームを制作します。

## 3. データ構造・API設計(Kuroco)

### データ構造
Kuroco管理画面で設定するデータ構造を設計します。
- コンテンツ定義
- グループ設定
- メンバー項目定義

### 参考：
- [管理画面マニュアル -> コンテンツ定義](/ja/docs/management/content-structure-topics-group/)
- [管理画面マニュアル -> グループ](/ja/docs/management/group/)
- [管理画面マニュアル -> メンバー](/ja/docs/management/member/)

### API設計

Kurocoを用いてAPI設計をします。まずページごとの構成要素に基づいて、必要なAPIを洗い出します。

洗い出したAPIはGoogleスプレッドシートにて、API一覧としてまとめます。また、GoogleスプレッドシートのPageListに、そのページで利用するAPIのエンドポイントを記載します。

この時、ワイヤーフレーム上に、どのAPIを利用するのか記述しておきます。これはフロントエンド担当者の役割です。また、API仕様の管理はバックエンド担当者の役割になります。

## 4. UIデザイン

Figmaで作成したワイヤーフレームは、そのままデザインにも利用します。

作成後、デザイン担当者とクライアント企業を含めてミーティングを行います。その際には、ページごとの要素や詳細な仕様について確認します。修正があった場合には、ミーティング時に修正した上で、その場で全員の確認と承認を得ます。

## 5. コーディング

本案件ではVuetifyを利用して、静的にコーデイングを行います。

なお、挙動を伴うコンポーネントは使わず、APIで処理する方が良いケースもあります。API設計時に、コーディング担当者とAPI設計者の間で情報共有しておくと良いでしょう。

## 6. マイクロサービス開発
デザインの承認が行われたら、開発フェーズに入ります。

### Kurocoサイト登録
[Free Trialページ](https://kuroco.app/ja/free_trial/)より、Kurocoサイトの登録をします。

### GitHubにて開発リポジトリ追加
GitHubに開発リポジトリを追加します。フロントエンドはGit管理をします。

参考: [GitHub Docs リポジトリを作成する](https://docs.github.com/ja/github/getting-started-with-github/quickstart/create-a-repo)

### KurocoFrontのホスティングとGit連携
KurocoFrontを利用し、KurocoとGitHubリポジトリを接続します。

参考: [GitHubからKurocoFrontへソースをデプロイする方法](/ja/docs/tutorials/connect-to-github-with-kuroco-front/)

### Kuroco管理画面の設定をする
Kurocoの管理画面にて設定します。

#### **コンテンツ定義設定(拡張項目設定)**
[データ構造・API設計(Kuroco)](#3-データ構造・api設計kuroco)をもとにコンテンツ定義を設定します。

参考:
- [チュートリアル コンテンツ定義を作成する](/ja/docs/tutorials/adding-a-topics/)<br/>
- [管理画面マニュアル コンテンツ定義](/ja/docs/management/content-structure-topics-group/)

#### **メンバー拡張項目設定**
グループの設定と会員メンバーの設定をします。

参考:
- [管理画面マニュアル メンバー拡張項目設定](/ja/docs/management/extra-information/)
- [チュートリアル グループを作成する](/ja/docs/tutorials/how-to-make-new-group/)

## 7. API設定
[API設計](#api設計)をもとにAPIの設定します。

参考:
- [チュートリアル API エンドポイントの設定方法](/ja/docs/tutorials/configure-endpoint/)
- [管理画面マニュアル API API List](/ja/docs/management/api-list/)

## 8. 外部API連携
Kurocoは外部サービスとの連携も可能です。外部サービスと連携することで、機能の幅が広がります。

### SendGridの設定(メールの送信元として利用するメールアドレス)
問い合わせなど、Webサイトの送信（From）で利用するメールアドレスを独自ドメインにする場合には、SendGridの設定が必要です。  
SendGridの無料アカウントで設定可能ですので、SendGridのアカウントを取得し設定をお願いします。  
※ メールアドレスドメインが  `@kuroco-mail.app ` で良い場合は、SendGridの設定は不要です。

参考: [SendGrid連携方法](/ja/docs/tutorials/how-to-link-sendgrid/)

### Google Analyticsの設定
Google Analyticsと連携することでサイト分析ができるようになります。

参考: [Google Analytics連携方法](/ja/docs/tutorials/how-to-link-google-analytics/)

## 9. フロントエンド構築(含APIの呼び出し)
### API呼び出し
作成したAPIをフロントエンド側で呼び出します。

### APIを実行する
フロントエンドの開発に伴って、コンテンツをAPI経由で取得できるかテストしてください。
API実行の確認にはSwaggerの利用が可能です。

参考: [Swagger UIを利用して、コンテンツのデータ構造を確認する](/ja/docs/tutorials/using-swagger-to-check-the-structure-of-data/)

## 10. 環境構築
リリースに向けての環境構築をします。今回はドメインの取得と適用をします。

なお、今回のプロジェクトは認証が伴うWebサイトの構築を想定しております。
その場合、フロントエンドドメインとAPIドメインを準備する必要があるので、２つのドメインを設定する前提で進めます。

WebブラウザによってはサードパーティーCookieの利用ができず、ログインできないエラーが発生する場合もあるためです。  
参考記事:[Google、ChromeでのサードパーティーCookie廃止を2023年まで延期](https://www.itmedia.co.jp/news/articles/2106/25/news067.html)

### ドメインの取得
下記２つのドメインを取得いただくようクライアントに依頼します。

|ドメイン |用途 |
| :--- | :--- |
|`www.CLIENT.app` |フロントエンドドメインとして利用します。 |
|`kuroco.CLIENT.app` |APIドメインとして利用します。 |

### ドメインの設定
KurocoFrontへ独自ドメインを適用します。ドメインの設定には下記作業が必要です。

- フロントエンドドメイン DNSの変更
- APIドメイン DNSの変更
- Kuroco管理画面にてドメインの設定

ドメインは下記ドキュメントを参考に設定してください。

参考: [KurocoFrontで独自ドメインを利用する手順](/ja/docs/tutorials/using-a-custom-domain-name-on-kurocofront/)

## 11. データ移行
Kuroco管理画面より、本番に必要なコンテンツ・ユーザーデータの登録をします。  
データ登録は登録フォームより登録、またはCSVファイルで一括登録が可能です。

参考: [CSVで記事を一括更新する](/ja/docs/tutorials/bulk-upload-in-csv/)

## 12. 総合テスト
### テストケースの作成
開発が進んできた段階で、テストケースを作成していきます。

### 社内検証の実施
テストケースに基づいて社内にて検証をします。    
不備があればタスク管理に登録・修正し、再検証をします。

## 13. 動作検証(受入)
### クライアント企業にて検証の実施
社内で総合テストが完了したらクライアント企業に検証を依頼します。  
開発環境にプロジェクトをデプロイし、外部からでも検証できる環境を用意します。
その際にはIPアドレスやBasic認証を用いてアクセス制限を行います。

クライアント企業からフィードバックを受け取ったら、その内容に基づいて修正対応を行います。

参考: [kuroco_front.jsonとは何ですか？ -> basic：Basic認証](/ja/docs/faq/what-is-kuroco_front_json/#basic：basic認証)

## 14. リリース

動作検証が完了したらいよいよリリースです。

### 認証解除
IPアドレス制限・Basic認証を解除します。

## 15. サイト運用
サイト公開と同時に運用フェーズが開始します。運用マニュアルを準備し、クライアント側で運用できるようサポートします。

