糸から、かたちへ
ロゴが自分を縫う
点線の縫い目でできた二つの輪。その縫い目は止まらずに流れ続けます。初めて訪れたときはプリローダーがロゴを描き、そのままヘッダーへ飛ばします。続いて右側、型紙のパーツのようなアーチの中に針が入り、糸を最初の輪へ引き込みます。
005WEBSITE RENEWAL, OSAKA · 2026
パルファン、一本の糸でつながるホームページリニューアル
パルファンは1956年から、ほかのブランドのために女性用インナーウェアをつくってきました。企画は日本、縫製はタイです。今回のホームページリニューアルでは、社名を出発点にデザインを組み立てました。赤い糸が12のページを通り、ロゴを縫い、ものづくりの工程をたどって、ひとつのセクションを丸ごと深紅に染めます。その裏側で、グループ3社への問い合わせを会社ごとに分けて受け付けるプラットフォームも構築しています。
12
ページ
静的HTML、日本語
5
工程
企画から品質管理まで一本の糸
3
グループ会社
問い合わせは一つのプラットフォームへ
61
テスト
うち37件は PostgreSQL 16 で実行
01 · 着想
社名は、どうやってデザインシステムになるのか
社名は創業者に由来します。1956年、大阪で布帛製造販売の藤井商店を興した藤井薫。その名の「薫」は香りを意味し、フランス語では parfum です。コードの中では、このデザインを The Atelier Thread と呼んでいます。日本のものづくりとフランスのランジェリーを、一本の糸で結ぶ名前です。
ロゴがそのまま設計の軸になりました。ロゴは二つの輪でできていて、トップページではその輪が途切れることなく縫われ続けます。そこから先、深紅は糸だけの色です。使うのは縫い目と強調する言葉、そして塗りつぶしたセクションひとつだけ。背景は染める前の生地のような生成り色で、暗い面はコード上で night という名前です。
和文は Shippori Mincho、ロゴタイプと年号は Cormorant Garamond、小さな欧文の見出しは Hanken Grotesk。動きには ease-out と ease-silk という二つの独自カーブを使っています。ease-silk はゆっくり動き出し、時間をかけて止まります。
ivory#F7F4EE
ink#353B49
night#272B34
crimson#C40D4E
deep#8F0A39
Shippori Mincho和文の見出しと本文
Cormorant Garamondロゴタイプ、年号、数字
Hanken Grotesk小さな欧文の見出しとラベル
02 · サイト
サイトが語る、六つの場面
トップページの各セクションには、内容に合った動きがあります。タッチ端末ではスムーズスクロールと地図上の飛行機を止め、端末で「視差効果を減らす」を選んでいる人には、アニメーションなしで表示します。
凡事徹底
縫い目の上のルーペ
経営理念は「あたりまえのことを、誰よりも丁寧に」。その横で縫い目が描かれ、ルーペが入ってきて縫い目を2.8倍に拡大します。
一貫生産のものづくり
五つの工程を通る一本の糸
企画、設計、編立・染色、縫製、品質管理。カードは左右交互に並び、糸はその実際の位置から実行時に計算しています。
下へスクロールすると、針がカードを縫い留めます。戻すと縫い目がほどけます。スマートフォンではカードが縦に並び、糸は一本の曲線になってカードの端を通ります。
生産・販売拠点
日本とタイを一枚の地図に
パルファン、Thai Parfun、Parfun Textile を地図上の点で示します。ツールチップは狭い画面でも枠からはみ出しません。2機の飛行機が交互に、日本からタイへのルートを1周19秒で飛びます。
凡事 一貫 素肌 持続 年代
サブページごとに漢字二文字
サブページへ移るときは、縫い目がほどけて2枚のカーテンが上下に開きます。その奥のサブページには、漢字二文字の透かしと専用の線画があります。ものづくりのページではミシンが線で一本ずつ組み上がり、糸巻きから針へ糸が通って、縫い始めます。
会社情報には建物、お問い合わせには封筒。事業内容は、ものづくりと同じ「一貫」です。どちらも自社グループ内で完結する生産の話だからです。
No.01〜No.09
布のように落ちるメニュー
開くと、まず深紅の布が落ち、暗いパネルが続きます。言葉は隠れたスリットから立ち上がり、番号が滑り込み、区切り線は自分で縫われていきます。閉じるときは別のタイムラインで、同じようにゆっくり収まります。
デスクトップとスマートフォン、同じ場面
切り替えると、同じ場面を二つのサイズで見られます。いちばん違いが大きいのは、糸のセクションです。
スマートフォンでは、縫われるロゴが見出しの下に回り、画面の外へ続きます。
03 · プラットフォーム
お問い合わせフォームの裏側で起きること
グループ3社のサイトから届くフォームは、問い合わせも応募も、ひとつのプラットフォームに集まります。返信は受信箱から行い、やり取りの履歴は案件に残ります。ほかにタスク、見積、取引先、募集職種、3言語の文章を扱う編集機能があります。顧客はポータルで自分の案件を確認できます。書き込みはできません。
01分離
データベースが会社を分ける
PostgreSQL の行レベルセキュリティ（RLS）を各テーブルに強制しています。会社が設定されていなければアプリからは何も見えません。どの接続ロールもルールを迂回できず、テーブルを所有してもいません。会社をまたいで閲覧すると、追記しかできない監査ログに記録が残ります。
12
テストで確かめた約束
02フォーム
フォームにできることは一つだけ
公開用のロールは受信箱のテーブルに一切の権限を持たず、呼び出せるのは自分で検査を行う関数一つだけです。返信期限はカテゴリで決まり、送信者には変えられません。通知メールには問い合わせ本文もIPアドレスも入らず、スパムフィルタで止まったものはメールを送りません。
1
公開されている関数
03添付
応募書類は鍵の中
添付ファイルは暗号化して保存し、ファイル形式を確認します。ウイルススキャナーがすべてのファイルを読み、結果が出るまでプラットフォームは配信しません。顧客ポータルと公開サイトからは、応募情報にまったく届きません。
0
スキャン前に配信された添付
承認欄 · 深紅は承認のみ
管理画面で、内容そのものを表しているデザイン要素は一つだけです。日本の会社で承認を記録する、小さな印の枠が並んだ承認欄です。空欄、破線、丸、斜線はどの画面でも同じ意味を持ち、深紅は承認と選択中のタブにしか使いません。会社名は左のレールに常に表示しています。この仕組みで最も高くつく間違いは、会社の取り違えだからです。
2026年9月の時点で、プラットフォームは構築とテストを終えています。テストは61件、そのうち37件は本物の PostgreSQL 16 に対して、毎回空のデータベースから実行します。バックアップは毎回試しに復元まで行い、状態レポートが異常を見つけると通知が届きます。稼働は専用サーバーへの移行と同時です。Microsoft Graph 経由のメール送信は、認証情報を待っている段階です。
04 · 規模
13週間でできたこと
13
週間（2026年6月12日〜9月10日）
93
コミット
11
専用の線画を持つサブページ
2
最後の修正で届いたExcelリスト
6月12日にはトップページと最初のサブページができていました。翌日、トップページを詳しい個別ページに分けています。7月は落ち着いた月で、9月にパルファンとの修正のやり取りとプラットフォームの構築が重なりました。
修正は番号付きのExcelリストで届き、図の下のキャプションを希望どおり外すところまで、一件ずつ反映しました。素材のサブページは同じ流れで丸ごとなくなり、メニュー項目、フッターのリンク、サイトマップの記載も一緒に消えました。それ以来、メニューはNo.09までです。
2026年9月現在、新しいサイトはプレビュー環境で動いており、ドメインの切り替えを待っています。
技術スタック
HTML・CSS・JavaScript
フレームワークなし、静的配信
GSAP 3.12
タイムラインとSVGの描画
ScrollTrigger
スクロールに連動する動き
Lenis
スムーズスクロール、マウス操作時のみ
Node.js
プラットフォームとフォーム受付
PostgreSQL 16
行レベルセキュリティ
ClamAV
添付ファイルのウイルス検査
nginx
配信
今後の展望
Thai Parfun にも同じデザインのサイトがあり、Next.js で英語、日本語、タイ語に対応しています。同じ縫い目を三つの文字でどう通したかは、次のケーススタディで紹介します。
次のステップ
同様のプロジェクトをお考えですか？
お問い合わせ すべてのケーススタディよくある質問、パルファンのケーススタディ
パルファンのホームページリニューアルには、どれくらいかかりましたか？+
6月12日の最初のコミットから2026年9月10日時点まで、13週間で93件のコミットです。6月はページの構築、9月は修正のやり取りとプラットフォームに時間を使いました。
スクロールのアニメーションには何を使っていますか？+
GSAP 3.12 と ScrollTrigger プラグインで、スムーズスクロールは Lenis です。縫い目や線画は SVG のパスで、スクロールに合わせて線が現れます。タッチ端末ではスムーズスクロールや負荷の高いループを止め、「視差効果を減らす」を選んでいる端末ではアニメーションなしで表示します。
パルファンのサイトは、なぜ静的なHTMLなのですか？+
静的なページは読み込みが速く、サーバーには nginx があれば足ります。プラットフォームが止まっても、サイトは表示されたままです。プラットフォームの編集機能はページを生成できますが、既存のページを正確に再現させる作業はこれからです。
グループ3社のデータはどう分けていますか？+
データベースそのもので分けています。PostgreSQL が行レベルセキュリティを強制し、会社が設定されていなければアプリからは1行も見えず、どの接続ロールもルールを迂回できません。こうした約束のうち12件を、本物のデータベースに対するテストとして書いています。
新しい問い合わせの通知には、何が書かれますか？+
問い合わせが届いたことと、どこに属するかだけです。本文とIPアドレスはプラットフォームの中に残ります。問い合わせ元の国は、地域インターネットレジストリの公開リストからオフラインで判定し、外部サービスは使いません。
使用している技術
スクロールの動きは GSAP ScrollTrigger、会社ごとのデータ分離は PostgreSQL の行レベルセキュリティで実装しています。どちらも資料が充実しているので、他の担当者も引き継げます。
各リンクはそれぞれの技術資料に飛びます。