フロントエンド ガイドライン
本ガイドラインの策定にあたり、以下の公開ガイドラインを主な参照先としています。
Web フロントエンド設計ガイドライン - フューチャー株式会社
コーディングガイドライン - 株式会社ディーゼロ
検証・対応ブラウザ
標準サポート対象は次のとおりとします。
- Chrome（リリース時点での最新版）
- Edge（リリース時点での最新版）
- Safari（Desktop / iOS のリリース時点での最新版とその 1 つ前のマイナーバージョン）
- Android Chrome（リリース時点での最新版）
Firefox の取り扱い
Firefox は Chrome・Safari・Edge に次いで利用率の高いブラウザですが、日本国内におけるシェアは概ね数パーセント（多くても概ね 5% 程度）に留まります。
シェアの低さに対して、Firefox を正式なサポート対象に含めるとテストや回避策のコストが発生するため、コストとカバー率のバランスを考慮して判断してください。
アクセス解析で Firefox のシェアが業務上無視できない値（例：3% 以上）である場合や公共性や金融サービスなど、ブラウザの多様性が事業要件となる場合は Firefox（最新 3 バージョン）をサポート対象に追加することを検討します。
レガシーブラウザ
Internet Explorer は公式サポートが終了しているため、新規サイトのサポート対象外とします。また、Edge の IE モードも新規実装では原則サポート対象から除外します。
実装時の確認方法
新機能採用の可否は Can I use や MDN の互換性情報を参照し、必要であれば StatCounter 等で自サイトのブラウザ利用状況を確認してください。
ユーザビリティ
パソコンやウェブの操作が慣れていない方でも、なるべくストレスなくサイト内を遷移していただけるように、次のような考え方とルールに従って制作を行ってください。
- 文字色は背景と十分なコントラストを確保し、文字サイズは原則 10px 以上とします。
- テキストリンクは下線や色の違いで、リンクと分かるようにします。マウスオーバー時も同様に区別できるようにしてください。
- ボタンは陰影やアイコンなどでクリックできることが分かるようにします。マウスオーバー時も認識しやすくしてください。
アクセシビリティ
アクセシビリティ（A11Y）: 視覚・聴覚・運動・認知等に制約のある利用者が使いやすい実装を心がけてください。実装段階で最低限確認すべき項目は次のとおりです。
- 画像には適切な
altを付与（装飾はalt=""） - 主要な操作はキーボードのみで実行可能に（Tab 順、Enter/Escape の挙動）
- フォーカスが視認できること（アウトラインや代替スタイル）
- テキストと背景のコントラストは WCAG AA（最小 4.5:1）を目安に
- 意味のある要素はセマンティックに（
button,label,nav等）
SEO（検索エンジン最適化）
title タグや meta description、見出し構造など、基本的な SEO 対策を行なってください。