2026年10月15日

Figmaの使い方入門｜“Webサイト1ページを作りながら”基本操作を覚えるハンズオン

「Figmaを開いてみたものの、ボタンやパネルが多すぎて何から触ればいいのかわからない」「解説記事を読んで機能の名前は覚えたのに、いざ自分でデザインしようとすると手が止まる」。Figmaの使い方を独学で学ぼうとした方の多くが、こうした壁にぶつかります。

原因の多くは、機能を順番に覚えようとしていることにあります。Figmaの機能は非常に多く、すべてを覚えてから作り始めようとすると、いつまでたっても1枚のデザインが完成しません。

本記事では、機能を一覧で説明するのではなく、シンプルなWebサイト1ページ（ランディングページ）を実際に完成させる流れに沿って、その場面で必要な基本操作だけを解説します。フレーム、図形とテキスト、オートレイアウト、コンポーネント、共有と書き出しまで、読み終えるころには手元に1ページのデザインが残っていることをゴールにしたハンズオン形式です。

Figmaの使い方は「1ページ作りながら」覚えるのが近道｜完成形と準備

Figmaの使い方を最短で身につける方法は、完成させるWebページを1つ決めて、そのために必要な操作だけを順番に覚えていくことです。用語や機能を先に丸暗記するより、「この見た目を作るにはこの操作」という形で覚えたほうが、記憶に残りやすく、別のデザインを作るときにも再現しやすくなります。

なぜ機能を順番に覚えるとFigmaの使い方が身につかないのか

Figmaの右側にあるプロパティパネルには、位置、サイズ、塗り、線、エフェクト、レイアウトといった項目がずらりと並んでいます。上から順に意味を調べていくと、それだけで数時間が過ぎてしまいます。しかも使う場面をイメージできないまま覚えた機能は、実際の制作では思い出せないものです。

料理にたとえると、包丁の種類や火加減の理論をすべて学んでからでないと台所に立てない、という状態に近いでしょう。実際には、作りたい料理のレシピを1つ選び、手順どおりに作ってみるほうが、包丁の使い方も火加減も自然と身につきます。Figmaの使い方も同じで、作りたいものが先、機能はあとという順番が上達の近道です。

もう1つの理由は、Figmaの基本操作の多くが「Webページの構造」と結びついていることです。フレームはページの枠、オートレイアウトはボタンやカードの並び方、コンポーネントは使い回すパーツ、というように、Figmaの機能はWebサイトの部品と対応しています。だからこそ、Webページを作る過程で覚えると機能の意味がすっと腹落ちします。

このハンズオンで完成させるWebページ

今回は、小さなお店や事業の紹介に使える1ページ完結のランディングページ（LP）を題材にします。ここでは、地域で数店舗の洋菓子店を営む会社が、新しく始める焼き菓子のオンライン予約を知らせるページを、制作会社に頼まず自分たちで用意する場面を想定します。ページの構成は次の6つのブロックです。

上から順に、ロゴとメニューが並ぶヘッダー、キャッチコピーと写真で第一印象を決めるファーストビュー、お店のこだわりを3つ並べる特徴カード、商品と価格を紹介するメニュー・料金、予約へ誘導するCTA（行動喚起）エリア、そしてフッターです。シンプルですが、一般的なLPに必要な要素がひと通りそろっており、Figmaの基本操作をほぼすべて使う構成になっています。

図のように、各ブロックを作る過程で覚える操作が決まっています。ヘッダーとファーストビューではフレーム・図形・テキスト・画像、特徴カードではオートレイアウト、メニューやボタンではコンポーネント、最後にプロトタイプと共有・書き出しで仕上げます。この順番は、実際のWeb制作の現場でデザイナーが画面を組み立てる流れともほぼ同じです。

Figmaを使い始める前の準備

FigmaはWebブラウザで動くデザインツールなので、ソフトをインストールしなくても使い始められます。公式サイトからメールアドレスまたはGoogleアカウントでアカウントを作成すれば、すぐに編集画面を開けます。日常的に使うならデスクトップアプリ版も便利ですが、どちらで開いても同じデータにつながるため、まずはブラウザ版で十分です。

料金面では、無料のプランが用意されており、個人で1ページのデザインを練習する範囲なら費用をかけずに始められます。ただし、無料プランには作成できるファイル数やページ数、共同編集の範囲などに制限があり、条件は改定されることもあります。チームで本格的に使う段階になったら、最新の料金と制限を公式の料金ページで確認してから有料プランを検討しましょう。

なお、Figmaは日本語表示に対応しています。メニューが英語で表示される場合は、アカウント設定から言語を日本語に切り替えておくと、本記事の解説と画面を見比べやすくなります。準備として、ページに使う写真を2〜3枚とロゴ画像を手元に用意しておくと、ハンズオンがスムーズに進みます。手元に素材がない場合は、灰色の四角形を仮の写真として置いておけば問題ありません。

Figmaの基本操作の第一歩｜画面の見方とフレームでWebページの土台を作る

Figmaの基本操作で最初に覚えるべきなのは、画面の4つのエリアの役割と、Webページの土台になる「フレーム」の作り方です。この2つさえ押さえれば、あとはフレームの中に部品を足していくだけになります。

Figmaの画面は4つのエリアで構成されている

新しいデザインファイルを開くと、Figmaの画面は大きく4つのエリアに分かれています。中央の広い作業スペースがキャンバス、画面下部（以前のバージョンでは上部）に並ぶのがツールバー、左側がレイヤーパネル、右側がプロパティパネルです。

ツールバーには、移動ツール、フレームツール、図形ツール、ペンツール、テキストツールなど、「何を作るか」を選ぶ道具が並んでいます。左のレイヤーパネルには、キャンバスに置いた要素が階層構造のリストとして表示されます。右のプロパティパネルは、選択した要素の位置・サイズ・色・文字などを数値で調整する場所です。

Figmaの操作は、言ってしまえば「ツールバーで道具を選ぶ→キャンバスに置く→プロパティパネルで整える→レイヤーパネルで構造を確認する」の繰り返しです。最初はこの流れだけを意識しておけば、画面の情報量に圧倒されることはありません。

なお、ハンズオンを始める前に、ファイルブラウザ（ホーム画面）から新しいデザインファイルを作成し、ファイル名を「洋菓子店LP」のようにわかりやすく変更しておきましょう。ファイル名は画面上部の名前部分をクリックすれば変更できます。最初に名前をつけておくだけで、あとから複数のデザインを作ったときにも目的のファイルをすぐに見つけられます。

Figmaのフレームとは「Webページの画面そのもの」

Figmaのフレームとは、デザインを配置する枠のことで、Webページ作りではこれがブラウザに表示される1画面分の領域にあたります。ツールバーからフレームツールを選ぶ（ショートカットは「F」または「A」）と、右のプロパティパネルにデスクトップ、タブレット、スマートフォンなどの画面サイズのプリセットが表示されます。

今回はパソコン向けのページを作るので、デスクトップのプリセットから幅1440px程度のサイズを選びましょう。キャンバスに白い長方形が現れ、左上に「Desktop」などの名前が表示されれば、Webページの土台は完成です。LPは縦に長くなるので、あとからフレームの高さを伸ばしていくことになります。高さはプロパティパネルの「H」の数値を書き換えるか、フレームの下端をドラッグして調整できます。

ここで大切なのは、ページに置くすべての要素を必ずフレームの中に入れることです。フレームの外に置いた要素は、書き出しやプロトタイプの表示のときにページの一部として扱われません。レイヤーパネルで、要素がフレームの名前の下に一段下がって表示されていれば、正しくフレームの中に入っています。

レイアウトグリッドと画面操作で作業しやすくする

