Web制作で知っておくべきFigmaの学習 #Day25「Figma学習の総まとめ」

今回のシリーズ、全25回にわたって、 Figmaの基本操作からデザインシステム、プロトタイプまで学んできました。 最初はCanvasやFrame、レイヤーといった基本的な概念から始まり、 Auto Layout、Component、Variablesなど、実際のUI制作に欠かせない機能を順番に扱ってきました。 後半では、PrototypeやFigJamを使い、画面を作るだけでなく、 情報を整理し、ユーザーの操作を考え、体験として設計するところまで進みました。 ここまで学んだ内容は、それぞれ独立した機能ではありません。 実際の制作では、 目的を整理し、 必要な情報を構造化し、 画面に落とし込み、 共通するパーツを管理し、 操作の流れを検証する、 という一連の工程の中で使います。 最終回となる今回は、これまでの内容をひとつの制作課題にまとめます。 今回の目的は、Figmaの操作をすべて覚えているかを確認することではありません。 何を作るべきかを考え、適切な機能を選び、完成したものを検証できるようになることです。

Figmaでの制作工程を振り返る

まず、これまで学んできた内容を制作工程に沿って整理します。

制作工程	学習内容	主な機能・考え方
制作環境を理解する	Day01〜05	Page Section Layer Frame Text Shape
画面を整える	Day06〜10	Alignment Spacing Grid Constraints Auto Layout
共通パーツを管理する	Day11〜16	Component Instance Variants Properties、Variables
操作を設計する	Day17〜20	Prototype Overlay Animation State FigJam
企画から画面へ落とし込む	Day21〜23	目的 情報設計 UI Design
操作体験を検証する	Day24	Prototype Experience
全体を評価する	Day25	Review

この流れを見ると、Figmaは単に画面を描くためのツールではないことがわかります。 制作の前段階では、情報を整理して設計するために使い、 制作中は、レイアウトや共通パーツを管理するために使い、 完成後は、操作を再現して問題点を見つけるために使います。 それぞれの機能を単独で覚えるよりも、どの工程で何のために使うのかを理解しておくことが重要です。

総合実習の制作課題を決める

今回は、これまでの学習内容を使って、企業のWebサイトを制作します。 課題は、問い合わせを増やすことを目的とした小規模な企業サイトです。

制作課題

目的：企業のサービスを理解してもらい、お問い合わせにつなげる 想定するサイトの構成は次のとおりです。

ページ	役割
Home	企業・サービスの概要を伝える
Service	提供しているサービスを詳しく説明する
About	企業の考え方や基本情報を伝える
Contact	問い合わせを受け付ける
Complete	問い合わせ完了を伝える

すべてのページを細部まで作り込む必要はありません。 今回は、 HomeとContactを中心に制作し、 その他のページは情報構造と画面の方向性を整理するところまで進めます。

制作前に目的を整理する

Figmaを開く前に、まず制作の目的を文章にします。

- 誰に見てもらうサイトなのか - 訪問者に何を理解してもらいたいのか - 最終的にどのような行動をしてほしいのか - その行動を妨げる要因は何か

今回の課題では、 企業のサービスを検討している人が訪問し、 サービス内容を理解したうえで問い合わせることを目指します。 この段階で目的が曖昧だと、見た目を整えることが制作の中心になってしまいます。 デザインを始める前に、何を達成するための画面なのかを決めておきましょう。

情報設計を行う

次に、サイトに必要な情報を整理します。 以前学習した、Information Architecture（情報設計）を使い、 ページごとの役割と情報の関係を決めます。

手順1：情報を分類する

まず、サイトに掲載する情報を洗い出します。

情報	掲載するページ
企業の概要	Home、About
サービスの特徴	HHome、Service
サービスの詳細	HService
会社の考え方	HAbout
問い合わせへの案内	HHome、Service
問い合わせフォーム	HContact
受付完了の案内	HComplete

情報を分類すると、同じ内容をどのページにも重複して掲載する必要がないことや、複数のページから問い合わせへ誘導する必要があることが見えてきます。

手順2：サイト構造を作る

FigJamを開き、ページの関係を整理します。

Home ├── Service ├── About └── Contact └── Complete

この構造を基準に、グローバルナビゲーションやページ内のリンクを検討します。 Homeから各ページへ移動できること、 Serviceの説明を読んだ人がContactへ進めることなど、 ユーザーが目的を達成するための経路を考えます。

手順3：ユーザーの行動を整理する

今回のサイトでは、次の流れを基本にします。

1. Homeで企業やサービスを知る 2. Serviceで内容を詳しく確認する 3. サービスに興味を持つ 4. Contactで必要事項を入力する 5. Completeで受付完了を確認する

情報設計では、ページの一覧を作るだけでなく、ユーザーがどのような順番で情報に触れるのかも考えます。

UIデザインを作成する

情報設計ができたら、Figma Designで画面を制作します。

手順1：PageとFrameを整理する

新しいFigmaファイルを作成し、Pageを次のように分けます。

01_Design：Webサイトの画面 02_Design System：色、文字、コンポーネント 03_Prototype：必要に応じて検証用の画面やフロー

