CorporateJapanPicked 2026.09.30

株式会社ミルーム（MIROOM）

コーポレートのWebデザイン参考 — 動画講座サービス運営（オールジャンル動画講座「ミルーム」）

サイトを見るabout.miroom.com

about.miroom.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

黒い積み木と色の丸で、ロゴができてる。

動画講座サービスのミルーム株式会社のコーポレートサイトは、黒い角丸ブロックに原色の丸をはめたロゴと太い英字「Build for the Real.」で、遊び心を幾何学で伝える。

LunaType & Whitespace

英字は Poppins の太字、和文は Zen Kaku Gothic New で字間をたっぷり。英字の丸さと和文の開きがそろってて、ロゴの丸とケンカしない。色で騒いで、文字は静か。……悪くない。

1ロゴは黒い角丸ブロックに6色の丸をはめた組み文字。色の多さが、講座ジャンルの幅をそのまま連想させる
2白いFVのあとは濃いグレーの章が続き、ニュースで白に戻る。明暗の切り替えだけで章の区切りをつくる
3「My Time For ( Watercolor )」の括弧の中身が入れ替わる。講座の多さを、一語ずつ手渡してくる

Color

株式会社ミルーム（MIROOM）の配色

Typography

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

英字見出し・ナビ・日付

Aa あア

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

和文見出し・本文

Aa あア

使用: Zen Kaku Gothic New
代替: Zen Kaku Gothic New（Google Fonts）

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

見出しKatapick 型40px · 1.15 · 900
本文The quick brown fox — 参考を型にする16px · 0.7 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左に長体の英字ロゴ「MIROOM」、右に黒い丸のハンバーガーボタンだけを置く。
02
ヒーロー
白地の中央に太い英字「Build for the Real.」と和文のサブコピー。その下に黒い角丸ブロックと6色の丸で組んだ大きなロゴ、最下部に「Scroll Down」。
03
Company
濃いグレー地に「( Company )」のラベル、ミッションの見出しとサービスの説明文を中央揃えで置き、黄緑の丸矢印付き「Learn More」を添える。
04
Experiences
白い角丸パネルに「3,000+ Experiences」と英文のリード。講座ジャンルの写真カード（Flower Arrangement・Cooking & Baking など）が横に並び、下に「My Time For ( … )」のジャンル名が入れ替わる。
05
Our Product
「好きなことから、役立つことまで。オールジャンル動画講座サービス『ミルーム』」の見出しと説明文、その下に画面をはみ出す巨大な英字「Find Something You…」。
06
制作の流れ
点線の円を6つ重ね、Planning・Shooting・Editing・Logistics・Delivery・Experience の01〜06を横一列に並べる。
07
News
白地の左に All / Product / Corporate の絞り込み、右に日付・黒いカテゴリラベル・タイトルの一覧を罫線で区切って並べる。
08
Careers
モノクロの写真と、左右にずれて並ぶ3行の英字「Bring Your Passion. Unlock Your Potential. Build What's Next With Us.」。濃いグレーの角丸パネルに和文の呼びかけと「Get In Touch」。
09
フッター
「Build for the Real.」が流れる黒い帯、丸がブロックからこぼれたような大きなロゴ、英字ロゴと Company・Our Product・News・Careers のリンク。

Interaction

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

講座カードは横に流れ、「My Time For」の括弧内は撮影のたびに違う語（Watercolor、Flower Arrangement）になっていた。一定間隔で語を差し替えるローテーションと思われる
Careers の英字3行は撮影ごとに左右の位置が違っており、スクロールに合わせて行ごとに横へずれる演出と思われる
フッターのロゴは丸がブロックの外にはみ出した状態で写っており、丸が転がる・弾むような物理演出かホバーへの反応があると思われる
「Build for the Real.」の帯は無限マーキー。Framer の Ticker コンポーネントで作れる。スクロールは Lenis の慣性スクロールと思われる

スクロールのコマ撮りLenis · 1050–1150ms

検出された技術:LenisFramerGoogle Fonts

Reproduce

再現するときのポイント

01ロゴは角丸の長方形と円だけで組み、黒ブロック＋原色の丸という2つの部品に限定する
02英字は Poppins の太字で大きく、和文は Zen Kaku Gothic New で字間を広めにとって丸みをそろえる
03章の背景は白と #282828 の2色だけで交互に切り替え、アクセントは黄緑に限定する
04見出しには「( Company )」「( News )」のような括弧付きのラベルを全章で繰り返す

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

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

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

miroom.katapick.md

1---
2title: "株式会社ミルーム（MIROOM） デザイン分析書"
3source: https://about.miroom.com/
4katapick: https://katapick.com/sites/miroom
5category: コーポレート
6region: 国内 (JP)
7tags: [大胆なタイポ, ビビッド, 角丸, マーキー, カルーセル]
8launched: 2026-09
9verified: 2026-10-30
10measured: 2026-09-30 (Chromium 1440x900)
11difficulty: 2/5
12generator: Katapick
13---
14 
15# 株式会社ミルーム（MIROOM） — デザイン分析書
16 
17> 黒い積み木と色の丸で、ロゴができてる。動画講座サービスのミルーム株式会社のコーポレートサイトは、黒い角丸ブロックに原色の丸をはめたロゴと太い英字「Build for the Real.」で、遊び心を幾何学で伝える。
18 
19このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
20数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-30 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
21AIっぽさ（紫のグラデーション、同じ形の3列カードなど）を消すルールと、盗作を避けるための指示も入っています。
22