WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 製造業
  4. 四国洗機工業株式会社

webcan analyze www.shikokusenki.com

MANUFACTURING · 愛媛県 · PICKED 2026.10.21

四国洗機工業株式会社製造業のホームページデザイン参考 — ネイビー・英字見出し・角丸

四国洗機工業株式会社のトップページ（PC）
PC（1440px）
四国洗機工業株式会社のトップページ（スマホ）
スマホ（375px）
出典：www.shikokusenki.com ↗確認日 2026.10.21
四国洗機工業株式会社製造業 · 愛媛県
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

「Invisible, but Essential.」——見えない設備の仕事を、現場の写真と英字のコピーで見せる。

愛媛県今治市で、プラントや船舶の化学洗浄・フラッシング・耐圧試験と金属表面処理を手がける会社のサイト。ファーストビューは洗浄槽の前で作業する人の写真を角丸の枠に入れ、英字の「Invisible, but Essential.」と「見えない場所を、確かな技術で整える。」を重ねている。お知らせ、About Us、ダークグレーの背景に3つの事業を1枚ずつ見せるOur Business、Company、採用情報、お問い合わせへと続く。

  1. 01ファーストビューの現場写真を角丸の枠に入れ、右下に湯気の上がる写真を小さく重ねている
  2. 02Our Businessで、化学洗浄・フラッシング・耐圧試験を「01／03」のような番号つきで1件ずつ、写真と説明のカードで見せている
  3. 03白とネイビー（#1E283C）を基本に、CONTACTのボタンだけを明るい青（#3296FA）にしている

CONVERSION集客の工夫

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

問い合わせの入口を色で分ける

ヘッダーのナビの右に、明るい青の「CONTACT」ボタンを置いている。ほかの要素をネイビーと白にまとめているので、ボタンが目に入りやすい。

専門用語に英字と説明を添える

事業ごとに「化学洗浄 Chemically Wash」のように日本語と英字を並べ、使う薬品や対象の材質を短い文章で説明している。設備の担当者が、自社の課題に合う事業かを判断しやすい。

電話と営業時間をフッターの前に出す

「Contact Us」で、お問い合わせフォームへのボタンと電話番号・営業時間を並べ、その下に本社と新居浜工場の住所・電話・FAXを載せている。

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

COLOR配色

#FFFFFF背景
#F4F7FB淡い背景
#1E283C本文テキスト・ボタン · ネイビー
#3296FACONTACTボタン・ラベル · ブルー
#999999補足テキスト

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

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Noto Sans JP
無料で近いもの
Noto Sans JP
用途
英字見出し
使用フォント
Manrope
無料で近いもの
Manrope
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h234px / 5001.2030px / 500
h329.8px / 5001.2026.3px / 500
本文（p）29.9px / 4002.0015px / 400

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

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

  1. 01

    ヘッダー

    ロゴ・ナビ・青い「CONTACT」ボタン・メニューのボタン。

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

    ファーストビュー

    角丸の枠の現場写真に英字のコピーと日本語のサブコピー。

    ファーストビュー／全面写真＋コピー型
  3. 03
  4. 04

    About Us

    英字の見出しと会社の紹介文、プラントと港の写真。

    コンセプト／写真＋メッセージ型
  5. 05

    Our Business（事業内容）

    化学洗浄・フラッシング・耐圧試験を、写真と番号つきのカードで1件ずつ送る。

    強み・選ばれる理由／番号つき3〜4項目型
  6. 06

    Company（会社案内）

    会社概要・アクセス・関連会社を写真つきのリンクで。

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

    Contact Us

    お問い合わせのボタンと電話番号・営業時間。

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

    フッター

    本社・新居浜工場の住所・電話・FAXとナビ。

    フッター／店舗情報＋ナビ型
四国洗機工業株式会社の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

PARTSパーツ別に見る

04About Usコンセプト／写真＋メッセージ型
四国洗機工業株式会社のAbout Us（PC）PC
四国洗機工業株式会社のAbout Us（スマホ）SP
05Our Business（事業内容）強み・選ばれる理由／番号つき3〜4項目型
四国洗機工業株式会社のOur Business（事業内容）（PC）PC
四国洗機工業株式会社のOur Business（事業内容）（スマホ）SP
06Company（会社案内）メニュー・サービス／アイコン／写真グリッド型
四国洗機工業株式会社のCompany（会社案内）（PC）PC
四国洗機工業株式会社のCompany（会社案内）（スマホ）SP
07Contact Us行動喚起／電話＋Web予約の2ボタン帯型
四国洗機工業株式会社のContact Us（PC）PC
四国洗機工業株式会社のContact Us（スマホ）SP

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

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

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

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

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

Figmaでの使い方

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

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

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

  1. 01現場の写真に、事業の価値を一言で表す英字のコピーを重ねる
  2. 02事業を番号つきのカードで1件ずつ見せ、専門用語に短い説明を添える
  3. 03問い合わせボタンだけを、ほかと違う明るい色にする
  4. 04拠点ごとの住所・電話・FAXをフッターにまとめる

FAQよくある質問

四国洗機工業のサイトで使われているフォントは？

和文は Noto Sans JP、英字の見出しは Manrope です。どちらも Google Fonts で無料で使えます。

化学洗浄のような専門的な事業は、どう説明すればよいですか？

このサイトでは、事業名に英字を添え、使う薬品や対象の材質を2〜3文で説明して、詳しい内容は「View All」から事業ごとのページに分けています。トップでは「何をする仕事か」が分かる短い説明にとどめると読みやすくなります。

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

設備の洗浄・メンテナンス・検査などのBtoBの工業サービスのほか、写真で現場の雰囲気を伝えたい地方の製造業や工事会社に応用できます。

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

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

FROM REFERENCE TO YOUR SITE

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

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

無料相談はこちら