メインコンテンツまでスキップ

coding-guideline

実装ルール・品質基準

ご指定の実装ルール・開発環境があればそれに合わせます。
ご指定がない場合は、以下を基準に実装します。各項目の詳しい基準や例外は、末尾の詳細版にまとめています。

仕様書／ガイドライン

対応ブラウザ

Windows
Chrome / Firefox / Edge
Mac
Chrome / Firefox / Safari
iPhone
Safari
Android
Chrome

いずれも制作時点の最新版。実機（Windows / Mac / iPhone / Android）で表示確認。必要に応じて他ブラウザも対応、IE等の旧ブラウザは別途ご相談。

画像

  • SP/PC共通は2倍で書き出し（svg・favicon・ogp等は1倍）
  • picture で SP/PC を切替
  • ファーストビュー以下は遅延読み込み（loading="lazy"）
  • width / height 指定でレイアウトシフトを防止

altの線引き：電話で内容を伝えるとき、その画像に触れなくても文脈が通じるなら装飾（alt空）としています。

画像命名・フォルダ

  • assets/img/ を common（サイト共通）/ page（ページ固有）で分類
  • 接頭辞は「ページ名_セクション名_要素番号_子番号」 home_about_card01_01.jpg

ページ数が多い場合のフォルダ分け等は詳細版に記載。

フォント

  • 指定がなければ Google Fonts（CDN経由）
  • 表示速度に問題があればサブセット化

使用箇所の更新頻度により判断。

開発環境

  • 静的サイト：Astro（次点で webpack / gulp）
  • WordPress：Local + webpack
  • SCSSコンパイル・JS圧縮・prettier整形・メディアクエリまとめを標準装備

package.json・設定ファイル一式のお渡しも可能です。

品質チェック

  • HTML：エラーなし・適切なマークアップ（自動チェックスクリプト使用）
  • CSS：W3Cバリデータでエラーなし
  • コンソールにJSエラーなし

Nu Html Checker / html-validate / CSS Validator を使用。

コアウェブバイタル

PageSpeed Insights 80点以上を目標とします。

基準は gtag.js（GTM）導入前。ローディング演出が入る場合の LCP は例外とします。

コーディングルール

HTML

  • body直下はランドマークタグのみ（重複時は aria-label で識別）、スキップリンクは例外
  • WCAG 2.2 AA を可能な範囲で適用（キーボード操作・フォーカストラップ回避・クリック判定24×24以上等）
  • WAI-ARIA は乱用せず、タグ本来の Role を基本

例・適用範囲の詳細は詳細版に記載。

SCSS

  • Dart Sass
  • 変数はCSS変数で管理（グローバル／ローカル） グローバル --x　／　ローカル --_x
  • 単位は独自関数を通して一元管理。px→rem変換の unit()、フォント指定の fs() を経由し、後から一括で変えられる
  • 拡大率・画面幅による崩れ対策として、px（リキッド）を基本に、必要な箇所は vw（等倍）を併用。指定がなければ PC：px＋一部vw／SP：vw

px/vwの使い分けの判断基準・事例は詳細版に記載。

ブレイクポイント

  • min-width：375 / 576 / 768 / 1024 / 1280 / 1440（＋ブラウザ拡大時の等倍(vw)対応用に 1537 / 1920）
  • すべては使わず、コンテナクエリ・grid・clamp で崩れを吸収する方を優先（分岐点を増やさない）
  • max-width は 0.02px 減算（例 767.98px）。拡大などで幅が小数px（例 767.5px）になったとき、min/max の境界に隙間ができてどのクエリも当たらなくなるのを防ぐため
  • 印刷対象のBPには print を指定

SCSSディレクトリ

FLOCSS系のレイヤ構成で、役割ごとに分割しています。

foundation
リセット・アニメーション等の土台
global
関数・mixin・変数の定義
layout（l-）
ヘッダー・フッター・メイン等の大枠
project（p-）
ページ・共通・部品の固有スタイル
common
サイト共通パーツ
page
ページ固有
parts
カード等の部品
component（c-）
見出し・ボタン等の最小パーツ
utility（u-）
余白など単一プロパティの調整

各レイヤの詳しい役割は詳細版に記載。

色命名（CSS変数）

  • global/_color.scss に集約
  • 目的ベースを基本 --color-site-bg
  • デザイン未確定時は色ベース --color-blue-700

使い分けの詳細は詳細版に記載。

CSSクラス命名

  • FLOCSS＋BEMベース＋部分ATOMIC
  • 接頭辞は l- / p- / c- / u-、接頭辞なしはローカル
  • 組み合わせ版とセット版で使い分け 組み合わせ版：c-btn w300 solid gold outline
    セット版：c-btn-primary

部分ATOMICの設計意図は詳細版に記載。
実例：GitHub（nino-code-dev/astro-portfolio）

CSSの書き方

  • 要素間は margin・要素内は padding
  • margin は top 方向に統一
  • 文字単位は unit 関数経由（親依存は em）
  • コンポーネントにデフォルトの margin を付けない
  • アイコンは mask-image でCSS内に完結

理由・例外は詳細版に記載。

JavaScript

  • 生JS（Vanilla JS）を基本、ライブラリは適宜
  • 機能ごとに class で分割し1ファイルにビルド
  • 実行指定はデータ属性でなく js- クラス名
  • 状態は、aria で表せるものは aria 属性で持つ（例：開閉は aria-expanded）

データ属性の使いどころは詳細版に記載。