Webページのデザインでは、要素を配置する目安としてレイアウトグリッド（カラムグリッド）を引いておくと、左右の余白や要素の幅がそろいやすくなります。フレームを選択した状態でプロパティパネルからグリッドを追加し、種類を「列」にして、12列・左右の余白を数十px程度に設定するのが一般的な出発点です。メニュー上の表示名はバージョンによって異なる場合がありますが、フレームのプロパティにある「レイアウトグリッド」や「レイアウトガイド」の項目から設定できます。

あわせて覚えておきたいのが、キャンバスの移動と拡大縮小の操作です。スペースキーを押しながらドラッグすると画面を手のひらで動かすように移動でき、CtrlキーまたはCommandキーを押しながらマウスホイールを回すとズームできます。迷子になったら「Shift＋1」で全体表示、「Shift＋2」で選択中の要素に合わせた表示に戻れます。

この画面操作は地味に見えますが、作業スピードを大きく左右する基本操作です。細部を整えるときは拡大し、全体のバランスを見るときは縮小する。この行き来を素早くできるようになると、Figmaの使い方が一段階スムーズになります。

Figmaの基本操作｜図形・テキスト・画像でヘッダーとファーストビューを作る

土台のフレームができたら、いよいよ中身を作ります。ヘッダーとファーストビューは、図形・テキスト・画像という3つの基本要素の組み合わせでできています。この章で覚える操作が、Figmaの使い方の中心になります。

図形ツールでヘッダーの背景と区切りを作る

まずはヘッダーの背景を作ります。ツールバーから長方形ツール（ショートカット「R」）を選び、フレームの上端にドラッグして横幅いっぱい、高さ80px程度の長方形を描きます。数値で正確に合わせたいときは、プロパティパネルの「W（幅）」と「H（高さ）」に直接入力しましょう。

色を変えるには、プロパティパネルの「塗り」の色見本をクリックします。カラーピッカーが開くので、好みの色を選ぶか、「#FFFFFF」のようなカラーコードを直接入力します。Webページでは同じ色を何度も使うため、メインカラーやアクセントカラーをあらかじめ2〜3色に絞っておくと、ページ全体に統一感が出ます。

角を丸めたい場合は、プロパティパネルの角丸の数値を変更します。ボタンやカードでよく使う操作なので覚えておきましょう。また、要素を選択した状態でAltキー（MacはOptionキー）を押しながらマウスを他の要素に重ねると、要素同士の距離が数値で表示されます。余白をそろえるときに欠かせない操作です。

テキストツールでロゴ・メニュー・キャッチコピーを入れる

次に文字を入れます。テキストツール（ショートカット「T」）を選び、キャンバスをクリックすると文字を入力できます。ヘッダーにはお店の名前（ロゴ代わり）と、「こだわり」「メニュー」「ご予約」といったナビゲーションメニューを配置しましょう。

文字の見た目は、プロパティパネルの「テキスト」セクションで調整します。フォントの種類、太さ、サイズ、行間、文字間隔を設定できます。日本語のWebページなら、Googleフォントとして提供されているNoto Sans JPなどを選ぶと、ブラウザ版でもそのまま使えて表示も安定します。パソコンにインストールした独自フォントをブラウザ版で使う場合は、Figmaのフォントインストーラーが必要になる点に注意してください。

ファーストビューには、ページの主役となるキャッチコピーを大きく配置します。たとえば「焼きたてを、予約でお届け。」のような短い言葉を48px前後の太字で置き、その下に補足の説明文を16〜18px程度で添えます。見出しと本文の文字サイズに明確な差をつけることが、読みやすいWebデザインの基本です。

画像の配置とレイヤー名の整理

ファーストビューの写真は、手元の画像ファイルをキャンバスに直接ドラッグ＆ドロップするだけで配置できます。すでに描いた長方形の中に写真を入れたい場合は、長方形を選択して「塗り」の種類を「画像」に切り替え、ファイルを選びます。塗りの設定で「フィル」「フィット」「トリミング」などの表示方法を選べるので、枠に対して写真をどう収めるかを調整しましょう。

