てにとるTENITORU ─ 触れる試作品づくり
試作品事例
試作品事例｜自転車販売・修理店

紙のお買上げカード数百枚を、
HTMLファイル1つの「触れる試作品」に。

創業から数十年、紙のカードでお客様を管理してきた街の自転車店。 「システム化しましょう」という言葉の前に、てにとるがお渡ししたのは ダブルクリックするだけで動く、たった1つのHTMLファイルでした。 検索も、登録も、ご案内の記録も、見本データで実際に動きます。

業種自転車販売・修理店
お渡しした形HTML 1ファイルの動作する試作品
画面数5画面＋入口
データ保存ブラウザ内（IndexedDB）
必要な環境ブラウザのみ・ネット接続不要
てにとるで相談する（無料）
minami-cycle-prototype.html
試作品の入口画面。5つの画面カードと見本データの説明が並ぶ
お渡しした試作品の「入口」。ファイルをダブルクリックするとこの画面が開き、5つの画面を自由に行き来できます。
※ 掲載している店名・人名・住所・番号類は、公開にあたりすべて架空のサンプルに差し替えています。
01お店が抱えていた悩み ── 台帳は「紙のカード、氏名順」

このお店では、自転車を1台お買上げいただくたびに「お買上げカード」を1枚起こし、 氏名のあいうえお順で保管してきました。長年の運用で枚数は数百枚規模。 カード自体はよくできた様式ですが、氏名順でしか引けないことが、店頭の3つの場面で壁になっていました。

場面 1｜修理の受付

自転車だけ持って来店。
お名前が出てこない。

紙のカードは氏名順。車体番号や防犯登録番号からは探せないため、お預かりした自転車から持ち主のカードへたどり着く手立てがありませんでした。

場面 2｜毎月のご案内

TSマーク更新のご案内が
年間およそ100件。

有効期間1年のTSマーク（点検整備済みの保険付きシール）。更新時期のお客様を毎月台帳をめくって拾い出し、はがきを用意する──拾い漏れも起きる手作業でした。

場面 3｜日々の接客

お客様の事情が、
店主の頭の中にだけある。

ご家族構成、お子様の進学時期、買替のご相談──接客の質を支える情報が記録に残らず、店主おひとりの記憶に集まっていました。

ご要望はシンプルでした。「いつものカードのまま、探せるようにしたい」。 新しい業務フローを覚えるのではなく、紙のカードでやってきたことが、そのまま速くなること。 それがこの案件のいちばん大切な条件でした。
02提案のかたち ── 見積書より先に、「触れる試作品」を

画面のイメージ図だけでは、「本当に自分の店で使えるのか」は判断できません。 そこで、てにとるは提案書と一緒に実際に動く試作品をお渡ししました。 特別な環境は一切不要です。発注前に、店主ご自身がレジ横のパソコンで触って確かめられます。

1

HTMLファイル1つだけ

インストールもインターネット接続も不要。メールで届いたファイルをダブルクリックすれば、その場でブラウザが開きます。

2

見本データ入りで、本当に動く

4世帯・6名・5台の架空データを同梱。検索はもちろん、お買上げの登録・修理の受付・ご案内済みの記録まで実際に保存されます。

3

保存はブラウザの中だけ

操作した内容はブラウザ内のデータベース（IndexedDB）にだけ保存。外部に何も送信されないので、安心して好きなだけ触れます。

4

「見本データに戻す」ボタン付き

いろいろ操作したあとはワンボタンで初期状態へ。壊れる心配なく、ご家族やスタッフにも回して試してもらえます。

03試作品の5つの画面 ── サンプルデータでの実際の表示

以下のキャプチャは、お渡しした試作品そのものを公開用に匿名化し、サンプルデータを操作して撮影したものです。

画面 1

お客様をさがす ── 入力欄はひとつだけ

お名前・ふりがな・電話番号・住所・車体番号・防犯登録番号・一連番号・キーNoの8つの手がかりを、 ひとつの窓が横断して探します。「どの欄に入れるか」を店頭で迷わせないための設計です。

  • 電話は下4桁だけで引ける
  • ひらがな・カタカナどちらでも一致
  • 3文字入れた時点で候補表示
  • 結果は世帯単位で表示
統合検索画面。電話の下4桁4821で2世帯がヒットしている
着信表示を見ながら「4821」と下4桁を打つだけで2件がヒット。一致した箇所は太字になり、何で一致したかも表示されます。
車体番号BR20Kからの逆引き検索
紙のカードでは不可能だった、車体番号「BR20K」からの逆引き。自転車だけ持ち込まれても、その場で持ち主が分かります。
画面 2

お客様カード ── 世帯がひと目で分かるカルテ

