Framerの新機能「3D Transforms」を実務で使いこなす設定手順を解説。RotationやPerspectiveなど10以上の新プロパティを日本語環境でバグらせずに設定し、崩れない立体アニメーションを実装するコツを共有します。
1. 3D Transformsでよくある「操作不能」の罠
Framerで立体的なWebデザインを作ろうとして、CSSの3D設定が崩れたり、プレビューで動かなくなったりした経験はありませんか。2024年4月10日にリリースされた「3D Transforms」機能により、FramerのCanvas上で直接3Dレイヤーを編集できるようになりました。
実際に弊社で検証したところ、設定のコツさえ掴めば、わずか5分ほどで崩れない立体アニメーションを実装できます。日本語環境特有のフォント崩れや、レイヤーが選択できなくなるトラブルを回避する手順をまとめました。
2. 3D Transformsの基本設定手順
Framerの英語UIで3D効果を適用する具体的なロードマップです。
ステップ1：対象レイヤーの選択とPerspective（遠近感）の設定
Canvas上で対象の親レイヤーを選択します。
右側プロパティパネルの「Effects」または「Styles」エリアにある「Transform」項目を探します。
「Perspective」の数値を設定します。デフォルトの「none」から「800px」程度に変更すると、自然な奥行きが生まれます。
⚠️ 日本人特有の落とし穴：日本語フォント（Noto Sans JPなど）を適用したテキストレイヤーに直接Perspectiveを設定すると、特定のブラウザ（Safariなど）で文字がにじむ現象が発生します。必ずテキストの親スタック（Stack）に対して設定を適用してください。
📸 [ここに：FramerのCanvas画面で、右側プロパティパネルの「Transform」セクション内にある「Perspective」入力欄を赤枠で囲んだスクリーンショット画像を挿入]
ステップ2：Rotation（回転）とDepth（奥行き）の調整
親スタックの中にある子レイヤーを選択します。
右側プロパティパネルの「Transform」→「3D」を有効にします。
「Rotation Y」を「-20deg」、「Rotation X」を「10deg」のように数値を入力して傾けます。
「Depth（Z軸の深さ）」を「50px」に設定し、前後に浮き出る立体感を調整します。
⚠️ 日本人特有の落とし穴：全角の「ー（マイナス）」や「ｄｅｇ」をキーボードから直接入力すると、Framerが数値を認識せず、設定値が「0」にリセットされてしまいます。数値や単位は必ず半角英数字で入力してください。
📸 [ここに：プロパティパネルの「Rotation Y」と「Depth」の数値入力エリアを赤枠で囲み、半角で入力されている状態を示すスクリーンショット画像を挿入]
ステップ3：Origin（基準点）の変更とインタラクションの紐付け
子レイヤーを選択した状態で、プロパティパネルの「Origin」設定（基準点を示す9つの点）を確認します。
デフォルトの中央（Center）から、左端（Left）や上端（Top）に変更して回転の軸をずらします。
右上の「Effects」ボタンから「Hover」を追加し、ホバー時に「Rotation Y」が「0deg」に戻るように設定します。
⚠️ 日本人特有の落とし穴：FramerのCanvas上で3Dレイヤーが重なり合うと、背面にあるレイヤーがマウスクリックに反応しなくなる現象が起きます。重なり順を制御するために、プロパティパネルの「Style」→「Z-Index」の数値を「1」以上に設定して、前面に配置されるよう調整してください。
📸 [ここに：右側プロパティパネルの「Effects」から「Hover」を追加し、3Dの回転アニメーションを設定している画面を赤枠で囲んだスクリーンショット画像を挿入]
3. 補足：公式の最新情報
Framerの仕様は頻繁に更新されるため、最新の英語公式ヘルプも併せて参照することをおすすめします。
4. 3D設定の注意点と次のステップ
3D Transformsは非常に強力ですが、設定を誤るとスマートフォン表示（レスポンシブ）でレイヤーが画面外にはみ出し、ユーザーが操作できなくなるリスクがあります。特に、モバイル版のブレイクポイント（390px以下など）では、3Dの回転角度を緩やかにするか、一時的に「Rotation」を「0」に戻す設定が実務上不可欠です。
このような細かな調整や、SEOに配慮したセマンティックなコーディングをFramerで実現するには、専門的なノウハウが求められます。設定ミスによる機会損失や、デザイン崩れによるブランドイメージ低下を防ぎたい方は、弊社の「高品質でSEOに強いホームページを最速で始める」サービスまでお気軽にご相談ください。
