繊維・テキスタイル（カッコイイ系・ページ全体が横に動く）のWebデザイン見本

アパレルブランドの生地担当・企画担当（BtoB）。「小ロットで、変わった機能の生地を相談できる機屋」を探している人。工場の熱量と技術をカッコよく見せ、試作の相談につなげる。


業種	製造・BtoB（繊維・テキスタイル）
系統	カッコイイ系（太い大きな文字・黒とオレンジの強いコントラスト・直線・速く切れのいい動き）
テイスト	スタイリッシュ
色	オレンジ・黄（黒と白で締める）
形	ページ全体が横に動く：PCでは縦スクロールでページ全体が横に進む（GSAP の pin＋横移動）。左下に「01 —— 07」の番号と進み具合の線。スマホと JSなしでは普通の縦並び
スライド	なし
メインビジュアル	静止画を動かす（動画風）：糸の写真1枚を、丸窓から全画面に開き、そのあともゆっくり寄りながら流し、光の筋が横切る
アニメーション	あり（GSAP＋ScrollTrigger）
演出の型	A01 丸窓が広がって全画面の景色になる／C03 横に流れる途中で背景が白→灰→黒に変わる＋番号の進み具合／G01 切り抜いた人物が隅からのぞき、区切りごとに吹き出しのひとことが変わる
架空の会社	「緋糸織物（ひいとおりもの）」HIITO TEXTILE — 〇〇県の機屋。アパレル向けの機能性の織物を小ロットで

だれに向けたページか

アパレルブランドの生地担当・企画担当（BtoB）。「小ロットで、変わった機能の生地を相談できる機屋」を探している人。 工場の熱量と技術をカッコよく見せ、試作の相談につなげる。

PCでは7枚のパネルが横に並び、縦スクロールで右へ進む。背景は白→白→灰→灰→濃い灰→黒→黒（C03）。

01 メインビジュアル（A01＋動画風）：黒い画面の中央に丸窓。中に光る縦糸。スクロールで丸窓が全画面に開き（このあいだ横には進まない）、「WEAVE THE HEAT.／糸に、熱を。」が出る。写真はずっとゆっくり寄りながら横に流れ、光の筋がときどき横切る
02 私たち（白）：社名の由来と、小ロット対応
03 技術（白）：織機の写真＋3つの強み
04 生地（灰）：CSS の縞・格子・綾の模様で作った生地見本6枚
05 工場（灰→濃い灰）：工場の写真と設備
06 試作の流れ（黒）：4つの手順
07 お問い合わせ（黒）：大きな「試作を相談する」ボタン

G01：右下の隅から、生地を担いだ職人の切り抜きがのぞき、パネルが変わるたびに吹き出しのひとことが変わる。スマホでも右下からのぞく（区切りごとに切り替え）
左下に「01 —— 07」と進み具合の線（C03）

JSなし・GSAPなし・スマホ・prefers-reduced-motion：パネルは縦に並ぶ。丸窓は最初から全画面。吹き出しのひとことは、各パネルの中に「現場のひとこと」として文字で出る
動きは速く切れよく（0.3〜0.6秒）。ただし横移動はスクロールに合わせるだけで、勝手には動かない
ヘッダーのメニューは、横に動く版ではパネルの位置まで移動する（JS）

新しく作る：光る縦糸（hero）／織機（loom）／生地を担ぐ職人の切り抜き（worker）写真庫から：007 工場の床（factory）／007 金属の面（surface・黒のパネルの背景に暗く敷く）

創業年・設備の台数・ロット数は見本の値（〇〇）。会員が本物に替える。