WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. 立石自動車

webcan analyze www.tateishi-ae.jp

AUTOMOTIVE · 石川県 · PICKED 2026.10.25

立石自動車自動車・乗り物のホームページデザイン参考 — 黒・赤・英字見出し

立石自動車のトップページ（PC）
PC（1440px）
立石自動車のトップページ（スマホ）
スマホ（375px）
出典：www.tateishi-ae.jp ↗確認日 2026.10.24
立石自動車自動車・乗り物 · 石川県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

黒と赤で統一し、在庫車の価格・年式・走行距離をトップページで見せている。

石川県加賀市の自動車販売・整備会社のサイト。ファーストビューは写真のスライドで、古い町家が並ぶ石畳の通りに停めた赤いスポーツカーや、浜辺の赤い四輪駆動車とサーフボードを持つ男性の写真に、明朝体の「日常にある、ささやかな幸せ。」とロゴを重ねている。カスタムジムニーのバナー、在庫車のカード、CONCEPT、RELIABLE SUPPORT、撮影車の貸し出し、採用情報と続き、最後に電話番号とお問い合わせフォームのボタンを置いている。

  1. 01ヘッダーは黒で、右端の「お問い合わせ」だけを赤くしている
  2. 02NEW STOCK CAR LISTで、在庫車4台の写真・車名・年式・走行距離・税込価格を並べている
  3. 03英字の見出しの背後に、同じ文字を薄いグレーで大きく重ねている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / お問い合わせフォーム
－LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

在庫車の価格をトップで見せる

NEW STOCK CAR LISTで、車名・年式・走行距離・税込価格をカードで並べ、売約済みの車には「SOLD OUT」と表示している。今ある車と値段がすぐ分かり、気になる車からそのまま一覧へ進める。

得意分野をバナーで打ち出す

ファーストビューの直下に「TATEISHI×JIMNY お客様の好きを詰め込んだ、カスタムジムニーをご提案。」のバナーを置いている。在庫車にもカスタムしたジムニーが並び、得意分野が一目で伝わる。

販売以外の依頼も受ける

「CAR for PHOTOGRAPHY」で、CM撮影や記念撮影、結婚式や住宅展示場などで使う車の用意を案内している。車を買う人以外からの問い合わせの入口にもなっている。

チェック項目は 2026.10.24 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#F5F6F8セクション背景 · ライトグレー
#000000ヘッダー・フッター · ブラック
#D60000お問い合わせボタン・価格・電話番号 · レッド
#1D1D1D本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し（NEW STOCK CAR LIST など）
使用フォント
Arial Black
無料で近いもの
Archivo Black
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h214px / 4001.0014px / 400
本文（p）14px / 4001.0014px / 700
ボタン14px / 4001.0014px / 400

実測値（PC 1440px・SP 375px、2026.10.24 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    黒地に左のロゴ、ナビ5項目、右端に赤い「お問い合わせ」。PCは左端に黒い縦の帯を固定し、縦書きのコピーライト。スマホは赤い「MENU」ボタン。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    車と人の写真のスライド（町家の通りの赤いスポーツカー、浜辺の赤い四輪駆動車など）に、明朝体のコピーとロゴ。

    ファーストビュー／全面写真＋コピー型
  3. 03

    TATEISHI×JIMNY

    カスタムジムニーを提案するバナー。

    イベント・キャンペーン／特集バナー並び型
  4. 04

    NEW STOCK CAR LIST

    写真・車名・年式・走行距離・税込価格のカード。MOREのボタン。

    事例・実績／写真グリッド型
  5. 05

    CONCEPT

    赤い四輪駆動車と男性の写真を背景に「夢は、いつだって自由だ。」の文章と赤いボタン。

    コンセプト／写真＋メッセージ型
  6. 06

    RELIABLE SUPPORT

    QUALITY（こだわりの品質）・MAINTENANCE（納得の整備）・SUPPORT（しっかりサポート）を写真つきで。

    強み・選ばれる理由／番号つき3〜4項目型
  7. 07

    CAR for PHOTOGRAPHY

    イベント・CM撮影車の依頼を写真と文章で案内。

    コンセプト／写真＋メッセージ型
  8. 08

    RECRUITING FOR TATEISHI

    整備士の写真を背景に採用情報への案内と「採用情報を見る」のボタン。

    行動喚起／電話＋Web予約の2ボタン帯型
  9. 09
  10. 10

    CONTACT

    赤い電話番号、受付時間、「お問い合わせフォーム」のボタン。

    行動喚起／電話＋Web予約の2ボタン帯型
  11. 11

    フッター

    黒地に会社名・住所・電話・FAX、サイトマップ。

    フッター／店舗情報＋ナビ型
