CorporateJapanPicked 2026.09.26

サンフロロシステム株式会社

コーポレートのWebデザイン参考 — フッ素樹脂ライニング・製造業

サイトを見るsunfluoro.co.jp

www.sunfluoro.co.jp開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

地味な工業技術を、青い光の映像で見せてくる。

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

IrisColor & Brand

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

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

Color

サンフロロシステム株式会社の配色

Typography

使用フォントと無料の代替

和文見出し・本文・ナビ

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

欧文キャッチ・英字ラベル・日付

Aa あア

使用: Work Sans
代替: Work Sans

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型26px · 1.6 · 600
本文The quick brown fox — 参考を型にする15.9px · 2.2 · 400
ボタンKatapick 型20.3px · 1.6 · 300

Structure

ページ構成（上から順）

01
ヘッダー
画面上部に角丸の半透明バーを浮かせた固定ヘッダー。左にセリフ調のロゴ、右に日本語ナビとお問い合わせ・ENボタン。
02
ヒーロー
ぼけた人影と青い光の映像を全画面に敷き、左下に「製品の内側から、産業を動かす。」と細い欧文「Innovation Begins in Clean Lined Tanks.」を置く。
03
私たちについて
濃紺の背景に作業風景の写真2枚をずらして重ね、右に「タンクやコンテナの品質を支えるシートライニング技術」の見出しと本文、View more を配置。
04
Features
白地の中央にシートがめくれる写真を置き、「フッ素樹脂シートライニングとは」の細字見出しを写真にまたがせる。続く淡いブルーの写真背景に説明文を中央揃えで置く。
05
製品情報
左に説明文、右にタンク・容器・攪拌翼などの製品写真を白背景のタイルで並べる。
06
技術情報
濃紺の背景に作業者の写真を大きく置き、右の枠付きパネルで独自技術 m-PTFE GB を説明する。
07
会社案内
左に社屋エントランスの写真、右にご挨拶・経営理念・品質管理・社会貢献活動・沿革・会社概要の矢印付きリンクリスト。
08
採用情報
ティールの背景に社員写真を弧状に並べ、中央に「見えない場所で未来を守る仕事」とメッセージ。下にメッセージ・データで見る・ひとことアンケート・募集要項の4カード。
09
コラム・お知らせ・お問い合わせ・フッター
矢印付きのコラムカルーセル、お知らせカード、ティールの「Contact Us」パネルと工場写真を並べ、濃紺のフッターで締める。

Interaction

アニメーション・インタラクション

ヒーローは背景にループ映像を敷き、テキストだけを重ねる構成。video 要素を autoplay muted loop playsinline で全画面に置けば再現可能
stack に Lenis があり、慣性スクロールで写真と余白の多いページを滑らかに見せていると思われる
採用情報の社員写真は円弧上に傾けて並んでおり、スクロールに合わせて円周上を回転する演出と思われる。親要素を rotate し、各写真の角度を計算して配置すると再現可能
コラムは前後ボタンと進捗バー付きのカルーセルで、Swiper と思われる
固定ヘッダーのロゴは暗い面では白、明るい面ではピンク〜紫のグラデーションに切り替わる。スクロール位置でクラスを付け替えると再現可能

スクロールのコマ撮りLenis · 300–510ms

検出された技術:LenisSwiperWordPressGoogle Fonts

Reproduce

再現するときのポイント

01FVは映像と欧文1行に絞り、会社名や製品写真を出さない
02セクションごとに濃紺 → 白 → 淡いブルー → ティールと背景色を切り替え、章の区切りにする
03欧文は Work Sans の細いウェイトを大きく使い、和文 Noto Sans JP は小さめで字間を空ける
04ヘッダーは画面端から少し離した角丸の半透明バーにし、backdrop-filter で背景をぼかす

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

sunfluoro.katapick.md

1---
2title: "サンフロロシステム株式会社 再現用デザイン仕様書"
3source: https://www.sunfluoro.co.jp/
4katapick: https://katapick.com/sites/sunfluoro
5category: コーポレート
6region: 国内 (JP)
7tags: [映像主体, ブルー基調, 固定ナビ, 余白, カルーセル]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 26
13generator: Katapick
14---
15 
16# サンフロロシステム株式会社 — 再現用デザイン仕様書
17 
18> 地味な工業技術を、青い光の映像で見せてくる。フッ素樹脂ライニング専業メーカー、サンフロロシステムのコーポレートサイトは、濃紺からティールへ移る色の流れで、見えない“タンクの内側”の技術を静かな信頼に変えている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22