Text Link
1/5

Gewünschte Leistung

AUFTRAGSDETAILS

2/5

INVESTITIONSRAHMEN

3/5

ZEITRAHMEN

4/5

KONTAKTDATEN

Ihre Angaben verwenden wir ausschließlich zur Bearbeitung Ihrer Anfrage. Einzelheiten in unserer Datenschutzerklärung.

5/5

VIELEN DANK

                    Unser AI-Agent war schnell: Die Antwort auf Ihren Erstkontakt liegt bereits in Ihrem Postfach.

FEHLER

VIELEN DANK!

                    Wir werden uns in Kürze bei Ihnen melden.

005WEBSITE RENEWAL, OSAKA · 2026

Parfun: ein Website-Relaunch, der an einem Faden hängt

Parfun fertigt seit 1956 Damenunterwäsche für andere Marken, entworfen in Japan und genäht in Thailand. Für den Website-Relaunch hat Kuroko Labs die Gestaltung aus dem Firmennamen abgeleitet: Ein roter Faden läuft durch zwölf Seiten, näht das Logo, zieht sich durch die Fertigung und färbt einen ganzen Abschnitt ein. Dahinter entsteht eine Plattform, die Anfragen der drei Gesellschaften der Gruppe getrennt annimmt.
KUNDE
Parfun Co., Ltd.
JAHR
2026
BRANCHE
OEM und ODM für Damenunterwäsche
STANDORT
Minoh, Präfektur Osaka
12
Seiten
statisches HTML, Japanisch
5
Arbeitsschritte
ein Faden von der Planung bis zur Prüfung
3
Gesellschaften
eine Plattform für ihre Anfragen
61
Tests
37 davon gegen PostgreSQL 16
ALLE CASE STUDIES
01 · IDEE

Wie wird aus einem Firmennamen ein Designsystem?

Der Name kommt vom Gründer. Kaoru Fujii eröffnete 1956 in Osaka ein Stoffgeschäft, und sein Vorname 薫 bedeutet Duft, auf Französisch parfum. Im Code heißt die Gestaltung deshalb The Atelier Thread: japanisches Handwerk und französische Lingerie, verbunden über einen einzigen Faden.
Aus dem Logo wurde das System. Es besteht aus zwei Ringen, und auf der Startseite werden sie ohne Ende weitergenäht. Karmin gehört ab da nur noch dem Faden, also Nähten, hervorgehobenen Wörtern und genau einem gefüllten Abschnitt. Der Grund ist Elfenbein wie ungefärbter Stoff. Die dunklen Flächen heißen im Code schlicht night.
Japanisch setzt Shippori Mincho, den Schriftzug und die Jahreszahlen Cormorant Garamond, die kleinen Versalien Hanken Grotesk. Bewegungen laufen über zwei eigene Kurven, ease-out und ease-silk. Die zweite läuft langsam an und braucht lange, bis sie steht.
Shippori MinchoJapanische Überschriften und Fließtext
Cormorant GaramondSchriftzug, Jahreszahlen und Nummern
Hanken GroteskKleine Versalien und Labels
02 · WEBSITE

Sechs Stellen, an denen die Seite etwas erzählt

Jeder Abschnitt der Startseite hat eine Bewegung, die zu seinem Inhalt gehört. Auf Touch-Geräten schaltet die Seite Smooth-Scrolling und die Flugzeuge auf der Karte ab, und wer im System reduzierte Bewegung eingestellt hat, bekommt alles ohne Animation.
01HERO1440 × 900
糸から、かたちへ

Das Logo näht sich selbst

Zwei Ringe, gestrichelt wie Stiche, und die Stiche wandern ohne Pause. Beim ersten Besuch zeichnet ein Preloader das Logo und lässt es in den Seitenkopf fliegen. Danach kommt rechts, in einem Bogen wie ein Schnittmusterteil, eine Nadel ins Bild und zieht den Faden in den ersten Ring.
02PHILOSOPHY1440 × 791
凡事徹底

Die Lupe auf der Naht

Der Leitsatz lautet あたりまえのことを、誰よりも丁寧に: das Selbstverständliche sorgfältiger machen als alle anderen. Daneben zeichnet sich eine Naht, dann fährt eine Lupe ein und zoomt 2,8-fach auf den Stich.
03CRAFT1440 × 900
一貫生産のものづくり

Ein Faden durch fünf Arbeitsschritte

Planung, Konstruktion, Stricken und Färben, Nähen, Qualitätskontrolle. Die Karten stehen abwechselnd links und rechts, und der Faden wird zur Laufzeit aus ihren echten Positionen berechnet.
Beim Runterscrollen näht die Nadel die Karten fest. Wer zurückscrollt, sieht die Stiche wieder aufgehen. Auf dem Handy liegen die Karten untereinander, und der Faden schwingt als eine Kurve durch ihren Rand.
05GLOBAL1440 × 900
生産・販売拠点

