目次
目次
このドキュメントは、Framerを学ぶ日本国内のユーザーが日本語資料の不足で抱える困難を解決するために、公式ブログの内容を翻訳して実務に役立つ情報を追加したものです。Framerを使用する皆様に少しでもお役に立てれば幸いです。
Framerで使用できる位置指定方式
Absolute: 親フレームに基づいて自由に位置を設定
Relative: StackやGridのようにフローに従って位置が決まる
Fixed: 画面(Viewport)に基づいて固定された位置
Sticky: 特定のポイントに達すると固定され、その後はフローに戻る
今回の記事では、これらの中で最も基礎となるAbsolute Positioningについてのみ先に取り上げます。
Absolute Positioningとは？
Absolute Positioningはそのレイヤーが親フレームを基準に固定された位置に配置される方式です。つまり、要素が兄弟要素との関係を無視して、親フレームとの距離だけを基に配置されるということです。
この方式はFigmaのようなデザインツールで要素を自由にドラッグして配置するのと非常に似ているため、Framerを初めて使う人もこの位置決め方式にすぐ適応できるでしょう。
Framerでは位置をどう定義するのか？
他のデザインツールではX,Y座標のみが表示されることが多いですが、Framerは少し異なります。
上端/下端、左端/右端、四方向にそれぞれの距離値を設定できます。
特定の方向に値を入力したりピン(pin)を設定すると、親フレームのサイズが変わってもその距離値は維持されます。
例えば「上から20px」という値にピンを設定しておけば、親フレームが大きくなったり小さくなったりしても、その要素は常に上から20px離れた位置に表示されます。
ピン(Pinning)と位置設定
フレームを選択すると右のプロパティパネルで以下のような値が見えます。このとき、はっきり表示された値がピンが適用された値です。
Top, Bottom
Left, Right
ピンを設定すると: その方向からの距離が固定されます
ピンを解除すると: その方向は無視され、レイヤーは動的に動けます
例
左側だけピン → 左端基準で20pxを維持
両側ともピン → 左右20pxを維持し自動で幅が広がったり狭まったりします
既存の要素を囲む親フレームの作成
複数のレイヤーを選択した後
右クリック > Add Frame
または Cmd + Enter (Mac)、Ctrl + Enter (Windows)
これで選択した要素を囲む新しい親フレームが作られます。
親フレームを削除し、子要素だけを残したい場合は以下の方法で行ってください。
Cmd + Delete (Mac)
Ctrl + Delete (Windows)
フレームを描く際に便利なショートカット
Shift: 正方形で描く
AltまたはOption: 中心から外へ描く
Space: 描画中に位置を移動
Absolute Position vs Relative Position – Stackと一緒に使う際の注意点
FramerではStackを作成すると、基本的にその中の要素はRelative Positioningが適用されて、上から下へまたは左右にフローに従って自動で整列されます。
しかし、もしその中の特定の要素をAbsoluteに変更したらどうなるのでしょうか？
その要素は整列フロー(Flow)から外れることになります
自由にドラッグして配置できる一方、他の要素と重なったりレイアウトが崩れる可能性があります
z-indexとは？
このときはレイヤーの前後の順序を数値で表現する概念であるz-index属性を活用し、どの要素が上に表示されるかを視覚的に調整できます。
初期値は
0で、数値が大きいほど上に表示され、小さいほど下に配置されます。例えば
z-index: 1であれば他の要素より上に、1であれば他の要素の後ろに配置されます。
FramerではAbsoluteに切り替える際、このz-indexの値を自動で追加してくれるため、特に設定しなくても基本的な重なり順序が整理されます。
Note: フローを崩せるのでStack内では必要な場合のみAbsoluteを使用しましょう。
Absolute Positionはいつ使うべきか？
Absolute Positionは静的な位置が重要なUI要素や視覚的に強調が必要な要素に適しています。
ヒーローセクションの背景イラスト
CTAボタンの上に重なるバッジ
背景に浮かぶアニメーション要素
ただし、コンテンツフロー(Flow)が重要なページでは乱用しない方が良いです。特にテキストやリスト構造はStackを使用する方が有利です。
まとめ
Absolute Positioningは「自由配置」だが、親フレーム基準で動作
ピンを設定すると距離を保ちながらレスポンシブ対応可能
Stack内ではフローから外れるため注意が必要
重なり順序はz-indexで調整可能
この記事はFramer公式YouTube『Absolute Positioning in Framer (Fundamentals Lesson 5)』の内容を翻訳・脚色したコンテンツです。
