← 事例一覧へ
導入事例 · 教育 / 非認知能力

志は測れない。でも、育てることはできる。

子どもの「志」は成績表に載りません。Kokorozashiは、日本のK-12学校が「夢・目標・行動」を記録し、児童生徒・教員・保護者・学校管理者・運営者が同じプラットフォームで子どもの成長を見守るための場です。COCONはこのデリケートで責任の重い製品を、子ども目線のUXと堅固なマルチロール設計で実装しました。

https://kokorozashi-app.jp — 本番稼働中(ログイン保護)
1,342
コミット
184
KOKOチケット出荷
5
役割ロール(運営/学校/教員/保護者/生徒)
1,197
本番稼働中の児童生徒数
課題 · THE CHALLENGE

非認知能力は、学力テストでは測れない。

自己肯定感、思いやり、挑戦心——学校の現場には、子どもが「何になりたいか」「なぜそれを目指すか」を記録し続けるシステムがほとんど存在しません。志を持続させるには、日々の小さな積み重ねを可視化し、教員・保護者・学校管理者が連携して子どもを支える仕組みが必要です。そしてそれを、デジタルに不慣れな保護者も、漢字を読みきれない低学年の子どもも、無理なく使えなければなりません。

5層にまたがるロール設計

学校・学年・クラス・教員・保護者・児童生徒の5層にまたがるロール設計が必要。

子どもが使う画面の制約

フリガナ(Ruby)対応・絵文字なし・穏やかなUXが必須。

運営者の俯瞰管理

運営者(COCON側)が全学校を俯瞰管理できるManagementAdminレイヤーが必要。

IPホワイトリスト

学校ネットワークからのみアクセスを許可するIPホワイトリスト機能が求められた。

独自概念のデータモデル化

志ワーク(動画コンテンツ)・本棚(特殊アイテム)・四魂分布(智/勇/親/愛)など、独自概念のデータモデル化。

合同授業の一括発行

合同授業(複数校合同クラス)の一括アカウント発行とQRログインが必要。

解決 · WHAT COCON BUILT

5つの役割が、同じ場所で子どもを見守る。

COCONはLaravel 10 / PHP 8.2 / MySQL 8 / Blade(Viteビルド)のスタックで、5層のロールを持つ学校向け情報プラットフォームを構築しました。

01
4段階の管理ポータル

ManagementAdmin(COCON運営)/ SchoolAdmin(学校管理者・校長)/ SchoolTeacherAdmin(教員)/ ParentAdmin(保護者)。役割ごとに独立したパスとレイアウト。

02
児童・生徒画面(/user/*)

ふりがな(Rubyモデル)対応、穏やかなアニメーション、スティッキー動画プレーヤー、コインタイマー、志ワーク(Work 1〜14)のレスポンシブキャンバス。絵文字は全面禁止、ホバー浮き上がりも禁止。

03
本棚(特殊アイテム)

全児童にデフォルト本棚を配布。モール購入で別デザインの本棚に入れ替え可能。位置は固定・ドラッグ不可、削除は422でガード。

04
四魂(しこん)分布チャート

管理者ダッシュボードに表示されるドーナツグラフ。智(#28A7E1)/勇(#E40480)/親(#9A579F)/愛(#F39800)のブランドカラーで統一。

05
合同授業(KOKO-65)

学年別人数を入力すると、QRログイン付きの一括アカウントを発行。PDF印刷→QRスキャンで当日の合同授業に参加できる。

06
IPホワイトリスト

SchoolIpAddressControllerにより、学校ネットワーク外からのアクセスを制限。

実現の裏側 · WHAT IT TOOK
ロール設計の精度

5つのロール(管理者・学校管理者・教員・保護者・生徒)が、それぞれ異なるレイアウト・ナビゲーション・権限を持つ。ManagementAdminがないとSchoolAdminの学校作成もできない——依存関係の整合性をDBスキーマ段階から保証。

子ども向けUXへのこだわり

hover浮き上がり禁止、絵文字禁止、ルビ(読み仮名)ネイティブ対応、loading GIFの復元、スクロール位置制御。「何これ?と思われた瞬間にやり直し」という設計原則を全画面に徹底。

プロダクション品質

KOKO-207(JS const再代入クラッシュ)・KOKO-208(CSS @import重複+SVGパス破損)などの本番hotfixを迅速対応。Xserver(cocorobo.xsrv.jp)上でLaravel 10を運用し、本番では1,197名の生徒データが稼働中(2026-05-30時点)。

アクセシビリティ(KOKO-47)

学生ポータルにWCAG Level Aベースラインを適用——labelの紐付け、代替テキスト、ARIAランドマーク、コインカウンターのaria-live設定。

スクリーンショット · SCREENSHOTS

実物で、お見せします。

Kokorozashi 運営者ポータル — 志・四魂分布の可視化ダッシュボード
運営者ポータル — 志・四魂分布の可視化ダッシュボード(テスト環境)
Kokorozashi 教員ポータル — クラスダッシュボード
教員ポータル — 役割別のクラスダッシュボード(テスト環境)
成果 · THE RESULTS

子どもの「志」を守る。画面一枚一枚に丁寧さを。

非認知能力(志)の可視化と子ども向けUX品質 志の記録は紙・属人的・5役割を横断困難 → 5役割プラットフォームで志をデジタル可視化
導入前 9% 導入後 75%+
1,342
コミット
184
KOKOチケット出荷
1,197
本番稼働中の児童生徒数
同日
580件クラッシュ(KOKO-207)を発見当日に修正・デプロイ

kokorozashi-app.jpで本番稼働中(Xserverホスティング、ログイン保護)。管理者・教員・保護者・生徒の全フローをテスト用アカウントで動作確認済み。合同授業のQRログイン・PDF発行・本棚アイテム入れ替えはstaging E2Eで検証済み。KOKO-30のセキュリティテスト(Auth/IDOR/MassAssignment/Upload/XSS)17本をregressionスイートとして維持しています。

※ 達成度イメージ(導入前 9% → 導入後 75%+)は、自社評価による代表値です。コミット数・チケット数・生徒数(2026-05-30時点)は本番環境の実測値です。

← 前の事例 Curva 事例一覧 次の事例 → Prolis

この事例に近い課題をお持ちですか?

まずは、いま向き合っている課題をお聞かせください。実装まで責任を持って伴走します。

課題をお聞かせください