Pageは制作内容を大きく分ける単位。 Frameは各画面や部品を配置するための領域。 この役割を混同しないようにしましょう。 01_Design にHome、Service、About、Contact、CompleteのFrameを作成します。

手順2：Homeのレイアウトを作る

Homeでは、情報の優先順位を意識して配置します。 基本的な構成は次のとおりです。

Header：ロゴとナビゲーション Hero：企業やサービスの主要メッセージ Service：サービスの概要 About：企業の特徴や考え方 Contact：問い合わせへの誘導 Footer：補足情報や関連リンク

最初にすべての装飾を作り込む必要はありません。 Frameとテキスト、図形を使って情報の配置を決め、画面全体のバランスを確認します。 この段階では、色や影よりも、情報の優先順位と読み進める順番を重視します。

手順3：Auto Layoutで構造を整える

Day09、Day10で学んだAuto Layoutを使い、画面の構造を整理します。 次のような階層を意識します。

Home Frame ├── Header Frame │ ├── Logo │ └── Navigation ├── Hero Frame │ ├── Heading │ ├── Description │ └── Button ├── Service Frame │ ├── Section Heading │ └── Service Cards └── Contact Frame ├── Heading └── Button

親となるFrameの中に、関連する要素をまとめたFrameを配置します。 Auto Layoutを適用するときは、どのFrameを選択しているかを確認してください。 子要素ではなく、まとめたい要素を含む親Frameに適用することが基本です。 余白、要素間の間隔、配置方向を設定し、コンテンツが増減しても構造が崩れにくい画面にします。

手順4：ConstraintsとGridを確認する

画面のサイズが変わったときに、要素がどのように振る舞うかを確認します。 Constraintsでは、親Frameに対して子要素をどの位置に維持するかを設定します。 Gridでは、コンテンツの幅や列の構成を整理し、画面全体の配置に一貫性を持たせます。 すべての要素に複雑な設定をする必要はありません。 画面の幅が変わったときに、位置やサイズを維持したい要素に適切な設定を行います。

ComponentとVariablesで共通ルールを作る

画面の基本構造ができたら、複数のページで使う要素を共通化します。

手順1：共通パーツをComponentにする

今回のサイトでは、次の要素を共通パーツとして管理します。

Header Footer Primary Button Secondary Button Service Card Navigation Item

共通化する要素を選択し、Componentを作成します。 作成したComponentはAssetsから各画面へ配置します。 配置されたものはInstanceとなり、Main Componentの変更を反映できます。 共通パーツを使うことで、ページごとに同じデザインを作り直す必要がなくなります。

手順2：Variantsを使って状態を管理する

ボタンには、通常状態と無効状態など、複数の状態が必要になることがあります。 Variantsを使い、状態ごとのデザインをまとめて管理します。 ボタンの状態を切り替えられるようにしておけば、ページごとに別のボタンを作る必要がありません。

手順3：Component Propertiesを設定する

ボタンのラベルやアイコンの表示など、Instanceごとに変更したい部分をPropertyとして公開します。 Text Propertyでラベルを変更できるようにし、 Boolean Propertyでアイコンの表示・非表示を切り替えられるようにします。 これにより、共通の構造を維持しながら、用途に応じた変更が可能になります。

手順4：Variablesでデザインルールを管理する

色や数値など、複数の画面で共通して使う値をVariablesにまとめます。 今回の制作では、次のようなルールを用意します。

用途	Variable名の例
メインカラー	color/primary
背景色	color/background
本文色	color/text
小さな余白	spacing/small
標準余白	spacing/medium
大きな余白	spacing/large

Variablesを使うと、共通の値を一元管理できます。 サイト全体のメインカラーを変更したい場合も、 個別の画面をひとつずつ修正するのではなく、 参照しているVariableを変更することで対応できます。

Prototypeで操作の流れを作る

画面と共通パーツができたら、Day24で学んだPrototypeを使って操作を設定します。 今回の制作では、次の流れを作ります。

Home ↓ Serviceを確認 Service ↓ Contactボタン Contact ↓ 送信ボタン Complete ↓ Homeへ戻る Home

手順1：画面を接続する

各画面のボタンやナビゲーションを選択し、Prototypeタブから接続先を設定します。 画面遷移には 次へ進む（Navigate to） を使います。

手順2：操作に応じた状態を設定する

必要に応じてVariantsやOverlayを使い、ボタンの状態やメニューの表示を再現します。 画面を移動するだけではなく、ユーザーの操作に対して適切な反応があるかを確認します。

手順3：プロトタイプを再生する

再生ボタンからプレビューを開き、HomeからContact、Completeまで実際に操作します。 画面が正しくつながっていることだけでなく、操作する場所がわかりやすいか、次の行動に迷わないかを確認します。 なお、FigmaのPrototypeは操作体験を再現する機能です。 実際のフォーム送信やデータ保存は行わないため、実装が必要な機能とは区別して考えます。

完成したデザインをReviewする

制作が終わったら、最後に全体を見直します。 特に重要なのは、見た目だけでなく、設計の意図が画面に反映されているかを確認することです。

目的との整合性

サイトの目的が画面から伝わるか 最も重要な情報が目に入りやすいか 問い合わせにつながる導線があるか

情報設計

ページの役割が明確か 情報の重複や不足がないか ナビゲーションで迷わないか 必要な情報へ無理なく移動できるか

UIデザイン

見出しと本文の優先順位が明確か 余白や配置に一貫性があるか ボタンの見た目と操作範囲が一致しているか 画面幅が変わっても構造が崩れないか

ComponentとVariables

共通化できる要素がComponentになっているか InstanceとMain Componentの関係を理解しているか Variantsの状態が適切に管理されているか 共通の色や数値がVariablesで管理されているか

Prototype

主要な操作が設定されているか 遷移先が正しいか 操作結果がユーザーに伝わるか 一連の操作に不自然な箇所がないか

すべての項目を完璧にすることが目的ではありません。 問題を見つけ、修正し、再度確認するという工程を経験することが重要です。

Figmaを使うときの考え方

25回の学習を通して、Figmaの機能だけでなく、デザインを作るときの考え方も学んできました。 最後に、今後の制作で意識したいポイントを整理します。

機能から考えない

Figmaには多くの機能があります。 しかし、すべての機能を使うことが良いデザインにつながるわけではありません。 先に目的や課題を整理し、それを実現するために必要な機能を選びます。

見た目だけで判断しない

画面が美しく整っていても、必要な情報が見つからなかったり、操作方法がわからなかったりすれば、使いやすいUIとは言えません。 情報の構造、操作の流れ、ユーザーの目的を含めて評価します。

共通化と柔軟性のバランスを取る

ComponentやVariablesは、デザインの一貫性を保つために役立ちます。 ただし、何でも共通化すればよいわけではありません。 共通化することで管理しやすくなる部分と、個別に設計した方が適切な部分を判断します。

作ってから検証する

最初から正解を作ろうとする必要はありません。 設計し、作成し、操作し、問題を見つけて修正する。 このサイクルを繰り返すことで、デザインの精度を高めていきます。

25日間の学習チェックリスト

最後に、これまでの内容を自分で説明できるか確認してみましょう。

Page、Section、Frame、Groupの役割を説明できる LayerとObjectの関係を理解している Text、Shape、Fill、Strokeを使って画面を作れる Alignment、Spacing、Gridを使って配置を整えられる ConstraintsとAuto Layoutの違いを説明できる 入れ子構造のAuto Layoutを作れる ComponentとInstanceの関係を理解している Variantsで状態を管理できる Component Propertiesを使って変更可能な部分を設定できる Variablesで共通の値を管理できる Prototypeで画面を接続できる OverlayやAnimationを使って操作を再現できる FigJamで情報を整理できる 目的から情報設計を行える 情報設計をUIデザインに反映できる Prototypeを使ってユーザー体験を検証できる 完成したデザインの問題点を見つけて改善できる

操作を覚えていない項目があっても問題ありません。 必要になったときに、該当する機能を調べて使えることも大切なスキルです。

まとめ

25日間の学習で扱った内容は、大きく分けると次の4つに整理できます。

1. 構造を理解する：Frame、Layer、Auto Layoutなどを使い、画面の構造を作る 2. ルールを管理する：Component、Variants、Variablesを使い、デザインを再利用・管理する 3. 体験を設計する：情報設計、UI Design、Prototypeを使い、ユーザーの操作を考える 4. 検証して改善する：実際に操作し、問題点を見つけて修正する

Figmaを使いこなすということは、すべての機能を暗記することではありません。 作りたいものの目的を理解し、 必要な情報を整理し、 適切な構造で画面を作り、 操作を検証できる ことです。 これが、今回の25日間で身につけてほしかった本質的なスキルです。

あとがき

今回の学習では、Figmaの基本操作から始まり、デザインシステムやプロトタイプまで、かなり幅広い内容を扱いました。 実際に操作してみると、説明どおりに進まなかったり、選択しているオブジェクトが違っていたり、思ったような結果にならなかったりすることもあったと思います。 そうしたときに、 単に操作をやり直すのではなく、 今どのオブジェクトを選択しているのか、 何を実現しようとしているのか、 設定がどの階層に適用されているのかを確認することが、 Figmaを理解するうえで大切です。 また、FigmaはWebサイト制作だけのツールではありません。 アプリケーションのUI、 業務システム、 プレゼンテーション、 サービスの設計、 チームでのアイデア整理など、 さまざまな場面で活用できます。 今回学んだ考え方は、制作対象が変わっても役立ちます。 25日間のカリキュラムはここで一区切りです。 しかし、Figmaの学習に終わりがあるわけではありません。 これからは、実際の制作課題に取り組みながら、必要な機能を調べ、試し、使いこなしていきましょう。 もちろん、Figmaというアプリケーションはこれからもどんどんアップデートされていきます。 今回学習した画面とボタンや機能の配置などが変更されることも確実にあります。 アプリを使い慣れると、不思議とそういう変更てのあっても、機能の基本構造を知っていればある程度対応できるようになります。 ツールを覚えることから、ツールを使って課題を解決することへ。 これが、今回のFigma学習のゴールですね。 お疲れ様でした。