Works 一覧に戻る Motorsport

PRIDE★1yamaoka

PRIDE★1yamaoka Webサイト スクリーンショット

課題 ― 欲しいバイクが「ある」のに、お客様に届いていなかった

岡山市東区沼に店を構えるPRIDE★1yamaoka。新車・中古バイク・自転車・電動キックボードからシニアカーまで幅広く取り扱い、Racing Task・STM・R-speed・CSTタイヤの正規取扱店としての専門性も持つ実力派バイクショップです。ところがWebの情報発信に大きなボトルネックがありました。

入荷したバイクを掲載するたびに業者への依頼と待ち時間が発生し、その間にライバル店へ顧客が流れていく。看板・印刷物のQRコードは旧ドメインのまま機能せず、せっかくの集客ツールが死んでいる状態でした。LINE公式アカウント(@460odhog)は持っていながらサイトからの誘導が弱く、「気軽に問い合わせたい」というユーザーの行動を取り逃していました。

実装した機能 ― 「バイクが入荷したその日に、Webに載る」仕組み

最大の課題を解決したのが、WordPressカスタマイザーを活用した在庫車両管理システムです。作業の合間にスマホで写真を撮り、管理画面を開いてメーカー・車名・年式・走行距離・排気量・価格・カラーを入力。リアルタイムプレビューで仕上がりを確認しながら「公開」ボタンを押すだけ。業者への依頼も、待ち時間もゼロです。今まで億劫だった更新が、数タップで完了します。

数値の入力もストレスフリーに設計しています。走行距離・排気量・価格を入力してフォーカスを外すと、自動で「15,800km」「1,284cc」「¥485,000」とフォーマットされます。最大10枚の写真をギャラリー形式で登録でき、売れた瞬間に非公開へ切り替えることで「問い合わせたら売り切れだった」という機会損失も防止できます。

  • 在庫車両管理システム(カスタマイザー方式 ― 最大50台スロット・スマホから直接更新可能)
  • リアルタイムプレビュー確認 ― 変更内容を画面で見ながら編集・一発公開
  • 数値自動フォーマット(年式・走行距離・排気量・価格をタップ後に自動整形)
  • 1台につき最大10枚の写真ギャラリー登録(外観・メーター・エンジン周り)
  • 表示順ドラッグ&ドロップ管理 ― おすすめ車両を上位に即配置
  • 在庫ステータス切替(販売中 / 売切 / 要問合せ / 受注 ― ワンタップで切替)
  • 専用ロール(vehicle_manager)― 必要な管理画面だけに絞り込み、ITに不慣れでも迷わない設計
  • LINE公式アカウント(@460odhog)への複数導線設計(ヒーロー・入荷詳細・フッターから24時間受付へ直結)
  • 作業日記(WORKSHOP DIARY)― 施工事例・メンテナンス記録をブログ感覚で発信
  • 取扱ブランドセクション(Honda / Yamaha / Suzuki / Bridgestone / Dunlop / Michelin 等を掲載)
  • 取扱ブランド15社のロゴが横に流れ続ける演出(継ぎ目のない無限ループ・マウスを乗せると停止・ロゴから各メーカー公式サイトへ遷移)
  • 正規取扱店バッジ表示(Racing Task / STM / R-speed / CSTタイヤ)
  • GSAP ScrollTrigger による多層アニメーション実装(入荷バイク登場・テキストフェード・パララックス)
  • 旧ドメイン301リダイレクト設定(ConoHa WING ― 既存QRコードをそのまま継続活用)
  • SEO構造化データ実装(店舗情報・在庫情報をGoogleに正確に伝達)
  • WordPress・プラグイン長期保守 / バックアップ・セキュリティ管理

LINE公式アカウントへの流入強化 ― 「見ている」を「つながる」に変える

バイクや自転車の購入相談は、電話だと緊張する、メールは面倒という方が多いカテゴリです。「気軽に入れるお店」をコンセプトに掲げるPRIDE★1yamaokaにとって、LINEは最も自然な入口でした。ヒーローセクション・各入荷車両の詳細画面・フッターの複数箇所に「LINE無料相談・見積もり」ボタンを設置し、興味を持ったその瞬間に友だち追加できる動線を整備しました。

LINEでつながると、新着入荷の通知・カスタム相談・メンテナンス予約が24時間対応で完結します。来店なしでも商談が進み、来店時にはすでに信頼関係が生まれている状態をつくります。「サイトを見た」から「LINE友だち」に変わった瞬間、一見のユーザーは長期的な顧客へと転換します。

