鏡面仕上げの世界観を、
デジタルへ。

まずは、こちらを
お読みください。

本書には技術用語が含まれます。お忙しい方、また「何が ・ いくらで ・ いつまでに」を先にご把握されたい方は、本ページのみで全体像をご理解いただけるよう構成いたしました。

この提案を、3 つの文で。

① 本書は、KNIGHTS — 鏡面仕上げ専門 様のウェブサイトを、新しく作り直すご提案 でございます。
② すでに新サイトの動く見本（knights.kitsuneweb.studio）を完成させ、貴工房ご自身の目で品質をご確認いただけるようにいたしました。
③ ご納得いただけましたら、その見本をそのまま貴工房のものとしてお引き渡しし、正式な「新しいウェブサイト」として運用を開始いたします。

何が変わるのですか？ ── 今のサイトと、新サイトの比較

よくあるご質問（短くお答えいたします）

本書の読み方 ── 章別ガイド

用語ガイド ── 知っておくと便利な言葉

本ページのみで、ご判断は十分可能です。もし「いくらで・いつまでに・何が手に入るか」がご理解いただけましたら、 残りの章はご興味に応じて読み飛ばしていただいて構いません。ご不明点は、すべて hello@kitsuneweb.studio 宛のメールにて承っております。

仕上がりは下地で決まる。
ウェブも、同じです。

貴工房の本質を、訪問者が最初の 3 秒で理解する ── それが本提案の唯一にして最大のゴールです。

本書は、KNIGHTS — 鏡面仕上げ専門 様への、ウェブサイト全面リニューアルの正式な提案書です。 Kitsune Web Studio は、貴工房を取り巻く 3 つの事実 ── ①「月 8 台」の希少性、②「同じ職人が一台を担当」する職人体制、③ JCA 認定の薬剤・暗室照明・温湿度管理という技術的精緻 ── を、 ブルータリスト・エディトリアルというデザイン言語と、Next.js 14 + React Server Components + Cloudflare Pages という最新の Web 技術で再構築することをご提案いたします。

本提案で実現する 6 つの成果

• ブランドの可視化。暗室・5000 K ハロゲン・職人の手作業 ── という非言語の世界観を、硬い罫線・活版印刷的な紙面構成・Newsreader 体のイタリック見出しで構築します。
• 施術の構造化。鏡面仕上げ／ガラスコーティング／ルームクリーニング／ヘッドライト再生 の 4 プロトコルを、図版・キャプション・工程表として可視化します。
• 業界最高水準のパフォーマンス。Cloudflare のグローバルエッジから配信する静的 HTML。LCP < 1.5 秒、CLS < 0.05、初回読み込み 50 KB 級を目指します。
• ローカル検索の最大化。LocalBusiness 構造化データ、地域 × 業種キーワードを織り込んだメタ設計、Google ビジネスプロフィール連携。
• 確度の高い問い合わせ動線。車両情報・希望工程・現状の塗装状態を事前ヒアリングする構造で、初回打ち合わせ時間を 30 〜 50 % 短縮。
• 長期運用に耐える基盤。WCAG 2.1 AA 準拠、TypeScript による型安全、CMS 不要・データベース不要・ランニングコスト月額 ¥0 円〜。

ブランド主導の
Web 設計・開発スタジオ。

弊社が大切にしている 3 つの原則

KNIGHTS — 鏡面仕上げ専門。

4 つの観点から
現状を診断いたしました。

ご提案に先立ち、貴工房の現サイト・Google ビジネスプロフィール・主要検索クエリを、 Lighthouse・PageSpeed Insights・Schema.org Validator・WAVE・axe-core など業界標準ツールにて診断いたしました。 以下、観点別の所見と推定スコアです。

4.1　パフォーマンス監査

4.2　SEO 監査

4.3　UX ／ 情報設計監査

• サービスの差別化が伝わらない。3 工程研磨・JCA 認定・暗室確認 ── という他工房との決定的な違いが、文章中に埋もれており、初見の訪問者には認識できません。
• 料金の不透明性。「お問い合わせください」式の表記は、高単価帯（¥250,000+）のお客様にとって、心理的ハードルとなります。
• 施工事例の説得力不足。Before / After の写真と、「何を・どのように・なぜ」のキャプションがセットで提示されていません。
• 問い合わせフォームのヒアリング不足。車種・年式・希望工程・現状の塗装状態 ── を事前に聞かないと、初回打ち合わせの効率が低下します。
• お知らせ／ジャーナルがない。季節メンテナンス・薬剤研究・施工事例といったコンテンツ基盤が無く、SEO 流入の機会を逃しています。

