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

> FVは、ゆらゆら揺れる線画と手書きロゴだけ。クリエイティブスタジオmud Inc.のコーポレートサイトは、等高線のように揺らぐ線画と手書きのロゴだけをFVに置き、社名の「泥」が持つ柔らかさを余白に立ち上げている。

- URL: https://mud.co.jp/
- 解説ページ: https://katapick.com/sites/mud
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: クリエイティブスタジオ
- テイスト: ミニマル、余白、手書き文字、3D/WebGL、ライト、等幅フォント
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

## 編集部のひとこと（Luna）
リンクは全部、右端に小さな黒丸を置いた下線テキストで統一。ボタンで騒がない。地味？いや、この小さい丸が手書きロゴの隣でちょうどいい。……いいね！！

## デザインの見どころ
- FVは細い黒枠の中に、揺らぐ線画と手書きロゴだけ。説明を削ったぶん、線の揺らぎに目が留まる
- 全体はグレーと白で淡く通し、フッターだけ土色のブラウンへ。最後の一面で、社名の意味に着地させる
- 実績のタグやメタ情報は等幅フォント。手書きのやわらかさの隣に、記録としての硬さを置いて締める

## 配色
- #f2f2f2 Clay Gray（ページ背景）
- #ffffff White（サービス・実績のパネル背景）
- #000000 Black（テキスト / 線画 / 枠線）
- #734129 Mud Brown（フッター背景）
- #e6e6e6 Light Gray（タグ・区切り）
- #999999 Mid Gray（補足テキスト）

## フォント
- 見出し・本文（ダッシュ記号の字形調整用に付けた名前と思われ、本体の書体は抽出データから特定できない）: JP Em Dash Fix（代替: Noto Sans JP）
- 実績のタグ・メタ情報: Azeret Mono（代替: Azeret Mono）

## よくある質問
### mud Inc.のサイトで使われているフォントは？
本文や見出しには「JP Em Dash Fix」という名前のフォントが指定されていますが、これはダッシュ記号の調整用と思われ、本体の書体は特定できません。タグなどには Azeret Mono が使われています。無料で近づけるなら Noto Sans JP と Azeret Mono の組み合わせが使えます。

### mud Inc.のような揺らぐ線画はどう作る？
Three.js で円や直線を多数の頂点で作り、simplex noise などで頂点位置を時間とともにずらすと、年輪や等高線のような線画になります。Canvas 2D でも同じ考え方で描けます。

### mud Inc.のデザインはどんなサイトの参考になる？
空間演出・体験デザイン・プロトタイプ制作などを行うクリエイティブスタジオや、柔らかさと実験性を両立したい小規模企業のコーポレートサイトの参考になります。

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