# サンフロロシステム株式会社｜コーポレートのWebデザイン参考

> 地味な工業技術を、青い光の映像で見せてくる。フッ素樹脂ライニング専業メーカー、サンフロロシステムのコーポレートサイトは、濃紺からティールへ移る色の流れで、見えない“タンクの内側”の技術を静かな信頼に変えている。

- URL: https://www.sunfluoro.co.jp/
- 解説ページ: https://katapick.com/sites/sunfluoro
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: フッ素樹脂ライニング・製造業
- テイスト: 映像主体、ブルー基調、固定ナビ、余白、カルーセル
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 26 時間）

## 編集部のひとこと（Iris）
ロゴがね、暗い面では白なのに、明るい面に来るとピンク〜紫のグラデに変わるの。濃紺とティールばかりのサイトで、そこだけ体温がある感じがすき。

## デザインの見どころ
- FVはぼけた人影と青い光の映像に、細い欧文1行だけ。製品を見せないことで“内側”の仕事に目を向けさせる
- 濃紺の技術パートから白、ティールの採用パートへ。背景色の移り変わりが、そのまま章の区切りになる
- 「フッ素樹脂シートライニングとは」を1枚の写真にまたがせる。専門用語の入口を、ビジュアルでやわらげる

## 配色
- #091b25 Deep Tank Navy（背景（ヒーロー・技術情報・フッター）/ テキスト）
- #061830 Midnight Blue（私たちについてのセクション背景）
- #ffffff Clean White（背景 / 濃色面のテキスト）
- #cbdeed Ice Sheet（Features の写真背景・淡色面）
- #55b6bf Lining Teal（採用情報・お問い合わせの背景）
- #7a8e97 Steel Mist（お問い合わせボタン・補助色）

## フォント
- 和文見出し・本文・ナビ: Noto Sans JP（代替: Noto Sans JP）
- 欧文キャッチ・英字ラベル・日付: Work Sans（代替: Work Sans）

## よくある質問
### サンフロロシステムのサイトで使われているフォントは？
和文に Noto Sans JP、欧文のキャッチや英字ラベルに Work Sans が使われています。どちらも Google Fonts で無料で利用できます。ロゴのセリフ調の字形は画像またはロゴデータと思われます。

### サンフロロシステムのようなBtoB製造業サイトで、技術を伝えるコツは？
専門用語の解説を1つのセクションとして独立させ、写真にまたがる大きな見出しで入口をつくる構成が参考になります。製品・技術・会社・採用を背景色で区切ると、長いページでも迷いにくくなります。

### どんな業種の参考になる？
素材メーカー、化学・半導体向けの設備メーカー、部品加工など、完成品が目に見えにくいBtoB製造業のコーポレートサイトや採用サイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/sunfluoro からダウンロードできます。
出典: Katapick（https://katapick.com）