トップページの構成
町工場の担当者が電話で話すことの順に並べました。受けやすい仕事と苦手な仕事を並べて見せ、図面を受け取ったときに確かめる5か所を確認票の形で置き、費用の目安を続けています。苦手な仕事を書くのは、合わない問い合わせを減らし、合う相手に「ここなら話が早い」と思ってもらうためです。
町工場を題材にした理由
Web制作会社が受ける法人サイトの中で、製造業の中小企業は多い依頼先の一つです。取引先に向けた会社案内と、人を採るための採用ページを一緒に頼まれることがよくあります。また、機械・部品・工具の写真なら人物を写さずに用意でき、素材の権利の確認もしやすいと考えました。
見本1（ピラティス）・見本2（リフォーム）は個人のお客様に向けたサイトでした。今回は「会社から会社へ」の問い合わせと、求職者という2種類の読み手がいる構成を見せるためのものです。
架空の設定にした項目
- 会社名「汐凪精機」と所在地「千草ヶ丘市」は架空です。2026-10-12 にWeb検索で、同じ名前の会社・市がないことを確かめました（似た名前の別会社はありました）。
- 創業年・社員数・設備の台数・公差・費用の目安などの数字は「見本用の架空の設定です」と書いたうえで、具体的な値を入れています。費用は、公開されている料金例（1-OFF.jp の価格例http://1-off.jp/price.html、淀川金属のアルミ試作の参考価格https://alumi-milling.com/osaka-aluminum-prototype-processing-quote/、エージェンシーアシストのリバースエンジニアリング料金https://www.agency-assist.co.jp/service/measurement/reverse-engineering/）から大きく外れない値にしましたが、一部は見本の価格です（10個時の単価・シャフト）。納期・設備台数・社員数・給与などは参考元のない設定です。お取引先と社員の声は作らず、「納品後に実際の声を載せる枠（見本では作り話を載せません）」として空けています。
- お取引先の声・代表あいさつ・社員の話は、文章を作らずに「何を入れるか」の説明だけを置いています。
- 採用の募集要項も架空です。ページの上に「この募集は架空です」と書いています。
- お問い合わせのフォームは、どこにも送信しません。
素材の出所とライセンス
写真はすべて、商用利用が認められた無料の実写素材です。元の写真は7枚で、6枚がぱくたそ（日本で撮影された素材）、1枚が Pexels です。画像生成は使っていません。制作者が各素材サイトの写真ページを自分のブラウザで開き、公式のダウンロードボタンで保存しました（2026年10月）。
人が写る写真は3枚（k1・n4・s2）で、いずれもぱくたそのモデル（OZPA）の写真です。「この会社の職人ではありません」と添え、社員紹介や「先輩の話」には使っていません。
| 画像 | 使用箇所 | 撮影者 | ページ | 加工 | 写っているもの |
|---|---|---|---|---|---|
| h1 | トップの最初の画面・OG画像 | すしぱく | https://www.pakutaso.com/20140644169post-4253.html | 上下を切って16:9 | 汎用旋盤の往復台の正面（ハンドル・レバー・チャック・刃物台）。人物なし |
| k1 | トップ「工場の中」 | すしぱく（モデル：OZPA） | https://www.pakutaso.com/20131132317post-3489.html | 3:2で切り出し | 旋盤の刃物台に手を添えて工具の位置を調整する手元と横顔 |
| n2 | トップ「工場の中」・事業内容 | すしぱく | https://www.pakutaso.com/20110544143post-138.html | 縦長の中ほどを3:2で切り出し | 刃物台の接写、奥にぼやけたチャック。人物なし |
| n4 | トップ「工場の中」・会社概要「工場の様子」 | すしぱく（モデル：OZPA） | https://www.pakutaso.com/20131112317post-3477.html | 3:2で切り出し | フライス盤のハンドルを操作する作業服の男性 |
| w1 | トップ「費用の目安」・事業内容 | Connor Lucock | https://www.pexels.com/photo/28752153/ | 縮小のみ（3:2） | 削り出した真鍮色のブロック部品の接写。人物なし |
| n3 | 採用「どんな仕事か」 | すしぱく | https://www.pakutaso.com/20260700197post-57994.html | 3:2で切り出し | ボルトで締めた刃物台とバイト。人物なし |
| s2 | トップの採用案内 | すしぱく（モデル：OZPA） | https://www.pakutaso.com/20131154317post-3482.html | 4:3で切り出し | 研磨機で金属を削る作業服の人と火花 |
書体は Zen Kaku Gothic New（SIL Open Font License 1.1）を、使う文字だけに絞って同梱しています。
計測結果
2026-10-15（JST）9時台に、制作者の手元の環境で測りました。Lighthouse 12系・モバイル設定（既定の回線・CPUの絞り込み）で各ページ3回、その中央値です。
| ページ | 性能 | LCP | CLS | アクセシビリティ | 転送量 |
|---|---|---|---|---|---|
| トップ | 99 | 2.0秒 | 0 | 100 | 278KB |
| 事業内容 | 98 | 2.0秒 | 0 | 100 | 157KB |
| 会社概要 | 100 | 1.7秒 | 0 | 100 | 162KB |
| 採用 | 100 | 1.6秒 | 0 | 100 | 158KB |
| お問い合わせ | 100 | 1.5秒 | 0 | 100 | 139KB |
| 制作メモ | 100 | 1.5秒 | 0 | 100 | 145KB |
全ページで LCP は Google の目安の2.5秒以内、CLS は0でした。ベストプラクティスは全ページ100、SEO が 63〜66 なのは noindex を付けているためです。axe（WCAG 2.1 AA と best-practice）の違反は0件、html-validate のエラーは0件、12px未満の文字は0件。幅360・768・1440px で横にはみ出す要素はありませんでした。最初の画面より下の写真はすべて遅延読み込みです。