Japan und Thailand auf einer Karte

Parfun, Thai Parfun und Parfun Textile als Punkte auf einer Karte. Die Tooltips bleiben auch auf schmalen Bildschirmen im Bild. Zwei Flugzeuge fliegen im Wechsel die Route von Japan nach Thailand, jede Runde neunzehn Sekunden lang.
No.03CRAFT1440 × 681
凡事 一貫 素肌 持続 年代

Jede Unterseite trägt zwei Zeichen

Beim Wechsel auf eine Unterseite reißt eine Naht auf, und zwei Vorhänge gehen auseinander. Dahinter trägt jede Unterseite ein Kanji-Paar als Wasserzeichen und eine eigene Strichzeichnung. Bei der Fertigung setzt sich eine Nähmaschine Strich für Strich zusammen, führt den Faden von der Spule zur Nadel und fängt an zu nähen.
Beim Unternehmen steht ein Gebäude, beim Kontakt ein Umschlag. OEM teilt sich 一貫 mit der Fertigung, weil beide Seiten von Fertigung aus einer Hand handeln.
Parfun, Unterseite Philosophie
凡事Philosophy
Parfun, Unterseite Fertigung
一貫Craft
Parfun, Unterseite Innerwear
素肌Innerwear
Parfun, Unterseite Nachhaltigkeit
持続Sustainability
Parfun, Unterseite Geschichte
年代History
Parfun, Unterseite Unternehmen
誠実Company
Parfun, Unterseite Recruiting
共にRecruit
Parfun, Unterseite Neuigkeiten
日々News
Parfun, Unterseite Journal
読みJournal
Parfun, Unterseite Kontakt
御縁Contact
No.01MENU1440 × 900
No.01 bis No.09

Das Menü fällt wie Stoff

Beim Öffnen fällt zuerst eine Bahn in Karmin, das dunkle Panel folgt. Die Wörter steigen aus verborgenen Schlitzen, die Nummern gleiten nach, und die Trennlinien nähen sich selbst. Das Schließen hat eine eigene Zeitleiste und läuft genauso ruhig aus.

Desktop und Handy an derselben Stelle

Der Schalter zeigt denselben Moment in beiden Größen. Am stärksten unterscheiden sich die Fassungen beim Nähfaden.
Parfun, Desktop-Ansicht: StartseiteParfun, Handy-Ansicht: Startseite

Auf dem Handy rutscht das genähte Logo unter die Überschrift und läuft aus dem Bild.

03 · PLATTFORM

Was hinter dem Kontaktformular passiert

Die Formulare der drei Websites der Gruppe laufen in einer Plattform zusammen, Anfragen wie Bewerbungen. Im Posteingang wird geantwortet, und der Verlauf bleibt am Vorgang. Dazu kommen Aufgaben, Angebote, Firmen, offene Stellen und eine Redaktion für Texte in drei Sprachen. Kunden sehen ihre eigenen Vorgänge in einem Portal. Schreiben können sie dort nichts.
01TRENNUNG

Die Datenbank trennt die Gesellschaften

PostgreSQL erzwingt Row Level Security auf den Tabellen. Ohne gesetzte Gesellschaft sieht die Anwendung gar nichts, und keine Verbindungsrolle darf die Regeln umgehen oder besitzt eine Tabelle. Wer firmenübergreifend schaut, landet im Prüfprotokoll, das sich nur ergänzen lässt.
12
Zusagen, als Test geprüft
02FORMULAR

Das Formular darf genau eine Sache

Die öffentliche Rolle hat auf den Posteingang kein Tabellenrecht. Sie ruft eine einzige Funktion auf, die selbst prüft. Die Antwortfrist kommt aus der Kategorie, der Absender kann sie nicht setzen. Benachrichtigungen enthalten weder den Text der Anfrage noch die IP-Adresse, und was im Spamfilter hängen bleibt, löst keine Mail aus.
1
Funktion für die Öffentlichkeit
03ANHÄNGE

Bewerbungen bleiben unter Verschluss

Anhänge liegen verschlüsselt und werden nach Dateityp geprüft. Ein Virenscanner liest jede Datei, und solange er nicht geantwortet hat, liefert die Plattform sie nicht aus. Das Kundenportal und die öffentliche Seite erreichen Bewerbungen überhaupt nicht.
0
Anhänge ohne Scan ausgeliefert
承認欄 · Karmin nur für Freigaben
In der Verwaltung gibt es genau ein Gestaltungsmittel, das etwas über den Inhalt sagt: das 承認欄, die Reihe kleiner Stempelfelder, mit der japanische Betriebe eine Freigabe festhalten. Leer, gestrichelt, Ring und schraffiert bedeuten an jeder Stelle dasselbe. Karmin gibt es dort nur für eine Freigabe und den aktiven Reiter. Die Gesellschaft steht dauerhaft links in der Leiste, weil eine Verwechslung der Firma in diesem System der teuerste Fehler wäre.
Stand September 2026 ist die Plattform gebaut und geprüft: 61 Tests, 37 davon gegen ein echtes PostgreSQL 16, jeder Lauf aus einer leeren Datenbank. Die Sicherung wird bei jedem Lauf probeweise zurückgespielt, und ein Alarm meldet sich, wenn der Zustandsbericht etwas findet. In Betrieb geht sie mit dem Umzug auf einen eigenen Server. Der Mailversand über Microsoft Graph wartet noch auf die Zugangsdaten.
04 · UMFANG

Was in dreizehn Wochen entstanden ist

13
Wochen, 12.06. bis 10.09.2026
93
Commits
11
Unterseiten mit eigener Zeichnung
2
Excel-Listen in der letzten Korrekturrunde
Am 12. Juni standen die Startseite und die ersten Unterseiten. Einen Tag später wurde die Startseite in ausführliche Einzelseiten aufgeteilt. Im Juli wurde es ruhiger, der September brachte die Korrekturrunden mit Parfun und die Plattform.
Korrekturen kamen als nummerierte Listen in Excel, und jeder Punkt wurde eingearbeitet, bis zur Bildunterschrift unter einer Zeichnung, die auf Wunsch wegfiel. Eine ganze Unterseite zu Materialien flog im selben Zug raus. Mit ihr gingen der Menüeintrag, der Link im Footer und der Eintrag in der Sitemap, seitdem zählt das Menü bis No.09.
Stand September 2026 läuft die neue Seite in einer Vorschau und wartet auf die Umstellung der Domain.
TECH STACK
HTML, CSS, JavaScript
ohne Framework, statisch ausgeliefert
GSAP 3.12
Zeitleisten und SVG-Zeichnungen
ScrollTrigger
Bewegung am Scrollen
Lenis
Smooth-Scrolling, nur mit Maus
Node.js
Plattform und Formularannahme
PostgreSQL 16
Row Level Security
ClamAV
Virenscan für Anhänge
nginx
Auslieferung
AUSBLICK
Thai Parfun hat eine eigene Website in derselben Gestaltung, gebaut mit Next.js auf Englisch, Japanisch und Thai. Wie dieselbe Naht in drei Schriften funktioniert, erzählt die nächste Case Study.
Website-RelaunchWebdesignGSAP ScrollTriggerSVG-AnimationDesignsystemMandantentrennung
NÄCHSTER SCHRITT

Ähnliches Projekt?

KONTAKTIEREN SIE UNS KI-AGENTUR MÜNCHENALLE CASE STUDIES
Häufig gestellte Fragen, Parfun Case Study
Wie lange hat der Website-Relaunch für Parfun gedauert?+
Vom ersten Commit am 12. Juni bis zum Stand vom 10. September 2026 vergingen 13 Wochen mit 93 Commits. Der Juni gehörte dem Aufbau der Seiten, der September den Korrekturrunden und der Plattform.
Mit welcher Technik laufen die Scroll-Animationen?+
Mit GSAP 3.12 und dem Plugin ScrollTrigger, das Smooth-Scrolling kommt von Lenis. Nähte und Zeichnungen sind SVG-Pfade, deren Strich beim Scrollen freigegeben wird. Auf Touch-Geräten bleiben Smooth-Scrolling und aufwendige Dauerschleifen aus, und bei eingestellter reduzierter Bewegung erscheint alles ohne Animation.
Warum ist die Parfun-Website statisches HTML?+
Statische Seiten laden schnell, brauchen auf dem Server nur nginx und bleiben erreichbar, auch wenn die Plattform einmal nicht läuft. Die Redaktion der Plattform kann Seiten erzeugen. Dass sie die bestehenden Seiten genau nachbildet, ist ein eigener Arbeitsschritt, der noch aussteht.
Wie trennt die Plattform die Daten der drei Gesellschaften?+
In der Datenbank selbst. PostgreSQL erzwingt Row Level Security, ohne gesetzte Gesellschaft sieht die Anwendung keine Zeile, und keine Verbindungsrolle darf die Regeln umgehen. Zwölf solcher Zusagen sind als Tests gegen eine echte Datenbank geschrieben.
Was steht in einer Benachrichtigung über eine neue Anfrage?+
Dass eine Anfrage eingegangen ist und wohin sie gehört. Der Text der Anfrage und die IP-Adresse bleiben in der Plattform. Aus welchem Land eine Anfrage kommt, wird offline aus den öffentlichen Listen der Regional Internet Registries bestimmt, ohne externen Dienst.
Eingesetzte Technik
Die Scroll-Animationen laufen mit GSAP ScrollTrigger, die Trennung der Gesellschaften mit Row Level Security in PostgreSQL. Beides ist gut dokumentiert, andere können die Arbeit fortführen.
Die Verweise führen auf die Dokumentation der jeweiligen Bestandteile.
DEJPEN