Kayzen Web
制作会社のサイトは最初の実績。クライアントのサイト以上に厳しく監査しています。
- 年
- 2026
- 制作期間
- 継続的な改善
- 技術スタック
- React · Vite · Tailwind · TypeScript · Vercel
- 戦略
- デザインシステム
- 開発
- SEO
- アクセシビリティ
- ライティング

- Lighthouseアクセシビリティ
- 100/100
- Lighthouse SEO
- 100/100
- ビルド時にプリレンダリングされるルート
- 79
- 件の実績を、それぞれケーススタディ付きで掲載
- 37
解決すべき課題。
背景
kayzen-lyon.comは、当社のショーケースサイトです。プリレンダリングされた79のルートがあり、そのうち21のサービスページ、4つの地域ページ、公開の料金表、変更履歴(changelog)、技術スタックのページ、そして公開のデザインシステムを含みます。
制約
Web制作会社は、実績よりも先に自社サイトで評価されます。平凡なパフォーマンススコア、不十分なコントラスト、無効な構造化データなど、どんな小さな欠陥も不利な材料になります。そのためサイトには、要求の厳しい見込み客による技術的な精査に耐えることが求められました。
解決策
私たちは、制作会社が隠しがちな要素を公開しました。料金、技術スタック、デザインシステム、そしてサイト自体に加えた修正を列挙する変更履歴です。この透明性には2つの目的があります。見込み客を安心させること、そして私たち自身に水準の維持を課すことです。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
文書化され、公開されたデザインシステム
カラートークン、可変のタイポグラフィスケール、4段階のシャドウ、統一された縦のリズム。/design-systemページでそれらを公開しています。目に見えるシステムは、ぶれないシステムです。
すべてのコントラストを測定
すべての色の組み合わせを計算しました。入力欄の枠線は3:1を満たし、フォーカスリングはアクションカラーから切り離して色付きのボタン上でも見えるようにし、テキストのグラデーションは廃止してベタ塗りにしました。
アニメーションは表示時のみ
読み込みインジケーターを除き、無限ループのアニメーションはありません。GPUの常時負荷、バッテリー消費、前庭感覚への負担を招くからです。システムの「視差効果を減らす」設定は厳密に尊重しています。
プロジェクトのカラーパレット
ネイビー
#1F3B61
見出し、構造
テラコッタ
#B7481F
アクション — 白地で5.3:1
ホワイト
#FFFFFF
ページの面
クールグレー
#F8FAFC
交互に配置するセクション
タイポグラフィ体系
見出し用書体
Outfit 800
本文用書体
Plus Jakarta Sans 400
セルフホストした2つのバリアブルフォントを、font-display: optionalで読み込んでいます。読み込み時のレイアウトのずれはありません。
その裏側にある技術。
- React
- Vite
- Tailwind
- TypeScript
- Vercel
すべてのルートをビルド時にプリレンダリング
SPAはすべてのURLに同じHTMLを返すため、JavaScriptを実行しないクローラーにはページごとのメタデータが見えません。プリレンダリングのスクリプトが各ルートを巡回し、タイトル、description、canonical、Open Graph、JSON-LDを含む完全なHTMLファイルを書き出します。
欠陥があればビルドを通さない
ルートにメタデータがない場合、404ページのnoindexが外れた場合、画像が1440pxを超えた場合、CSPが古くなった場合、あるいは「要記入」の記載が生成されたHTMLに残った場合、ビルドは失敗します。注意力に頼るより、安全装置を設けるほうが確実です。
ルートごとのコード分割
トップページを含め、各ページが個別のチャンクになっています。法的表示のページが、トップページのアニメーションライブラリをダウンロードする理由はありません。
検索で見つけてもらうための仕組み。
検索意図ごとに入り口をひとつ
17のサービスページと4つの地域ページが、それぞれ異なるクエリをターゲットにしています。どれも別のページのキーワード違いではなく、内容そのものが異なります。
一貫した構造化データ
Organization、LocalBusiness、ProfessionalService、WebSite、WebPage、BreadcrumbListを、すべて@idで結び付けています。矛盾する重複は削除しました。同じURLで競合する2つのパンくずリストは、ないよりはまし、という程度のものにすぎません。
自己評価の星は付けない
aggregateRatingは削除しました。企業が自らに付ける評価はGoogleのガイドラインで禁止されており、手動による対策を受けるおそれがあります。ドメインを失うくらいなら、星を失うほうを選びます。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
Lighthouseで100/100、そして手動監査
スキップリンク、ルートが変わるたびのフォーカス移動と読み上げ、44pxのタップ領域。さらに専用パネルで、高コントラストモード、OLEDモード、ディスレクシアに配慮したフォントを選べます。
納品したもの。
- トップ
- 17のサービスページ
- 4つの地域ページ
- ポートフォリオと37のケーススタディ
- 料金、補助金、診断クイズ、ご予約
- 技術スタック、デザインシステム、変更履歴
- 法定ページ
プロジェクトの流れ。
デザインシステム
トークン、コントラスト、タイポグラフィスケール、シャドウ。
コンテンツ
17のサービス、4つの地域、公開料金。
テクニカルSEO
プリレンダリング、構造化データ、サイトマップ、ビルドの安全装置。
継続的な改善
たび重なる監査の結果を公開の変更履歴に記録。


