MediaOverseas / UAPicked 2026.09.26

Mosby's Files

メディアのWebデザイン参考 — 建築リサーチ・アーカイブ

サイトを見るmosbyfiles.com

www.mosbyfiles.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

建築家の名前が、そのままファイルのタブ。

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

LunaType & Whitespace

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

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

Color

Mosby's Filesの配色

Typography

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

建築家名・リード文

Aa あア

使用: Signifier
代替: Newsreader

解説・ナビ・ラベル

Aa あア

使用: IBM Plex Mono
代替: IBM Plex Mono

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

特大見出しKatapick 型144.1px · 0.8 · 700
本文The quick brown fox — 参考を型にする12px · 1.4 · 400

Structure

ページ構成（上から順）

01
ヘッダー
中央に極太コンデンス体の「MOSBY'S FILES」、右端に About。細い罫線で本文と区切る。
02
ヒーロー
画面幅いっぱいの「AMERICAN MODERNISM」と、グレーのセリフ体で組んだ3行のリード文。
03
フォルダ・インデックス
青・緑・紫・赤のフォルダを段々に重ね、台形のタブに Frank Lloyd Wright や Louis Kahn などの建築家名を並べる。各フォルダの右端に潮流名と開閉の矢印。
04
開いたフォルダ
赤いフォルダが開き、「Contextual & Transitional Architecture」の解説を等幅の白文字で左上に置く。
05
凡例・フッター
方位記号のアイコン列と縮尺バー、© 2026、「CRAFTED WITH ♥ BY TUBIK STUDIO」のクレジット。

Interaction

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

各フォルダ右端の矢印（‹ / ⌄）で開閉するアコーディオンと思われる。grid-template-rows を 0fr から 1fr へ遷移させると高さを滑らかに開閉できる
肩の丸い台形のタブは、clip-path の path() か、border-radius を付けた疑似要素を左右に足すと CSS だけで再現可能
Nuxt 製で、Lenis の慣性スクロールを組み合わせている

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

検出された技術:LenisNuxt

Reproduce

再現するときのポイント

01フォルダ本体の帯とタブを別要素にし、タブを帯の上端に少し重ねて段差を作る
02色は原色寄りの青・赤・緑・紫を面で使い、文字は白に統一してビビッドでも読めるようにする
03名前はセリフ体、解説とラベルは等幅と、書体で“資料の種類”を分ける
04背景は純黒でなく #191919 にして、フォルダの色を浮かせる

再現MDに含まれるもの

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

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

mosby-files.katapick.md

1---
2title: "Mosby's Files 再現用デザイン仕様書"
3source: https://www.mosbyfiles.com/
4katapick: https://katapick.com/sites/mosby-files
5category: メディア
6region: 海外 (UA)
7tags: [ダーク, ビビッド, 大胆なタイポ, セリフ体, 等幅フォント]
8launched: 2026-08
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 3/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# Mosby's Files — 再現用デザイン仕様書
17 
18> 建築家の名前が、そのままファイルのタブ。アメリカ近代建築の研究アーカイブMosby's Filesは、色違いのフォルダを段々に重ねたUIに建築家と潮流を振り分け、資料棚を開く手つきで読み進めさせる。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22