ワイヤーDL熊本ドック株式会社
工場の動画と「FROM THE SEA TOWARD THE FUTURE」で、造船所の規模を最初に見せる。
webcan analyze www.nihontechness.co.jp
MANUFACTURING · 兵庫県 · PICKED 2026.11.08
日本テクネス株式会社製造業のホームページデザイン参考 — ワイヤーハーネス・青系・端子検索
出典：www.nihontechness.co.jp ↗確認日 2026.11.08
EDITOR'S NOTE編集部の視点
「どの端子なら作れるか」をトップの検索窓で調べられるようにし、技術者が問い合わせる前の確認をサイトの中で済ませる。
兵庫県神戸市西区の、ワイヤーハーネスの製造・加工・販売の会社のサイト。ファーストビューは青い背景に「Connect Tomorrow」の大きな英字と縦書きの「あしたをつなぐ」、ワイヤーハーネスの写真を置いている。設備力・対応力・スピード力・管理力の4つの強み、日本テクネスのモノづくり、製造できる端子を探す端子検索、会社案内と採用情報のバナー、フォームと電話のお問い合わせ、と続く。
- 01背景も見出しも青（#0B50CF）でそろえ、白の余白とワイヤーハーネスの写真で組んでいる
- 024つの強みを番号つきの青い帯に並べ、それぞれ「保有アプリケーターは200台以上」「最短2週間以内の納品」など数字や条件を1行で添えている
- 03ヘッダーの右端に、ナビとは別の白い丸ボタン「圧着可能端子検索」を置いている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / お問い合わせフォーム
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
問い合わせ前の確認をサイトで済ませる
トップの中ほどに「端子検索」の検索窓を置き、「当社で製造可能な端子を検索することができます」と書いている。ヘッダーにも「圧着可能端子検索」のボタンがあり、どのページからでも調べられる。対応できるかを先に確かめたい技術者が、確認したうえで問い合わせに進める。
強みを取引の条件で書く
「1台から試作のご依頼を承っております」「最短2週間以内の納品を実現します」「加工から納品まで社内で一貫生産します」と、発注する側が気にする数量・納期・体制で強みを書いている。
フォームと電話を同じ大きさで並べる
ページ下の青い帯に「フォームでのお問い合わせ」と「お電話でのお問い合わせ（078-975-0521、平日9:00〜17:00）」を左右同じ幅の白い枠で並べている。受付時間も電話番号のすぐ下に書いている。
チェック項目は 2026.11.08 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#0B50CFファーストビュー・強み・ボタン・見出し · ブルー
#101112本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文・ナビ
- 使用フォント
- YakuHanJP＋游ゴシック
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字見出し
- 使用フォント
- Raleway
- 無料で近いもの
- Raleway
- 用途
- 電話番号
- 使用フォント
- Oswald
- 無料で近いもの
- Oswald
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 21px / 700 | 1.80 | 18px / 700 |
| 本文（p） | 14px / 400 | 1.80 | 12px / 400 |
| ボタン | 14px / 400 | 1.80 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.11.08 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
ヘッダー
左にロゴ、右にトップ・私たちの強み・日本テクネスのモノづくり・会社案内・採用情報・お問い合わせ、右端に白い丸ボタン「圧着可能端子検索」。スマホは検索アイコンとメニューボタン。
ヘッダー／ロゴ＋ナビ＋1ボタン型 - 02
- 03
私たちの強み
左に設備の棚の写真と縦書きの「Equipment」、右に01〜04の青い帯（設備力・対応力・スピード力・管理力）。スマホは写真と項目を1枚ずつのカードにして横に並べる。「詳しく見る」ボタン。
強み・選ばれる理由／番号つき3〜4項目型 - 04
- 05
- 06
- 07
- 08
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.08 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01対応できる品目・部品を調べられる検索をトップとヘッダーに置き、問い合わせ前の確認をサイトで済ませてもらう
- 02強みは「台数」「最小ロット」「納期」「社内一貫」のように、発注する側が比べる条件で1行ずつ書く
- 03問い合わせの帯で、フォームと電話を同じ大きさで並べ、電話の受付時間を番号のすぐ下に書く
- 04色を1色の青にしぼり、白い余白と製品の写真で組む
FAQよくある質問
日本テクネスのサイトで使われているフォントは？
和文は YakuHanJP と游ゴシック、英字の見出しは Raleway、電話番号は Oswald です。Raleway と Oswald は Google Fonts で無料で使えます。和文を Web フォントにするなら Noto Sans JP が近い印象です。
部品メーカーのサイトに検索を付ける意味はありますか？
取り扱える品目が多い会社では、「この部品に対応しているか」を確かめてから問い合わせたい人が多くいます。このサイトのように、製造できる端子を検索できるようにしておくと、確認のための問い合わせの手間を減らせます。
どんな業種の参考になりますか？
部品加工・電線や配線の加工・試作会社など、対応できる品目や条件を先に伝えたい BtoB の製造業に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は日本テクネス株式会社および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの製造業の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のメーカーのサイトを。
「日本テクネス株式会社のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。