目次
目次
この文書は、Framer を学ぶ日本国内のユーザーが日本語資料の不足による困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加したものです。Framer を使用する皆様に少しでも役立つことを願っています。
テキストスタイルブレークポイントとは？
ウェブサイトをさまざまなデバイスで閲覧可能にするためには、テキストサイズと間隔も画面サイズに応じて調整される必要があります。Framer では、これを非常に簡単に設定できる機能を提供しています。それがText Style Breakpointsです。
テキストスタイルブレークポイントの作成方法
左側の
Assetsタブを開き、Stylesセクションに移動希望のテキストスタイル（例：
H1、Body Mなど）を選択Edit Styleモーダルの下部
Breakpoints項目でAdd Breakpointsボタンをクリック
デフォルトで提供される3つのブレークポイント
Desktop (L)ミニマム幅: 1200Tablet (M)ミニマム幅: 810Mobile (S)
ブレークポイントの属性
Font Size（フォントサイズ）Line Height（行間）Letter Spacing（字間）Paragraph Spacing（段落間隔）
Note: ブレークポイントごとに属性を調整可能であるため、デスクトップではH1サイズを56pxにし、モバイルでは32pxにするような設定が可能です。
なぜこの機能が重要なのでしょうか？
デザインで最も頻繁に使用される要素はテキストです。テキストが画面サイズに応じて読みやすさが低下したり、サイズが大きすぎてレイアウトが崩れる場合も多いため、画面サイズに適したブレークポイントを設定することが重要です。
ブレークポイント設定の利点
レスポンシブUIに合わせて
文字サイズを自動調整可能デザイナーが事前に設計したスタイルを
一貫して維持
本記事は Framer 公式ドキュメントの‘Setting Text Styles breakpoints’を翻訳・アレンジしたコンテンツです。
