1. TOP
  2. お役立ち情報
  3. はじめてのFigmaまずは知っておきたい使い方オートレイアウトとフレーム編

はじめてのFigma
まずは知っておきたい使い方
オートレイアウトとフレーム編

投稿日
2024.09.12
更新日
2024.10.09
はじめてのFigmaまずは知っておきたい使い方オートレイアウトとフレーム編

こんにちは! Shinobuです。

普段はグラフィックデザイナーや講師として、大阪を中心に活動をしています。

Figmaを使い始めた人にとって、使い方がいまいちわからないのが「オートレイアウト」「フレーム」ではないでしょうか。
使い慣れてくると、とーってもありがたい機能ではありますが、まず理解するのにひと苦労。

今回は、Figmaを使い始めた・習い始めた方に向けて、オートレイアウトやフレームの便利な使い方についてお話していこうと思います。

オートレイアウトを使ってナビゲーションをつくろう!

新しいソフトの使い始めで悩むのは、「いつ使うの?」ということではないでしょうか。
今回は実践で使えるように、サイトを部分的に作りながら解説していきますね。

それでは早速ですが、Webサイトのナビゲーションを作りましょう。

今から作るのは、Winスクールのカリキュラム「ホームページ制作基礎編」で制作する「和食処 本多屋」のサイトのナビゲーションです。

(1)まずは「当店について」と、入力しましょう。

フォント:Noto Serif JP フォントサイズ:15px カラー:#2e4551

(2)「当店について」をコピーしましょう。「当店について」が2つになりましたね。

(3)2つの「当店について」を選択し、オートレイアウトにします。
オートレイアウトにするには、デザインパネルから「オートレイアウト」の「+」を押すか、
【Shiftキー+Aキー】で適用することができます。

(4)右側の「当店について」をクリックして選択します(どちらでも問題ありませんが、ここではわかりやすいように右側を選択しています)。
【Ctrlキー+Dキー】を押すと、コピーすることができます。
2回押して、全部で4つになるように増やしましょう。

★Point!!

オートレイアウトにすると、オートレイアウトの範囲内にどんどんコピーしたコンテンツが配置されます。オートレイアウトせずに【Ctrlキー+Dキー】でコピーをすると、同じ場所にどんどんコピー&配置されますが、オートレイアウトにすると、指定した向き(ここでは横向き)にコピー&配置されるのですね。

(5)文字を編集しましょう。左から、次のようになります。
当店について
お品書き
営業時間・アクセス
ご予約・お問い合わせ

★Point!!
入力中に注目したいのが、文字の長さに合わせてフレームが伸縮してくれること。
オートレイアウトにすると、テキストボックス同士の余白を保つようにレイアウトを自動調整してくれます。
結果、フレーム自体の長さが文字の長さに合わせて伸縮してくれるのですね。便利!

(6)最後に、コンテンツ同士の余白を取りましょう。
ここでは、それぞれのコンテンツ同士の間に50pxのマージンを設定しています。
オートレイアウトになったフレームを選択します。
クリックでうまく選択できない場合は、レイヤーパネルから確実に選択しましょう。

(7)デザインパネルのオートレイアウトの部分から設定をします。
「アイテムの左右の間隔」に「50」と入力をします。

これで、ナビゲーション部分の完成です!

オートレイアウトとしてまとめた領域内でコンテンツを増やしたり減らしたりすると、コンテンツ同士の間隔(マージン)を保ちながら、全体の幅が伸縮してくれることがわかりました。

デザインの業務でコンテンツ同士の間隔調整は、地味に時間と手間を要する作業…。
それを華麗に解決してくれたオートレイアウト様は、私がFigmaで一番好きな機能です!

さらにオートレイアウトで並びを変えてみよう!

次に、ハンバーガーメニューになった場合のナビゲーションを作ってみましょう。
完成は、以下のようになります。

(1)まずは、ナビゲーションを縦に並べます。
オートレイアウトのフレームを選択した後、
デザインパネルのオートレイアウトから、「↓」アイコンをクリックします。

★Point!!
オートレイアウトにしておけば、たったこれだけで並び替えすることができます。

(2)ここからは、微調整です。
オートレイアウトのフレームの幅が大きすぎるので、確認しましょう。
デザインパネルを見ると、横幅が「固定」高さは「内包」と書いてあります。
「固定」になっていると、「W」のサイズを保とうとしてくれます。
一方で「内包」は、コンテンツの大きさに合わせて伸縮してくれる設定です。
ここでは横幅が「250px」と決まっているので、幅を「250」に変更しましょう。

(3)さらに、中央に揃えたいのでオートレイアウトから「中央揃え」を選択。
コンテンツ同士の余白が空きすぎているので、「8」に変更しておきましょう。

