ワイヤーDL杉山家具製作所
家具の写真と深緑の1色で、木工の会社らしい落ち着きと実績を見せる。
webcan analyze kumamoto-dock.com
MANUFACTURING · 熊本県 · PICKED 2026.11.03
熊本ドック株式会社製造業のホームページデザイン参考 — ブルー・動画・英字見出し
出典：kumamoto-dock.com ↗確認日 2026.11.03
EDITOR'S NOTE編集部の視点
工場の動画と「FROM THE SEA TOWARD THE FUTURE」で、造船所の規模を最初に見せる。
熊本県八代市の造船会社のサイト。ファーストビューは造船所を映す動画に大きな英字のコピーを重ねている。News Release・Ship Yard・Our Business・Products（建造実績）・Company・Recruitと続き、青と黒の面を切り替えてセクションを分けている。子ども向けに「ようこそ、船の世界へ！」という入口も用意している。
- 01ファーストビューの全面に造船所の動画を流し、細字と太字を混ぜた英字のコピーを重ねている
- 02青（#2A6495）と黒（#212121）の面を切り替えて、長いページのセクションを分けている
- 03建造実績を6種類の船のカードにして、横に流れるカルーセルで見せている
3 VIEWPOINTS3つの視点で見る
デザインの視点
造船所の動画に白い細字と太字を混ぜた英語の大見出しと日本語の一文を重ねるファーストビューが参考になる。全体は青（#2A6495）と黒（#212121）の面を切り替え、Ship Yard・Our Business・Productsなど大きな英字の見出しで区切っている。
集客の視点
ヘッダーに採用情報とお問い合わせを並べ、サイト内に工場見学・体験の案内と職場体験・インターンシップの入口を用意している。見学や体験を入口にして採用につなげる形を真似できる。
Webディレクターの視点
News Release、Ship Yard、Our Business、Products、船の世界へ、Company、Recruitの順で、事業を知ってもらい、採用につなげる流れを一本にしている。工場見学・体験と職場体験の入口を、通常のお問い合わせとは別に用意している点を真似したい。
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / Contactお問い合わせ
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
BtoBでも、見学と体験の入口を作る
フッターのリンクに「工場見学・体験のご案内」と「職場体験・インターンシップ」を用意している。受注だけでなく、地域の学生や採用候補者が会社を知るきっかけになっている。
建造実績を船の種類で探せるようにする
軽合金船・起重機船・タンカー・カーフェリー・貨物船・特殊船の6種類に分けている。発注を考えている人が、自分に関係のある船から実績を確かめられる。
採用の入口をトップページに大きく置く
「すべては、「人」がつくっている。」と題したRecruitの枠に、現場の写真を並べている。Companyの下に置き、会社を知った人を採用情報へ送っている。
チェック項目は 2026.11.03 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#2A6495セクション背景 · ブルー
#255680濃い青の面
#212121セクション背景・文字 · ブラック
#FFFFFF背景・文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 英字見出し・本文
- 使用フォント
- Figtree
- 無料で近いもの
- Figtree
- 用途
- 和文（見出し・ナビ）
- 使用フォント
- Zen Kaku Gothic New
- 無料で近いもの
- Zen Kaku Gothic New
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 15px / 700 | 1.80 | 13px / 700 |
| h3 | 36px / 500 | 1.30 | 16px / 500 |
| 本文（p） | 14px / 500 | 1.80 | 14px / 500 |
実測値（PC 1440px・SP 375px、2026.11.03 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
News Release
お知らせ／お知らせ一覧型 - 04
Ship Yard（熊本ドックについて）
コンセプト／写真＋メッセージ型 - 05
- 06
- 07
- 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.11.03 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01現場の動画や写真で、規模をファーストビューで見せる
- 02長いページは背景の色を切り替えてセクションを分ける
- 03実績は種類ごとのカードにまとめる
- 04見学や職場体験の入口を作り、地域の学生にも開く
FAQよくある質問
熊本ドックのサイトで使われているフォントは？
実測では、英字と本文が Figtree、和文の見出しとナビが Zen Kaku Gothic New です。どちらも Google Fonts で無料で使えます。
動画がないと、同じ見せ方はできませんか？
動画は撮影の費用がかかります。現場の全景を写した写真1枚と大きなコピーでも、同じ構成を作れます。
どんな業種の参考になりますか？
造船のほか、工場・プラント・建設など、現場の規模と技術で信頼を得たいBtoBの製造業に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は熊本ドック株式会社および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの製造業の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のメーカーのサイトを。
「熊本ドック株式会社のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。