# 株式会社三崎組（コーポレートサイト）｜コーポレートのWebデザイン参考

> 港町まるごと、白い模型にしちゃった。いわき市の総合建設業・三崎組のコーポレートサイトは、小名浜の街を白い3D模型で描き、青い建物と縦書きのコピーで“風景をつくる仕事”を伝えている。

- URL: https://www.misakigumi.com/
- 解説ページ: https://katapick.com/sites/misakigumi
- カテゴリ: コーポレート / 地域: 国内（JP）/ 業種: 総合建設業（土木・建築・設計・不動産）
- テイスト: 3D/WebGL、縦書き、ライト、ブルー基調、角丸、ロングページ
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-30 / 最終確認: 2026-10-30
- 再現難易度: 4/5

## 編集部のひとこと（Bruno）
「今日の建築現場」と「面白現場ツアー」、まだ準備中なのに枠だけ先にトップの中盤へ確保してあるんだよね。動画で現場を見せる章を、あとから育てる前提で設計してる。更新の置き場所が決まってるのは強い。

## デザインの見どころ
- 街を白一色の模型にして、一部の建物だけ青く塗る。説明より先に、建設会社が関わる風景の広さが目に入る
- Onahama／Tokyoのボタンで模型の街が切り替わる。いわきと東京、2つの拠点を最初の画面で伝える
- 会社紹介の横に「100周年まで残り」のカウントダウン。創業94年の歴史を、先の目標として見せる

## 配色
- #ffffff White（背景 / 模型の街）
- #c8dae4 Harbor Mist（ヒーローの海と空（スクショから採色））
- #0065e1 Misaki Blue（Menu・すべて見るボタン / 小見出し / カウントダウン）
- #f1f1f1 Light Gray（カード・パネル背景）
- #6a7e96 Dusk Blue（今日の建築現場の楕円背景（スクショから採色））
- #1f1f20 Ink（テキスト / フッター背景）

## フォント
- 英字見出し（NEWS・ABOUT など）/ 日付 / ヒーロー下端の英字: Sora（代替: Sora（Google Fonts））
- 和文見出し・本文: IBM Plex Sans JP（代替: IBM Plex Sans JP（Google Fonts））

## よくある質問
### 三崎組のサイトのフォントは？
英字の見出しや日付に Sora、和文の見出しと本文に IBM Plex Sans JP が使われています。どちらも Google Fonts で無料で使えます。

### 三崎組のような3Dの街並みはどう作る？
Blender などで白基調の街のモデルを作り、Three.js で読み込んで斜め上からのカメラで表示します。影をやわらかく落とすと模型らしい質感になります。拠点ごとにシーンを分ければ、ボタンで街を切り替える表現にもできます。

### 三崎組のデザインはどんなサイトの参考になる？
地域に根ざした建設会社や不動産会社、インフラ企業など、手がけた土地や街を丸ごと見せたいコーポレートサイトの参考になります。

### 三崎組のサイトの3Dモデルや写真は使える？
サイト内の3Dモデル、施工写真、社員の写真、ロゴは株式会社三崎組および各権利者に帰属します。参考にするのはレイアウトや表現の考え方にとどめ、素材は自分で用意してください。

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