本文へスキップ

架空の板金加工メーカー「有限会社 高岡製作所」のホームページ制作デモです。社名・人名・住所・設備の型番・単価・加工事例のいずれも架空のものです。 概算の金額は実際のお見積りとは関係ありません。

このデモでできること

架空の板金加工メーカーを題材にした、見積依頼と商談を取るためのホームページの制作デモです。見た目だけを並べたものではなく、積算も、加工可否の判定も、フォームの検証も実際に動きます。

why this subject

この題材を選んだ理由

小規模な製造業のサイトは、ほとんどが会社案内で終わっています。 「確かな技術で、お客様のニーズにお応えします」と書いてあり、 設備の写真が並び、最後に問い合わせフォームがある。 発注側が知りたい「うちの図面で作れるか」「いくらか」「いつか」には、 1つも答えていません。

このデモは、その3つに先に答えるとどうなるかを見せるために作っています。 加工の可否をその場で返し、ロット別の単価表を出し、納期を営業日で出す。 受けられない条件は、理由と代わりの案をセットで返す。 問い合わせの前に判断材料を渡しきる、という作りです。

ほかの6件(美容室学習塾整骨院工務店行政書士ハウスクリーニング)はすべて消費者向けで、1人が1回頼む前提です。 このデモだけが会社から会社への取引で、そこが金額の出し方・書体・配色・ 情報の密度のすべてに出ています。

できること

01

金額を1つ返さない。ロット別の単価表を返す

10 / 50 / 100 / 500 個の単価と合計と納期を、同時に出します。段取り費が数量で割られるので、10個と500個では単価が半分近くまで変わります。

BtoBでは「1つあたりいくら」だけでは発注の判断ができません。「まず10個、通れば月100個」という話をするので、両方の単価が同時に見えていないと社内で検討できません。消費者向けの5件とは、出すものそのものが違います。

単価表を見る →
02

「受けられません」をその場で返す

機械に入らない寸法、在庫の無い板厚、材質にかけられない表面処理。理由と、代わりの案をセットで出します。

BtoBでは、受けてから断るのがいちばん損をします。相手は他社を当たり直す時間を失い、こちらは見積の手間を失います。先に返せることが、そのまま信用になります。

条件を外して試す →
03

数値をそれらしく作っていない

素材費は面積×板厚×密度×材質単価、加工費はレーザーの切断長と曲げの本数、段取り費はロットで割る。実際の積算の考え方に沿って組んであります。内訳も画面に出します。

この業種の相手は、数字だけそれらしく並べたものを一発で見抜きます。単価の根拠が説明できないと、その時点で発注先の候補から外れます。積算のロジックを分けて書いてあるので、御社の実際の単価に差し替えられます。

内訳を見る →
04

触るたびに結果が変わる。ボタンを押させない

板厚を1つ上げる、曲げを2本増やす。そのたびに単価表が組み変わります。「計算する」のボタンはありません。

BtoBの技術者は、値を振って比べます。押すたびに待たされると、比較そのものをやめてしまいます。

値を振ってみる →
05

概算の結果から、同じ材質・工法の事例を出す

14件の事例から、材質・板厚・工法の一致で3件を選びます。

この機能のために事例を14件用意しています。数が少ないと、誰がどう絞っても同じ事例が出て、機能が空回りします。BtoBでは事例数そのものが信用に直結するという理由もあります。

加工事例を見る →
06

事例を、画像と一覧表で切り替えられる

材質・板厚・工法で絞り込んだ結果を、写真のカードでも、数値の表でも見られます。

BtoBの技術者は、写真より数値の一覧で比べたいことがあります。8件のデモでこの切り替えを持つのはここだけです。工務店(/hp/koumuten)の事例は写真が判断材料なので、表は要りません。

切り替えを試す →
07

設備の能力を、数値で全部出す

最大加工寸法、出力、加工できる板厚、測定の精度。5台すべてに数値を載せています。

「最新設備を導入」では何も伝わりません。数値で書くと、その外は受けられないことも同時に伝わります。持っていない設備(旋盤・鋳造・プレス金型)も書いているので、問い合わせてから断る手間が減ります。

設備一覧を見る →
08

材質の向き不向きを、両方書く

4種すべてに「向いている用途」と「向かない条件」を書いています。表面処理6種との組み合わせも、かけられない材質を明記しています。

「あらゆる材質に対応」と書くと、選び間違いをこちらのせいにされます。SUS430は屋外に向かない、アルミは曲げで割れる、鉄は錆びる。先に書いてあれば、その材質を選んだ理由が共有できます。

対応材質を見る →
09

図面をドラッグして添付できる。ただし1バイトも受け取らない

