# Mosby's Files｜メディアのWebデザイン参考

> 建築家の名前が、そのままファイルのタブ。アメリカ近代建築の研究アーカイブMosby's Filesは、色違いのフォルダを段々に重ねたUIに建築家と潮流を振り分け、資料棚を開く手つきで読み進めさせる。

- URL: https://www.mosbyfiles.com/
- 解説ページ: https://katapick.com/sites/mosby-files
- カテゴリ: メディア / 地域: 海外（UA）/ 業種: 建築リサーチ・アーカイブ
- テイスト: ダーク、ビビッド、大胆なタイポ、セリフ体、等幅フォント
- 公開・リニューアル: 2026-08 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 3/5（目安 20 時間）

## 編集部のひとこと（Luna）
タイトルは詰め詰めの極太、解説は等幅で行間ゆったり。原色のフォルダの上でも文字は白一色で通すから、ちゃんと読める。赤いフォルダの下半分をがらんと空けたのも、たぶんわざと。……いいね！！

## デザインの見どころ
- 青・緑・紫・赤のフォルダを段々に重ね、タブに建築家名を載せる。目次が、そのまま資料棚になる
- フォルダごとの潮流名を右端に置く。名前と流派の関係を、開く前に一目で掴ませる
- 開いたフォルダの下部に方位記号と縮尺バー。建築図面の凡例を借りて、題材との距離を詰める

## 配色
- #191919 Charcoal（背景）
- #1e4bd7 Archive Blue（フォルダ（Organic & Early Modernism））
- #0c7866 Patina Green（フォルダ（Expressive））
- #581e70 Plum（フォルダ（Monumental Modernism））
- #d71e1e Drafting Red（フォルダ（Contextual & Transitional））
- #ffe927 Pencil Yellow（タブのアクセント）

## フォント
- 建築家名・リード文: Signifier（代替: Newsreader）
- 解説・ナビ・ラベル: IBM Plex Mono（代替: IBM Plex Mono）

## よくある質問
### Mosby's Filesのサイトで使われているフォントは？
建築家名とリード文に Signifier、解説とナビに IBM Plex Mono が使われています。IBM Plex Mono は Google Fonts で無料、Signifier の代わりには Newsreader などのセリフ体が近い雰囲気です。

### Mosby's Filesのようなフォルダ風UIはどう作る？
色の帯（フォルダ本体）の上に、角を丸めた台形のタブを少しずつずらして重ねます。タブの形は clip-path の path() や疑似要素で作り、クリックで該当フォルダを開くアコーディオンにすると再現できます。

### Mosby's Filesのデザインはどんなサイトの参考になる？
アーカイブ、研究・リサーチのプロジェクト、美術館や図書館のデジタル展示、事例集など、たくさんの項目を分類して見せたいメディアの参考になります。

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