Tire Repair / Local Shop

不破輪業

店主の言葉と仕事ぶりで伝える、街のパンク修理専門店サイト。

おためしプランの作例として、 街のパンク修理専門店「不破輪業」のサイトを制作しました。 店主の人柄が感じられる言葉や写真を軸にしながら、 修理できる車種、料金、アクセス、相談方法までを 迷わず確認できる1ページ構成に整えています。

おためしプラン Local Shop Character / Story
不破輪業 トップ画面
店舗の外観と力強いコピーを組み合わせ、 最初の画面から店の雰囲気が伝わるHero。
担当
情報設計 / デザイン / 実装
目的
店主の人柄と修理内容が伝わる店舗サイト設計
制作範囲
1ページ構成 / HTML / CSS / 軽いJS
参考価格
おためしプラン(5万円)想定

Structure

人柄 → 修理 → 料金 → 相談

街の修理店に必要な情報を、 迷わず確認できる1ページ構成。

Character

店主の顔が見える

写真と短い言葉を通して、 仕事ぶりや人柄まで伝える設計。

Mood

無骨さをそのまま魅力に

黒と黄色を基調に、 昔ながらの修理店らしい力強さを表現。

Overview

小さな店だからこそ、 “誰が直すのか”まで伝える

不破輪業は、 おためしプランの作例として設計した 街のパンク修理専門店サイトです。 修理内容や料金だけを並べるのではなく、 店主の表情、仕事中の姿、言葉を積極的に見せることで、 初めて利用する方にも 「この人なら相談できそう」と感じてもらえる構成を目指しました。

Challenge

小さな修理店を、 情報だけのサイトにしないこと

街の修理店に必要な情報だけを考えれば、 修理内容、料金、営業時間、電話番号があれば サイトとしては成立します。 ただ、それだけでは 他の修理店との違いや、 長年その場所で仕事を続けてきた店の空気までは伝わりません。 そこで今回は、 必要な情報をきちんと整理しながら、 店主の不破修治という人物そのものを サイトの大きな魅力として扱いました。

  • 三輪車から大型車まで、 修理できる範囲がひと目で分かること
  • パンク修理の料金が 一目で分かること
  • 店主の顔や仕事ぶりが見え、 初めてでも相談しやすいこと

Design / Direction

黒と黄色で、 無骨だけど親しみのある修理店へ

全体はタイヤや作業場を連想させる黒を土台にし、 注意色でもある黄色をアクセントとして使用しました。 写真はきれいに整えすぎず、 工具やタイヤが置かれた店内の生活感、 作業中の店主の表情などを積極的に見せています。 コピーには店主自身が話しているような 短く力強い言葉を使い、 その下の説明文では店舗として丁寧に情報を補うことで、 無骨さと安心感の両立を図りました。

  • 黒をベースに、不破輪業の黄色をアクセントとして使用
  • 各セクションの大見出しに、 店主視点の短い言葉を配置
  • 写真を整えすぎず、 実際に仕事をしている店の空気を重視
  • ヘッダーからCONTACTまで、 「まず相談する」導線を途切れさせない構成

Screens

主な画面構成

不破輪業のトップ画面
店舗外観と「パンクした それならすぐに 不破輪業」の コピーで、店の役割を最初の画面から明確に。
不破輪業の店主紹介セクション
作業中の店主を大きく見せ、 顔と仕事ぶりが伝わる店主紹介。
不破輪業の料金案内セクション
パンク修理一律1,000円を大きく表示し、 迷わず料金を確認できる構成。
不破輪業の店主エピソード紹介セクション
昔の新聞記事と会話を組み合わせ、 店主の意外なエピソードまで紹介。

Result

“この人に頼んでみよう”が 自然に生まれるサイトへ

修理できる車種や料金を分かりやすく伝えながら、 店主の表情や言葉、昔のエピソードまで見せることで、 小さな修理店ならではの人との距離の近さを感じられる サイトになりました。 おためしプランの規模でも、 情報をただ並べるのではなく、 店そのものの個性を見つけてデザインへ落とし込むことで、 印象に残る店舗サイトを作れることが分かる作例です。

この規模感で店舗サイトを作りたい方へ。
お店の人柄と必要な情報を、 1ページに分かりやすくまとめます。