WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. マルヨシ自動車

webcan analyze maruyoshi-car.com

AUTOMOTIVE · 栃木県 · PICKED 2026.10.17

マルヨシ自動車自動車・乗り物のホームページデザイン参考 — 自動車整備・青と赤・イラスト

マルヨシ自動車のトップページ（PC）
PC（1440px）
マルヨシ自動車のトップページ（スマホ）
スマホ（375px）
出典：maruyoshi-car.com ↗確認日 2026.10.17
マルヨシ自動車自動車・乗り物 · 栃木県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

青と赤に塗り分けた背景と整備士のイラストで、「まごころの車屋さん」を親しみやすく見せる。

栃木県那須塩原市の自動車販売・整備の会社のサイト。ファーストビューは青と赤に塗り分けた枠の中に、腕を組んだ整備士のイラストと大きな「MARUYOSHI」の英字、「まごころの車屋さん」のコピーを置き、車のイラストと吹き出しを添えている。会社の紹介、公式SNSと「お約束」、新車・中古車販売と輸入車メンテナンス、6つのサービス、地図、ギャラリー、会社概要と続き、最後に電話・メール・LINEの問い合わせをまとめている。

  1. 01青と赤に塗り分けた枠と太い黒の線、イラストの人物で、看板のような親しみやすいファーストビューにしている
  2. 02標識の形の見出しや、信号機の形のSNSボタンなど、道路にちなんだ部品でそろえている
  3. 03ロゴの赤・青を、背景・見出し・ボタンの色にそのまま使っている

CONVERSION集客の工夫

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

電話・メール・LINEの3つの窓口を並べる

ページの最後に、大きな電話番号と受付時間・定休日、赤の「メールでのお問い合わせ」、緑の「LINEでのお問い合わせ」をまとめている。電話が苦手な人もLINEで気軽に相談できる。

「お約束」を書き出す

「マルヨシ自動車のお約束」として、明るく誠実な接客や、丁寧で分かりやすい説明などをチェックマーク付きで並べている。初めて車を預ける人の不安を減らす。

SNSで車の情報を発信する

「プロが教える車のあれこれを公式SNSにて発信中！」として、LINE・Instagram・YouTubeへのボタンを信号機の形で並べている。すぐに依頼しない人とも、つながりを保てる。

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

COLOR配色

#00A0E9メインカラー（ファーストビュー・お問い合わせ） · ブルー
#E60012メインカラー（ファーストビュー・メールボタン） · レッド
#EAEFF1背景 · ライトグレー
#FFFFFFカード背景
#42515B本文テキスト · ダークグレー
#00D11CLINEボタン · グリーン

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Zen Kaku Gothic New
無料で近いもの
Zen Kaku Gothic New
用途
英字（ナビ・ボタン）
使用フォント
Montserrat
無料で近いもの
Montserrat
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h316px / 7001.4016px / 700
本文（p）14px / 5001.8014px / 500
ボタン16px / 4001.0016px / 400

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

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

  1. 01

    ヘッダー

    左に丸いロゴ、英字のナビ、信号機の形のSNSボタン、青い「CONTACT」ボタン。

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

    ファーストビュー

    青と赤に塗り分けた枠に、整備士のイラスト、大きな英字、コピー、車のイラストと吹き出し。

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

    マルヨシ自動車について

    標識の形の見出しと、整備中のイラストに会社の紹介文。

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

    公式SNS・お約束

    女性スタッフのイラスト、SNSのボタン、チェックマーク付きの「お約束」。

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

    サービスラインナップ

    新車・中古車販売・買取と、高級車・輸入車メンテナンスを交互に紹介。

    強み・選ばれる理由／写真とテキストの交互型
  6. 06

    サービス一覧

    車検・整備、板金塗装、ボディコーティングなどを縦長の角丸カードで並べる。

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

    MAP

    会社名・住所と地図、Googleマップへのボタン。

    アクセス／地図＋時間表型
  8. 08

    GALLERY（ギャラリー）

    写真を前後のボタンで切り替える。

    事例・実績／写真グリッド型
  9. 09

    OVERVIEW（会社概要）

    所在地・電話・FAX・事業内容などの表。

    料金／表組み型
  10. 10

    お問い合わせ

    大きな電話番号と受付時間、メールとLINEの問い合わせボタン。

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

    フッター

    ロゴ、SNSのアイコン、「BACK TO TOP」。

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

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電話だけでなく、メールとLINEの窓口もページの最後に並べる

FAQよくある質問

マルヨシ自動車のサイトで使われているフォントは？

和文は Zen Kaku Gothic New、英字のナビやボタンは Montserrat です。どちらも Google Fonts で無料で使えます。

整備工場のサイトにLINEの問い合わせは必要ですか？

電話が苦手な人や、営業時間外に相談したい人の窓口になります。このサイトのように、電話・メール・LINEを並べておくと、相手が使いやすい方法を選べます。

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

自動車の販売・整備・板金塗装のほか、バイク店、ガソリンスタンド、カーコーティング専門店など、地域で車にかかわるお店に応用できます。

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら