WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. 下原自動車株式会社

webcan analyze shimohara-auto.co.jp

AUTOMOTIVE · 和歌山県 · PICKED 2026.10.22

下原自動車株式会社自動車・乗り物のホームページデザイン参考 — 自動車整備・鈑金塗装・水色

下原自動車株式会社のトップページ（PC）
PC（1440px）
下原自動車株式会社のトップページ（スマホ）
スマホ（375px）
出典：shimohara-auto.co.jp ↗確認日 2026.10.21
下原自動車株式会社自動車・乗り物 · 和歌山県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「凹んでも、凹まない。」のコピーと、丸く切り抜いた整備士の写真で、鈑金塗装の会社を明るく親しみやすく見せる。

和歌山県新宮市の自動車の鈑金・塗装・整備の会社のサイト。ファーストビューは白地の左に「凹んでも、凹まない。」と英字の「Smile For Your Car / Make You Smile」を置き、右に大きく丸く切り抜いた整備士と車の写真を切り替えて見せている。白と淡い水色の背景に紺の文字、青い丸の矢印ボタンでまとめ、会社の想い、アイコンで並べた5つの事業、新着情報、施工実績、会社案内、採用情報、ブログ、お問い合わせと続く。

  1. 01写真を大きな円や角の丸い形で切り抜き、整備工場のサイトをやわらかい印象にしている
  2. 02白と淡い水色の背景、紺の文字、青い丸の矢印ボタンの組み合わせで全体をそろえている
  3. 03「Drive with a Smile!」の大きな英字を、水色のグラデーションで画面の端まで流している

CONVERSION集客の工夫

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

事業をアイコンのカードで並べる

鈑金塗装・車検と点検・新車と中古車の販売・ロードサービス・ガラスコーティングの5つを、線画のアイコンと名前だけの白いカードで並べている。修理だけでなく車のことを広く相談できる会社だと一目で伝わる。

施工実績に修理の事例を載せる

「Works」として、車種と修理内容を見出しにした事例を、写真と「鈑金」「塗装」のタグつきで並べている。依頼を考えている人が、自分の車の傷や凹みと近い事例を探せる。

営業日と電話番号を最後にまとめる

ページの終わりの「Contact us」で、車の写真の上に定休日・営業時間・電話番号を大きく出し、メールでの問い合わせのボタンを添えている。電話をかける前に、今が営業時間内かをその場で確かめられる。

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

COLOR配色

#FFFFFF背景・カード
#F2FAFEセクション背景 · 淡い水色
#344A63見出し・本文テキスト · 紺
#008ACDロゴ・矢印ボタン・タグ · ブルー
#8C96A9補足テキスト（日付など）

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

TYPOGRAPHYフォント

用途
英字（見出し・ナビ）
使用フォント
Jost
無料で近いもの
Jost
用途
和文
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h277px / 7001.3050px / 700
h316px / 6001.2016px / 600
本文（p）16px / 4002.5016px / 400
ボタン16px / 7001.5016px / 700

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

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

  1. 01

    ヘッダー

    左にロゴ、右にナビと「menu」のボタン。

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

    ファーストビュー

    左に「凹んでも、凹まない。」と英字のコピー、右に大きく丸く切り抜いた写真。左端に縦書きの「Follow us」とインスタグラムのアイコン。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    私たちについて

    縦書きの「車を笑顔に。あなたを笑顔に。」と、丸い写真、大きな英字の「Drive with a Smile!」。

    コンセプト／写真＋メッセージ型
  4. 04

    Service（事業案内）

    淡い水色の背景に、線画のアイコンと事業名だけの白いカード。

    メニュー・サービス／アイコン／写真グリッド型
  5. 05

    News（新着情報）

    日付とカテゴリのタグつき。

    お知らせ／お知らせ一覧型
  6. 06

    Works（施工実績）

    角の丸い写真に、車種と修理内容の見出し、日付、鈑金・塗装のタグ。

    事例・実績／写真グリッド型
  7. 07

    Company（会社案内）

    ごあいさつ・会社概要・アクセスへのボタン。

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

    Recruit（採用情報）

    「これからの未来の車を想像し、共に働くメンバーを求めています。」のメッセージと、スタッフの写真。

    人・代表／代表・院長あいさつ型
  9. 09

    Blog（ブログ）

    車のメンテナンスや地域の活動の記事を写真つきで並べる。

    記事・メディア／記事カードグリッド型
  10. 10

    Contact us（お問い合わせ）

    車の写真の上に定休日・営業時間・電話番号と、メールでの問い合わせのボタン。

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

    フッター

    紺のグラデーションの背景に、ロゴ・住所・電話番号。

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

PARTSパーツ別に見る

02ファーストビューファーストビュー／左コピー・右写真の分割型
下原自動車株式会社のファーストビュー（PC）PC
下原自動車株式会社のファーストビュー（スマホ）SP
04Service（事業案内）メニュー・サービス／アイコン／写真グリッド型
下原自動車株式会社のService（事業案内）（スマホ）SP
06Works（施工実績）事例・実績／写真グリッド型
下原自動車株式会社のWorks（施工実績）（スマホ）SP
08Recruit（採用情報）人・代表／代表・院長あいさつ型
下原自動車株式会社のRecruit（採用情報）（スマホ）SP
10Contact us（お問い合わせ）行動喚起／電話＋Web予約の2ボタン帯型
下原自動車株式会社のContact us（お問い合わせ）（スマホ）SP

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

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よくある質問

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

英字は Jost、和文は Zen Kaku Gothic New です。どちらも Google Fonts で無料で使えます。

自動車整備・鈑金塗装の会社のサイトには、何を載せるとよいですか？

このサイトのように、対応できる事業の一覧、車種と修理内容がわかる施工事例、営業時間と電話番号をそろえると、依頼を考えている人が自分の用件に合うかを判断しやすくなります。

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

自動車の整備・鈑金塗装の工場や中古車販売店のほか、バイク店、ガラス・コーティングの専門店など、技術を親しみやすく見せたい地域の会社に応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら