WEBCAN.
Free Check無料診断URLを入れるだけ・30秒でSEOとAI検索対応をチェックFree Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 自動車・乗り物
  4. タイヤとホイールの専門店 オートック

webcan analyze autok.co.jp

AUTOMOTIVE · 京都府 · PICKED 2026.10.31

タイヤとホイールの専門店 オートック自動車・乗り物のホームページデザイン参考 — イエロー・グリーン・キャラクター

タイヤとホイールの専門店 オートックのトップページ（PC）
PC（1440px）
タイヤとホイールの専門店 オートックのトップページ（スマホ）
スマホ（375px）
出典：autok.co.jp ↗確認日 2026.10.31
タイヤとホイールの専門店 オートック自動車・乗り物 · 京都府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「売りたい・買いたい・預けたい」を、そのままナビの言葉にする。

京都府宇治市に本社を置き、京都・滋賀に3店舗を持つタイヤとホイールの専門店のサイト。ヘッダーのナビを「売りたい・買いたい・預けたい・中古品・店舗情報・お知らせ」と目的の言葉で並べ、ファーストビューは店頭やスタッフの写真のスライダーに作業着のスタッフのイラストを重ねている。トップはお知らせ・Policy・オートックの強み・預かりサービス・買いたい／売りたい・中古品・業者さまへ・店舗情報の順で、黄色と深い緑の2色でそろえている。

  1. 01ヘッダーのナビを「売りたい・買いたい・預けたい」とお客さんの目的の言葉で並べている
  2. 02ファーストビューの写真の下に、黄色い作業着のスタッフ3人のイラストを重ね、左上にラジオCMを再生できる円形のボタンを置いている
  3. 03「オートックの強み」を5枚のカードで並べ、その下に「脱着作業のご予約は出来ません」「他店購入商品、通販購入商品の作業はお断りしております」など、できないことを黄色い枠で明記している

3 VIEWPOINTS3つの視点で見る

デザインの視点

ナビを「売りたい・買いたい・預けたい」と来店目的の言葉で並べ、黄色と深い緑の2色に絞って統一している点を真似るとよいです。「創業34年」などの数字の強みと、できないことを黄色い枠で先に伝える作りも使えます。

集客の視点

ナビを「売りたい・買いたい・預けたい」とお客さんの目的の言葉で並べ、「創業34年」「査定時間約1分」など強みを数字で言い切っている。京都宇治店・京都伏見店・滋賀栗東店は住所と電話番号を店ごとに出しており、複数店舗の連絡先の出し方も真似しやすい。

Webディレクターの視点

ナビを「売りたい・買いたい・預けたい」と、お客さんの目的の言葉で並べています。強みは「創業34年」「査定約1分」などの数字で書き、予約不可・他店購入品の作業不可といった「できないこと」も、トップの黄色い枠で先に伝えています。

CONVERSION集客の工夫

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

目的別の入口を最初に出す

売る・買う・預ける・中古品と、来店の目的ごとにナビとトップのブロックを分けている。タイヤの買い替えか、買取か、保管かで見るページが違う人を迷わせない。

数字で強みを言い切る

「創業34年」「査定時間約1分」「脱着工賃全車種税込￥1,000-」など、強みを数字で書いている。比べられやすい商品を扱う店では、数字が選ぶ理由になる。

店舗ごとの連絡先を並べる

店舗情報で京都宇治店・京都伏見店・滋賀栗東店の住所と電話番号を店ごとに出している。複数店舗の店では、近い店に直接連絡できるようにしておくと問い合わせが分散しない。

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

COLOR配色

#FFFFFF背景
#FFE100ロゴ・フッター・強調の帯 · イエロー
#FFF7BAカード・セクション背景 · ペールイエロー
#387055見出し・ボタン · ディープグリーン
#31363B本文テキスト
#E5654C注意書きの強調 · レッド

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

TYPOGRAPHYフォント

