はじめに
Trimora株式会社は、AIを活用したWeb制作・動画制作を行う会社である。自社サイト（trimora.co.jp）もAstro + Tailwind CSS + Vercelの構成で制作・運用している。
本記事では、自社サイトに対して実施した品質改善の内容を記録として公開する。何を改善したか、なぜそう判断したか、何が未対応かを明示する。
なお、本記事に記載する内容は自社内の検証に基づくものであり、第三者監査を経たものではない。また、Lighthouseスコアは計測条件により変動するため、ここに記載する数値は特定の計測時点における参考値である。
見直しの背景
受託制作を行う会社として、クライアントに品質を約束する以上、自社サイトが基準を満たしていなければ整合性がない。「言っていることとやっていること」を一致させたい。その考えから、自社サイトの品質を改めて点検した。
今回の対象範囲
- セキュリティヘッダーの設定
- メタ情報（OGP・構造化データ）の正確性
- アクセシビリティへの対応
- Lighthouse計測で検出されたパフォーマンスに関する一部指摘
今回のスコープに含めなかったもの
以下は認識しているが、影響範囲や設計上の判断から、今回は対象外とした。
- CSP（Content Security Policy）: 適用範囲が広く、誤設定時の影響が大きい。Report-Onlyモードで検証した後に段階導入する方針とした。
- HSTS: 現在はVercelの自動HTTPS機能に依存している。CSPと合わせて明示設定を検討する。
- Google Fontsのセルフホスティング: サブセット化を含む設計が必要であり、別途取り組む予定。
主要な見直し（5項目）
1. 非推奨セキュリティヘッダーの削除
変更前の状態:
vercel.jsonとmiddleware.tsの両方に X-XSS-Protection: 1; mode=block を設定していた。
判断根拠: X-XSS-Protectionは、Chrome 78（2019年）以降で機能が無効化されている。MDNでも非推奨として記載されており、CSPで代替する方針が推奨されている。このヘッダーを残しておくと、「このヘッダーに依存している」という誤った印象を与える可能性があると判断した。
変更後の状態: vercel.jsonとmiddleware.tsの両方からX-XSS-Protectionヘッダーの記述を削除した。
2. og:urlをページごとに正しく出力するよう修正
変更前の状態: BaseLayout.astroでog:urlが固定値（トップページのURL）になっていた。すべてのページが同じog:urlを出力する状態だった。
判断根拠: OGPの仕様では、og:urlはそのページ自身の正規URLを指すものである。固定値の場合、SNSで共有された際にすべてのページが同じURLとして扱われてしまう。
変更後の状態: Astro.urlを使用し、各ページが自身のURLをog:urlとして出力するよう修正した。
3. 構造化データの設立日を修正
変更前の状態: JSON-LDのOrganizationスキーマに記載しているfoundingDateの値が、登記簿上の設立日と異なっていた。
判断根拠: schema.orgのOrganizationスキーマでは、foundingDateはISO 8601形式の日付で記載する。登記簿上の事実と一致させる必要がある。
変更後の状態: foundingDateを正しい設立日（2025-05-22）に修正した。
4. スキップリンクのターゲット修正
変更前の状態: スキップリンクのhref属性の値と、main要素のid属性が一致していなかった。そのため、スキップリンクが正しく機能しない状態だった。
判断根拠: WCAG 2.1 SC 2.4.1「ブロックスキップ」では、繰り返されるナビゲーション等をスキップして本文に直接移動できる手段を求めている。スクリーンリーダーやキーボード操作でこの機能を使うためには、リンク先のidとターゲット要素のidが一致している必要がある。
変更後の状態:
スキップリンクのhrefを #main-content に統一し、main要素に id="main-content" を付与した。
5. prefers-reduced-motionへの対応
変更前の状態: ブラウザまたはOSの「動きを減らす」設定に対応していなかった。設定を有効にしているユーザーに対しても、すべてのアニメーションとトランジションがそのまま再生される状態だった。
判断根拠: WCAG 2.1 SC 2.3.3を参照した。前庭障害のあるユーザーがアニメーションによって体調を崩す可能性がある。ユーザーがOSまたはブラウザで「動きを減らす」設定をしている場合、その意思を尊重すべきと判断した。
変更後の状態:
CSSの @media (prefers-reduced-motion: reduce) を使用し、アニメーションとトランジションを無効化した。
なお、scroll-behaviorへの適用は現時点では未対応であり、今後の検討事項としている。
追加で整えた項目（2項目）
Lighthouse計測の過程で検出し、同日中に対応した項目を記載する。
6. ロゴ画像にwidth/height属性を追加
発見経緯: Lighthouse計測でunsized-imagesとして検出された。
変更前の状態: ヘッダーとフッターのロゴ画像に、Tailwind CSSのクラスで幅指定はあったが、HTML属性としてのwidthとheightが設定されていなかった。
判断根拠: width/height属性がない場合、ブラウザが画像の表示領域を事前に確保できず、レイアウトシフトの原因になりうる。今回の計測ではレイアウトシフト自体は観測されなかったが、予防措置として対応した。
変更後の状態: ロゴ画像にwidth/height属性を追加した。
7. フッターのコントラスト比改善
発見経緯: Lighthouse計測でcolor-contrastとして全ページで検出された。Accessibilityスコアが100に届かなかった原因がこの項目であった。
変更前の状態: フッターの著作権表示テキストが白の40%不透明度で表示されており、背景色とのコントラスト比が不足していた。
判断根拠: WCAG 2.1 SC 1.4.3「最低コントラスト比」では、テキストと背景のコントラスト比が4.5:1以上であることを求めている。変更前の設定ではこの基準を満たしていなかった。
変更後の状態: テキストの不透明度を60%に変更した。変更後のLighthouse再計測で、Accessibilityスコア100を確認した。
改善後の計測結果
改善後に全ページのLighthouse計測を実施した。計測条件は以下のとおり。
- 計測ツール: Lighthouse 13.0.3（CLI、headless Chrome）
- 計測日: 2026-03-08
- 計測対象: 全11ページ（mobile / desktop 各1回、計22回）
- 注意: 単一計測の結果であり、ネットワーク状況やサーバー応答により変動する
スコア概要
上記の改善（項目6・7を含む）の対応後、トップページを再計測した結果は以下のとおり。
| カテゴリ | スコア |
|---|---|
| Accessibility | 100 |
| Best Practices | 100 |
| SEO | 100 |
全11ページにおいて、Accessibility・Best Practices・SEOはいずれも96〜100の範囲であった。
Performanceについて（補足）
Performanceスコアはページや計測条件により変動が大きいため、参考情報として記載する。
- TBT（Total Blocking Time）は全ページで0ms。JavaScriptによる描画ブロックは発生していない。
- CLS（Cumulative Layout Shift）はほぼ0。レイアウトシフトは観測されなかった。
- LCPはmobileで改善余地があり、主な要因はGoogle Fonts CSSの読み込みにある。
- Performanceの改善は今後の課題として別途取り組む予定。
現時点で未対応の項目
以下は認識しているが、今回のスコープに含めなかった項目である。
| 項目 | 状況 | 今後の方針 |
|---|---|---|
| CSP（Content Security Policy） | 未適用 | Report-Onlyモードで検証した後に段階導入する予定 |
| HSTS | Vercelの自動HTTPSに依存中。明示的な設定は未実施 | CSPと合わせて検討する |
| Google Fontsセルフホスティング | 外部CDNから読み込んでいる | サブセット化を含む設計が必要。Performance改善の一環として取り組む予定 |
| scroll-behaviorのreduced-motion対応 | アニメーションは対応済みだが、スクロール動作は未対応 | 対応を計画している |
| middleware.tsとvercel.jsonの二重定義 | 同じヘッダーが2箇所で定義されている | CSP導入時にvercel.jsonへ一本化する方針 |
おわりに
今回の改善はすべて自社内の検証に基づくものであり、第三者監査は実施していない。改善が完了したわけではなく、段階的に進めている途中の記録である。
制作会社として、自社サイトの品質に向き合うプロセスを公開することで、取り組みの透明性を示したいと考えている。今後の改善も同様に記録を公開していく予定である。
技術的な詳細は Zenn でも公開しています：Astro + Vercel 構成の自社サイトで行った品質改善 — 変更内容と判断根拠
背景や考え方については note でも書いています：受託制作の会社が、自社サイトの品質を見直して気づいたこと