BrandJapanPicked 2026.09.26

MEDIUM（コミュニケーション・デザイン・ラボ）

ブランドのWebデザイン参考 — 研究・交流拠点（コミュニケーション・デザイン・ラボ）

出典: mediumlab.jp

Editor's note — 編集部の視点

写真を全部、ロゴと同じ半円やアーチで切り抜いてる。

仙台市の研究・交流拠点MEDIUMのブランドサイトは、半円を組んだロゴの輪郭で写真を切り抜き、白と濃紺グレーの2色だけで、形の反復から名前を覚えさせる。

LunaType & Whitespace

「MEDIUM」と「メディウム」を交互に流すマーキー、しつこいかと思った。でも英字も和文も同じ帯で回すから、読み方ごと覚えさせられる。……まあ、いいね！！

1アーチ、半円、円。写真のマスクを記事ごとに変え、同じ形の言語のまま一覧にリズムを生む
2ナビは画面下中央のピルと円形ボタンに集約。どこまで読み進めても、出口の位置は動かない
3色は白と濃紺グレーの2色のみ。色味は写真に預け、形の輪郭をページでいちばん強い要素にする

Color

MEDIUM（コミュニケーション・デザイン・ラボ）の配色

Typography

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

和文見出し・本文

Aa あア

使用: Noto Sans JP
代替: Noto Sans JP

英字見出し・ナビ・ラベル

Aa あア

使用: Avenir LT Pro
代替: Nunito Sans

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

見出しKatapick 型13.3px · 1.75 · 700
小見出しKatapick 型30px · 1.67 · 700
本文The quick brown fox — 参考を型にする11.7px · 1 · 500

Structure

ページ構成（上から順）

01
ヘッダー
左上に半円を組み合わせた大きなロゴ、右上に Access のテキストリンクと濃紺の「Contact」ボタン。
02
メインビジュアル（記事スライダー）
中央のアーチ形と左右に一部だけ見えるアーチ形で写真を切り抜いたスライダー。下に日付・記事タイトル・カテゴリのタグ、右に進捗バーと Prev / Next ボタン、右下に「Scroll Down」。
03
About
半円の記号と英字見出し「About」、和文のキャッチコピーと説明文を左に、半円で切り抜いた内観写真を右に置き、「View more About」ボタン。
04
テキストマーキー
「MEDIUM」「メディウム」「Communication Design Laboratory」と半円の記号を並べた帯を2段で横に流す。
05
Article
アーチ・半円・円など形の異なるマスクで切り抜いた写真カードを2列、続いて4列で並べ、日付・タイトル・タグを添える。下に「View index of Article」。
06
How to use
大きな半円で切り抜いた写真の下に説明文、展示・ワークプレイス・セミナー・シェアオフィスの4つを写真付きで横に並べ、併設施設（コーヒー店・ラボ）を2枚の写真で紹介する。
07
Access
左にモノクロの地図イラスト、右に住所・連絡先・営業時間を罫線で区切って並べる。
08
Contact・フッター
英字見出し「Contact」と問い合わせボタン、フッターに大きなロゴとサイトマップ・住所。最下部にロゴの形を大きく切り取った図形を画面幅いっぱいに置く。

Interaction

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

メインビジュアルは抽出データの Swiper によるスライダーで、スクショでは写真とタイトルが重なって薄く写っており、フェードで切り替わると思われる（effect: 'fade' と進捗バー付きの pagination で再現可能）
写真のアーチ・半円のマスクは clip-path や border-radius（例: border-radius: 999px 999px 0 0）で作れる
画面下中央のピル型ナビと円形メニューボタンはフルページキャプチャの各所に写っており、position: fixed で常駐している
テキストの帯は2段で横に流れるマーキーと思われ、CSS の @keyframes で段ごとに方向や速度を変えると再現できる

スクロールのコマ撮り200–100000ms

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム1 — 01

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム2 — 02

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム3 — 03

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム4 — 04

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム5 — 05

MEDIUM（コミュニケーション・デザイン・ラボ）をスクロールしたときのフレーム6 — 06

検出された技術:SwiperWordPressGoogle FontsAdobe Fonts

Reproduce

再現するときのポイント

01ロゴを構成する半円・アーチの形を決め、写真のマスク、見出し前の記号、フッターの装飾まで同じ形を使い回す
02色は背景の白と濃紺グレーの2色だけにし、ボタンもこの2色の反転で作る
03英字見出しは Avenir 系の太めのウェイトで大きく、下に小さな和文の読みを添える
04ナビを画面下中央に固定し、ページ上部の余白を大きくとってロゴとビジュアルに集中させる

再現MDに含まれるもの

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

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

mediumlab.katapick.md

1---
2title: "MEDIUM（コミュニケーション・デザイン・ラボ） 再現用デザイン仕様書"
3source: https://mediumlab.jp/
4katapick: https://katapick.com/sites/mediumlab
5category: ブランド
6region: 国内 (JP)
7tags: [ミニマル, ライト, 余白, マーキー, 固定ナビ, カルーセル]
8launched: 2026-04
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# MEDIUM（コミュニケーション・デザイン・ラボ） — 再現用デザイン仕様書
17 
18> 写真を全部、ロゴと同じ半円やアーチで切り抜いてる。仙台市の研究・交流拠点MEDIUMのブランドサイトは、半円を組んだロゴの輪郭で写真を切り抜き、白と濃紺グレーの2色だけで、形の反復から名前を覚えさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22