目次
目次
この文書は、Framerを学ぶ日本のユーザーが日本語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に有用な情報を追加しました。Framerを使用する皆さまに少しでもお役に立てれば幸いです。
ウェブサイトのレイアウトはどのように構成されるのでしょうか?
どんなに華やかなデザインや複雑なUIでも、構造をよく見てみれば最終的には四角形（rectangle）で成り立っています。Framerではこの四角形をフレームと呼び、ほとんどすべての要素がフレームを基に作られます。
今回の記事では、Framerにおける核心的な構成単位であるフレームが正確に何なのか、そして実際にどのように使用するのかを詳しく見ていきます。
フレームとは？
Framerでのフレームは、コンテンツを包む基本的なコンテナであり、構造や整列、レイアウトを構成する主要な単位です。フレームの中には他の要素を「含む」ことができ、これにより階層構造を作ることができます。
フレームを扱う際によく出会う用語があります。Figmaやウェブ開発の経験があれば馴染みがあるかもしれません。Framerでもこの階層構造を理解することがレイアウト設計の鍵であるため、混乱しないよう前もって学んでおくことが大切です。
ネスト: あるレイヤーがフレーム内に入っている状態
子: フレーム内にあるレイヤー
親: レイヤーを囲んでいるフレーム
兄弟: 同じ親フレームの下にあるレイヤーたち
フレームの役割
Framerにおけるフレームは、単に要素を「包む」だけではなく、多様な役割を担います。
要素をグループ化または整列する役割
自動でスタックまたはグリッド構造生成
柔軟なサイズ設定と位置指定
背景、影、枠などの視覚的スタイル指定
単に四角形描画用途にも利用
例えば、Insertパネルの「Feature section」では、以下のようにフレームが使用されます。
全体の領域 → 大きなフレーム
各Feature → 個別のフレーム
画像 → 画像フレーム
テキスト → テキストフレーム
ボタン → ボタンフレーム
このようにすべての構成要素がフレームで構成されていることを知ると、どんな構造でもフレーム単位で簡単に分析し理解できます。
フレームは目に見えないこともあります
あるフレームは視覚的にスタイルが適用された四角形のように見えますが、
あるフレームは完全に透明なコンテナであることもあります。
Note: フレームの枠線、背景色、影、変形など様々な効果は右側のプロパティパネルで指定できます。
フレームを作る方法
上部ツールバーのレイアウトメニューからフレームツールを選択
またはショートカットキーFキーを押してフレームツールに切り替え
キャンバスをクリックし、ドラッグして希望の位置にフレームを作成
Note: 初めはおおよその大きさで描いた後、右側のプロパティパネルで正確なサイズや位置を調整することが多いです。
ドラッグ中に使用できるショートキー
Shift → 正方形描画
Alt / Option → 中心から外方向へ描画
Space → ドラッグ中に位置移動
フレーム内に要素を入れる方法（ネスト）
あるレイヤーをフレーム内にドラッグ＆ドロップするだけで自動的に子要素になります。
フレームの周りに青いアウトラインが出れば成功です。
この機能は自動ネストと呼ばれます。
もしネストを避けたい場合はスペースバーを押しながらドラッグしてください。
既存の要素をフレームで囲む
すでに存在する複数の要素を一つのフレームで囲みたい時は次の手順で行います。
囲みたいレイヤーを選択
右クリック > 「Add Frame」を選択
またはCmd + Enter (Mac) / Ctrl + Enter (Windows)
選択した要素を含む新しい親フレームが生成されます。
逆に、フレームを削除して内部の子要素だけを残したい場合は?
Mac: Cmd + Delete
Windows: Ctrl + Delete
を押せばOKです。
まとめ
これまでに見てきた内容をまとめると以下の通りです。
Framerではほとんどすべてがフレームで成り立っています。
フレームはコンテンツを包む四角形であるだけでなく、スタイルと構造を両方担当する核心単位です。
階層構造（ネスト）と親子の概念を理解すると、複雑なレイアウトも簡単に設計できます。
この記事はFramer公式YouTubeの「Thinking in Frames (Fundamentals Lesson 4)」を参考に訳・脚色したコンテンツです。
