WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

Figmaを使い始めると、「フレーム」と「セクション」という似たような機能が出てきます。

使っていくうちにわかる…というのが私の正直な見解ですが、初心者にこそうまく伝えられることができたら理解はもっと早くなるかもという期待を込めて記事にしてみました。

最初に挫折するポイントとして名高いこの2つ。実はどちらも何かを囲むための機能ですが、役割はまったく違うという理解の難しさから、初心者に与えられた登竜門のような存在です。これが理解できると一気にできることが増えるためトライしていただきたいものでもあります。

先に2つの違いをお伝えしますと、フレームは「デザインを作る枠」、セクションは「デザインを整理する区切り」になります。これをわかりやすく学校に例えると、フレームは「勉強するための机」、セクションは「机が並んで切る教室」といったイメージです。

本記事では、
・フレームとは何か
・セクションとは何か
・初心者はどちらを覚えればいい？

について、初心者向けにわかりやすく紹介します。なお、今回の記事は操作方法ではなく、「役割の違い」にフォーカスした記事になります。

それではどうぞ。

フレームとは？

デザインを作るための「枠」

フレームは、文字や画像、図形などを配置してデザインを作るための場所です。

学校で例えると「机」のようなものです。机の上でノートを広げたり教科書を置いたりするように、Figmaではフレームの中でデザインを作っていきます。

フレームでできること

文字や画像を置いてデザインを作れる

フレームの中には、文字や画像、図形などを自由に配置できます。Webサイトやバナーを作るときは、まず作りたいサイズのフレームを用意し、その中に文字や画像を配置しながらデザインを作っていきます。

ホームページ制作では、トップページやお問い合わせページなど、ページごとに1つのフレームを作るのが一般的です。

デザイン全体をまとめて管理できる

フレームの中に配置した文字や画像は、ひとつのデザインとしてまとめて扱えます。

例えばホームページ制作では、ページごとにフレームを分けて作成するため、作業スペースの中でページを並べたり順番を入れ替えたり、別のファイルへコピーしたりと、整理しながら作業できます。

あとから修正や編集がしやすい

フレームは、デザインを作って終わりではなく、あとから修正しやすいのも特徴です。
文字や画像を追加・変更したり、デザイン全体のサイズを変更したりしても管理しやすく、Webデザインの制作に向いています。

また、Auto Layout（オートレイアウト）を設定すると、文字数が増えたり減ったりしても余白や並びを自動で調整できます。この便利な機能については、別の記事で詳しく紹介します。

セクションとは？

デザインを整理するための「区切り」

セクションは、増えてきたデザインを整理するための機能です。
学校で例えると「教室」です。
教室の中に机が並ぶように、セクションの中には複数のフレームをまとめることができます。

セクションを使うと、フレームで作成した各ページを1まとめにできます。ページの種類ごとにまとめて管理ができるので便利です。色を付けたり名前も変更できるので、ページ数が多いホームページほど活躍する機能と言えます。

セクションでできること

複数のフレームをまとめられる

セクションは、複数のフレームをひとつのグループとしてまとめられます。例えば、製品を紹介するページがA,B,Cなど、関連するデザインをひとつのまとまりとして整理できます。

ページや案件ごとに整理できる

ホームページ制作なら「○○株式会社」、バナー制作なら「春のキャンペーン」など、用途や案件ごとにセクションを分けておくと、作業スペースが見やすくなります。

名前を付けて管理できる

セクションには自由に名前を付けられます。「TOPページ」「デザイン案A」「修正版」など、分かりやすい名前を付けておくことで、目的のデザインをすぐに見つけられます。

デザインが増えても見つけやすくなる

デザインを作っていると、フレームはどんどん増えていきます。セクションで整理しておけば、作業スペースが散らかりにくくなり、必要なデザインを探す時間も短くなります。

初心者はどちらを覚えればいい？

Figmaを始めたばかりなら、まず覚えたいのはフレームです。デザインはすべてフレームの中で作ります。一方、セクションはデザインが増えてから使う整理機能なので、最初から使いこなそうとしなくても問題ありません。

まとめ

いかがだったでしょうか。

Figmaを使っていくと必ず関わる「フレーム」はこのアプリケーションの最大の特長であり顔のようなものです。情報を枠（フレーム）で囲いその枠に数値の設定や色や形を装飾して、それをさらに大きい枠（フレーム）で囲い、中に納まっている幾つかの小さなフレームを20pxの幅で左右に並ぶように設定していくと言ったイメージです。

セクションはフレームはもちろん画像もテキストもいろいろまとめておく場所になります。
この違いを理解しておくと、Figmaの画面がぐっと分かりやすくなるかと思います。

この記事がFigmaの「フレーム」と「セクション」の違いの理解に役にたてていただければと思います。