この文書はFramerを学ぶ日本のユーザーが、日本語資料の不足で直面している困難を解決するため、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでも役立つことを願っています。

Framerは「Fit Text」という新機能を発表しました。この機能を使用すると、どんなコンテナーでもサイズが調整される見出しを作成できます。この機能は複数行、インライン形式、最小/最大幅のサポートを高性能を維持しながら提供します。

問題点: CSSの限界

既存のライブラリを検討しましたが、共通の問題がありました。それは、テキストを拡大するためにはテキストの実際のサイズをレンダリング前に測定しなければならないという点です。しかし、Framerのサイトは静的に生成され、JavaScriptが実行される前にどのブラウザでも完璧にレンダリングされなければなりません。

次にfont-size: 100vwを試みましたが、画面全体を満たす場合にはうまく機能しました。しかし、任意のコンテナーにテキストを合わせるには、すべての親要素のサイズをvw単位で計算する複雑なCSS calc式が必要です。この方法は理論上可能ですが、コンポーネントのコード内部で親要素のサイズを知ることはできないため、実際の適用は難しいです。

解決策: SVG + viewBox + foreignObject

次に見つけた方法は、SVGのviewBoxとforeignObjectを活用することでした。SVGの内部にテキストをforeignObjectとしてレンダリングすると、拡大縮小効果を与えることができ、アクセシビリティやSEOにも問題はありませんでした。

ただし、ここには一つの条件があります。テキストの正確なbounding boxを計算し、viewBoxに反映する必要があり、テキストが変更されるたびにこれを同期化し続ける必要があります。そうしないと、テキストが切れたり整列が崩れます。したがって、一般的なユーザーのサイトでは事実上不可能なアプローチでした。

自動化: Framerの処理方法

Framerはこのプロセスを自動化して問題を解決しました。テキストを「Fit」に設定すると、Framerが現在のフォントサイズからテキストの大きさを測定し、bounding boxを取得した後、それに合ったSVGとviewBoxを生成します。

ユーザーがテキストを編集すると、Framerは再度これを測定し、viewBoxを更新します。編集時にはviewboxをピクセル単位で再換算し、自然な編集体験を提供し、編集が終了すると再びviewBoxに基づいて自動的にサイズを合わせます。このすべてのプロセスはキャンバスでのパフォーマンスに影響を与えることなく、スムーズに行われます。

結果: スムーズなリサイズ

サイトが配布されるとviewBoxはすでに計算された状態で含まれるため、JavaScriptが読み込まれる前でもテキストは正確なサイズでレンダリングされます。フリッカー現象やサイズ変更の遅延、フェードインなしでスムーズにサイズが調整されます。

今後の課題: コンテナクエリ

将来的にブラウザがコンテナクエリを十分にサポートするようになれば、Framerもこれを導入する計画です。単位は一般単位のcqwを使用できますが、vwとcqwはコンテナーを基準にして計算されるため、複雑なCSScalc()なしでもコンポーネント単位で自然に機能することができます。

Fit Textは本来実現が難しい機能をFramerが自動化し、ユーザーがサイト制作に専念できるようにする良い例です。今後この機能を活用して創造的な成果を作り出してください。

この記事はFramer公式ブログの「高度なレスポンシブタイポグラフィ：Fit Textの技術実装」を翻訳・改編したコンテンツです。