紙のカードは「1枚＝自転車1台」。この画面は世帯を単位にして、ご家族・保有自転車・購入や修理の履歴を 金額つきの時系列で一画面にまとめます。店主の頭の中にあった「申し送り」も、見える場所に置きました。

  • TSマークのご案内時期を上部に固定
  • LINE登録の有無がひと目で分かる
  • 申し送りメモを保存できる
  • 履歴から再修理かどうかが分かる
世帯カルテ画面。家族3名、自転車2台、修理・購入履歴と申し送りメモ
ご家族3名・自転車2台・これまでのご対応が一画面に。「お子様が2028年春に進学予定」という買替につながる申し送りも残せます。
画面 3

お買上げのご登録 ── 現行カードと同じ並び

頂戴した現行のお買上げカードを、項目の順序も区切りも変えずにそのまま画面化。 「いつものカードを画面で書くだけ」なので、覚える操作がありません。合計は自動計算されます。

  • 紙の記入順をそのまま再現
  • 合計は自動計算（計算違いゼロ）
  • 2台目以降はお客様情報の入力不要
  • 登録すると検索対象に即反映
お買上げ登録画面。入力例と自動計算された合計55,660円
本体価格・登録料・追加パーツを入れると合計55,660円がその場で算出。画面下には現行の紙カードとの対応表も添え、「どこが良くなるのか」を一緒に示しました。
画面 4

修理のお預かり受付 ── 過去の修理が同じ画面に

車体番号で引くと、その自転車の過去の修理が同じ画面に並びます。 「前にワイヤーを替えたのはいつでしたか」とお客様に伺う必要がありません。 症状と作業内容は選択式で、お急ぎのときは「あとで入力」で受付だけ済ませられます。

  • 車体番号・キーNoからも受付
  • 症状・作業はボタンで選ぶだけ
  • 「お預かり中→ご返却済み」を記録
  • 保証の有無もその場で判断
修理受付画面。過去の修理履歴と選択式の受付フォーム
上段にその自転車の過去の修理、下段に今回のお預かり内容。キーボード入力を極力なくし、お客様を待たせない受付にしています。
画面 5

TSマーク更新のご案内 ── 毎月の手作業を、ひと操作に

その月に更新期限を迎えるお客様を自動で拾い出し、LINE登録済みの方はLINEへ、 まだの方は宛名出力してはがきへ、と自動で振り分けます。 送ると「ご案内済み」が記録され、翌月の対象から自動で外れるので、拾い漏れも二重送りもなくなります。

  • 対象月でひと操作の絞り込み
  • LINE／はがきを自動振り分け
  • ご案内済みを記録して対象から除外
  • お客様のスマホでの見え方も確認可
TSマーク更新ご案内画面。9月の対象4件とLINE・はがきの振り分け
9月に期限を迎える4件を自動で一覧化。右側にはお客様のスマートフォンに届くLINEの見え方をプレビュー。文面はお店で書き換えられます。
LINE送信後の画面。2件に済の記録が付き、未案内が2件に減った状態
「LINEで送る」を押した直後。LINEの2件に「済 8/21」が記録され、残りははがきの2件だけに。送った・送っていないを覚えておく必要がありません。
04試作品づくりで大切にしたこと

紙の様式を、崩さない

現行のお買上げカードの記入順には、実際の接客の流れが反映されています。項目を足さず、引かず、順序も変えずに画面化しました。紙の運用も、やめる必要はない前提です。

覚える操作を、増やさない

検索窓はひとつ。症状や支払方法は選択式。どの画面にも専門用語を使わず、「ご登録する」「おあずかりする」という普段の言葉で画面を書きました。

スクリーンショットではなく、動くものを

導入の判断材料は「触った実感」に勝るものがありません。検索のヒットの速さ、合計の自動計算、ご案内済みの記録──すべて発注前に手元で確かめていただきました。

設計の理由を、画面に書き添える

各画面の下に「この画面の設計意図」を明記。なぜ入力欄がひとつなのか、なぜ世帯単位なのか──判断の根拠ごとお渡しすることで、提案への納得感につながりました。

📄
ご提案書課題の整理と
構成・お見積り
📎
別紙集画面一覧・機能一覧
などの詳細資料
🖥️
動作する試作品HTML 1ファイル
（このページで紹介）
📘
操作マニュアル画面キャプチャ入り
PDF 19ページ

この試作品、実際に触れます。

紹介した画面と同じものを、サンプルデータ入りの公開版としてご用意しました。 検索・登録・ご案内の記録まで、すべてお使いのブラウザの中だけで動きます。

試作品を触ってみる → てにとるで相談する（無料）
掲載内容について
本ページの画面キャプチャは、実際の案件でお渡しした試作品を公開用に再構成したものです。 店舗名（みなみサイクル）・お名前・ふりがな・ご住所・お電話番号・郵便番号・車体番号・防犯登録番号・金額・履歴・日付は、 すべて架空のサンプルに差し替えており、実在のお店・お客様の情報は一切含まれていません。 画面構成と設計の考え方のみ、実際の提案内容に基づいています。