フロントエンド コーディングガイドライン

agreen 管理画面 Bootstrap 5 / Falcon v3.25.0 策定：2026年4月 管理：フロントエンドテックリード
画面構成サンプル集
1

ガイドラインの目的

本ガイドラインは、管理画面のフロントエンドコーディングにおいて 「誰が書いても同じ見た目・同じ構造になる」 状態を実現するために策定します。

背景と課題
課題影響
レスポンシブクラスを細かく設定しすぎているモックアップ作成に時間がかかる
作業者によってグリッド分割・クラス選択にブレがあるコードレビューのコストが増加、見た目の統一が崩れる
独自CSSの混入テンプレートのアップデート追従が困難になる
このガイドラインで達成すること
  • ✓モックアップ作成の大幅な時間短縮（効率化）
  • ✓レスポンシブ指定を「最大2クラスまで」に制限し、意思決定コストをゼロにする
  • ✓ピクセルパーフェクトを求めず、意味が伝わる品質を最速で届ける
  • ✓誰が書いても・AIが書いても、見た目とコードのトンマナが完全に揃う
2

標準化するコーディングのルール

既存の完成画面（企業管理一覧・詳細、求人管理一覧）を標準として、以下のルールを全画面に適用します。

2-1. 独自CSSは原則禁止

ルール： style属性 および 独自の .css ファイルへの追記は原則禁止。Falcon / Bootstrap 5 のユーティリティクラスで表現できることは必ずクラスで対応する。

❌ NG
<div style="margin-top:16px;font-size:14px;">...
✅ OK
<div class="mt-3 fs--1">...
⚠例外： ユーティリティで表現不可能な場合のみ、テックリードのレビューを経て追加を許可する。
2-2. コンテナ・カードのDOM構造はシンプルに保つ

標準画面のDOM構造を基本形とし、不要なネストを加えない。

基本構造テンプレート（一覧ページ）

HTML — 一覧ページ
<div class="container-fluid">
  <div class="row g-3">
    <!-- ページヘッダー -->
    <div class="col-12">
      <div class="card">
        <div class="card-header"><h5 class="mb-0">ページタイトル</h5></div>
      </div>
    </div>
    <!-- メインコンテンツ -->
    <div class="col-12">
      <div class="card">
        <div class="card-body"><!-- コンテンツ --></div>
      </div>
    </div>
  </div>
</div>

基本構造テンプレート（詳細ページ）

HTML — 詳細ページ
<div class="container-fluid">
  <div class="row g-3">
    <!-- 左：メイン情報 -->
    <div class="col-12 col-lg-8">
      <div class="card mb-3">
        <div class="card-header">...</div>
        <div class="card-body">...</div>
      </div>
    </div>
    <!-- 右：サブ情報 -->
    <div class="col-12 col-lg-4">
      <div class="card">
        <div class="card-header">...</div>
        <div class="card-body">...</div>
      </div>
    </div>
  </div>
</div>
2-3. 使用するコンポーネントの統一
用途使用コンポーネント
データ一覧table table-hover または Falcon AdvanceTable
ステータス表示badge
アクションボタンbtn btn-falcon-primary / btn-falcon-default
フォーム入力form-control / form-select
通知・アラートalert
ページヘッダーFalcon PageHeader パターン
ツールチップdata-bs-toggle="tooltip"
3

効率化・課題解決のための新ルール

3-1. レスポンシブクラスは最大2つまで 最重要

ルール： 1要素に指定するブレークポイント付きクラスは col-12（スマホ） + col-lg-*（PC）の2つのみ を基本とする。

❌ NG — 細かすぎる
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
✅ OK — 2クラスで完結
<div class="col-12 col-lg-4">
状況使用するブレークポイント
PC / タブレット切り替えcol-lg-*（≥ 992px）— 標準
中間が必要な場合のみcol-md-* 追加（最大3クラスまで許容）
col-sm-* col-xl-* col-xxl-*原則使用禁止
3-2. グリッド分割の標準パターン