要素が増えてきたら、要素同士の整列も意識します。複数の要素を選択すると、プロパティパネルの上部に左揃え・中央揃え・右揃え・上下中央などの整列ボタンが表示されます。目分量で並べるのではなく整列機能を使うことで、ずれのない、プロらしい仕上がりになります。

最後に、ぜひ習慣にしてほしいのがレイヤー名の整理です。初期状態のレイヤーは「Rectangle 1」「Frame 2」のような名前になっています。レイヤーパネルで名前をダブルクリックし、「header」「fv-title」「fv-photo」のように何の要素かがわかる名前に変えておきましょう。自分が後で見直すときはもちろん、Web制作会社やコーダーにデータを渡すときにも作業効率が大きく変わります。小さな手間ですが、「伝わるデザインデータ」を作るための大切な基本操作です。

Figmaのオートレイアウトの使い方｜ボタンと特徴カードを崩れない作りにする

ファーストビューまで完成したら、次は特徴カードとボタンです。ここで登場するのが、Figmaの使い方の中でも最も重要で、最もつまずきやすい機能「オートレイアウト」です。オートレイアウトを使いこなせるかどうかで、デザインの修正しやすさが大きく変わります。

オートレイアウトとは「中身に合わせて自動で整列・伸縮する仕組み」

Figmaのオートレイアウトとは、フレームの中の要素を決まったルールで自動的に並べ、中身の量に合わせてフレームのサイズを伸び縮みさせる機能です。Webサイトを作るときのHTMLとCSSでいう、フレックスボックスに近い考え方だと思ってください。

たとえば、「予約する」という文字の入ったボタンを、長方形とテキストを重ねて作ったとします。あとで文字を「オンラインで予約する」に変えると、文字が長方形からはみ出してしまい、長方形の幅を手作業で直す必要があります。オートレイアウトを使ったボタンなら、文字を変えた瞬間にボタンの幅が自動で広がり、左右の余白も保たれたままです。

この「中身が変わっても崩れない」という性質は、実際のWebサイトの振る舞いとよく似ています。Webページでは、文章の量や画面の幅によって表示が変わるのが当たり前です。オートレイアウトでデザインしておくと、開発の段階で「デザインどおりに組めない」という食い違いが起こりにくくなるという利点もあります。

ボタンを作りながらオートレイアウトの基本設定を覚える

実際にボタンを作ってみましょう。テキストツールで「予約する」と入力し、そのテキストを選択した状態で「Shift＋A」を押します。これだけで、テキストを包むオートレイアウトのフレームが作られます。プロパティパネルには「オートレイアウト」のセクションが表示され、ここで並べ方のルールを設定します。

覚えるべき設定は4つです。1つ目は方向で、要素を横に並べるか縦に並べるかを選びます。2つ目は間隔（ギャップ）で、中の要素同士の距離を数値で指定します。3つ目はパディングで、フレームの内側の余白です。ボタンなら上下16px・左右32px程度にすると押しやすい見た目になります。4つ目は整列で、中の要素をフレームのどこに寄せるかを決めます。

あとはフレームの「塗り」にメインカラーを設定し、角丸を指定し、テキストの色を白にすればボタンの完成です。試しにテキストを長い文章に書き換えてみてください。ボタンが文字に合わせて自動で伸びれば成功です。この体験をすると、オートレイアウトの便利さが一気に実感できるはずです。

特徴カードを「入れ子のオートレイアウト」で組み立てる

次は、お店のこだわりを伝える特徴カードを3つ並べます。1枚のカードは、アイコン代わりの円、小見出し、説明文の3つで構成されています。この3つを選択して「Shift＋A」を押し、方向を縦、間隔を16px程度、パディングを24px程度に設定すると、1枚のカードができあがります。

