WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 製造業
  4. 株式会社大興製作所

webcan analyze www.daico.co.jp

MANUFACTURING · 京都府 · PICKED 2026.10.18

株式会社大興製作所製造業のホームページデザイン参考 — 石英ガラス・青系・吹き出し

株式会社大興製作所のトップページ（PC）
PC（1440px）
株式会社大興製作所のトップページ（スマホ）
スマホ（375px）
出典：www.daico.co.jp ↗確認日 2026.10.18
株式会社大興製作所製造業 · 京都府
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

お客さまが聞きたい質問を吹き出しにしてファーストビューに浮かべ、「相談していい会社」だと最初に伝える。

京都市南区の、石英ガラス・光学・分析製品のメーカーのサイト。ファーストビューは淡い青の背景に「DAICOさん、ちょっといい？から始まる科学」のコピーと、「石英ガラス加工74年」「試作1個から量産まで」のラベル、ガラス製品の写真と「試作だけでもいいですか？」「図面段階から相談可能ですか？」などの吹き出しを置いている。会社の考え方、全ての製品、カスタムの相談、技術紹介、石英ガラスについて、強み、会社情報・採用情報・お問い合わせと続く。

  1. 01淡い青の背景に、透明なガラス製品の写真を浮かべて素材の質感を見せている
  2. 02「試作だけでもいいですか？」など、問い合わせ前の質問を手書き風の吹き出しにしている
  3. 03製品を「材料」「部品」「ユニット・装置」「その他」の4つの一覧に分けている

CONVERSION集客の工夫

－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 2か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / 技術・カスタムのご相談
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内

問い合わせ前の不安を先に答える

ファーストビューの吹き出しに「試作だけでもいいですか？」「継続的に作れますか？」「図面段階から相談可能ですか？」と書き、横のラベルで「試作1個から量産まで」と答えている。小ロットの相談をためらう技術者に、声をかけていいと伝えている。

製品一覧のすぐ下にカスタム相談

4つの製品一覧の下に「カスタム、ご相談ください！」の枠を置き、「技術・カスタムのご相談」のボタンにつないでいる。既製品で見つからなかった人を、そのまま相談へ進ませる。

素材の説明ページを用意する

「石英ガラスについて」を独立した入口にしている。素材の性質を調べている段階の人にも見つけてもらい、そこから製品や相談へ案内できる。

チェック項目は 2026.10.18 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#FFFFFF背景
#F2F3F8セクション背景 · ペールグレー
#004896ボタン・見出し · ブルー
#002E60フッター背景 · ネイビー
#DADCE9区切り・装飾 · ラベンダーグレー
#222222本文テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し
使用フォント
Zen Maru Gothic
無料で近いもの
Zen Maru Gothic
用途
和文本文・ナビ
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h121.1px / 7001.0019.1px / 700
h240.1px / 4001.4024.8px / 400
h319px / 5001.5015.3px / 500
本文（p）14.8px / 4001.7013.4px / 400
ボタン10.5px / 4001.009.5px / 400

実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    上段に会社情報・お知らせ・WEBショップ・お問い合わせ、下段に製品・技術などの丸いナビ。

    ヘッダー／ロゴ＋ナビ＋1ボタン型
  2. 02

    ファーストビュー

    左にコピーとラベル2つ、右にガラス製品の写真と質問の吹き出し。右下にNews。

    ファーストビュー／左コピー・右写真の分割型
  3. 03

    科学から最も信頼される右腕に

    材料・部品・ユニットの図と、会社の考え方。

    コンセプト／写真＋メッセージ型
  4. 04

    写真と言葉の帯

    現場の写真と短い言葉を横に並べる。

    事例・実績／写真グリッド型
  5. 05

    全ての製品

    材料・部品・ユニット・装置・その他。

    メニュー・サービス／アイコン／写真グリッド型
  6. 06

    カスタム、ご相談ください！

    技術・カスタムのご相談ボタン。

    行動喚起／電話＋Web予約の2ボタン帯型
  7. 07

    技術紹介・石英ガラスについて

    強み・選ばれる理由／写真とテキストの交互型
  8. 08

    大興製作所の強み

    社員の写真を並べる。

    強み・選ばれる理由／写真とテキストの交互型
  9. 09

    会社情報・採用情報・お問い合わせ

    イベント・キャンペーン／特集バナー並び型
  10. 10

    フッター

    関連サイトへのバナーと、本社・工場の住所と電話。

    フッター／店舗情報＋ナビ型
株式会社大興製作所の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

01ヘッダーヘッダー／ロゴ＋ナビ＋1ボタン型
株式会社大興製作所のヘッダー（PC）PC
株式会社大興製作所のヘッダー（スマホ）SP
02ファーストビューファーストビュー／左コピー・右写真の分割型
株式会社大興製作所のファーストビュー（PC）PC
株式会社大興製作所のファーストビュー（スマホ）SP
03科学から最も信頼される右腕にコンセプト／写真＋メッセージ型
株式会社大興製作所の科学から最も信頼される右腕に（PC）PC
株式会社大興製作所の科学から最も信頼される右腕に（スマホ）SP
05全ての製品メニュー・サービス／アイコン／写真グリッド型
株式会社大興製作所の全ての製品（PC）PC
株式会社大興製作所の全ての製品（スマホ）SP
08大興製作所の強み強み・選ばれる理由／写真とテキストの交互型
株式会社大興製作所の大興製作所の強み（PC）PC
株式会社大興製作所の大興製作所の強み（スマホ）SP
10フッターフッター／店舗情報＋ナビ型
株式会社大興製作所のフッター（PC）PC
株式会社大興製作所のフッター（スマホ）SP

番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.18 以降に撮影したもので、現在の表示とは異なる場合があります。

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01問い合わせ前によく聞かれる質問を、ファーストビューで答えておく
  2. 02製品一覧の直後に、カスタムや特注の相談の入口を置く
  3. 03素材や技術の説明ページを作り、調べている段階の人の入口にする
  4. 04淡い色の背景に製品の写真を浮かべ、素材の質感を見せる

FAQよくある質問

大興製作所のサイトで使われているフォントは？

見出しは Zen Maru Gothic、本文とナビは Noto Sans JP です。どちらも Google Fonts で無料で使えます。

BtoBのメーカーのファーストビューに、何を書けばよいですか？

何を作っている会社かに加えて、取引の条件（試作1個から・図面がなくても相談できるなど）を書くと、問い合わせのハードルが下がります。このサイトのように、よく聞かれる質問をそのまま見せる方法もあります。

どんな業種の参考になりますか？

部品加工・素材メーカー・試作会社など、小ロットや特注の相談を受けたい製造業に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は株式会社大興製作所および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

MOREほかの製造業の参考サイト

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のメーカーのサイトを。

「株式会社大興製作所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら