# Squarespace Foundations｜ブランドのWebデザイン参考

> 縦に伸びず、章が1画面ずつ差し替わっていく。Squarespaceのブランドガイドライン「Foundations」は、1画面に1章だけを置き、四隅の小さな文字以外をすべて見本のために空けている。

- URL: https://brand.squarespace.com/
- 解説ページ: https://katapick.com/sites/squarespace-foundations
- カテゴリ: ブランド / 地域: 海外（US）/ 業種: Webサイト制作プラットフォーム（ブランドガイドライン）
- テイスト: ミニマル、モノクロ、余白、固定ナビ
- 公開・リニューアル: 2026-05 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 4/5（目安 32 時間）

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

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

## 配色
- #ffffff White（背景（Logo の章）/ テキスト）
- #000000 Black（ロゴ / テキスト / 背景（Motion の章））
- #111111 Near Black（背景）
- #2a1a0d Dark Walnut（背景（抽出データのみ。表示箇所は未確認））
- #7e7e7e Mid Gray（右端の進捗インジケーター（スクショから採色））

## フォント
- サイト名・Index・章番号・章名: Clarkson（代替: Inter Tight）

## よくある質問
### Squarespace Foundationsのサイトで使われているフォントは？
抽出データで確認できるのは、サイト名や章ラベルに使われている Clarkson のみです。Google Fonts で近い印象にするなら Inter Tight が使えます。

### ロゴの一部だけ白黒を反転させる表現はどう作る？
ロゴの上に黒い正方形を重ね、正方形に mix-blend-mode: difference を指定すると、重なった部分だけ色が反転します。正方形の位置をカーソルに追従させるとインタラクティブにできます。

### このサイトはどんな用途の参考になる？
ブランドガイドラインやデザインシステムの公開サイト、ロゴ・書体・色などを章立てで見せたいブランドブックのWeb版の参考になります。

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