カードを1枚作ったら、複製（ショートカット「Ctrl＋D」またはMacは「Command＋D」）で3枚に増やし、3枚をまとめて選択して再び「Shift＋A」を押します。今度は方向を横、間隔を24px程度に設定すれば、3枚のカードが等間隔に並びます。このようにオートレイアウトの中にオートレイアウトを入れる構造を「入れ子（ネスト）」と呼び、Webデザインのほとんどのレイアウトはこの組み合わせで表現できます。

ここで重要になるのが、サイズの設定です。オートレイアウトの幅と高さには、「固定」「コンテンツを内包（中身に合わせて伸縮）」「コンテナに合わせて拡大（親の幅いっぱいに広がる）」の3種類があります。3枚のカードの幅をそろえたいときは、各カードの幅を「コンテナに合わせて拡大」にすると、親フレームの幅を3等分するように自動で調整されます。説明文の長さが違ってもカードの高さをそろえたいときは、高さ側も同様に設定しましょう。

入れ子を作るときのコツは、いちばん小さなまとまりから順に作っていくことです。外側の枠から作り始めると、あとで中身をまとめ直す手間が発生しがちです。「テキストとアイコン→カード1枚→カード3枚の並び」という順に内側から組み立てると、オートレイアウトの使い方で迷うことがぐっと減ります。

Figmaのコンポーネントとスタイルの使い方｜同じパーツを効率よく使い回す

特徴カードまで作れたら、ページの後半です。メニュー・料金エリアやCTAエリアでは、同じボタンや同じ見た目のカードを何度も使います。ここで役立つのが、パーツを部品として登録して使い回す「コンポーネント」と、色や文字の設定を登録する「スタイル」です。

コンポーネントとは「元を直せば全部が直るパーツ」

Figmaのコンポーネントとは、繰り返し使うデザインのパーツを「元データ」として登録する機能です。登録した元データを「メインコンポーネント」、そこからコピーして使うものを「インスタンス」と呼びます。インスタンスは元データと連動しており、メインコンポーネントの色や形を変えると、ページ内のすべてのインスタンスに変更が反映されます。

たとえば、LPの中に「予約する」ボタンが4か所あるとします。普通にコピーしただけのボタンだと、ボタンの色を変えたくなったときに4か所すべてを手で直す必要があります。コンポーネントにしておけば、元のボタンを1か所直すだけで4か所すべてが一度に変わります。修正漏れも起こりません。

コンポーネントの作り方は簡単です。前の章で作ったオートレイアウトのボタンを選択し、ツールバー付近に表示されるコンポーネント作成ボタンを押すか、ショートカット「Ctrl＋Alt＋K」（Macは「Command＋Option＋K」）を押します。レイヤーパネルのアイコンがひし形が4つ並んだマークに変われば登録完了です。

インスタンスの使い方と上書きのルール

登録したボタンをページの別の場所で使うときは、メインコンポーネントをAltキー（MacはOptionキー）を押しながらドラッグして複製するか、左パネルのアセットから目的のコンポーネントをキャンバスにドラッグします。こうして配置したものがインスタンスです。

インスタンスは元データと連動しつつも、テキストの内容や一部の色などは個別に上書きできます。メニュー・料金エリアに置くボタンは「詳しく見る」、CTAエリアのボタンは「今すぐ予約する」というように、見た目のルールは共通のまま、文言だけを変える使い方が基本です。上書きした部分は、元データを変更しても上書きした内容が優先されて残ります。

メニュー・料金エリアの商品カードも、コンポーネント化に向いています。商品写真、商品名、価格、ボタンをオートレイアウトでまとめたカードを1つ作ってコンポーネントにし、インスタンスを3つ並べて商品名と価格だけを書き換えれば、統一感のあるメニュー一覧があっという間に完成します。ここで作ったカードとボタンがあれば、CTAエリアは見出しとボタンを中央に置くだけ、フッターはロゴとコピーライト表記を並べるだけで仕上がります。

