ワイヤーDL熊本ドック株式会社
工場の動画と「FROM THE SEA TOWARD THE FUTURE」で、造船所の規模を最初に見せる。
webcan analyze sugiyama-kagu.com
MANUFACTURING · 岐阜県 · PICKED 2026.10.29
杉山家具製作所製造業のホームページデザイン参考 — OEM・明朝体・全面写真
出典：sugiyama-kagu.com ↗確認日 2026.10.29
EDITOR'S NOTE編集部の視点
家具の写真と深緑の1色で、木工の会社らしい落ち着きと実績を見せる。
岐阜県揖斐郡の、公共施設・教育・福祉・医療施設や住宅向けの木製家具をオーダー（OEM）で製造する会社のサイト。ファーストビューは家具の写真を全面に敷き、中央に白いロゴと明朝体の社名を置いている。ヘッダーは固定で、右端の「お問い合わせ」だけを深緑のボタンにしている。お知らせ、家具づくりの考え方、製品・木材・技術の紹介、納品事例、会社の所在地と電話の順に続く。
- 01全面の家具写真の中央に、白いロゴと明朝体の社名だけを置いたファーストビュー
- 02ブランド色の深緑を、お問い合わせボタンと会社紹介の帯の2か所に絞って使っている
- 03見出しを英字の小文字と日本語の2段にそろえ、各ブロックに一覧へのボタンを付けている
3 VIEWPOINTS3つの視点で見る
デザインの視点
ファーストビューを全面の家具写真にして、中央に白いロゴを置いている。考え方・製品・納品事例の各見出しを英字と日本語の2段で添え、ブランドの深緑（#4E5346）を会社紹介の帯とお問い合わせボタンに使っている。
集客の視点
ヘッダー右端に「お問い合わせ」ボタンを目立つ色で固定し、会社紹介の帯にも電話・FAXと所在地を載せている。家具や職人の作業の写真、納品事例の一覧、東海・関東・関西への納入という対応エリアの記載で、BtoBの取引先に実績を見せる構成を真似できる。
Webディレクターの視点
考え方、製品と技術、納品事例、会社情報の順で、上部にお知らせ欄と常に表示されるお問い合わせボタンがある。納品事例が主役で、同じ型のカードを足していくだけなので更新しやすく、BtoBの製造業にそのまま使える。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
お問い合わせを常に見える場所に置く
固定ヘッダーの右端に、深緑の「お問い合わせ」ボタンを置いている。ナビの中で色が付いているのはこのボタンだけなので、どのブロックを読んでいても見つけやすい。
納品事例を写真で横に並べる
「our works」として、納品先の写真をカルーセルで並べ、「納品事例一覧」へのボタンを付けている。BtoBの取引では、どんな施設に納めたかが依頼の判断材料になる。
所在地と電話をトップに載せる
会社紹介の帯に、住所・Googleマップへのリンク・電話番号とFAX番号を載せている。説明文には、岐阜県を拠点に東海・関東・関西へ納入していることを書いている。取引先が連絡先と対応地域をすぐ確かめられる。
チェック項目は 2026.10.29 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景 · ホワイト
#4E5346ブランド色（お問い合わせボタン・会社紹介の帯・見出し） · ダークグリーン
#72756B補助色 · グレーグリーン
#000000本文テキスト · ブラック
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文・ナビ
- 使用フォント
- 凸版文久明朝（Adobe Fonts）
- 無料で近いもの
- Shippori Mincho
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 16px / 400 | 1.50 | 15px / 400 |
| h3 | 15px / 400 | 1.50 | 14px / 400 |
| 本文（p） | 14px / 400 | 1.50 | 30px / 400 |
| ボタン | 15px / 400 | 5.33 | 14px / 400 |
実測値（PC 1440px・SP 375px、2026.10.29 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.29 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューは写真1枚とロゴだけにして、素材の質感を見せる
- 02ブランド色は問い合わせボタンなど、目立たせたい場所に絞って使う
- 03製造業は、製品・素材・技術を同じ大きさの写真で並べ、納品事例への入口を作る
- 04住所・電話・FAXと対応エリアは、トップページにも載せておく
FAQよくある質問
杉山家具製作所のサイトで使われているフォントは？
見出し・本文・ナビに、Adobe Fonts の凸版文久明朝を使っています。無料で近づけるなら、Google Fonts の Shippori Mincho が使えます。
BtoBの製造業のサイトで、トップページに何を載せればいいですか？
このサイトでは、考え方・製品と技術・納品事例・会社の所在地と電話の順に載せています。取引先は「何を作れるか」「どこに納めたか」「どこにある会社か」を確かめたいので、この3点への入口をトップに置くと探しやすくなります。
どんな業種の参考になりますか？
家具・建具・木工のほか、OEMや受注生産をしている地域のメーカーに応用できます。写真で素材や仕上がりを見せたい製造業に向いています。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は杉山家具製作所および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの製造業の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のメーカーのサイトを。
「杉山家具製作所のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。