# MEDIUM（コミュニケーション・デザイン・ラボ）｜ブランドのWebデザイン参考

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

- URL: https://mediumlab.jp/
- 解説ページ: https://katapick.com/sites/mediumlab
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: 研究・交流拠点（コミュニケーション・デザイン・ラボ）
- テイスト: ミニマル、ライト、余白、マーキー、固定ナビ、カルーセル
- 公開・リニューアル: 2026-04 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

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

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

## 配色
- #fafafa Snow（背景）
- #202629 Charcoal Navy（ロゴ・ボタン・固定ナビ）
- #000000 Black（テキスト）
- #ffffff White（ボタンの文字）

## フォント
- 和文見出し・本文: Noto Sans JP（代替: Noto Sans JP）
- 英字見出し・ナビ・ラベル: Avenir LT Pro（代替: Nunito Sans）

## よくある質問
### MEDIUMのサイトで使われているフォントは？
和文は Noto Sans JP、英字は Adobe Fonts の Avenir LT Pro が使われています。無料で近づけるなら英字に Nunito Sans を合わせる方法があります。

### 写真をアーチ形や半円に切り抜くには？
CSS の clip-path: ellipse() や、border-radius を上側だけ大きくする指定で作れます。ロゴと同じ形を使うと、写真が変わってもブランドの印象がそろいます。

### MEDIUMのデザインはどんな業種の参考になる？
コワーキングスペース、ギャラリー、大学や企業の共創拠点、文化施設など、場所の使い方とイベント情報を発信したい施設のブランドサイトの参考になります。

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