CorporateJapanPicked 2026.09.30

株式会社三崎組（コーポレートサイト）

コーポレートのWebデザイン参考 — 総合建設業（土木・建築・設計・不動産）

サイトを見るmisakigumi.com

www.misakigumi.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

港町まるごと、白い模型にしちゃった。

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

BrunoStructure & IA

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

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

Color

株式会社三崎組（コーポレートサイト）の配色

Typography

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

英字見出し（NEWS・ABOUT など）/ 日付 / ヒーロー下端の英字

Aa あア

使用: Sora
代替: Sora（Google Fonts）

和文見出し・本文

Aa あア

使用: IBM Plex Sans JP
代替: IBM Plex Sans JP（Google Fonts）

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

特大見出しKatapick 型10px · 1.75 · 500
見出しKatapick 型22px · 1.5 · 700
小見出しKatapick 型26px · 1.5 · 500
本文The quick brown fox — 参考を型にする15px · 1.6 · 500
ボタンKatapick 型10px · 1.75 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴ「株式会社三崎組」、右上に青い角丸の「Menu」ボタンだけを置き、スクロール中も固定する。
02
ヒーロー
小名浜の港町を白いアイソメトリックの3D模型で全面に描き、右寄りに青の縦書き見出し「あなたが見る風景を、もっと美しく、もっと強く。」と縦書きのサブコピー。右下にOnahama／Tokyoの切り替え、下端に画面幅いっぱいの白い英字「Neo landscape creation company」。
03
お知らせ
雲がかかったような淡い背景に「・NEWS」の英字見出しと青い「すべて見る」ボタン、右にサムネイル付きの記事3件を並べる。
04
三崎組について
港の航空写真を左に大きく置き、右に会社紹介文と「三崎組について詳しく見る」ボタン、年・月・日と時・分・秒で刻む「100周年まで残り」のカウントダウンパネル。
05
事業内容
左に「・BUSINESS」と説明文、右に土木工事・建築工事・一級建築士事務所・不動産事業の写真カード4枚を2×2で並べる。余白には模型の建物が浮かぶ。
06
施工実例
薄い英字「WORKS」と写真が流れる帯の下に、施工写真9件を大小ばらばらの角丸カードで段違いに配置。各カードに工事名・所在地と土木／建築のラベルを添える。
07
コラム
「・COLUMN」の見出しと左右の矢印、「すべて見る」ボタンを並べ、記事カードを横スライダーで見せる。
08
今日の建築現場・面白現場ツアー
模型の街を青く沈めた大きな楕円の中に、動画サムネイルと「Today's Site」「Site Tour」の2ブロックを交互に配置（いずれも準備中の表記）。
09
会社情報〜採用・フッター
会社情報・サステナビリティ・お取引先の3カード、社員写真と「・RECRUIT」、GALLERY と INSTAGRAM の写真帯。青いフォーム／電話の問い合わせパネル、ヒーローの模型を背にしたサイトマップ、濃いグレーのフッターで締める。

Interaction

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

抽出データに Three.js と WebGL があり、ヒーローの港町はリアルタイム描画の3Dモデルと思われる。マテリアルを白と青の2種に絞ると、この模型らしさが出しやすい
Tokyo を押すと模型が東京の街並みに切り替わった。2つのシーン（またはカメラ位置）を用意し、トランジションで入れ替えていると思われる
事業内容や施工実例の余白に模型の建物が浮かび、フッター手前ではヒーローの模型が再び現れる。固定した canvas の上にコンテンツを重ね、スクロール量でカメラを動かす構成と思われる
100周年のカウントダウンは撮影のたびに秒が進んでいた。目標日時との差分を setInterval で毎秒描き直す実装で再現できる
「WORKS」「GALLERY」「INSTAGRAM」の英字と写真の帯は横に流れるマーキー、全体は Lenis の慣性スクロールと思われる

スクロールのコマ撮りLenis · 200–90000ms

検出された技術:Three.jsLenisSwiperWordPressGoogle FontsLottieWebGL

Reproduce

再現するときのポイント

013D模型は建物を白、見せたい施設だけを淡い青にして、色数を増やさない
02縦書きの見出しは writing-mode: vertical-rl で行ごとに青い縦線を添え、模型の空いた海の上に置く
03英字見出しは「・NEWS」「・ABOUT」のように中黒付きで統一し、和文の小ラベルを上に添える
04施工実例は写真サイズをあえて揃えず、カードを段違いにして現場の多様さを出す

デザイン分析MDに含まれるもの

実測タイプスケール・余白・角丸・ブレークポイント・動きの長さとイージング / コントラスト判定 / カラートークン / 全9セクションの仕様 / AIっぽさを消すルール / Claude Code・Cursor・v0 用の実装プロンプト / Tailwind・tokens.json / 盗作を避ける差し替えリスト

Katapick のデザイン分析MDは何がすごい？ →

misakigumi.katapick.md

1---
2title: "株式会社三崎組（コーポレートサイト） デザイン分析書"
3source: https://www.misakigumi.com/
4katapick: https://katapick.com/sites/misakigumi
5category: コーポレート
6region: 国内 (JP)
7tags: [3D/WebGL, 縦書き, ライト, ブルー基調, 角丸, ロングページ]
8launched: 2026-04
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 4/5
12generator: Katapick
13---
14 
15# 株式会社三崎組（コーポレートサイト） — デザイン分析書
16 
17> 港町まるごと、白い模型にしちゃった。いわき市の総合建設業・三崎組のコーポレートサイトは、小名浜の街を白い3D模型で描き、青い建物と縦書きのコピーで“風景をつくる仕事”を伝えている。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22