BrandOverseas / USPicked 2026.09.26

Squarespace Foundations

ブランドのWebデザイン参考 — Webサイト制作プラットフォーム（ブランドガイドライン）

サイトを見るbrand.squarespace.com

brand.squarespace.com開く ↗

サイトを開く ↗

Editor's note — 編集部の視点

縦に伸びず、章が1画面ずつ差し替わっていく。

Squarespaceのブランドガイドライン「Foundations」は、1画面に1章だけを置き、四隅の小さな文字以外をすべて見本のために空けている。

LunaType & Whitespace

書体はClarksonだけ。サイト名も章番号も同じ書体で、遊びは章名の「( Logo )」の括弧くらい。地味？違う、ガイドライン自身が自分のルールを守ってるの。……いいね！！

1ページの高さは1画面に固定。章を縦に積まず差し替えることで、ひとつの規定だけに集中させる
2Logoの章は白地にロゴマークひとつ。重ねた黒い正方形の範囲だけ白黒が反転し、形の強さを確かめさせる
3UIは四隅のサイト名・Index・章番号・矢印だけ。ナビの存在感を削り、画面中央を見本に明け渡す

Color

Squarespace Foundationsの配色

Typography

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

サイト名・Index・章番号・章名

Aa あア

使用: Clarkson
代替: Inter Tight

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

特大見出しKatapick 型80px · 0.8 · 400
ボタンKatapick 型24px · — · 400

Structure

ページ構成（上から順）

01
固定UI（上部）
左上に「Squarespace Foundations」、右上に「Index」を小さなサンセリフで置く。どの章でも同じ位置に残る。
02
01 (Logo)
白地の中央にロゴマークだけを大きく配置。フルページキャプチャでは、ロゴに重ねた黒い正方形の範囲だけ白黒が反転して写っている。
03
02〜05 の章
1画面で章を切り替える構成のため、キャプチャでは確認できない。章番号から、Logo と Motion の間に4つの章があることのみ分かる。
04
06 (Motion)
SPキャプチャでは黒地に、UI画面や写真、ロゴの見本などの矩形を大小ずらして散らしている。
05
固定UI（下部）
左下に章番号「01」と括弧付きの章名「( Logo )」、右下に前後の章へ進む矢印2つ。右端中央に小さなグレーの進捗インジケーター。

Interaction

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

ページの高さが1画面（901px）で、章は縦に並ばず切り替わる。ホイールや矢印ボタンの入力を受けて章を差し替える構成で、抽出データの Lenis は仮想スクロール量の取得に使っていると思われる（Nuxt のページ遷移で章ごとに URL を分けている可能性もある）
ロゴの反転は、黒い正方形に mix-blend-mode: difference を指定して重ねると再現できる。PCスクショには正方形がなく、フルページキャプチャにのみ写っているため、カーソルや時間で出入りする演出と思われる
Motion の章の矩形はUI画面や映像の見本で、各矩形が動く・切り替わる演出と思われる（静止画からは断定できない）
右端のグレーのバーは全章のうちの現在位置を示す進捗インジケーターと思われる

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

Squarespace Foundationsをスクロールしたときのフレーム1 — 01

検出された技術:LenisNuxt

Reproduce

再現するときのポイント

01サイト名・Index・章番号・矢印を四隅に固定し、中央の見本以外の要素を置かない
02章ごとに白地・黒地を切り替え、見本の色を邪魔しない無彩色だけでUIを組む
03章番号と「( 章名 )」の表記を統一し、1画面1テーマで読み進められるようにする
04章ごとの見本に合わせたインタラクション（反転・配置の変化など）を1つずつ用意する

再現MDに含まれるもの

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

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

squarespace-foundations.katapick.md

1---
2title: "Squarespace Foundations 再現用デザイン仕様書"
3source: https://brand.squarespace.com/
4katapick: https://katapick.com/sites/squarespace-foundations
5category: ブランド
6region: 海外 (US)
7tags: [ミニマル, モノクロ, 余白, 固定ナビ]
8launched: 2026-05
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 4/5
12estimated_hours: 32
13generator: Katapick
14---
15 
16# Squarespace Foundations — 再現用デザイン仕様書
17 
18> 縦に伸びず、章が1画面ずつ差し替わっていく。Squarespaceのブランドガイドライン「Foundations」は、1画面に1章だけを置き、四隅の小さな文字以外をすべて見本のために空けている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22