なお、インスタンスとして配置した要素を、元データとの連動を切って自由に編集したい場合は、インスタンスの切り離しという操作があります。ただし切り離すと元データの修正が反映されなくなるため、むやみに切り離さず、まずは上書きで対応できないかを考えるのが、コンポーネントを上手に使うコツです。

カラースタイルとテキストスタイルでページ全体の統一感を保つ

コンポーネントが「パーツ」を使い回す仕組みだとすれば、スタイルは「色」や「文字設定」を使い回す仕組みです。たとえばメインカラーをカラースタイルとして登録しておけば、ボタンや見出し、アイコンなどに同じ色を一発で適用でき、あとから色を変えたくなったときもスタイルを1か所変えるだけで済みます。

同様に、「見出し大：48px・太字」「本文：16px・標準」といった文字の設定をテキストスタイルとして登録しておくと、ページ内のどの見出しも同じ見た目になります。小規模事業者が自分でLPを作る場合、ありがちなのが見出しごとに文字サイズが微妙に違うという状態です。スタイルを使えば、こうした小さなばらつきを防ぎ、プロが作ったような整った印象に近づけられます。

最近のFigmaには、色や余白の数値をより柔軟に管理できるバリアブル（変数）という仕組みもあります。ダークモード対応や複数ブランドの管理などで威力を発揮しますが、最初の1ページを作る段階ではカラースタイルとテキストスタイルで十分です。まずはスタイルで「ルールを登録して使い回す」感覚をつかむことを優先しましょう。

Figmaの操作方法を仕上げる｜プロトタイプ・共有・書き出しでWebページを完成させる

6つのブロックがそろったら、デザインとしてはほぼ完成です。最後に、実際のWebサイトのように動きを確認し、他の人に見せ、必要な素材を書き出すところまで進めましょう。ここまでできて、Figmaの使い方をひと通り体験したことになります。

プロトタイプでナビゲーションのクリック動作を確認する

Figmaのプロトタイプ機能を使うと、デザインに「クリックしたらどうなるか」という動きを設定し、本物のWebサイトのように操作を試せます。プロパティパネル上部のタブを「プロトタイプ」に切り替えると、選択した要素の右端に小さな丸いハンドルが表示されます。

たとえばヘッダーのメニュー「ご予約」を選択し、ハンドルをCTAエリアのフレームまでドラッグしてつなぎます。表示される設定で、トリガーを「クリック時」、アクションを「スクロール先」にすると、メニューをクリックしたときにページ内のCTAエリアまで移動する動きを再現できます。LPでよく使われるページ内リンクの動きを、コードを書かずに確認できるわけです。

設定ができたら、画面右上の再生ボタン（プレゼンテーション）を押すと、デザインが実際のWebページのように表示されます。スクロールしたりメニューを押したりしながら、文字の大きさや余白の感覚、ボタンの押しやすさを確かめましょう。編集画面で見ているときには気づかなかった違和感が、この段階で見つかることはよくあります。うまくスクロールしない場合は、フレームのオーバーフロー（スクロール動作）の設定が縦方向になっているかを確認しましょう。

共有リンクとコメントでフィードバックをもらう

Figmaの大きな魅力は、URLひとつで他の人にデザインを見せられることです。画面右上の「共有」ボタンを押し、リンクの権限を「閲覧可能」にしてコピーすれば、相手はFigmaのアカウントを作るだけで、ブラウザから最新のデザインを確認できます。デザインデータを画像やPDFに変換してメールで送る必要はありません。

確認する側は、ツールバーのコメントツール（ショートカット「C」）を使って、デザイン上の気になる場所にピンを立ててコメントを残せます。「この写真をもう少し明るくしたい」「価格の文字をもっと大きく」といった指摘がデザインの該当箇所にひもづいて残るため、言葉だけのやり取りより誤解が生まれにくくなります。

