Web制作会社・SEO

Kayzen Web

制作会社のサイトは最初の実績。クライアントのサイト以上に厳しく監査しています。

年
2026
制作期間
継続的な改善
技術スタック
React · Vite · Tailwind · TypeScript · Vercel
  • 戦略
  • デザインシステム
  • 開発
  • SEO
  • アクセシビリティ
  • ライティング
https://www.kayzen-lyon.com/
Kayzen WebのWebサイトのトップページ――Web制作会社・SEO、Kayzen Web制作
Lighthouseアクセシビリティ
100/100
Lighthouse SEO
100/100
ビルド時にプリレンダリングされるルート
79
件の実績を、それぞれケーススタディ付きで掲載
37
出発点

解決すべき課題。

背景

kayzen-lyon.comは、当社のショーケースサイトです。プリレンダリングされた79のルートがあり、そのうち21のサービスページ、4つの地域ページ、公開の料金表、変更履歴(changelog)、技術スタックのページ、そして公開のデザインシステムを含みます。

制約

Web制作会社は、実績よりも先に自社サイトで評価されます。平凡なパフォーマンススコア、不十分なコントラスト、無効な構造化データなど、どんな小さな欠陥も不利な材料になります。そのためサイトには、要求の厳しい見込み客による技術的な精査に耐えることが求められました。

解決策

私たちは、制作会社が隠しがちな要素を公開しました。料金、技術スタック、デザインシステム、そしてサイト自体に加えた修正を列挙する変更履歴です。この透明性には2つの目的があります。見込み客を安心させること、そして私たち自身に水準の維持を課すことです。

自己申告ではなく、計測値

納品時に計測したスコア。

本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。

PageSpeed
87
パフォーマンス:100点中87点
100
アクセシビリティ:100点中100点
100
ベストプラクティス:100点中100点
100
SEO:100点中100点
デザイン・アートディレクション

すべての判断に、理由がある。

  1. 文書化され、公開されたデザインシステム

    カラートークン、可変のタイポグラフィスケール、4段階のシャドウ、統一された縦のリズム。/design-systemページでそれらを公開しています。目に見えるシステムは、ぶれないシステムです。

  2. すべてのコントラストを測定

    すべての色の組み合わせを計算しました。入力欄の枠線は3:1を満たし、フォーカスリングはアクションカラーから切り離して色付きのボタン上でも見えるようにし、テキストのグラデーションは廃止してベタ塗りにしました。

  3. アニメーションは表示時のみ

    読み込みインジケーターを除き、無限ループのアニメーションはありません。GPUの常時負荷、バッテリー消費、前庭感覚への負担を招くからです。システムの「視差効果を減らす」設定は厳密に尊重しています。

プロジェクトのカラーパレット

  • ネイビー

    #1F3B61

    見出し、構造

  • テラコッタ

    #B7481F

    アクション — 白地で5.3:1

  • ホワイト

    #FFFFFF

    ページの面

  • クールグレー

    #F8FAFC

    交互に配置するセクション

タイポグラフィ体系

見出し用書体

Outfit 800

本文用書体

Plus Jakarta Sans 400

セルフホストした2つのバリアブルフォントを、font-display: optionalで読み込んでいます。読み込み時のレイアウトのずれはありません。

エンジニアリング

その裏側にある技術。

  • React
  • Vite
  • Tailwind
  • TypeScript
  • Vercel
  1. すべてのルートをビルド時にプリレンダリング

    SPAはすべてのURLに同じHTMLを返すため、JavaScriptを実行しないクローラーにはページごとのメタデータが見えません。プリレンダリングのスクリプトが各ルートを巡回し、タイトル、description、canonical、Open Graph、JSON-LDを含む完全なHTMLファイルを書き出します。

  2. 欠陥があればビルドを通さない

    ルートにメタデータがない場合、404ページのnoindexが外れた場合、画像が1440pxを超えた場合、CSPが古くなった場合、あるいは「要記入」の記載が生成されたHTMLに残った場合、ビルドは失敗します。注意力に頼るより、安全装置を設けるほうが確実です。

  3. ルートごとのコード分割

    トップページを含め、各ページが個別のチャンクになっています。法的表示のページが、トップページのアニメーションライブラリをダウンロードする理由はありません。

SEO対策

検索で見つけてもらうための仕組み。

  1. 検索意図ごとに入り口をひとつ

    17のサービスページと4つの地域ページが、それぞれ異なるクエリをターゲットにしています。どれも別のページのキーワード違いではなく、内容そのものが異なります。

  2. 一貫した構造化データ

    Organization、LocalBusiness、ProfessionalService、WebSite、WebPage、BreadcrumbListを、すべて@idで結び付けています。矛盾する重複は削除しました。同じURLで競合する2つのパンくずリストは、ないよりはまし、という程度のものにすぎません。

  3. 自己評価の星は付けない

    aggregateRatingは削除しました。企業が自らに付ける評価はGoogleのガイドラインで禁止されており、手動による対策を受けるおそれがあります。ドメインを失うくらいなら、星を失うほうを選びます。

アクセシビリティ

誰もが使えるように。

2025年6月から、欧州アクセシビリティ法(European Accessibility Act)により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。

  1. Lighthouseで100/100、そして手動監査

    スキップリンク、ルートが変わるたびのフォーカス移動と読み上げ、44pxのタップ領域。さらに専用パネルで、高コントラストモード、OLEDモード、ディスレクシアに配慮したフォントを選べます。

サイト構成

納品したもの。

  • トップ
  • 17のサービスページ
  • 4つの地域ページ
  • ポートフォリオと37のケーススタディ
  • 料金、補助金、診断クイズ、ご予約
  • 技術スタック、デザインシステム、変更履歴
  • 法定ページ
進め方

プロジェクトの流れ。

  1. デザインシステム

    トークン、コントラスト、タイポグラフィスケール、シャドウ。

  2. コンテンツ

    17のサービス、4つの地域、公開料金。

  3. テクニカルSEO

    プリレンダリング、構造化データ、サイトマップ、ビルドの安全装置。

  4. 継続的な改善

    たび重なる監査の結果を公開の変更履歴に記録。

Q&A

よくいただくご質問。

見込み客が最初にすることは費用の目安を探すことなのに、それがどこにも見つからないからです。料金を掲載すれば、双方にとって予算外の問い合わせがなくなり、最初の打ち合わせが価格交渉ではなくプロジェクトについての話し合いになります。

サイトに完成はなく、修正の記録のほうが、言葉よりも手入れが続いていることをよく証明するからです。それはまた、私たちが保守サービスとして提供しているものでもあります。

同じ水準のこだわりを、あなたのサイトにも。

現在のサイトの無料診断、24時間以内のお見積もり、そして今お読みいただいたような書面での解説をお届けします。3回分割払い(手数料無料)に対応し、利用できる地域の補助金は契約前に確認します。

共有