Golden Ratio スケール

このツールでできること

• Golden Ratio スケールでは、黄金比 1.618 を基準に base から 4x までの rem 段階を一覧表示します。
• 関連する観点として Golden Ratio スケール、golden scale、CSS を確認し、結果をコピーして別の作業に使えます。

使い方

1. Item 列で base、1x、2x、3x、4x の段階を追います。
2. Content 列の rem 値を、本文・見出し・ヒーロー見出しなどの候補として確認します。
3. 1.618 倍は段差が急なため、狭い UI では上位段階を使いすぎないように見ます。
4. より細かい差が必要なら Major 3rd、やや中間なら Perfect 4th の兄弟表と比較します。

入力例・出力例

よくある利用シーン

• ランディングページのヒーロー見出しと本文の対比を大きく取りたいとき。
• 少ない見出し階層で、視覚的なジャンプをはっきり見せたいとき。
• 黄金比ベースの既存デザインに合わせて rem token を起こすとき。
• Major 3rd では差が弱いと感じるタイトル体系を検討するとき。

結果確認のポイント

• 生成したCSSや設定値を実際のコンポーネントに入れ、レスポンシブ表示も確認してください。
• Golden Ratio スケール、golden scale、CSSの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• ブラウザ差や既存CSSとの競合があるため、公開前に対象環境で確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• Golden Ratio スケールの主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

関連ツール