ファイル名と枚数だけを画面に出します。デモではファイルの中身をサーバーへ送っていません。

図面は顧客の資産で、秘密保持の対象になります。本番では保存先・保持期間・アクセス権限・削除の手順を決めてから作るべきもので、その設計を伴わないデモでファイルを受け取るべきではありません。デモだからこそ受け取らない、という判断です。

フォームを試す →
10

概算と事例から、依頼の内容が引き継がれる

概算見積の「この条件で見積を依頼」を押すと、フォームの仕様欄が埋まった状態で開きます。事例からも同じように引き継がれます。

打ち直しをなくすほど、途中で止まる人が減ります。BtoBでは仕様を書き写す作業が特に面倒なので、ここを省けるかどうかで問い合わせの数が変わります。

引き継ぎを試す →
11

8件のデモで唯一のダーク基調

地が暗く、主色が黄。数字と型番は等幅で組んでいます。1画面あたりの情報量も、8件で最も多くしています。

製造業のサイトにダークは実在するので不自然ではなく、金属の写真の質感も出ます。等幅にしているのは、型番・板厚・寸法・単価が縦に並ぶ画面で、桁が揃わないと読めないためです。BtoBの技術者はスクロールを嫌うので、余白も8件で最も狭くしています。

トップを見る →
12

LINEを1か所も置いていない

整骨院・工務店・清掃のデモはLINEを主要な導線にしていますが、このデモには1つもありません。

BtoBの取引でLINEは不自然です。全業種にLINEを入れないことが、「業種ごとに導線を設計している」の証明になります。スマホ下部の固定ボタンも、副が電話ではなく「資料を見る」です。BtoBの担当者はその場で電話をせず、社内で検討する材料を持ち帰るためです。

資料のページを見る →

このデモで止めていること

「実装できない」のではなく、デモとして意図的に止めているものです。本番ではどう動くかも書いています。

図面の受け取りと保存
ファイル名と枚数だけを画面に出しています。中身は1バイトも送っていません。本番では、保存先・保持期間・アクセス権限・削除の手順を定めたうえで受け取ります。
見積依頼の保存と通知
フォームは受付番号まで発行しますが、保存も送信もしていません。本番では担当者へ通知が飛び、お客様には控えのメールが届きます。
図面からの自動読み取り
本番では DXF から展開寸法と切断長を読み取り、概算の入力欄を自動で埋められます。デモでは手入力です。

中身について

ページ数9ルート/実22ページ(トップ/概算見積/加工事例一覧/加工事例14件/設備一覧/対応材質/自社ブランド/会社概要/見積依頼/よくある質問/このページ)
画像25枚(加工事例14/設備5/自社ブランド3/工場2/1画面目1)。 1画面目の主役はスペック検索窓で、写真は見出しの右に添えるだけです
掲載している内容加工事例 14件/材質 4種/表面処理 6種/設備 5台/自社製品 3点/よくある質問 15件
書体和文は Noto Sans JP。数字・型番・寸法・単価は IBM Plex Mono(等幅)です。 等幅を持つのは8件のデモでここだけで、型番と桁が縦に並ぶ画面では、揃っていないと読めません。
配色8件のデモで唯一のダーク基調です。主色は工業の警戒色である黄で、CTAとラベルにだけ使います。 カードを使わず、罫線グリッドと表で組んでいます。節の余白は 3rem で、8件で最も狭く(=情報密度が最も高く)してあります。 文字と背景の明るさの差は、すべて基準(AA)以上を確認済みです。
図面の扱いファイル名と枚数だけを画面に出し、中身は1バイトもサーバーへ送っていません。 図面は顧客の資産で秘密保持の対象になるため、保存の設計を伴わないデモでは受け取らない、という判断です。
スマホすべてのページがスマホ幅で崩れません。下部に固定しているボタンは主「見積を依頼」/副「資料を見る」。 副が電話でないのは8件でここだけで、BtoBの担当者はその場で電話をせず、社内で検討する材料を持ち帰るためです。
読み上げ・キーボードスペック検索窓はタブだけで材質→板厚→送信まで辿れます。加工可否の判定は、変わったことが読み上げに伝わります。 数値の入力欄には単位が読み上げられる形で付いています。
検索エンジンこのデモは架空の会社なので、検索結果に出ないようにしてあります。実在の会社と誤認されるのを避けるためです。 実際の制作では、加工事例の1件ずつと対応材質のページが検索の入口になります。
架空であること有限会社 高岡製作所は架空の会社です。社名・人名・住所・電話番号・設備の型番・単価・加工事例・沿革・認証のいずれも実在のものではありません。 概算の金額は実際のお見積りとは関係ありません。
資料を見る見積を依頼