4.4　モバイル ／ アクセシビリティ監査

• タップ領域。iOS / Android のヒューマンインターフェースガイドライン基準（最小 44 × 44 px）を満たしていない領域があります。
• 配色コントラスト。本文 / 補助テキスト / リンク色が WCAG 2.1 AA の最低基準（4.5:1）をクリアしていない箇所があります。
• キーボード操作。フォーカスインジケータが不可視で、Tab 操作のみのユーザーが現在地を把握できません。
• スクリーンリーダー。装飾画像に空の `alt` 属性、意味のある画像に説明文の不足が見られます。
• 動的フォントサイズ。固定 px 指定により、ユーザー側の文字拡大設定が反映されない箇所があります。

機会は、すぐそこにあります。

ブルータリスト・
エディトリアル。

硬い罫線、活版印刷的な紙面構成、Newsreader 体のイタリック見出し ── 鏡面仕上げの「精緻」を、デジタルで表現するための言語です。

7.1　ビジュアル原則

7.2　タイポグラフィ ── 三書体構成

※ いずれも `next/font/google` でセルフホスト配信し、初回読み込み時の FOIT / FOUT を発生させません。

7.3　カラーパレット ── Material Design 3 トークン

7.4　モーション設計

• 段階表示（Stagger）。カード・リストは 80 ms ずつ遅延して表示し、視線を順次誘導します。
• 視差（Parallax）。ヒーロー画像はスクロール量の 30 % で動かし、紙面に深度を与えます。
• スクロール進捗バー。画面最上部に、ページ全体の読了率を可視化する 4 px のバーを配置。
• Reduce Motion 準拠。OS のモーション抑制設定を尊重し、必要時は全アニメーションを無効化します。

7.5　編集記号 ── ブランドの細部

• プレート番号（01 ／ 提案概要）
• 図版番号（Fig 1.A）
• 登録マーク（コーナー罫線）
• フィルムグレイン（紙質感）
• 座標表記（35.3376° N · 139.2303° E）
• スタンプ（CONFIDENTIAL ／ 機密）

7 ページ構成。
全てに、目的があります。

情報過多のサイトは、ブランドの権威を損ないます。本提案では、貴工房に必要な機能を 7 ページに凝縮し、 各ページの役割と到達ゴールを明確に定義いたしました。

選定の理由まで、
全てご説明いたします。

9.1　ホスティング比較

速度は、思いやりです。

10.1　採用する最適化手法

• 静的サイト生成（SSG）。全ページを `generateStaticParams` でビルド時に HTML 化。サーバーレンダリング時間 = 0 ms。
• React Server Components。クライアント JS を `"use client"` 境界（フォーム + モーション）のみに限定。
• 画像の自動最適化。`next/image` で WebP / AVIF 自動変換、サイズ別レスポンシブ生成、`loading="lazy"` 適用。
• フォントのセルフホスト。`next/font/google` で Google Fonts を自社配信化、CLS 0、CDN ブロッキング排除。
• 長期キャッシュ。ハッシュ付きアセットに `Cache-Control: max-age=31536000, immutable` 適用（1 年キャッシュ）。
• エッジ配信。Cloudflare の世界 300+ 拠点から、訪問者の最寄りからレスポンス。日本国内 RTT < 30 ms。
• HTTP/3 + QUIC。Cloudflare 標準対応。モバイル回線で大幅な高速化。
• セキュリティヘッダ。`X-Frame-Options` / `X-Content-Type-Options` / `Strict-Transport-Security` / `Permissions-Policy` ── 全て `public/_headers` で配信時に付与。

地域 × 業種で、
一位を取りに行きます。

11.1　ターゲットキーワード

11.2　構造化データ ── LocalBusiness Schema（JSON-LD）

Google の検索結果上で、営業時間・住所・電話・評価・サービスメニュー ── を「リッチリザルト」として表示させるための構造化データを、 全ページに JSON-LD 形式で埋め込みます。実装例：

{
  "@context": "https://schema.org",
  "@type": "AutoBodyShop",
  "name": "KNIGHTS — 鏡面仕上げ専門",
  "address": { ... },
  "geo": { "latitude": 35.3376, "longitude": 139.2303 },
  "telephone": "+81-90-7831-3556",
  "openingHours": "Mo-Su 12:00-24:00",
  "priceRange": "¥¥¥",
  "servesCuisine": null,
  "areaServed": ["神奈川県", "東京都", "静岡県東部"],
  "hasOfferCatalog": { ... }
}

