💻 システム開発
SCALE_全システム標準モジュール
最終更新 2026年05月04日 ／ 31_システム開発部/_SCALE_全システム標準モジュール.md
SCALE 全システム標準モジュール
新規システム開発時、これらは "言われなくても全部入れる" 標準モジュール。
毎回大串から依頼される工数をゼロにする。
---
30秒で全体像
| 観点 | 一言 |
|---|---|
| 核心 | 新規システム開発時、これらは "言われなくても全部入れる" 標準モジュール。 |
| キーワード | このドキュメントの位置づけ / 標準モジュール一覧10モジュール / 新規システム開発 チェックリスト / 関連ドキュメント |
| 使う人 | 開発者 / PM / 経営者 |
| 読了目安 | 5-8分 |
このドキュメントの位置づけ
新規システム開発 / 大規模リニューアル時、これらは全部組み込む
- システム開発書（ SCALE システム開発書）と併読
- 「最初に依頼してきたら全部入っている」を実現
- このページのモジュールが デフォルト搭載、依頼があれば追加機能
標準モジュール一覧（10モジュール）
| # | モジュール | 必須度 | 概要 |
|---|---|---|---|
| 1 | 更新履歴ページ | ★★★ | システム内に変更履歴を表示 |
| 2 | ログイン認証 | ★★★ | パスワード認証 + メンバー管理 |
| 3 | ロゴ・favicon・OGP | ★★★ | ブラウザタブ・SNSシェア対応 |
| 4 | 📐 メタタグ・SEO基礎 | ★★ | description / viewport / canonical |
| 5 | Slack 通知連携 | ★★ | 主要イベントの自動通知 |
| 6 | エラーハンドリング | ★★ | 404 / 500 / ローディング表示 |
| 7 | 💾 バックアップ機構 | ★★★ | デプロイ前後の自動 tar.gz |
| 8 | アクセス解析 | ★★ | GA4 / Cloudflare Analytics |
| 9 | ダークモード対応 | ★ | 視認性・好みに応じ |
| 10 | 📱 レスポンシブ | ★★★ | モバイル・タブレット・PC |
1️⃣ 更新履歴ページ（必須）
仕様
| 項目 | 値 |
|---|---|
| 📍 URL | /changelog または /updates |
| 🧭 ナビ位置 | サイドバー > 全体 / システム > 更新履歴 |
| 閲覧権限 | 全メンバー |
| 追記タイミング | 1行修正でも必ず |
データ構造（標準）
type ChangelogEntry = {
id: string; // 一意ID
date: string; // YYYY-MM-DD
time: string; // HH:MM
title: string; // 短い見出し（20-30字）
category: 'feature' | 'improve' | 'fix' | 'ui' | 'infra' | 'security';
scope?: string; // 該当機能・セクション
summary: string; // 2-3文 何を・どう・なぜ
details?: string[]; // 詳細リスト
files?: string[]; // 変更ファイル
snapshotTs?: string; // バックアップタイムスタンプ
href?: string; // 該当画面URL
hrefLabel?: string; // ボタンラベル（例: '作業中画面'）
backup?: string; // 対応バックアップファイル名
};
UI 要素
- 日付グルーピング表示
- カテゴリ別フィルタ
- 検索（タイトル・summary）
- 🔘 「→ 該当箇所」ジャンプボタン（href 設定時）
- 💾 バックアップファイル名表示（復元元が一目で分かる）
2️⃣ ログイン認証（必須）
標準パターン（DEFAULT_MEMBERS型）
// core.js または lib/auth.ts
const DEFAULT_MEMBERS = [
{
email: 'y-ogushi@scale-group.co.jp',
name: '大串勇輝',
role: 'admin', // admin / pm / member / viewer
pass●●●●●●: '●●●●●●' // 全員共通固定
},
// ...
];
仕様
| 項目 | 値 |
|---|---|
| デフォルトPW | ●●●●●●（全員共通固定） |
| ユーザー識別 | メールアドレス |
| 権限階層 | admin > pm > member > viewer |
| 💾 保存先 | localStorage sb_members または KV |
| PW強度 | 全員共通なのでこだわらない（プライベート用途） |
必須機能
- ✅ ログイン画面（メアド + PW）
- ✅ 「ログアウトして確認」ボタン（更新履歴等）
- ✅ メンバー管理画面（admin限定で追加・編集・削除）
- ✅ 権限別UI制御（getSectionPerm() 等）
- ✅ セッション継続（ブラウザ閉じても再ログイン不要）
注意点
全員共通PW固定の理由
SCALEグループ内ツールのため、複雑な権限管理より使いやすさ優先。
メアドのみ個別、PWは全員●●●●●●。
3️⃣ ロゴ・favicon・OGP（必須）
必須ファイル
| ファイル | 用途 | サイズ |
|---|---|---|
favicon.ico |
ブラウザタブアイコン | 32x32 / 16x16 |
favicon.png |
高解像度ファビコン | 512x512 |
apple-touch-icon.png |
iOSホーム画面 | 180x180 |
og-image.png |
Twitter/Facebook OGP | 1200x630 |
logo.svg |
ヘッダーロゴ（推奨） | ベクター |
logo-dark.svg |
ダークモード用 | ベクター |
HTML テンプレート
<!-- ブラウザタブ -->
<link rel="icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="512x512" href="/favicon.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- OGP -->
<meta property="og:title" content="<システム名>">
<meta property="og:description" content="<システム説明>">
<meta property="og:image" content="https://<domain>/og-image.png">
<meta property="og:type" content="website">
<meta property="og:url" content="https://<domain>/">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="<システム名>">
<meta name="twitter:description" content="<システム説明>">
<meta name="twitter:image" content="https://<domain>/og-image.png">
ブランディング基準
| 項目 | SCALE標準 |
|---|---|
| メインカラー | ロゴカラーに揃える（要確認） |
| ロゴ表示 | ヘッダー左 + ファビコン |
| ドメイン | scale-group.co.jp 系 / pages.dev |
ロゴ・OGP画像の保管場所
共通アセット:~/Library/CloudStorage/.../scale-assets/を作成して全システムで共有予定（要整備）
4️⃣ メタタグ・SEO基礎（必須）
HTML テンプレート
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><システム名> | SCALE</title>
<meta name="description" content="<160字以内の説明>">
<meta name="theme-color" content="#000000"> <!-- ブラウザ上部の色 -->
<!-- canonical（重要）-->
<link rel="canonical" href="https://<domain>/">
<!-- 検索エンジン制御 -->
<meta name="robots" content="noindex,nofollow"> <!-- 社内ツールは noindex -->
</head>
注意点
社内ツールは
robots: noindex,nofollow
SCALE CRM, SCALE Base 等の業務システムは検索結果に出てはいけない。公開HP（TERASU等）は逆に SEO 強化
index,follow+ sitemap.xml + structured data
5️⃣ Slack 通知連携（推奨）
標準通知タイプ
| イベント | チャンネル | 通知タイミング |
|---|---|---|
| ✅ 主要成果（受注・アポ獲得） | #成果報告 |
即時 |
| 失注・離脱 | #成果報告 |
即時 |
| 異常検知（リスト枯渇等） | #alert-system |
即時 |
| 日次バッチ | #daily-report |
21:00 |
| リマインド（資料送付前日等） | 該当チャンネル | 9:00 |
| デプロイ完了 | #dev-log |
デプロイ後 |
実装ルール
Bot Token 経由必須（MCP直接禁止）
# slack_post.sh
#!/bin/bash
TOKEN="<bot-token>"
CHANNEL="<channel-id>"
TEXT="$1"
curl -X POST https://slack.com/api/chat.postMessage \
-H "Authorization: Bearer $TOKEN" \
-H "Content-Type: application/json" \
-d "{
\"channel\": \"$CHANNEL\",
\"text\": \"$TEXT\",
\"username\": \"<エージェント名>\",
\"icon_url\": \"<アイコンURL>\"
}"
メッセージフォーマット
タイトル: 【<種別>】<対象> <件数>（YYYY-MM-DD）
本文:
- 内容（具体的に・曖昧表現NG）
- 確認URL（本番）
- 改修内容のサマリ
スレッド末尾:
<@大串> + 該当部署マネージャー
6️⃣ エラーハンドリング（必須）
必須実装
| 状況 | 表示 |
|---|---|
| 404 | カスタム404ページ（戻るボタン付き） |
| 💥 500 | カスタム500ページ（再読込・問合せ導線） |
| ローディング | スケルトン or スピナー |
| 📭 空状態 | 「データがありません」+ 行動を促す導線 |
| オフライン | 「ネットワーク接続を確認してください」 |
| 権限エラー | 「この機能へのアクセス権限がありません」 |
コード例（React/Next.js）
// ローディング状態
{isLoading ? <Skeleton /> : <Content />}
// 空状態
{items.length === 0 ? (
<EmptyState
title="まだデータがありません"
actionLabel="新規追加"
onAction={handleAdd}
/>
) : (
<ItemList items={items} />
)}
// エラー状態
<ErrorBoundary
fallback={<ErrorPage onRetry={handleRetry} />}
>
<App />
</ErrorBoundary>
7️⃣ バックアップ機構（必須）
SCALE CRM 標準フロー
# pre-deploy
cd "株式会社SCALE/hp"
TS=$(date +%Y-%m-%d_%H%M%S)
tar czf "../../scale-lead-backups/scale-lead_${TS}_pre-deploy.tar.gz" base/
# (コード変更 + デプロイ)
# post-deploy（タグ付き）
TS=$(date +%Y-%m-%d_%H%M%S)
tar czf "../../scale-lead-backups/scale-lead_${TS}_post-deploy__<タグ>.tar.gz" base/
SCALE Base 標準フロー（snapshot.sh）
# scripts/deploy.sh が pre-deploy snapshot を自動取得
bash scripts/deploy.sh
# snapshot 一覧
bash scripts/snapshot.sh --list
# snapshot 復元
bash scripts/snapshot.sh --restore <snapshot-id>
復元可能性の保証
過去の安定版は全部
scale-lead-backups/scale-base-snapshots/に残す
容量問題が出るまで削除禁止。
8️⃣ アクセス解析（推奨）
標準実装
<!-- Cloudflare Web Analytics（無料・軽量）-->
<script defer
src='https://static.cloudflareinsights.com/beacon.min.js'
data-cf-beacon='{"token": "<token>"}'>
</script>
<!-- GA4（必要に応じて）-->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-<ID>"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-<ID>');
</script>
計測項目
- ページビュー
- ボタンクリック（主要CV）
- フォーム送信
- スクロール深度
- 離脱率
社内ツールは Cloudflare Analytics で十分
GA4 は公開サイト（TERASU等）のみ
9️⃣ ダークモード対応（推奨）
CSS Variables 設計
:root {
--bg: #ffffff;
--text: #000000;
--primary: #0066ff;
--border: #e0e0e0;
}
[data-theme="dark"] {
--bg: #1a1a1a;
--text: #ffffff;
--primary: #4d8cff;
--border: #333333;
}
body {
background: var(--bg);
color: var(--text);
}
切替スクリプト
// localStorage で記憶
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
// 切替ボタン
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-theme', next);
localStorage.setItem('theme', next);
}
🔟 レスポンシブ（必須）
ブレークポイント標準
/* モバイル: ~ 768px */
@media (max-width: 768px) {
/* スマホ向け */
}
/* タブレット: 768px ~ 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
/* タブレット向け */
}
/* PC: 1024px ~ */
@media (min-width: 1024px) {
/* PC向け */
}
必須対応
- ✅ ハンバーガーメニュー（モバイル）
- ✅ タッチエリア最小 44x44px
- ✅ フォントサイズ最小 14px（モバイル）
- ✅ 横スクロール禁止（意図的でない限り）
- ✅ 画像は max-width: 100%
新規システム開発 チェックリスト
新規システムを依頼されたら、上から全部実装する
Phase 1: 基盤
- [ ] 1️⃣ 更新履歴ページ（
/changelog） - [ ] 2️⃣ ログイン認証（DEFAULT_MEMBERS）
- [ ] 3️⃣ ロゴ・favicon・OGP
- [ ] 4️⃣ メタタグ・SEO基礎（社内ツールは noindex）
- [ ] 6️⃣ エラーハンドリング（404/500/ローディング/空状態）
- [ ] 🔟 レスポンシブ（ブレークポイント設定）
Phase 2: 連携・解析
- [ ] 5️⃣ Slack 通知連携（Bot Token + slack_post.sh）
- [ ] 8️⃣ アクセス解析（Cloudflare Analytics）
- [ ] 7️⃣ バックアップ機構（pre/post-deploy）
Phase 3: 拡張
- [ ] 9️⃣ ダークモード対応
- [ ] 個別機能（依頼ベース）
関連ドキュメント
必読
- SCALE システム開発書 — 必須ルール・大串の傾向
- CLAUDE.md（Vault取扱説明書）
- 📐 Vault デザイン規則
システム別
このドキュメントの更新ルール
「毎回どのシステムでも依頼してる」ものが見えたら必ずこのページに追記
更新タイミング:
- 大串から「これも入れて」と言われた共通モジュールが新規発覚
- 過去に何度も依頼してきたパターンが見えてきた
- 新しいベストプラクティスが定着した
このドキュメントが育てば、初期アウトプットで "言われる前に全部入っている" 状態になる。
大串の依頼工数ゼロを実現。