視覚体験 ― アニメーションと臨場感が「乗りたい」という感情を動かす

バイクは感情で買われます。スペックより「かっこいい」「乗ってみたい」という衝動が購買を決定づけます。GSAP ScrollTriggerを全面活用し、スクロールするごとに車両が滑らかに現れ、テキストが流れ込み、ユーザーを引き込むアニメーション演出を実装しました。静止したカタログではなく、動きがあることでページに留まる時間が伸び、問い合わせへの心理的ハードルが下がります。

画像は1枚ではなく複数枚を大型表示。外観・メーター・エンジン周りまで、実物を前にしているかのような臨場感を届けます。WORKSHOP DIARYでは実際の施工写真とともにメンテナンスの様子を掲載し、「腕のある職人がいる店」という信頼感を視覚的に積み上げています。

取扱ブランドのロゴが、途切れずに流れ続けます

PRIDE★1yamaoka は、バイクだけでなく自転車・タイヤ・ケミカルまで幅広く取り扱っています。ところがこの「扱いの幅」は、ブランド名を文字で並べただけではほとんど伝わりません。そこで15社のロゴが横にゆっくりと流れ続ける一区画を設けました。見慣れたロゴが次々と現れることで、「ここに行けば一通り揃う」ということが、読まなくても伝わります。

作りとしては、同じ並びを4組つなげておき、1組分だけ動かしています。動き終わった瞬間には次の組が同じ位置に来ているため、継ぎ目が見えず、途切れずに回り続けます。1周は45秒とゆっくりにしてあり、視線を奪いすぎません。

そしてこのロゴは、ただの飾りではありません。ロゴを押すと、そのメーカーの公式サイトが開きます。「このメーカーも扱っているのか」と気づいた方が、その場で車種やタイヤを調べにいける状態にしてあります。

  • リンクは別のタブで開きます。調べ終わったらタブを閉じるだけで戻れるので、お店のページから離れてしまうことがありません
  • マウスを乗せると止まります。流れているものは狙って押しにくいため、止めて落ち着いて選べるようにしています
  • 指で操作するスマートフォンではあえて止めていません。触れただけで止まると、かえって不自然に見えるためです
  • ブラウザの「戻る」や、別のタブから戻ってきたときに止まったままにならないよう、画面に戻るたびに動きをかけ直しています
  • ロゴの画像はその場所が表示される直前に読み込みます。15社分をページの最初にまとめて読み込むと、表示が遅くなるためです

公開後の反響

2026年4月後半に公開しました。公開直後の閲覧数は約1,800回、その後も月間平均で約4,800回と安定して見られ続けています。

当初は「PRIDE★1」「ヤマオカ」といった店名での検索がほとんどでしたが、公開後もSEOの改善を続けた結果、現在は「岡山 バイク屋 おすすめ」「バイク屋 近く」「岡山 中古バイク」「バイク オイル交換」など、お店の名前をご存じない方の言葉でも見つけていただけるようになりました。Search Console の記録では、改善の着手時から約1か月で検索結果への表示回数が 863回 → 1,498回、そこからサイトを訪れた回数が 69回 → 130回になっています。あわせてトップページの画像を 21.6MB → 2.27MB に圧縮し、表示を軽くしました。

店名で思い出していただいたときの受け皿になっているのが、看板や印刷物に載っている旧ドメインのQRコードを301リダイレクトで生かしたことと、店舗情報を構造化データで正確に伝えていることです。「QRコードを読んだのにページが出てこない」という取りこぼしが無くなりました。

そして何より変わったのは、更新が止まらなくなったことです。入荷したその日に載せられるので、サイトの情報が常に最新に保たれています。LINEからの無料相談・見積もり依頼も届くようになり、「サイトを見て問い合わせました」というお声をいただいています。

Client Review

「以前は入荷のたびに業者に連絡して更新してもらっていたので、タイムラグが出て機会損失になっていました。今は管理画面から自分でサッと登録できるので、情報の鮮度が全然違います。LINEからの問い合わせが増えて、遠方のお客様からも連絡が来るようになりました。問い合わせが倍以上になったのは正直想定外でした。サイトがここまで売上に直結するとは思っていなかったので、お願いして本当に良かったです。」

PRIDE★1yamaoka  オーナー