CorporateOverseas / DKPicked 2026.09.26

Oimachi

コーポレートのWebデザイン参考 — デザイン・Webflow制作スタジオ

サイトを見るoimachi.co

www.oimachi.co開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

見出しの1語だけ、イタリックのセリフ体にする。

コペンハーゲンの2人組スタジオOimachiのコーポレートサイトは、Aeonikの見出しに要所だけFeature Deckを混ぜ、グレーの面に実績と自社製品を端正に並べる。

LunaType & Whitespace

About の段落を見出しサイズで組んで、3段落だけで会社紹介を終わらせてる。長文を大きく組むのは度胸がいるのよ。でもそのぶん、2人の声がちゃんと届く。……いいね！！

1見出しはサンセリフ、強調したい語だけイタリックのセリフ体。太字に頼らず、声色で強調する
2実績は1社1行、業種名と3枚の画像で組む。ロゴの羅列より、どんな仕事かが一目でわかる
3Labsは大小の作品をばらばらに組んだコラージュ。整った実績欄との落差が、実験好きな性格を伝える

Color

Oimachiの配色

Typography

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

見出し・本文・ナビ

Aa あア

使用: Aeonik
代替: Inter Tight

見出しの強調語（イタリック）

Aa あア

使用: Feature Deck
代替: Instrument Serif

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

特大見出しKatapick 型52px · 1.1 · 300
見出しKatapick 型34px · 1.05 · 300
小見出しKatapick 型12px · 1 · 300
本文The quick brown fox — 参考を型にする12px · 1.1 · 300

Structure

ページ構成（上から順）

01
ヘッダー
左にロゴと「Work / Services / Posts / Products / About」の白いボタン型ナビ、右に「Contact」とテーマ切替のアイコン。
02
ヒーロー
「Branding, Website & AI Visibility. Innovation Studio.」の大見出しの下に、ダークの大きなショーケース枠と、右に「Latest posts」の記事カード列。
03
実績
「Partnering with ambitious teams…」の見出しの下に、Evooq（Fintech）、Danelec（Maritime）、Bequant、Anthill、Veo を1社1行で、短い説明と3枚の画像で並べる。
04
クライアントの声
「An award-winning studio…」の見出しと、クライアントの動画コメント2本。
05
Labs
「Our experiments, products and curiosity…」の見出しの下に、ツール、コンセプト、グッズなどの作品を大小ばらばらのコラージュで並べる。
06
About
コペンハーゲン拠点の小さなスタジオであることを大きな文章で語り、オフィスと2人の創業者の写真を添える。
07
インデックス
Work・Services・Products・Posts の4列のリンク集を、アイコン付きのリストで並べる。
08
CTA・フッター
大きな円形ロゴと「Want a peek at how we could collaborate?」、「Book a call」ボタン、メールアドレスと電話番号。

Interaction

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

ヒーローのダーク枠は、FVでは角丸の図形2つ、全画面キャプチャではタブレット群の実績ビジュアルが表示されているため、Lottie のアニメーションから実績ビジュアルへ切り替える演出と思われる
スタックに GSAP があり、見出しや画像のスクロール連動のフェードインに使われていると思われる
ヘッダーは固定表示で、ナビ項目は1つずつ白い角丸ボタンになっている。右下の「Webflow Partner」バッジも固定
ヘッダーにテーマ切替のアイコンがあり、ライト／ダークのモード切替に対応していると思われる。CSS変数で配色を切り替えると再現可能

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

検出された技術:GSAPWebflowGoogle FontsLottie

Reproduce

再現するときのポイント

01背景は純白ではなく #f0f0f0 にし、面の区切りに #dfdfdf を使ってグレー2段で構成する
02見出しはサンセリフで組み、強調語だけ <em> でイタリックのセリフ体に切り替える
03実績は「社名＋業種」のラベル、短い説明、3枚の画像を1行にまとめて繰り返す
04ナビはテキストリンクではなく、白い小さなボタンとして並べる

再現MDに含まれるもの

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

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

oimachi.katapick.md

1---
2title: "Oimachi 再現用デザイン仕様書"
3source: https://www.oimachi.co/
4katapick: https://katapick.com/sites/oimachi
5category: コーポレート
6region: 海外 (DK)
7tags: [ライト, グリッド, ミニマル, 写真主体, セリフ体]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 28
13generator: Katapick
14---
15 
16# Oimachi — 再現用デザイン仕様書
17 
18> 見出しの1語だけ、イタリックのセリフ体にする。コペンハーゲンの2人組スタジオOimachiのコーポレートサイトは、Aeonikの見出しに要所だけFeature Deckを混ぜ、グレーの面に実績と自社製品を端正に並べる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22