用途
和文見出し・本文・ナビ
使用フォント
M PLUS 1 Code
無料で近いもの
M PLUS 1 Code
用途
英字見出し（News・Service・Shop など）
使用フォント
Staatliches
無料で近いもの
Staatliches
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h230px / 7001.2024px / 700
h320px / 7001.2020px / 700
ボタン18px / 5001.5015px / 500

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

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

  1. 01

    ヘッダー

    ロゴと「売りたい・買いたい・預けたい・中古品・店舗情報・お知らせ」。右に黄色のMENU。

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

    ファーストビュー

    店頭・スタッフの写真のスライダーに、スタッフのイラストとラジオCMの再生ボタン。右下に「月間キャンペーンはこちら」。

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

    正社員募集のバナー

    給与・勤務地・電話番号を入れた黄色のバナー。

    イベント・キャンペーン／見学会・イベント告知型
  4. 04
  5. 05

    Policy（オートックが全力サポート）

    コンセプト／写真＋メッセージ型
  6. 06
  7. 07

    作業の注意書き

    予約・他店購入品・スノーチェーンについて、できないことを明記。

    インフォメーション／診療時間・休業日バー型
  8. 08

    タイヤ・ホイールお預かりサービス

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

    中古品について

    タイヤ・ホイールの写真のカード。

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

    店舗情報

    3店舗をカルーセルで切り替え。住所・営業時間・電話番号。

    アクセス／地図＋時間表型
  14. 14
タイヤとホイールの専門店 オートックの構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

02ファーストビューファーストビュー／全面写真＋コピー型
タイヤとホイールの専門店 オートックのファーストビュー（PC）PC
タイヤとホイールの専門店 オートックのファーストビュー（スマホ）SP
06オートックの強み強み・選ばれる理由／番号つき3〜4項目型
タイヤとホイールの専門店 オートックのオートックの強み（PC）PC
タイヤとホイールの専門店 オートックのオートックの強み（スマホ）SP
07作業の注意書きインフォメーション／診療時間・休業日バー型
タイヤとホイールの専門店 オートックの作業の注意書き（PC）PC
タイヤとホイールの専門店 オートックの作業の注意書き（スマホ）SP
09買いたい・売りたいメニュー・サービス／アイコン／写真グリッド型
タイヤとホイールの専門店 オートックの買いたい・売りたい（PC）PC
タイヤとホイールの専門店 オートックの買いたい・売りたい（スマホ）SP
13店舗情報アクセス／地図＋時間表型
タイヤとホイールの専門店 オートックの店舗情報（PC）PC
タイヤとホイールの専門店 オートックの店舗情報（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01ナビを「売りたい・買いたい・預けたい」のように、お客さんの目的の言葉で作る
  2. 02強みは「創業34年」「査定約1分」「工賃税込￥1,000」など数字で書く
  3. 03できないこと・お断りしていることを、トップで先に伝える
  4. 042色（黄色と深い緑）とスタッフのイラストで、店の看板とサイトの印象をそろえる

FAQよくある質問

オートックのサイトで使われているフォントは？

和文は M PLUS 1 Code、英字見出しは Staatliches です。どちらも Google Fonts で無料で使えます。

「できないこと」をトップに書くと、お客さんが減りませんか？

このサイトは、予約不可・他店購入品の作業不可などを黄色い枠で先に伝えています。来店してから断るより、電話や来店の前に知ってもらう方が、お互いの手間が減ります。

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

タイヤ・カー用品店のほか、買取店・リサイクルショップ・トランクルームなど、「売る・買う・預ける」のように目的が分かれるお店に応用できます。

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

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

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

タイヤとホイールの専門店 オートックのサイトマップ

  • 13ページ
  • トップページ/
  • 売りたい/uritai/
  • 買いたい/kaitai/
  • 預けたい/azukari/
  • 中古品/used/
  • 業者様へ/supplier/
  • 店舗情報/shopinfo/
  • お知らせ/news/
    • 月間キャンペーンはこちら/news/news-811/
  • 会社概要/company/
  • 採用情報/recruit/
  • 個人情報保護方針/privacy/
  • 採用情報/recruit.html

外部リンクInstagram・YouTube・LINE

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

FROM REFERENCE TO YOUR SITE

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

「タイヤとホイールの専門店 オートックのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら