架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
PHAROS
碧川町で一人の職人が月に8台を受け、予約の前に、工房が塗装に対してしないことを伝える。
PHAROSは、鏡面仕上げ研磨、ガラスポリマーコーティング、ルームクリーニング、ヘッドライト再生を完全予約制で行う工房だ。硬い罫線、角丸なし、ニアブラックに錆色のアクセント、各セクションの上に番号付きのプレートを置く、ブルータリスト・エディトリアルのスタイルで、日本語専用・8ページのサイトを作った。Next.js 14 App RouterのReact Server Componentsで動き、クライアント側で動くのは問い合わせフォームとモーションの部品だけだ。サイト全体を12枚のアートディレクションした写真が支え、どの写真も上に重なる文字のための余白を残している。
直面した
課題
この業界のサイトは、ビフォーアフターのスライダーと「プラチナ」のような名前のパッケージで売る。それは、客が自分の塗装に実際何をするのかを尋ね、説明の言葉が尽きるまでは通用する。そうなると、丁寧な仕事をする店も速さ重視の店も同じに見えてしまう。
研磨を知らない人にも技術が伝わるようにしつつ、ページを講義にしない。
車によって本当に変わる作業の価格を公開しながら、その数字が工房の守れない約束にならないようにする。
一人で月8台という受け入れ数を、言い訳ではなく工房を選ぶ理由として示す。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 架空の工房のための自主制作。強みが「断ること」にある店（フィラーを使わない、急がない、数をこなさない）を前提に、その拒否を自信として読ませるサイトを作った。
- スコープ
- サーバーレンダリングのNext.jsアプリとして8ページ。ジャーナルはlib/journal.tsの型付き配列で、記事は事前生成されるので、公開にはコミットが必要だ。年に数回書く工房には合うが、毎週更新する店には合わない。
- 未接続
- 問い合わせフォームは検証して成功メッセージを出すが、何も送らない。予約は車についての会話から始まるので、フォームの役目はその会話を始めることだけで、受信箱につなぐのは実案件なら最初の1時間の作業になる。
導いた
解決策
ブルータリスト・エディトリアルのスタイルで8ページを作り、工房のやり方そのものが中身になるようにした。各セクションは技術文書のページのように番号を振り、価格は作業日数とコーティングの耐用年数と一緒に載せ、アーカイブは車種のバッジではなくプロジェクト番号で整理している。
Material Design 3のトークンを使い、ニアブラックに錆色のプライマリ（#ad2c00）、4〜8pxの硬い罫線、角丸なし、鋼の背景にフィルムグレインを重ねる。書体にはそれぞれ一つの役目を与え、見出しはNewsreaderのイタリック、本文はWork Sans、ラベルとプレート番号はSpace Groteskで組む。写真は一組としてアートディレクションし、パレットに合わせて色を揃えたので、ストック写真に見えるものはない。
React Server Componentsを使うNext.js 14 App Routerで、"use client"の境界は問い合わせフォームとモーションのラッパーだけだ。コンテンツはCMSに置かず描画するコンポーネントの隣に置き、ジャーナルの記事はgenerateStaticParamsで事前生成し、サイトはnext-on-pagesアダプタ経由でCloudflare Pagesに配信している。セキュリティヘッダーはpublic/_headersにある。
サイト
ウォークスルー
ホームには、黒い塗装を走る一本の光の線、創業年、町の名前、そして「鏡面仕上げ専門」という日本語が一行だけ。スライダーも星評価の壁もなく、写真だけで伝えている。
「下地が、全て。」工房はサービスを売る前に、まず自分たちのやり方を示す。速さ重視の店との違いは、客が目にしない下地作業にあるからだ。
各サービスは番号付きのプレートを持つ手順書として書かれ、何が、どの順で、何日かけて行われるのかを説明する。このページを読めば、「プラチナパック」では分からない、自分が何を買うのかが分かる。
三つのプランに価格を載せた。入門プランは¥88,000、人気プランは¥248,000、フルレストレーションは「要相談」だ。20日かかる一台を、ウェブページで正直に値付けすることはできないからだ。
施工実績はメーカー別に分けずPRJ-01からの番号順に並ぶので、GhostとVeloceが同じグリッドにいる。アーカイブには、ボンネットにどんなバッジがあっても、行った仕事がそのまま記録される。
得られた
成果
クライアント境界を二つだけ持つサーバーコンポーネントをPagesアダプタ経由で配信しているので、文字とレイアウトはHTMLとして届き、JavaScriptは問い合わせフォームとモーションのラッパーのためにだけ読み込まれる。下のスコアはその構造から来ている。アクセシビリティが満点なのはパレットのコントラストが高いからで、暗いブルータリストのデザインなら必ずそうなるわけではない。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
考察
このビルドは、最上級の言葉よりも、はっきり示した上限のほうが売れるという主張だ。月に8台は上限だが、そのまま書くだけで「プレミアム」を何度並べるより効果がある。もう一台を詰め込むために自分の車が急がされないと、客に伝わるからだ。作業日数とともに価格を公開するのも同じで、金額だけ示して工程を隠す店との比較を、工房のほうから招くことになる。変えたいのはフォームだけで、検証はきれいに動くのに何も送らない。会話から予約が始まる商売なら、最初に埋めるべき空白はそこだ。
こんなサイトを作りたい？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。