Will Style Inc.

1. 01

   ヘッダー

   左にロゴ「will style.」、右にテキストナビと黒い角丸の「お問い合わせ」ボタン、月アイコンのテーマ切替とメニューボタンを並べる。

2. 02

   ヒーロー（制作実績）

   和文キャッチ「価値あるみらいへ 確かな課題解決を。」と英文サブコピーを左に置き、周囲に制作実績の写真を散らす。縦に長い区間で写真が入れ替わる。SPでは実績のスライダーと「02 / 16」の番号表示になる。

3. 03

   ウィルスタイルについて

   3行の大きな和文見出しを左上に、本文を中央、写真2点を左右に配置した非対称のレイアウト。「さらに詳しく」ボタンで下層へ誘導。

4. 04

   提供できること

   Branding Support から Operational Support まで5つのサービスを、罫線で区切った縦長カードで横に並べ、スクロールに合わせて横へ送る。

5. 05

   お客様事例（Case study）

   大きな英字見出し「Case study」の横に記事一覧ボタン。写真カード3点を上下にずらして配置し、見出しと会社名を添える。

6. 06

   Works・Blog

   抽出データ上、Works と Blog の見出しを持つ一覧ブロックが続く（フルページキャプチャの範囲外のため詳細は未確認）。

7. 07

   フッター

   抽出データ上、Social の見出しを含む高さ約1100pxの大きなフッターで締める。

• ヒーロー背景のにじんだグラデーションは WebGL によるものと思われる。Three.js のフルスクリーン平面にノイズ関数のシェーダーを当てると近い表現になる
• Lenis による慣性スクロールで、写真の散らばったヒーロー区間や横スクロール区間を滑らかに移動させている
• サービスカードの横送りは、GSAP ScrollTrigger で親要素を pin し、スクロール量に応じてカード列を translateX させる実装で再現できる
• ヒーローの見出しは写真と重なった部分だけ色が反転して見えるため、mix-blend-mode: difference を使っていると思われる
• 左下の周年バッジは「20th anniversary」の文字列が横に流れるマーキー。CSS の @keyframes で translateX をループさせれば再現できる

検出された技術:LenisWordPressGoogle FontsAdobe FontsWebGL

• 01背景は純白ではなく #f0f0f0 のライトグレーにし、カードやボタンだけ白（#ffffff）で浮かせる
• 02英字は Manrope の細め〜標準ウェイトを大きく使い、和文は字間を詰めすぎないゴシックで合わせる
• 03罫線（1px の薄いグレー）でグリッドを見せ、装飾をほぼ使わずに線と余白で区切る
• 04ヒーローの写真は位置・サイズ・重なり順を意図的にばらし、グラデーション背景とともにスクロールで動かす

1---
2title: "Will Style Inc. 再現用デザイン仕様書"
3source: https://willstyle.co.jp/
4katapick: https://katapick.com/sites/willstyle
5category: コーポレート
6region: 国内 (JP)
7tags: [ミニマル, モノクロ, 3D/WebGL, スクロール演出, 横スクロール, 余白]
8launched: 2026-09
9verified: 2026-09-26
10difficulty: 4/5
11estimated_hours: 36
12generator: Katapick
13---
14 
15# Will Style Inc. — 再現用デザイン仕様書
16 
17> 制作実績の写真を、FVにばらばら散らしてる。神戸のWeb制作会社ウィルスタイルのサイトは、淡い虹色のにじむ地に制作実績の写真を大小ばらばらに浮かべ、仕事そのもので自己紹介している。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せる構成になっています（→「7. AI実装プロンプト」）。
21 
22## 1. 見どころ