迷ったら以下5パターンから選ぶ。それ以外を使う場合はコメントで理由を記載すること。

col-12
全幅（1カラム）
col-12 col-lg-6
2等分
col-12 col-lg-8 / col-12 col-lg-4
左広め・右狭め（詳細ページ標準）
col-12 col-lg-4
3等分
col-6 col-lg-3
4等分
3-3. ピクセルパーフェクトは求めない

モックアップの目的は「情報の構造・レイアウトの意図を伝えること」。

  • ✓許容： 画面幅によってテキストが数文字見切れる / 余白が数px異なる
  • ✕非許容： カラムの意図が変わる（2カラムが崩れる）/ ボタン操作性が損なわれる
3-4. カード内の余白・間隔はユーティリティで統一
HTML
<!-- カード間の縦間隔 → row g-3 を標準 -->
<div class="row g-3">
<!-- セクション区切り -->
<hr class="my-3">
<!-- ラベルと値のペア -->
<p class="mb-1 text-muted fs--1">ラベル</p>
<p class="mb-3 fw-semi-bold">値</p>
3-5. ボタンの配置ルール
HTML
<!-- アクションボタンは右揃え -->
<div class="d-flex justify-content-end gap-2 mt-3">
  <a href="#" class="btn btn-falcon-default btn-sm">キャンセル</a>
  <button type="submit" class="btn btn-falcon-primary btn-sm">保存</button>
</div>
<!-- 一覧の行内アイコンボタン -->
<a href="#" class="btn btn-falcon-default btn-sm" data-bs-toggle="tooltip" title="詳細">
  <span class="fas fa-eye"></span>
</a>
3-6. コーディング作業前のチェックリスト
  • 標準画面（企業管理一覧・詳細）のHTMLを一度確認した
  • 使うコンポーネントはFalconのドキュメントで確認した
  • グリッドは「3-2の標準パターン」から選んだ
  • レスポンシブクラスは2つ以内に収まっている
  • 独自CSSを追加していない
4

他作業者・AIへのコーディング依頼用プロンプト

以下をそのままコピーして依頼の冒頭に貼り付け、末尾の要件欄を埋めてから使用してください。

コーディング指示プロンプト（コピペ用）
# コーディング指示 ## 使用技術 - Bootstrap 5 / Falcon v3.25.0（テンプレート） - 参考URL：https://prium.github.io/falcon/v3.25.0/ ## 参考にする標準画面（必ず踏襲すること） - 企業管理 一覧：https://agreen.oooxx.ooo/manage/company/ - 企業管理 詳細：https://agreen.oooxx.ooo/manage/company/detail/ - 求人管理 一覧：https://agreen.oooxx.ooo/manage/job/ ## 必ず守るルール ### スタイル - style属性・独自CSSクラスの追加は禁止 - すべての見た目は Bootstrap 5 / Falcon のユーティリティクラスで表現する ### グリッド・レスポンシブ - 1要素のレスポンシブクラスは最大2つまで（例：col-12 col-lg-6） - ブレークポイントは lg（≥992px）を基本とする - col-sm-* / col-xl-* / col-xxl-* は使用禁止 - グリッドは以下の標準パターンから選ぶ： 全幅：col-12 2等分：col-12 col-lg-6 左広め右狭め：col-12 col-lg-8 / col-12 col-lg-4 3等分：col-12 col-lg-4 4等分：col-6 col-lg-3 ### DOM構造 - 不要なネストは作らない - カードは card > card-header / card-body の構造を基本とする - カード間の余白は row g-3 で統一する ### 品質基準 - ピクセルパーフェクトは不要。レイアウトの意図が正しく伝わることを優先する - テキストが数文字見切れることは許容する ## 作成する画面の要件 （↓ここに要件を記載してください）
5

ユーティリティ クラス辞書（Falcon / Bootstrap 5）

i作業者がクラス名を素早く選べるよう整理した辞書です。青色ピルが推奨クラス、赤色取り消し線が禁止・非推奨です。
5-1. タイポグラフィ / フォントサイズ
フォントファミリー
クラスフォント用途
font-sans-serifPoppins見出し・強調テキスト（Falcon デフォルト）
font-baseOpen Sans本文テキスト
text-monospace等幅フォントコード・ID・コード表示
フォントサイズ — Falcon 独自スケール（小さい順）
fs--2Aa
fs--1Aa
fs-0Aa
fs-1Aa
fs-2Aa
fs-3Aa
fs-4Aa
fs-5Aa
fs-6Aa
fs-7Aa
fs-8Aa
✓管理画面でよく使うサイズ → ラベル fs--1 / 本文 fs-0 / 小見出し fs-1
フォントウェイト
fw-lighterfw-light fw-normalfw-semi-boldfw-bold fw-bolder
テキスト整列・変換・スタイル
text-starttext-centertext-end text-lowercasetext-uppercasetext-capitalize fst-italictext-decoration-none text-truncatelead
5-2. テキストカラー
テーマカラー
text-primary
メインアクション
text-secondary
サブテキスト
text-success
成功・完了
text-info
情報
text-warning
警告・注意
text-danger
エラー・削除
text-muted
補足・ラベル
text-dark
最も濃い
text-white
白文字
Falconグレースケール（数値 = 濃度。大きいほど濃い）
text-300
text-400
text-500
text-600
補足文
text-700
本文
text-800
見出し
text-900
最も濃い
5-3. 背景色（Background）
テーマカラー背景（solid）
bg-primary
bg-secondary
bg-success
bg-info
bg-warning
bg-danger
bg-light
bg-dark
bg-white
Falcon Soft カラー（淡色 — バッジ・ステータスチップに最適）
bg-soft-primary
+ text-primary
bg-soft-secondary
+ text-secondary
bg-soft-success
+ text-success
bg-soft-info
+ text-info
bg-soft-warning
+ text-warning
bg-soft-danger
+ text-danger
バッジ使用例
<!-- 成功ステータス（緑） -->
<span class="badge rounded-pill bg-soft-success text-success">承認済</span>
<!-- 警告ステータス（橙） -->
<span class="badge rounded-pill bg-soft-warning text-warning">審査中</span>
<!-- エラーステータス（赤） -->
<span class="badge rounded-pill bg-soft-danger text-danger">却下</span>
5-4. スペーシング（Margin / Padding）
書式：{m|p}{方向}-{0〜5|auto}
サイズpx相当Marginクラス例Paddingクラス例
00pxm-0 mt-0 mb-0p-0
14pxm-1 mt-1 mb-1p-1
28pxm-2 mt-2 mb-2p-2
3（標準）16pxm-3 mt-3 mb-3 my-3 mx-3p-3 px-3 py-3
424pxm-4 mt-4 mb-4p-4
548pxm-5p-5
auto自動mx-auto（中央寄せ）ms-autome-auto—
方向サフィックス
t → topb → bottom s → start（left）e → end（right） x → left + righty → top + bottom
Gap（Flexbox / Gridのアイテム間隔）
gap-0gap-1 gap-2gap-3 gap-4gap-5
✓カード間の間隔は row g-3 を標準。Flexコンテナ内のボタン等は gap-2 を推奨。
5-5. Flexbox
justify-content（主軸の揃え方）
justify-content-start
A
B
C
justify-content-end
A
B
C
justify-content-center
A
B
C
justify-content-between
A
B
C
justify-content-around
A
B
C
justify-content-evenly
A
B
C
align-items / align-self / その他
align-items-startalign-items-center align-items-endalign-items-baselinealign-items-stretch align-self-startalign-self-centeralign-self-end flex-grow-1flex-grow-0 flex-shrink-0flex-shrink-1 flex-wrapflex-nowrap flex-rowflex-column ms-autome-auto
5-6. Display
単体クラス
d-noned-block d-inline-blockd-inline d-flexd-gridd-table
よくある表示切り替えパターン
やりたいことクラスの組み合わせ
PCのみ表示（スマホは非表示）d-none d-lg-block
スマホのみ表示（PCは非表示）d-block d-lg-none
PCのみFlex（スマホはblock）d-block d-lg-flex
5-7. ボーダー・角丸（Border / Rounded）
ボーダー追加 / 削除
borderborder-topborder-end border-bottomborder-start border-0border-top-0border-bottom-0
ボーダーカラー（テーマカラー）
border-primaryborder-secondary border-successborder-info border-warningborder-danger border-lightborder-dark
Falconグレーボーダー（数値 = グレー濃度）
border-100border-200 border-300border-400 border-500border-600 border-700border-800border-1000
角丸（rounded）
クラス見た目主な用途
rounded-0角丸なしテーブルセル・直角ボックス
rounded-1小さな角丸バッジ・小タグ
rounded-2中程度カード・入力フォーム（標準）
rounded-3大きな角丸モーダル・ダイアログ
rounded-circle円形アバター画像
rounded-pillピル形ステータスバッジ
5-8. サイズ（Width / Height）
Width
w-25w-50w-75 w-100w-automw-100
Height / Viewport
h-25h-50h-75 h-100h-automh-100 vh-50vh-75vh-100 min-vh-50min-vh-100 max-vh-50max-vh-75max-vh-100
5-9. シャドウ・透明度
Shadow
クラス用途
shadow-noneシャドウなし（リセット）
shadow-sm軽い影（ホバー時カードなど）
shadow標準的な影
shadow-lg強い影（ドロップダウン・モーダル）
Opacity（透明度）
opacity-0opacity-25 opacity-50opacity-75opacity-100 bg-opacity-10bg-opacity-25 bg-opacity-50bg-opacity-75
5-10. ポジション・オーバーフロー
Position
position-staticposition-relative position-absoluteposition-fixedposition-sticky
Top / Bottom / Start / End（position と組み合わせ）
top-0top-50top-100 bottom-0bottom-50bottom-100 start-0start-50 end-0end-50 translate-middle
Overflow
overflow-hiddenoverflow-auto overflow-visibleoverflow-scroll
5-11. ★ クイック逆引きリスト（やりたいこと → クラス）
やりたいこと使うクラス
テキストを灰色・小さく（ラベル）text-muted fs--1
太字・強調fw-bold または fw-semi-bold
要素を横並びにするd-flex align-items-center gap-2
ボタンを右端に寄せるd-flex justify-content-end gap-2
タイトルと右端にボタンを並べるd-flex justify-content-between align-items-center
カード間を等間隔に並べるrow g-3
ブロック要素を中央寄せmx-auto
バッジ（成功・緑）badge rounded-pill bg-soft-success text-success
バッジ（警告・橙）badge rounded-pill bg-soft-warning text-warning
バッジ（エラー・赤）badge rounded-pill bg-soft-danger text-danger
バッジ（情報・青）badge rounded-pill bg-soft-info text-info
カード内のセクション区切りhr class="my-3"
ラベルと値のペアmb-1 text-muted fs--1（ラベル）/ mb-3 fw-semi-bold（値）
PCのみ表示d-none d-lg-block
スマホのみ表示d-block d-lg-none
画像を丸くする（アバター）rounded-circle
テキストを省略（…）text-truncate（幅の指定も必要）
右上に絶対配置バッジ（通知数など）親：position-relative / 子：position-absolute top-0 end-0
全幅ボタンbtn w-100
縦スクロール可能なボックスoverflow-auto（高さ指定も必要）
要素を画面下に固定position-sticky bottom-0
フォントをコード風にtext-monospace
白背景カード（囲み）card > card-body