先ほどの洋菓子店の例でいえば、完成したLPのデザインを各店舗の店長や販売スタッフに確認してもらう場面です。共有リンクを社内チャットに貼るだけで、各自が空き時間にスマートフォンやパソコンから確認してコメントを残せます。全員がつねに同じ最新版を見ているので、「どのファイルが最新かわからない」という混乱も起こりません。

書き出しの方法とWeb制作会社への受け渡し

デザインの一部を画像として使いたい場合は、書き出し（エクスポート）機能を使います。書き出したい要素やフレームを選択し、プロパティパネルの一番下にある「エクスポート」の「＋」を押すと、PNG・JPGは倍率（1倍・2倍など）を選んで書き出せ、図形やロゴはベクター形式のSVG・PDFでも書き出せます。SNSで告知するためのバナー画像や、資料に貼るためのページ全体の画像などは、この操作ですぐに用意できます。

ただし、ここで1つ押さえておきたいことがあります。Figmaで作ったデザインは、それだけではWebサイトとして公開されるわけではありません。実際にインターネット上で動くWebページにするには、デザインをもとにHTMLやCSSでコーディングする工程や、サーバーへの公開作業が必要です。近年はFigmaのデザインをそのままWebサイトとして公開できる機能も登場していますが、公開には有料プランが必要になるなど条件があり、集客や更新のしやすさまで考えた本格的なサイトでは、開発の工程を別途設けるのが一般的です。

そのため、自作したデザインをもとにWeb制作会社へサイト制作を相談するケースも増えています。その際、レイヤー名が整理され、オートレイアウトとコンポーネントで組まれたデータは、受け取る側にとって非常に扱いやすいものです。開発者はFigmaのデータから色・余白・フォントサイズなどの数値を直接確認できるため、「イメージしていたものと違う」という食い違いを減らすことにもつながります。

Figmaの使い方でつまずきやすいポイントと次のステップ

ここまでのハンズオンで、1ページのWebページを作るために必要なFigmaの基本操作はひと通り体験できました。最後に、初心者がつまずきやすいポイントとその対処法、そして次に挑戦したいステップを整理しておきます。

フレームとグループの違いでつまずかない

初心者が最初に混乱しやすいのが、フレームとグループの違いです。どちらも複数の要素をひとまとめにする機能ですが、グループ（ショートカット「Ctrl＋G」、Macは「Command＋G」）は単に要素を束ねるだけのまとまりで、自分自身のサイズや塗りは持ちません。一方、フレームはそれ自体が枠としてのサイズや背景色、角丸を持ち、オートレイアウトも設定できるまとまりです。

Webページのデザインでは、基本的にはフレームでまとめると覚えておけば問題ありません。ヘッダー、ファーストビュー、特徴カードなど、ページの各ブロックをフレームとして作っておくと、背景色をつけたり、オートレイアウトで中身を整列させたりといった調整がしやすくなります。すでにグループでまとめてしまった要素も、選択してフレームに変換したり、オートレイアウトを設定したりすれば、フレームとして扱えるようになります。

オートレイアウトがうまく効かないときの確認ポイント

オートレイアウトを設定したのに思いどおりに並ばない、というのもよくある悩みです。その多くは、サイズの設定が原因です。中身の要素が「固定」の幅のままになっていて親フレームに合わせて広がらない、あるいは親フレームが「コンテンツを内包」になっていて子の「コンテナに合わせて拡大」が効かない、といったケースです。親と子のサイズ設定の組み合わせを1つずつ確認してみましょう。

また、要素の上下の重なり順や並び順が意図と違う場合は、レイヤーパネルでの並び順を確認します。オートレイアウトの中では、レイヤーパネルの並び順がそのまま表示の並び順になります。並び替えたいときは、レイヤーパネル上でドラッグするか、キャンバス上の要素を直接ドラッグして入れ替えます。

フォント関連のトラブルも定番です。他の人から受け取ったファイルで文字が別のフォントに置き換わって表示される場合は、そのフォントが自分の環境にないことが原因です。Googleフォントのように誰でも使えるフォントを選んでおくと、共有時のトラブルを避けやすくなります。

スマートフォン版と次に覚えたい機能

1ページを完成させたら、次はぜひスマートフォン版のデザインに挑戦してみてください。新しいフレームをスマートフォンのプリセットサイズで作り、パソコン版で作ったコンポーネントやスタイルを使い回しながら、特徴カードを横並びから縦並びに変えるだけでも、オートレイアウトの理解が深まります。現在のWebサイトはスマートフォンからの閲覧が多いことを考えると、両方のデザインを用意できると実務にぐっと近づきます。

さらに先のステップとしては、ボタンの通常時・ホバー時といった状態を切り替えられるバリアント、アイコンや画像素材の配置を効率化するプラグイン、デザイン案の作成や文言の生成を支援するAI機能などがあります。Figmaは機能の追加が非常に活発なツールなので、基本操作を身につけたうえで新機能を少しずつ取り入れていくのがおすすめです。

ただし、Figmaの操作に慣れることと、成果につながるWebサイトを作ることは別の話です。どんな情報をどの順番で見せれば問い合わせや予約につながるのか、スマートフォンでの見やすさや表示速度、検索エンジンへの対策をどうするか。こうした設計まで含めて考えると、自分で作るのはLPの叩き台までにして、本番のサイトはWeb制作会社と一緒に作り上げるという選択も現実的です。自作したFigmaのデザインがあれば、要望を具体的に伝えられるため、打ち合わせもスムーズに進みます。

【繰り返し作業を自作プラグインで解消した、デザイナー発の自社実践例】

クライマークスの制作現場でも、基本操作の先にある効率化に取り組んでいます。きっかけは、Illustratorや素材サイトから取り込んだデータのサイズがバラバラで扱いづらいという、日々の小さな困りごとでした。毎回手作業で行っていた整形作業に対し、社内のデザイナーがFigmaのプラグインを自作。オブジェクトを一括でフレーム化し、最大サイズを自動で検出して指定サイズにリサイズし、コンポーネント化するまでの一連の処理を、数クリックで完了できるようにしました。

作り方の流れは、やりたい処理を日本語で整理し、生成AIにコードを生成させ、実際に動かして確認し、足りない部分を追加で指示するというものです。選択中のオブジェクト数を画面に表示する、縦横比を保ったままリサイズできるようにするといった要望を対話しながら積み重ね、一度で完成させようとせず徐々に完成度を上げていきました。プログラミングの専門知識がなくても始められる点が、この方法の利点です。

小さな自動化でも、実装の手間が減れば試す回数が増え、改善のスピードも上がります。そして個人の工夫がノウハウとしてチームに共有され、やがてチームの標準的なやり方になっていきます。基本操作に慣れてきたら、毎回繰り返している作業を見つけてプラグインや自動化で軽くしていくことが、Figmaを長く快適に使いこなすための次の一歩と考えます。

まとめ｜Figmaの使い方は1ページ完成させる体験から始めよう

Figmaの使い方は、機能を順番に覚えるよりも、Webサイト1ページを実際に作りながら必要な操作だけを覚えるほうが確実に身につきます。フレームでページの土台を作り、図形・テキスト・画像でヘッダーとファーストビューを組み、オートレイアウトで崩れないボタンとカードを作る。コンポーネントとスタイルでパーツを使い回し、プロトタイプ・共有・書き出しで仕上げる。この流れを一度体験すれば、別のデザインにも応用できます。

Figmaはブラウザと無料プランですぐに始められるため、「今日1ページ作ってみる」こと自体が最大の学習になります。作ったデザインを本格的なWebサイトとして公開し、集客や問い合わせにつなげることにご不安があれば、クライマークスにお気軽にご相談ください。お手元のFigmaデザインや構想をもとに、目的に合ったWebサイトの設計から制作までご提案します。