CorporateJapanPicked 2026.09.26

mud Inc.

コーポレートのWebデザイン参考 — クリエイティブスタジオ

出典: mud.co.jp

Editor's note — 編集部の視点

FVは、ゆらゆら揺れる線画と手書きロゴだけ。

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

LunaType & Whitespace

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

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

Color

mud Inc.の配色

Typography

使用フォントと無料の代替

見出し・本文（ダッシュ記号の字形調整用に付けた名前と思われ、本体の書体は抽出データから特定できない）

Aa あア

使用: JP Em Dash Fix
代替: Noto Sans JP

実績のタグ・メタ情報

Aa あア

使用: Azeret Mono
代替: Azeret Mono

実測タイプスケール1440px幅 · 2026-09-26 計測

見出しKatapick 型36px · 1.3 · 600
小見出しKatapick 型80px · 1 · 600
本文The quick brown fox — 参考を型にする18px · 2 · 500
注釈The quick brown fox — 参考を型にする15px · 2 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に「mud Inc.」のテキストロゴ、中央に英字大文字のナビ6項目、右に黒丸付きの「CONTACT」。
02
ヒーロー
細い黒枠で囲んだ横長フレームに、揺らぐ線画と右寄せの手書き風ロゴ「mud」、その下に小さなキャッチコピーを置く。
03
SERVICE（導入）
左に雲のように線を重ねたドローイング、右に行間を広く取った会社紹介の大きめのテキストと本文。
04
サービス3領域
白いパネルを横線で3段に区切り、番号（01.〜03.）、大きな英字の領域名、右に和文の説明を並べる。末尾に「サービスを詳しく見る」リンク。
05
WORKS
写真を2列の大きなタイルで並べ、下に案件名と等幅フォントのカテゴリタグ・種別を添える。末尾に「すべての事例を見る」リンク。
06
ABOUT
地層のような線画のアイソメトリック図と、短いコピー・説明文を横に並べる。
07
CONTACT
見出しと短い案内文、紙飛行機の線画と「まずは相談してみる」リンク。
08
フッター
ブラウンの全面に住所、SNSリンク、右下に画面から見切れる巨大な「mud」ロゴ。

Interaction

アニメーション・インタラクション

ヒーローの線画は Three.js（WebGL）で描かれており、撮影ごとに同心円・波線・流線と形が変わっていたため、時間経過やスクロールで変形するアニメーションと思われる。ノイズ関数で頂点をずらした Line を複数重ねると近い表現になる
リンクは右端に小さな黒丸を置いた下線付きテキストで統一。ホバー時の動きは静止画からは判別できない
SPではナビを2本線のハンバーガーに畳み、ヒーローのフレームを縦長にして線画も縦方向の流線に切り替えている

スクロールのコマ撮り150–300ms

検出された技術:Three.jsWordPressGoogle FontsWebGL

Reproduce

再現するときのポイント

01線画は細い黒の1px前後の線だけで描き、塗りを使わない
02背景は #f2f2f2 の淡いグレー、パネルは白にして2トーンで面を分ける
03ロゴ以外の文字は落ち着いたゴシックに統一し、タグやメタ情報だけ等幅フォントにする
04フッターのブラウン1色で、それまでの無彩色とのコントラストをつくる

再現MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全8セクションの仕様 / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 差し替え必須リスト

Katapick の再現MDは何がすごい？ →

mud.katapick.md

1---
2title: "mud Inc. 再現用デザイン仕様書"
3source: https://mud.co.jp/
4katapick: https://katapick.com/sites/mud
5category: コーポレート
6region: 国内 (JP)
7tags: [ミニマル, 余白, 手書き文字, 3D/WebGL, ライト, 等幅フォント]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# mud Inc. — 再現用デザイン仕様書
17 
18> FVは、ゆらゆら揺れる線画と手書きロゴだけ。クリエイティブスタジオmud Inc.のコーポレートサイトは、等高線のように揺らぐ線画と手書きのロゴだけをFVに置き、社名の「泥」が持つ柔らかさを余白に立ち上げている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22

Pro の追加ファイル

動くHTMLひな形トークンと構成を反映済みPRO tokens.jsonFigma / Tokens StudioPRO Tailwind @themev4 にそのまま貼れるPRO

mud Inc.についてよくある質問

mud Inc.のサイトで使われているフォントは？

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