11.3　Open Graph / Twitter Card

各ページタイトル・説明文・OGP 画像を動的生成し、SNS 共有時に「ブランドの第一印象」を制御します。

• OGP 画像：1200 × 630 px、ブランド一貫の視覚言語
• 動的生成：ページ毎にタイトル・サブテキストを反映（ジャーナル記事に強い）
• Twitter Card：`summary_large_image` 形式

11.4　その他の SEO 施策

• `sitemap.xml` ／ `robots.txt` のビルド時自動生成
• 正規 URL（canonical）の明示
• パンくずリストの構造化データ
• FAQ ページのリッチリザルト対応
• Google Search Console / Google Analytics 4 連携設定
• Google ビジネスプロフィールとの相互参照

全てのお客様に、
平等な情報を。

高単価帯のサービスにおいて、アクセシビリティは品質の一部です。本提案では、ウェブアクセシビリティの国際基準 WCAG 2.1 Level AA を満たすことを開発の前提といたします。

• 配色コントラスト。本文は 7:1 以上（AAA 水準）、補助テキストは最低 4.5:1（AA 水準）。
• キーボード操作。全インタラクティブ要素を Tab キーで操作可能。フォーカスインジケータは可視・高コントラスト。
• スクリーンリーダー。セマンティック HTML、ARIA ラベル、装飾画像の `alt=""`、画像の説明文。
• 動的フォントサイズ。`rem` ベースで指定、ユーザー設定の文字拡大に追従。
• Reduce Motion。OS のモーション抑制設定を尊重し、自動でアニメーション無効化。
• 言語属性。`html lang="ja"` を明示。検索エンジン・スクリーンリーダー双方で正しく解釈。
• フォームラベル。全入力欄に `` 紐付け、必須項目の明示、エラー時の説明文。

ブランドの声を、
一文字単位で。

コンテンツは、デザインと同等に重要です。本提案では、貴工房既存のブランドボイスを最大限尊重し、 編集設計の観点から再構築いたします。

13.1　既存コピーの取り扱い

現在のサイト・SNS・Google ビジネスプロフィールの全文章を読み込み、ブランドの「核」となる表現 （例：「仕上がりは下地で決まる」「同じ職人が一台を担当」「月 8 台のみ」）を抽出・保護した上で、編集設計のみ再構築いたします。

13.2　新規執筆コピーの範囲

• ・各ページの導入文（ヒーロー下のリード）
• ・サービス詳細のセクションコピー（4 プロトコル × 4 セクション）
• ・料金プランの補足文・FAQ 7 項目
• ・お知らせ初稿 3 本（ブランド立ち上げ／施工事例／薬剤研究）
• ・OGP 画像のキャッチコピー

6 週間で、
ローンチへ。

ご発注確定日を Day 1 とし、約 30 営業日（6 週間）でローンチいたします。 実装デモが既に存在するため、設計・開発工数は通常の半分以下です。

シンプルで、正直に。

料金は 弊社公式料金ページ に準拠いたしております。 隠れ料金一切なし、サブスクリプション・買い切りの境界も明確です。

弊社の料金体系は、定価表記の 2 プラン構成です。お客様が今のビジネス状況に最も合うプランをご自身でお選びいただけるよう、 内容と金額を全公開いたしております。本提案では両プランをご案内したのち、KNIGHTS 様への推奨案を申し上げます。

15.1　2 つのプラン ─ 公式料金ページに準拠

15.2　KNIGHTS 様への推奨見積

「ブランドの所有・長期運用の自立性・量産との差別化」 を重視されている貴工房には、 PLAN_B（カスタム制作） をご推奨申し上げます。コードもデザインも完全に貴工房の所有となり、 将来的にどのサーバー・どの体制でも自由に運用いただけます ── 鏡面仕上げの「下地は自分で作る」哲学と、最も親和性の高い選択です。

実装デモ（knights.kitsuneweb.studio）にて既にお示ししております本提案のスコープ ── 7 ページ構成 ／ 完全オリジナルブランド設計（ブルータリスト・エディトリアル + 三書体タイポ + MD3 トークン）／ カスタムモーション・プリミティブ 4 種（Reveal ／ Stagger ／ Parallax ／ ScrollProgress）／ 静的生成ジャーナル（型付き JournalBlock × 5 種・slug 別 SSG）／ 構造化データ（LocalBusiness JSON-LD）／ Google Maps 埋込（ブルータリスト処理）／ ヒアリング型お問い合わせフォーム ／ Cloudflare Pages 配信設定（セキュリティ・キャッシュヘッダ込） ── を踏まえた概算見積レンジは以下の通りです：

※ 上記は実装デモを根拠とした弊社からの目安レンジです。正式お見積書は、Phase 1（要件定義 ／ メールにて完結）完了後に PDF で発行いたします。 消費税は内税表記、適格請求書（インボイス制度対応）です。

15.3　追加オプション（アップグレード）

公式料金ページに準拠した、必要に応じた機能追加です。本提案の標準スコープ外につき、ご希望の場合は別途ご相談ください。

15.4　ホスティングと修正対応

• ホスティングは選択制。自己ホスティング（Cloudflare Pages 無料枠 ／ 弊社にて初期構築）または ¥3,500 / 月 〜 のマネージドホスティング（弊社運用）からお選びいただけます。いずれの場合も、コードは最初から貴工房のものです。
• 修正は時間制。納品後の追加作業は ¥12,000 / 時 にて承ります。定額料金・サブスクリプション一切なし。必要なときだけお支払いいただきます。大きな機能追加・新規ページ制作は別途お見積もりにてご対応申し上げます。

納品後も、
伴走いたします。

Web サイトはローンチして終わりではなく、運用が始まりです。本提案では、納品後 60 日間の無償サポート期間に加え、 長期運用には公式料金ページの 3 つの選択肢をご利用いただけます： (1) ¥12,000 / 時の時間制修正（必要なときだけ ／ 文言修正・微調整向け）、 (2) 機能追加オプション（更新管理画面 ¥110,000〜 ／ オンライン予約 ¥45,000〜 ／ 会員ポータル ¥75,000〜 ／ 前章 15.3 ご参照）、 (3) SEO 運用（¥75,000 / 月〜）。 なお、貴工房が将来的に PLAN_A「運用込みサイト」（¥45,000/月・12 か月契約・全管理込）への移行をご希望の場合も、別途お見積りにてご対応申し上げます。

16.1　ローンチ後 60 日間の無償サポート

• 軽微な不具合修正（メールにて承り、原則 24 時間以内に着手）
• ブラウザ互換性問題の対応
• 初期コンテンツの校正・微調整
• ローンチ後 30 日 / 60 日時点でのパフォーマンスレポート（メール送付）
• Google Search Console インデックス状況のフォロー

16.2　運用マニュアルの納品

納品時、以下の運用マニュアルを PDF 形式でメール添付にてお渡しいたします。 社内・ご家族の方でも更新可能な体制を構築いたします（更新しやすい管理画面オプション ¥110,000 〜 を有効化された場合）。

• ・お知らせ投稿マニュアル（手順書 + スクリーンショット）
• ・施工事例追加マニュアル
• ・画像最適化マニュアル
• ・基本的なバックアップ手順
• ・トラブル時の連絡手順（メール窓口・優先度マトリクス）

実証は、コードと画面で。

事例数や年数ではなく、貴工房のためだけに実装した「動く現物」で、弊社の力量を直接ご判断ください。

正直に申し上げますと、Kitsune Web Studio は新興の独立系スタジオであり、 納品済みのクライアント案件は現時点でございません。 「では、何を信じて発注のご判断をいただくのか」── そのお問いに対する弊社の答えは、シンプルです。 ご相談に対し、ご発注前に貴社専用の実装デモを完成させ、 実機・実コードで「これから納品されるもの」をそのまま体験していただきます。 KNIGHTS 様の本案件におきましても、その方針を貫いておりますことを、改めてお伝え申し上げます。

17.1　弊社の方針 ── なぜ「過去実績」ではなく「現物デモ」なのか

• 誠実な評価軸の提供。「過去にこれだけ作りました」ではなく、「今、貴方のために、これを作りました」を実物でお示しいたします。机上の説明よりも、貴工房ご自身の目で動作・コードを確認いただく方が、確実かつ公平な判断材料になると考えております。
• 仕上がりは現物で判断。鏡面仕上げが「下地から判断していただく」のと同じ哲学です。施工前のサンプルパネル、施工途中の暗室確認 ── 貴工房が実物でお客様にご納得いただくのと同じ流儀で、弊社も「動く現物」でご判断いただきます。
• 透明性。納品時には Git リポジトリの全履歴・全コミットをそのままお渡しいたします。「裏で何をしていたか」は完全に追跡可能、隠しごと一切なし。
• 新興であることの利点。過去案件の保守負担に縛られず、貴工房に対し最大限の集中とリソースを投下できます。職人が「一台に集中する」と同じく、弊社も今は「一案件に集中する」体制です。

17.2　ご評価いただきたいチェックポイント

本提案のご検討にあたり、以下を実機でご確認いただけますと、弊社の品質を最も具体的にご判断いただけます：

• ① 実機表示。貴工房のスマートフォン・タブレット・PC で knights.kitsuneweb.studio をそのままご覧ください。
• ② パフォーマンス計測。Google PageSpeed Insights（pagespeed.web.dev）にデモ URL を入力 → 実数値でスコア確認。
• ③ アクセシビリティ計測。WAVE（wave.webaim.org）にデモ URL を入力 → アクセシビリティ違反 0 件をご確認。
• ④ コード品質。ブラウザの「ページのソースを表示」で HTML の構造化具合（セマンティック・構造化データ・OGP）をご確認。
• ⑤ ブランド一貫性。全 7 ページを通じて、書体・配色・モーション・編集記号が一貫しているかをご確認。

シンプルな、
2 段階のお支払い。

※ 月額運用プランは別途、毎月末締め・翌月 25 日払いの請求書払い、または自動引落しに対応いたします。

お客様が、所有者です。

• 著作権の帰属。納品物（デザイン・コード・コンテンツ）の著作権は、最終支払い完了をもってお客様に完全譲渡いたします。
• ソースコードの提供。Git リポジトリ全体（履歴含む）を、GitHub または GitLab にてお引渡しいたします。お客様の任意のサーバー・サービスへ移管可能です。
• デザイン素材。Figma ファイル ／ 元画像 ／ フォントライセンス情報 ── 全て同梱でお渡しいたします。
• 第三者ライブラリ。Next.js（MIT）／ React（MIT）／ Tailwind（MIT）／ Framer Motion（MIT） ── 全て商用利用可能なオープンソースライセンス。
• 制作実績への掲載。本案件を弊社の制作実績ページに掲載することにつきましては、別途ご相談のうえ、書面にてご了承を頂戴いたします。

守秘義務を徹底いたします。

本案件を通じて知り得た貴工房の業務情報・顧客情報・技術情報につきましては、 契約終了後 5 年間、第三者への開示・転用を一切いたしません。 必要に応じて、別途 NDA（秘密保持契約書）の締結も承ります。

事前に、
お伝えしておきたいこと。

• ・本提案書の有効期限は、発行日より 60 日間 です。期間経過後、薬剤・サーバー費用・人件費の改定により金額が変動する場合がございます。
• ・本提案中に提示するプロトタイプ（knights.kitsuneweb.studio）は、貴工房との契約締結を前提とした暫定公開であり、ご発注に至らない場合は速やかに非公開化いたします。
• ・写真・動画・ロゴなど、貴工房既存のブランドアセットは、別途許諾の範囲内で使用いたします。新規撮影・動画制作・ロゴリファインをご希望の場合は、本提案の標準スコープ外につき、別途お見積りにてご対応申し上げます。
• ・既存ドメイン（お持ちの場合）から新サイトへの移行時は、Google での評価を維持するため、URL 構造を可能な限り踏襲し、必要箇所には 301 リダイレクトを設定いたします。
• ・モバイル端末は iOS 15 以降 ／ Android 11 以降、デスクトップは Chrome / Safari / Firefox / Edge の最新 2 メジャーバージョンを動作保証範囲といたします。
• ・連絡手段はメール（`hello@kitsuneweb.studio`）に一本化いたしております。お電話・オンライン会議・対面打ち合わせは承っておりません。これは、(1) ご相談・ご決定事項の証跡を確実に書面記録するため、(2) 双方が時間を選ばず最も迅速に応答できるため ── という二点の理由によります。ご返信は土日祝含め 24 時間以内を目安としております。
• ・障害発生時の連絡窓口もメールにて承り、緊急時（サイト全停止）は 24 時間以内の一次対応を原則といたします。
• ・本書はお見積金額の概算をお示しするものであり、確定見積書は要件定義（Phase 1）完了後にメール添付の PDF にて発行いたします。

ご検討ののち、
ご署名をお願いいたします。

上記内容にご同意いただける場合、下記欄にご署名・ご捺印のうえ、PDF 化または原本にて Kitsune Web Studio までお戻しください。 ご返送をもって正式なご発注とさせていただき、Phase 1 を開始いたします。