WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. RIDE+A（ライドプラスエー）

webcan analyze ride-plus-a.jp

AUTOMOTIVE · 兵庫県 · PICKED 2026.11.11

RIDE+A（ライドプラスエー）自動車・乗り物のホームページデザイン参考 — ダークネイビー・英字見出し・カテゴリ検索

RIDE+A（ライドプラスエー）のトップページ（PC）
PC（1440px）
RIDE+A（ライドプラスエー）のトップページ（スマホ）
スマホ（375px）
出典：ride-plus-a.jp ↗確認日 2026.11.11
RIDE+A（ライドプラスエー）自動車・乗り物 · 兵庫県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

車両の一覧に料金の目安まで載せ、ご利用ガイドとFAQで「借りる前の疑問」をトップで片づける。

兵庫県淡路市のレンタルサービスのサイト。スポーツカー・トライク・バイク・自転車・サウナカーなどを貸し出している。ファーストビューは全面の写真に「AWAJI ISLAND, A LITTLE BITSPECIAL」と「ちょっと特別な淡路島。」。写真を円形に並べたコンセプト、車種・レンタル商品の一覧、無料の付属品、ご利用ガイド、FAQ、店舗情報、アクセス、予約の帯と続く。画面右下には LINE 予約のボタンを固定している。

  1. 01車種の一覧を濃紺（#25272F）の背景にして、写真を3列のマス目に並べている
  2. 02一覧の上に、スポーツカー・トラック／バン・SUV・トライク・バイク・自転車などのカテゴリを線画のアイコンつきで並べている
  3. 03見出しは大きな英字（LINE UP・GUIDE・FAQ・SHOP INFO・ACCESS）に小さな日本語を添えている

3 VIEWPOINTS3つの視点で見る

デザインの視点

車種一覧を濃紺（#25272F）の背景にして写真を3列のマス目に並べ、上にカテゴリを線画のアイコンで並べている。見出しは大きな英字（LINE UP・GUIDE・FAQ・SHOP INFO・ACCESS）に小さな日本語を添えており、商品が多いサイトの一覧と見出しの作り方の参考になる。

集客の視点

車種の一覧に「ガソリン込み価格3時間 ¥13,200〜」のように含まれる内容つきの料金の目安を載せ、ご利用ガイドとFAQで借りる前の疑問にトップで答えている。電話予約は受けず、予約の窓口をLINEにまとめて右下（スマホは画面下）に追従ボタンを置いており、窓口を絞って常に見せる点を真似するとよい。

Webディレクターの視点

料金の目安つきの一覧、開閉式のご利用ガイド（保険・キャンセルポリシーを含む）、FAQ5件をトップに集め、予約の入口を固定のLINEボタンに一本化している。動画や凝った演出がなくても再現できる構成になっている。

CONVERSION集客の工夫

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

予約の入口を LINE にまとめる

画面右下に「お友達登録で簡単！LINEご予約はこちら」のボタンを固定し、スマホでも画面下に出している。店舗情報には、公式LINE・予約相談フォーム・インスタグラムのDMから予約できることと、電話での予約は受けていないことを書いている。

料金の目安を一覧で見せる

車種の一覧（スマホ表示）で、車種ごとに「ガソリン込み価格3時間 ¥13,200〜」のように、何が含まれる何時間の料金かを添えている。詳細ページを開く前に、だいたいの予算が分かる。

借りる前の疑問をトップで答える

ご利用ガイドで「ご利用方法・貸渡の流れ・返却の流れ・保険・補償制度・キャンセルポリシー」を開閉式でまとめ、FAQで免許証の忘れや当日予約などの質問に答えている。

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

COLOR配色

#FFFFFF背景
#25272F車種一覧の背景・本文テキスト · ダークネイビー
#151515予約の帯・フッター
#8C8D91区切り線・補足

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

TYPOGRAPHYフォント

