出典：esrbespoke.au ↗ 確認日 2026.10.25
Editor's note
編集部の視点
「1989年から」とポルシェ認定の修理工場であることを最初に伝え、扱うブランドとサービスを並べるシドニーの高級車の板金・事故修理会社。
シドニーで1989年から続く、高級車の板金・事故修理の会社 ESR のサイト。ファーストビューは工場の前のポルシェを映した動画に「Exceptional is our standard（特別であることが私たちの基準）」と「30年にわたり、最高の状態を取り戻し、運転の喜びをよみがえらせてきた」の一文。ヘッダーには「SINCE 1989」。続いて、Porsche AG から認定を受けた「Porsche Certified Collision Centre」であり、オーストラリアで数少ない一社であるという説明、工場の動画、扱う12のブランド名、6つのサービスが並ぶ。メニューとフッターには電話・メール・受付時間（月〜金の8時〜17時）と、本社とスタジオの2拠点の住所がある。
- 01 メーカーの認定を、写真の次の画面で大きな文章として説明し、腕の確かさの根拠にする
- 02 扱うブランド名を大きな文字で12個並べ、自分の車を任せられるかを一目で分からせる
- 03 保険修理・保険請求の代行・引き取り・代車まで、修理の前後にあるサービスを番号つきで並べる
Conversion
集客の工夫
- 認定の明記 （あり） Porsche Certified Collision Centre（2つ目の画面）
- 創業年 （あり） ヘッダーに「SINCE 1989」
- 扱うブランド （あり） ポルシェ・ベントレー・フェラーリなど12ブランド
- サービスの一覧 （あり） 番号つきで6つ
- 保険修理への対応 （あり） 保険修理と保険請求の代行
- 電話・メール （あり） tel:リンク 2か所・mailto:リンク 2か所（メニューとフッター）
- 受付時間 （あり） 月〜金の8時〜17時（メニューとフッター）
- 料金の目安 （なし） トップにはなし
メーカーの認定を、文章で説明する
ファーストビューの動画のすぐ次は、Porsche AG から認定を受けた修理工場であることを大きな文章で説明する画面です。オーストラリアで数少ない一社であること、専用の工具と工場で研修を受けた技術者で、メーカーの意図したとおりに戻すことが書かれています。認定マークを置くだけでなく、何が認められたのかを言葉にしています。
扱うブランドを、一覧で見せる
続く画面では、ポルシェ・ベントレー・フェラーリ・ロールス・ロイス・アストンマーティンなど 12のブランド名を大きな文字で縦に並べています。高級車の持ち主にとって、自分の車を任せられるかどうかは最初の判断です。名前を並べるだけで、その答えが出ます。
修理の前後まで、サービスとして並べる
サービスの一覧には、修理だけでなく 保険請求の代行・車の引き取りと輸送・代車 まで番号つきで6つ並んでいます。事故のあとに困るのは修理そのものより手続きや移動であることが多く、その手間を引き受けることを示しています。電話・メール・受付時間（月〜金の8時〜17時）と2拠点の住所は、メニューの中とフッターにあります。
チェック項目は 2026.10.25 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #000000 見出し・本文・サービスの面の背景
- #FFFFFF 認定・ブランドの面の背景・暗い面の上の文字
- #191919 ファーストビューの背景（動画の下地）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文・ブランド名・サービス名 | FK Grotesk | Inter |
| ナビ・小さなラベル・添え書き（大文字） | Regular（Binnenland） | Space Grotesk |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 62px / 500 | 0.95 | 38px / 500 |
| h2 | 40px / 500 | 1.00 | 20px / 500 |
| 本文（p） | 14px / 300 | 1.00 | 14px / 300 |
| ボタン | 14px / 300 | 1.43 | 14px / 300 |
実測値（PC 1440px・SP 375px、2026.10.25 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 社名と「AUTOMOTIVE GROUP SINCE 1989」、サービス・提携・会社・連絡先・採用のナビ。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 工場の前のポルシェを映した動画に、大きな一文と30年の歩みの一文。音声のオンと「Our story」。 ファーストビュー／全面動画＋コピー型
- 03 メーカーの認定 Porsche AG から認定を受けた修理工場であること、専用の工具と工場で研修を受けた技術者。 メッセージ／大きな一文型
- 04 工場の動画 認定の看板が掛かった工場を全幅の動画で。 ファーストビュー／全面動画＋コピー型
- 05 扱うブランド ポルシェからマセラティまで12のブランド名を大きな文字で縦に。 信頼／ロゴ帯型
- 06 サービスの考え方 小さな修理から構造の修復まで、メーカーの基準で仕上げること。 メッセージ／大きな一文型
- 07 6つのサービス 保険修理・保険請求の代行・自費の修理・ディテイリングと保護フィルム・車の引き取り・代車を番号つきで。 進め方／番号つきステップ型
- 08 フッター 電話・メール・受付時間・本社とスタジオの住所・メール登録・SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 メーカーや団体の認定は、ロゴを小さく置くだけでなく、何が認められたのかを文章で書く
- 02 扱える車種・ブランド・素材などを一覧にし、自分が対象かどうかをすぐ判断できるようにする
- 03 保険の手続きの代行や代車など、修理そのもの以外の手間を減らすサービスもはっきり並べる
- 04 電話・受付時間・拠点の住所は、メニューを開いた中とフッターの両方に置く
FAQ
よくある質問
ESR Bespoke のサイトで使われているフォントは？
見出しと本文は FK Grotesk、ナビや小さな大文字のラベルは Binnenland の Regular です。どちらも有料書体なので、無料で近づけるなら見出しに Inter、ラベルに Space Grotesk が候補です。
整備工場や板金工場のサイトで、認定はどう見せるとよいですか？
ESR は写真の次の画面で、誰から認定を受けたのか、そのために専用の工具や研修を受けた技術者をそろえていることを文章で説明しています。認定マークを並べるだけより、何が保証されるのかが伝わります。
どんな業種の参考になりますか？
自動車の整備・板金工場、時計や楽器の修理店、メーカー認定の修理・サービス店など、技術と認定が信用になる業種に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はESR Bespokeおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Awwwards — Site of the Day
