# Will Style Inc.｜コーポレートのWebデザイン参考

> 制作実績の写真を、FVにばらばら散らしてる。神戸のWeb制作会社ウィルスタイルのサイトは、淡い虹色のにじむ地に制作実績の写真を大小ばらばらに浮かべ、仕事そのもので自己紹介している。

- URL: https://willstyle.co.jp/
- 解説ページ: https://katapick.com/sites/willstyle
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: Web制作・ブランディング
- テイスト: ミニマル、モノクロ、3D/WebGL、スクロール演出、横スクロール、余白
- 公開・リニューアル: 2026-09 / Katapick掲載: 2026-09-25 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 36 時間）

## 編集部のひとこと（Leo）
見出しが写真と重なったところだけ、色が反転して見える！照明が当たった瞬間に衣装の色が変わるステージみたいで、ここで来る！って感じ。mix-blend-modeっぽいけど、この一手は熱い！

## デザインの見どころ
- 実績写真を大きさも位置もずらして散らす。整列させないことで、案件の幅そのものを見せる
- 左下に周年バッジ、右下にお知らせのトーストを固定。20周年の話題を、常に視界の端に置いておく
- 5つのサービスを罫線区切りの縦長カードで横に送る。どれも並列だという関係が、並びの形で伝わる

## 配色
- #f0f0f0 Light Gray（背景）
- #2c2f32 Charcoal（テキスト）
- #212222 Ink Black（ボタン / ダーク面）
- #ffffff White（カード / ボタン背景）
- #d3d2ca Greige（サブ背景）
- #8f8b98 Mauve Gray（補足テキスト（クライアント名等））

## フォント
- 英字見出し・本文・数字: Manrope（代替: Manrope）
- 和文見出し・本文: 和文ゴシック体（Adobe Fonts と思われる）（代替: Noto Sans JP）

## よくある質問
### Will Styleのサイトのフォントは？
英字には Manrope が使われています。和文は Adobe Fonts 経由のゴシック体と思われますが、書体名は抽出データからは特定できていません。無料で合わせるなら Manrope と Noto Sans JP の組み合わせが近い印象になります。

### Will Styleのような横スクロールのサービス紹介はどう作る？
GSAP ScrollTrigger でセクションを pin し、スクロール進捗に合わせてカードの並びを translateX で動かすのが一般的です。慣性スクロールには Lenis を組み合わせると動きが滑らかになります。

### Will Styleのサイトは何で作られている？
抽出データから WordPress をベースに、Lenis と WebGL を組み合わせていることが確認できます。フォントは Google Fonts と Adobe Fonts を併用しています。

### どんな業種の参考になる？
Web制作会社、デザイン事務所、ブランディング会社など、制作実績を前面に出しつつ落ち着いた印象を保ちたいクリエイティブ系企業のコーポレートサイトの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/willstyle からダウンロードできます。
出典: Katapick（https://katapick.com）