用途
英字見出し・本文
使用フォント
Instrument Sans
無料で近いもの
Instrument Sans
用途
和文
使用フォント
IBM Plex Sans JP / Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h11px / 6001.001px / 600
h214.9px / 4001.1514px / 400
h318px / 4001.6016px / 400
本文（p）14px / 4001.6014px / 400
ボタン16px / 4001.6016px / 400

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

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

  1. 01

    ヘッダー

    RIDE＋Aについて・車種・レンタル商品・アクセス・ご利用ガイド・FAQ とメニューボタン。

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

    ファーストビュー

    全面の写真に英字と「ちょっと特別な淡路島。」。

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

    お知らせ

    ファーストビューの下に1行。

    お知らせ／お知らせ一覧型
  4. 04

    コンセプト

    写真を円形に並べ、中央に紹介文。

    コンセプト／写真＋メッセージ型
  5. 05

    LINE UP（車種・レンタル商品）

    カテゴリのアイコンと写真のマス目。スマホでは車名と3時間の料金の目安も並ぶ。

    事例・実績／写真グリッド型
  6. 06

    ATTACHED PRODUCTS（各種付属商品）

    ヘルメット・グローブ・サングラス・バックパックなどを無料で用意。

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

    GUIDE（ご利用ガイド）

    ご利用方法・貸渡の流れ・返却の流れ・保険・キャンセルポリシーを開閉式で。

    流れ／ステップ型
  8. 08

    FAQ（よくあるご質問）

    よくある質問／アコーディオン型
  9. 09

    SHOP INFO（店舗情報）

    住所・予約方法・営業日・レンタル時間を表で。

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

    ACCESS

    交通手段ごとの行き方と淡路島の地図。

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

    RESERVATION

    黒い帯で予約への案内。

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

    LINE予約の追従ボタン

    画面右下（スマホは画面下）に「LINEご予約はこちら」。

    行動喚起／SP追従ボタンバー型
RIDE+A（ライドプラスエー）の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

04コンセプトコンセプト／写真＋メッセージ型
RIDE+A（ライドプラスエー）のコンセプト（PC）PC
RIDE+A（ライドプラスエー）のコンセプト（スマホ）SP
05LINE UP（車種・レンタル商品）事例・実績／写真グリッド型
RIDE+A（ライドプラスエー）のLINE UP（車種・レンタル商品）（PC）PC
RIDE+A（ライドプラスエー）のLINE UP（車種・レンタル商品）（スマホ）SP
07GUIDE（ご利用ガイド）流れ／ステップ型
RIDE+A（ライドプラスエー）のGUIDE（ご利用ガイド）（PC）PC
RIDE+A（ライドプラスエー）のGUIDE（ご利用ガイド）（スマホ）SP
08FAQ（よくあるご質問）よくある質問／アコーディオン型
RIDE+A（ライドプラスエー）のFAQ（よくあるご質問）（PC）PC
RIDE+A（ライドプラスエー）のFAQ（よくあるご質問）（スマホ）SP
09SHOP INFO（店舗情報）アクセス／地図＋時間表型
RIDE+A（ライドプラスエー）のSHOP INFO（店舗情報）（PC）PC
RIDE+A（ライドプラスエー）のSHOP INFO（店舗情報）（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01予約の窓口を LINE に寄せ、追従ボタンで常に見せる
  2. 02商品の一覧に、何が含まれるかを添えた料金の目安を載せる
  3. 03利用の流れ・保険・キャンセルの決まりを開閉式のガイドにまとめてトップに置く
  4. 04一覧の上にアイコンつきのカテゴリを置き、種類から探せるようにする

FAQよくある質問

RIDE+Aのサイトで使われているフォントは？

英字は Instrument Sans、和文は IBM Plex Sans JP と Noto Sans JP です。すべて Google Fonts で無料で使えます。

電話予約を受けない場合、何を書いておくべきですか？

このサイトのように、LINE・予約フォーム・SNSのDMなど受け付けている窓口と、返信の目安（担当者より24時間以内を目安に連絡）をはっきり書いておくと、問い合わせる側が迷いません。

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

レンタカー・レンタサイクルのほか、キャンプ用品やカメラのレンタル、貸し会議室・貸し別荘など、品目と料金を一覧で見せる貸し出しのサービスに応用できます。

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

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

自動車・乗り物のすべてを見る7件
webcan design --sitemap ride-plus-a.jp

RIDE+A（ライドプラスエー）のサイトマップ

  • 50ページ
  • 4ページ内セクション
  • トップページ/
    • RIDE＋Aについて/#aboutページ内
    • ご利用ガイド/#guideページ内
    • FAQ/#faqページ内
    • アクセス/#accessページ内
  • 車種・レンタル商品/lineup/
    • 記事ページ/lineup/<各ページ>/19件
  • お知らせ/news/
    • 記事ページ/news/<各ページ>/24件
  • ご予約相談/contact/
    • ご予約相談/contact/complete/
    • 送信エラー/contact/error/
  • プライバシーポリシー/pp/

外部リンクLINE・Instagram

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

FROM REFERENCE TO YOUR SITE

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

「RIDE+A（ライドプラスエー）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら