ワイヤーDLRIDE+A（ライドプラスエー）
車両の一覧に料金の目安まで載せ、ご利用ガイドとFAQで「借りる前の疑問」をトップで片づける。
webcan analyze ragu.co.jp
AUTOMOTIVE · 長野県 · PICKED 2026.11.08
株式会社ラグー（Ragu）自動車・乗り物のホームページデザイン参考 — 赤と茶・縦書き・右側のナビ
出典：ragu.co.jp ↗確認日 2026.11.08
EDITOR'S NOTE編集部の視点
トップを About・Line up・Garage・Access・Contact で区切り、2つの事業を1ページで見渡せるようにする。
長野県上田市で旧車・外車を扱う販売店のサイト。PCのファーストビューは車の写真に赤い英語のコピーと茶色の和文のコピーを重ね、右側に Home から Contact までのナビを縦に並べ、左上に英語の住所と気温を表示している。下に進むと、縦書きの紹介文、在庫車の一覧、レンタルガレージの案内、2か所のアクセス、電話・FAXの問い合わせが続く。
- 01PCでは右側に Home・About・Line up・Garage・Access・Contact のナビを縦に並べ、トップページも同じ順の見出しで区切っている
- 02在庫車の一覧（Line up）で、車名ごとに「お問い合わせ」のボタンをつけている
- 03赤（#C9393B）の英字見出しと茶色（#A87E64）の和文で、2色にそろえている
3 VIEWPOINTS3つの視点で見る
デザインの視点
赤の英語のコピーと茶色の和文のコピーで、見出し・電話番号の枠・NEWSの帯の色を赤と茶の2色にそろえている。右側に縦に並べたナビ（Home から Contact まで）は項目が少なく、中小の販売店が真似しやすい。
集客の視点
ファーストビューの左上に上田市の住所を出し、在庫車の一覧では1台ずつに「お問い合わせ」のボタンをつけている。スマホでは電話のリンクがあり、問い合わせの入口が4か所ある。地名を先に見せる点は、地域の店の参考になる。
Webディレクターの視点
右側に Home・About・Line up・Garage・Access・Contact の6項目を置き、トップページを同じ順の見出しで区切っている。最後に電話とFAXを載せ、車の販売と貸しガレージの2つの事業を1ページで見渡せる構成を真似できる。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
車ごとに問い合わせへつなぐ
Line up の各車に「お問い合わせ」のボタンをつけ、価格は「ASK」と表示している。気になった車からそのまま問い合わせに進める。
2つの拠点の場所を分けて示す
Access でショールームとガレージの2か所の住所を、手描き風の地図と「Google Map」のボタンで示している。定休日（不定休）も添えている。
第2の事業も同じページで案内する
車の販売に加えて、レンタルガレージの区画（A〜H）と空き状況をトップページで見せている。販売以外の相談の入口も、同じページで見つけられる。
チェック項目は 2026.11.08 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#C9393B英字見出し・電話の枠 · レッド
#A87E64和文テキスト・NEWSの帯 · ブラウン
#FF6010在庫の分類ラベル · オレンジ
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し・ナビ・本文
- 使用フォント
- Ropa Sans
- 無料で近いもの
- Ropa Sans
- 用途
- 和文
- 使用フォント
- 游ゴシック（端末のフォント）
- 無料で近いもの
- Noto Sans JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 100 | 0.00 | 14.4px / 100 |
| h3 | 19.2px / 700 | 1.67 | 19.2px / 700 |
| 本文（p） | 16px / 100 | 2.00 | 14.4px / 100 |
| ボタン | 12.8px / 100 | 2.00 | 11.2px / 100 |
実測値（PC 1440px・SP 375px、2026.11.08 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
ヘッダー（右側の縦ナビ）
PCでは右上にロゴ、右側に Home・About・Line up・Garage・Access・Contact を縦に並べる。スマホでは左上のメニューボタン。
ヘッダー／左固定サイドナビ型 - 02
- 03
- 04
- 05
- 06
- 07
- 08
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.08 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ナビの項目とトップページの見出しを同じ順にそろえる
- 02在庫や商品の1件ずつに問い合わせのボタンをつける
- 03拠点が複数あるときは、住所と地図を拠点ごとに分けて示す
- 04英字見出しの色と和文の色を2色に決めて全体に使う
FAQよくある質問
Ragu のサイトで使われているフォントは？
英字の見出し・ナビ・本文に Google Fonts の Ropa Sans を使い、和文は端末の游ゴシックで表示しています。無料で近づけるなら、和文に Noto Sans JP を合わせられます。
在庫の価格を載せないときは、どう見せればよいですか？
Ragu は価格を「ASK」と表示し、車ごとに「お問い合わせ」のボタンをつけています。価格を出さない場合でも、問い合わせの入口を1件ずつに用意しておくと、気になった車から相談に進めます。
どんな業種の参考になりますか？
中古車・バイクの販売店のほか、古道具・古着・中古楽器など、1点ものの在庫を扱う店や、販売と貸し出しなど2つの事業を持つ小さな会社に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社ラグー（Ragu）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの自動車・乗り物の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の自動車関連の会社のサイトを。
「株式会社ラグー（Ragu）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。