立石自動車の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
立石自動車のファーストビュー（PC）PC
立石自動車のファーストビュー（スマホ）SP
04NEW STOCK CAR LIST事例・実績／写真グリッド型
立石自動車のNEW STOCK CAR LIST（PC）PC
立石自動車のNEW STOCK CAR LIST（スマホ）SP
05CONCEPTコンセプト／写真＋メッセージ型
立石自動車のCONCEPT（PC）PC
立石自動車のCONCEPT（スマホ）SP
06RELIABLE SUPPORT強み・選ばれる理由／番号つき3〜4項目型
立石自動車のRELIABLE SUPPORT（PC）PC
立石自動車のRELIABLE SUPPORT（スマホ）SP
07CAR for PHOTOGRAPHYコンセプト／写真＋メッセージ型
立石自動車のCAR for PHOTOGRAPHY（PC）PC
立石自動車のCAR for PHOTOGRAPHY（スマホ）SP
10CONTACT行動喚起／電話＋Web予約の2ボタン帯型
立石自動車のCONTACT（PC）PC
立石自動車のCONTACT（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.24 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01在庫車の写真・年式・走行距離・価格をトップページに並べる
  2. 02得意な車種やカスタムをファーストビュー直下のバナーで打ち出す
  3. 03黒を基調にし、問い合わせと価格だけを赤くして目を引く
  4. 04撮影車の貸し出しなど、販売以外の依頼の入口も用意する

FAQよくある質問

立石自動車のサイトで使われているフォントは？

和文は Noto Sans JP、英字の見出しは Arial Black です。英字を Google Fonts で近づけるなら Archivo Black が使えます。

中古車販売店のサイトに在庫車を載せるのは手間では？

このサイトは、トップページに最新の在庫車4台を価格つきで出し、MOREから一覧へ進めるようにしています。今ある車と値段が分かると、来店や問い合わせの前に検討してもらえます。

どんな業種の参考になりますか？

中古車販売・自動車整備のほか、バイク店やキャンピングカーの販売店など、在庫の商品を写真と価格で見せたい業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は立石自動車および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの自動車・乗り物の参考サイト

webcan design --sitemap www.tateishi-ae.jp

立石自動車のサイトマップ

  • 72ページ
  • トップページ/
  • 在庫車・中古車一覧/store/
    • 記事ページ/store/<各ページ>/50件
  • コンセプト/concept/
  • 事業内容/business/
  • 会社情報/outline/
  • 採用情報/recruit/
    • 自動車整備士-copy/recruit/自動車整備士-copy/
    • 自動車整備士/recruit/自動車整備士/
  • お問い合わせ/contact/
    • エントリー/contact/entry/
  • お知らせ/news/
  • プライバシーポリシー/policy/
  • ジムニー・シエラ/jimny/
    • 記事ページ/jimny/<各ページ>/9件

外部リンクInstagram

2026.10.27 に公開中の sitemap.xmlと、トップページのヘッダー・メニュー・フッターのリンクから整理したものです。記事や事例などの個別ページは1件ずつではなく、件数つきの1項目にまとめています。サイトの更新で現在の構成とは異なる場合があります。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社の自動車関連の会社のサイトを。

「立石自動車のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら