WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. 長野安全自動車

webcan analyze naganoanzen.jp

AUTOMOTIVE · 長野県 · PICKED 2026.10.18

長野安全自動車自動車・乗り物のホームページデザイン参考 — 自動車整備・ネイビー・太いゴシック

長野安全自動車のトップページ（PC）
PC（1440px）
長野安全自動車のトップページ（スマホ）
スマホ（375px）
出典：naganoanzen.jp ↗確認日 2026.10.18
長野安全自動車自動車・乗り物 · 長野県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

白い背景に太いゴシックの「安全を、堅実に。」と整備士の写真だけで、飾らずに仕事の姿勢を伝える。

長野市の自動車整備工場のサイト。ファーストビューは白い背景に太いゴシックの「安全を、堅実に。」と使命を書いた短い文章を置き、右に黄色い除雪車の運転席で作業する整備士、左下に乗用車のドアから身を乗り出す整備士の写真を配置している。サービス4つ（整備・車検・点検・修理・販売）、お知らせ、採用情報、お問い合わせと続く、短くまとまった1ページの構成。

  1. 01白と濃い青の2色に絞り、ロゴの青をボタンと問い合わせの帯に使っている
  2. 02サービスを「01 整備」〜「04 販売」の番号つきで、説明・写真と横1列ずつ並べている
  3. 03採用情報を、除雪車の前で腕を組む社員の写真に白いカードを重ねて見せている

CONVERSION集客の工夫

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

サービスごとに得意なことを書く

整備の説明で長野県内の除雪車両の整備を多く担当していることを、車検・点検の説明で不必要な修理を提案しないことを書いている。一般の車と特殊車両の両方を任せられることが、短い文で伝わる。

問い合わせを電話とフォームの2つで

ページ下の青い帯に、お問い合わせフォームへのボタンと、電話番号・受付時間を並べている。ヘッダーの右上にも「お問い合わせ」ボタンを置いている。

採用を一言で呼びかける

採用情報の欄で「安全な車を、一緒に世の中へ送り出しませんか。」と書き、社員の写真を大きく使っている。お客さま向けのページの中で、働く人にも声をかけている。

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

COLOR配色

#FFFFFF背景
#0B318Fロゴ・ボタン・問い合わせの帯 · ネイビーブルー
#333333本文テキスト
#000000見出し

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

TYPOGRAPHYフォント

用途
英字見出し（Service・News など）
使用フォント
presicav（Adobe Fonts）
無料で近いもの
Syncopate
用途
和文（見出し・本文・ナビ）
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h240px / 7001.2030px / 700
h316px / 7001.5013px / 700
本文（p）16px / 5002.0013px / 500
ボタン14px / 7002.00—

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

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

  1. 01

    ヘッダー

    ナビ4項目と、右上に青いお問い合わせボタン。

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

    ファーストビュー

    太いゴシックのコピーと使命の文章。右に除雪車、左下に乗用車で作業する整備士の写真。

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

    Service（長野安全自動車のサービス）

    整備・車検・点検・修理・販売を、説明と写真で1列ずつ。

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

    Recruit（採用情報）

    社員の写真に白いカードで呼びかけ。

    人・代表／代表・院長あいさつ型
  6. 06

    Contact（お問い合わせ）

    青い帯にフォームへのボタンと電話番号・受付時間。

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

    フッター

    住所・電話とナビ。

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

PARTSパーツ別に見る

01ヘッダーヘッダー／ロゴ＋ナビ＋1ボタン型
長野安全自動車のヘッダー（PC）PC
長野安全自動車のヘッダー（スマホ）SP
02ファーストビューファーストビュー／左コピー・右写真の分割型
長野安全自動車のファーストビュー（PC）PC
長野安全自動車のファーストビュー（スマホ）SP
03Service（長野安全自動車のサービス）強み・選ばれる理由／番号つき3〜4項目型
長野安全自動車のService（長野安全自動車のサービス）（PC）PC
長野安全自動車のService（長野安全自動車のサービス）（スマホ）SP
05Recruit（採用情報）人・代表／代表・院長あいさつ型
長野安全自動車のRecruit（採用情報）（PC）PC
06Contact（お問い合わせ）行動喚起／電話＋Web予約の2ボタン帯型
長野安全自動車のContact（お問い合わせ）（PC）PC
長野安全自動車のContact（お問い合わせ）（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01色をロゴの色と白の2色に絞り、問い合わせの帯だけを色で目立たせる
  2. 02サービスは番号つきで1つずつ、得意なことを具体的に書く
  3. 03お客さま向けのトップの中に、採用の呼びかけを1ブロック入れる
  4. 04実際の整備士と車両の写真を使い、仕事の現場をそのまま見せる

FAQよくある質問

長野安全自動車のサイトで使われているフォントは？

英字見出しは Adobe Fonts の presicav、和文は Noto Sans JP です。無料で近づけるなら、横に広い英字に Syncopate、和文に Noto Sans JP が使えます。

整備工場のサイトに、何を載せればよいですか？

何の車を整備できるか、車検・修理・販売のどれに対応しているか、問い合わせの方法の3つです。このサイトは除雪車などの特殊車両に強いことを、サービスの説明の中で具体的に書いています。

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

自動車整備工場・板金塗装・中古車販売のほか、機械の修理や設備メンテナンスの会社にも応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら