Claude Design パネル チートシート

右側プロパティパネルの全項目を1枚で。色分けで探しやすく。
ver. 2026-04-18
TYPOGRAPHY / SIZE / LAYOUT / BOX
TYPOGRAPHY 文字
SIZE サイズ
LAYOUT レイアウト
BOX ボックス
▍ 余白3兄弟（Margin / Padding / Gap）の使い分け
Margin外側の余白
要素

隣との距離を空ける。セクション間／要素間で使用。

Padding内側の余白
中身

枠と中身の距離を空ける。ボタン内、カード内で使用。

Gap子要素間
子1
子2
子3

子要素同士の間を空ける。Flex/Gridで使用。

項目効く場所何を調整？使う場面
Margin外側隣の要素との距離セクション間・見出し下
Padding内側枠と中身の距離ボタン・カード内
Gap子の間並ぶ子同士の間隔横並びカード・ナビ
💡 迷ったら：「自分の周りに余白」→ Margin ／「中身の周りに余白」→ Padding ／「子同士の間」→ Gap。横並びの要素間は Gap 優先が今どき（崩れにくい）。
▍ 1. TYPOGRAPHY｜文字まわり
TYPOGRAPHY / SIZE / BOX（全体） TYPOGRAPHY SIZE BOX
TYPOGRAPHY

文字の見た目を整える

Font書体日本語は Noto Sans JP が基本。「Mixed」は混在状態。
Size文字サイズ見出し 32〜48px／本文 14〜16px が目安。
Weight太さ100(極細)〜900(極太)。本文 400／強調 700。
Color文字色カラーコードで指定（例 #3d434f）。💡 本文の黒は #000（純黒）より #333〜#444 が一般的。純黒は白背景とのコントラストが強すぎて目が疲れる。
Align文字揃え左／中央／右。FV見出しは center、本文は left。
Line行の高さ行間。日本語は 1.7〜2.1 が読みやすい。
Tracking文字間隔カーニング。見出しで少し広げると上品に。
▍ 2. SIZE + BOX｜サイズと箱の装飾
SIZE

要素の幅・高さ

Width幅横幅を px で指定。コンテンツ領域の幅決定に使う。
Height高さ縦幅。通常は中身に自動追従させる（直接指定は控えめに）。
BOX

ボックスの装飾（透明度・余白・枠線・角丸）

Opacity不透明度0(透明)〜1(不透明)。0.5で半透明。
Padding内側余白T/R/B/L を個別指定。中身と枠の距離を調整。
Margin外側余白T/R/B/L を個別指定。隣との距離を調整。
Border枠線太さ（T/R/B/L）＋ Style（solid／dashed）＋ 色。
Radius角丸4つの角（⌜⌝⌞⌟）を個別指定。ボタン・カードで多用。
⚠ Padding と Margin の違い： Padding＝箱の内側、Margin＝箱の外側。ボタンの文字と縁＝Padding、ボタンと次の要素＝Margin。
▍ 3. LAYOUT｜子要素の並べ方（Flex）
1 Direction
Direction ▾ 展開 Direction dropdown

並べる方向を決める。

row横方向（左→右）デフォルト
column縦方向（上→下）
row-reverse横方向・逆順
column-reverse縦方向・逆順
2 Justify
Justify ▾ 展開 Justify dropdown

主軸の揃え（row なら左右）。

flex-start先頭（左/上）に寄せる
center中央に寄せる
flex-end末尾（右/下）に寄せる
space-between両端配置＋間を均等に
space-around各要素の周囲に均等余白
space-evenlyすべての間隔を等しく
3 Align
Align ▾ 展開 Align dropdown

交差軸の揃え（row なら上下）。

stretch引き伸ばして揃える（デフォルト）
flex-start上／左に揃える
center中央に揃える
flex-end下／右に揃える
baselineベースラインで揃える
LAYOUT Gap

補足：Gap（子要素間の余白）

Gap 48px で子要素の間が 48px ずつ空きます。Direction の方向に沿って適用されます。

💡 Justify × Align の覚え方： Direction が row（横並び）のとき → Justify＝左右、Align＝上下。column（縦並び）に切り替えると、役割が入れ替わります。
Claude Design プロパティパネル チートシート / 2026-04-18