これで、完成です!

オートレイアウトにしておくと、縦並び・横並びの切り替えがすばやくできます。
また、微調整も少しの労力で終わるため、非常に便利ですね!

以上が、Figmaを使い始めた方にまずは知っておいてほしいオートレイアウトの機能紹介でした!

フレームっていつ使うの?

Figmaを使い始めた人にとって悩ましい存在なのが「フレーム」
Illustratorのアートボードのように使っている人も多いのではないでしょうか。

実は、フレームの役割はそれだけではありません。

では、今度はサイトのヘッダー部分を作ってみましょう。

フレームを使ってヘッダー部分を作ろう!

今から作るのは、前半のオートレイアウトの解説でも作った「和食処 本多屋」のヘッダー部分です。

(1)まずは、サイトの幅を決めましょう。
ツールパネルからフレームを選択します。
デザインパネルから、デスクトップ>デスクトップを、クリックしましょう。

★Point!!
アートボードを作るようなイメージでまずはフレームを作りました。

(2)今度はヘッダー部分全体を囲むフレームを作ります。
フレームツールで画面上をドラッグし、幅は先ほど作ったデスクトップの幅と同じもの(1440px)、高さを100pxに設定します。
レイヤーパネルで、フレームの名前を「header」に変更しておくと、管理がしやすくなります。

★Point!!
headerという大きなタグを使用する際に、フレームを使いました。

(3)ロゴが入る領域を作りましょう。練習なので、ロゴではなく、ここではグレーの四角を作っておきます。
ツールパネルの長方形ツールで、80×80pxの四角を描きます。

★Point!!
この時、headerのフレーム内でドラッグしないと、構造的にheaderの中に四角が入りません。
今は「headerの中のロゴ」を表現したいので、なるべくheaderのフレーム内でドラッグして四角を作ります。
できなかった場合は、四角を描画後にレイヤーパネルからheaderのフレーム内に「Rectangle」を入れてあげれば問題ありません。Headerより、少し下がって「Rectangle」と表示してあればOKです。
また、「Rectangle」は、わかりやすいようにレイヤーパネルで「ロゴ」と名前を付けなおします。

(4)ここで、前半で作ったナビゲーションを使いましょう。
ナビゲーションのオートレイアウトしたものを、レイヤーパネルで「ナビゲーション」と命名しました。
レイヤーパネルで、ロゴの下にドラッグして配置します。

(5)ロゴとナビゲーションを選択します。
これらにオートレイアウトを設定しましょう。
ロゴとナビゲーションが、きれいに横に並んでくれます。

(6)ロゴとナビゲーションの幅は、設計上あらかじめ決めてあります。
ロゴとナビゲーションのオートレイアウトの部分を、レイヤーパネルで「ロゴとナビ」と名前を付けなおします。
「ロゴとナビ」の横幅を決めた数値に設定したいので、デザインパネルのフレームの幅の「内包」を「固定」に変更します。
横幅を「1024」にしましょう。

(7)1024pxに決めた幅の中で、左側にロゴ、右側にナビゲーションを均等に配置します。
デザインパネルのオートレイアウト「アイテムの左右の間隔」を「自動」に変更します。

(8)ロゴとナビの領域を、headerに対して中央に揃えます。
「ロゴとナビ」を選択し、デザインパネルの整列から「水平方向の中央揃え」と「垂直方向の中央揃え」をクリックします。

ヘッダー部分の完成です!

フレームのまとめ

注目してほしい点は、フレームの中にフレームを作ったことです。
今回は、一番外側に「Desctop-1」という、横幅1440pxのフレームをはじめに作りました。
この中にヘッダーの領域として、さらにフレームで横幅1440×100pxのフレームを作りました。
この中に、ロゴとナビゲーションをレイアウトしたわけです。

コードを意識したレイアウトをFigmaで行っていくわけですが、基本は親要素となる部分をフレームにしていきます。
header、section、footerやdivなどですね。

ということは本来、navタグにあたる「ナビゲーション」の部分もフレームで作った方が良いのですが、結局はオートレイアウトを設定していますので、結果は同じ。先にフレームを作ってからオートレイアウトにしても、オブジェクトを複数選択してからオートレイアウトにしても一緒ということです。

また、改めてレイヤーパネルで構造を確認してみてください。

Desktopの中にheaderフレームが入っていて、その中に「ロゴとナビ」オートレイアウトが入り、その中にロゴ、ナビゲーションのオートレイアウトは入っていますか?

フレームから飛び出してしまったりすると、jpgデータなどで書き出しをする際や、プロトタイプでプレビューする際に表示されません。
そういったことも意識しながらフレームを作っていくと良いと思います。

たくさん、いろいろなものを作ってみてくださいね!

関連記事