Figma実践講座を公開｜ワイヤーフレームからWebデザイン・プロトタイプまで学ぼう

Figma基礎の次に「実際に作る」練習を

WebTraining.jpでは、先に「Figma基礎」で基本操作を学習できるようにしています。

Figma基礎では、

• 画面構成
• 図形
• テキスト
• フレーム
• レイアウトガイド
• 整列
• 画像
• オートレイアウト
• アイコン
• コンポーネント
• インスタンス
• バリアント
• プロトタイプ

などを段階的に学習します。

ただし、ツールの機能を一つずつ覚えただけでは、実際にWebページを作ろうとしたときに手が止まってしまうことがあります。

例えば「オートレイアウト」は理解していても、「このページのどこで使えばいいのか」が分からなければ、実制作では使えません。

そこでFigma実践では、基本操作を単独で練習するのではなく、1つのWebサイトを作る中で必要な機能を使っていく構成にしました。

Figma基礎はこちらから

Figma実践講座は10ステップ

今回のFigma実践講座は、全部で10の学習ページに分かれています。

前半3STEPでは「Espresso Lane」という1ページのカフェサイトを制作します。

後半7STEPでは「UN HAMBUR」という複数ページのWebサイトを制作します。

最初は操作手順を確認しながら進めますが、後半になるほど完成見本や条件を見ながら、自分で考えて作る内容が増えていきます。

最初から自由にデザインするのではなく、操作する → 真似して作る → 条件を見て考える → 自分で作るという順番で進められるようにしています。

前半｜Espresso Laneで1ページのWebサイトを作る

最初に制作するのは、カフェサイト「Espresso Lane」です。

ここでは、PCワイヤーフレーム → デザイン → スマートフォンという流れを学びます。

STEP01｜PC版ワイヤーフレームを作成

最初に、Webページの設計図となるワイヤーフレームを作ります。

いきなり写真や色を使ってデザインを始めるのではなく、

Header
Key Visual
About
Menu
Access
Footer

というWebページの構造を整理します。

PC版では1280pxのフレームを使い、レイアウトガイドを設定しながらコンテンツの配置を考えます。

ここで大切なのは、画面幅とコンテンツ幅は同じではないという考え方です。

例えば画面全体は1280pxでも、本文やカードなどのコンテンツは左右に余白を取り、少し狭い範囲に配置します。

これは後でHTML/CSSを学ぶ際の、

.container
max-width
margin: 0 auto

といった考え方にもつながります。

Figmaだけを学ぶのではなく、このデザインがあとでHTML/CSSになることを意識しながら進めます。

STEP02｜PC版をモックアップ風に仕上げる

ワイヤーフレームが完成したら、色や画像を追加してWebデザインらしい見た目にしていきます。

• カラー
• 見出し
• 写真
• アイコン
• 余白
• オートレイアウト

画像にはFigmaのプラグインを使い、ワイヤーフレームでグレーの長方形だった場所を写真に置き換えていきます。

ここでは完成度を追求しすぎるのではなく、ワイヤーフレームが実際のデザインになるとどう変わるのかを体験することが目的です。

ワイヤーフレームと完成デザインを並べて比べてみると、Webデザインにおける「設計」の役割も分かりやすくなります。

STEP03｜スマートフォン版を作成

PC版が完成したら、スマートフォン版へ進みます。

スマートフォンでは、PCデザインをそのまま小さくするわけではありません。

例えばPCでは横並びだった要素を、スマートフォンでは縦1列に変更することがあります。

文字サイズはスマホだからといって極端に小さくしません。PCより若干小さい(12pxから14pxが妥当）、画像、左右の余白（右側のスクロールバーを想定しておおよそ15px〜16pxが妥当）、セクション間の距離（PCよりも余白が広いと、縦長になるので気を付ける）なども、スマートフォンで読みやすいように調整します。

このSTEPからは、前のページよりも細かな手順を減らしています。

完成見本と条件を確認しながら、

「PC版のこの部分は、スマートフォンならどうする？」と自分で考えて制作します。

HTML/CSSでレスポンシブデザインを学ぶ前に、FigmaでPCとスマートフォンの違いを考えておくと、メディアクエリの意味も理解しやすくなります。

後半｜UN HAMBURで複数ページのWebサイトを作る

Espresso Laneでは1ページのサイトを制作しました。

後半では「UN HAMBUR」というハンバーガーショップのWebサイトを使い、

• Top
• Menu
• Staff
• Access
• Blog一覧
• Blog記事

という複数ページを制作します。

ここではFigmaの重要な機能である、コンポーネントとインスタンスも本格的に使用します。

STEP04｜トップページとコンポーネント

まずはUN HAMBURのトップページを制作します。ヘッダー、フッター、ボタンなど、複数ページで共通して使用するパーツはコンポーネント化します。

例えば6ページあるサイトで、すべてのページに同じヘッダーを手作業で配置すると、メニューを1つ変更しただけでも6ページ修正しなければなりません。そこで、元になるコンポーネントを1つ作り、各ページではインスタンスを使用するという方法を使います。

これはWordPressの、

• header.php
• footer.php
• 共通パーツ

などにもつながる考え方です。

Figmaで共通パーツの考え方を理解しておくと、後からWordPressのテンプレート構造を学習するときにも理解しやすくなります。

STEP05｜Menuページを作る

次はMenuページです。トップページを複製し、共通のヘッダーとフッターはそのまま利用しながら、ページ固有の内容を変更します。

下層ページでは、タイトル部分も共通化します。

例えば、　Menu　Staff　Access　Blogというページタイトルを、同じデザイン・同じサイズで作ります。
同じ見た目を何度も作るのではなく、再利用できるところを見つけることもFigma実践の重要なポイントです。

Menuページでは、画像・タイトル・説明文を組み合わせたカードを作り、複数のカードをオートレイアウトで配置します。

STEP06｜Staffページを作る

Staffページからは、より自分で考える部分が増えます。

完成イメージと必要な条件を確認しながら、

• メイン画像
• 採用メッセージ
• 募集内容
• 求める人物像
• 応募方法
• 電話番号
• フォーム

などを配置します。

それまで学習した、

• フレーム
• オートレイアウト
• テキスト
• 画像
• コンポーネント

を組み合わせて、自分でレイアウトを考えます。

Figmaの操作方法を覚えることから、Webページを設計することへ少しずつ学習内容が変わっていきます。

STEP07｜Accessページを作る

Accessページでは、2店舗分の情報を掲載するページを作成します。

店舗名、住所、営業時間、写真、地図などをどのように並べれば分かりやすいかを考えます。

Webデザインでは「きれいに見える」ことだけでなく、ユーザーが必要な情報をすぐ見つけられることも大切です。

店舗情報のように複数の情報を整理するときは、　「何をまとめるか」　「どこを揃えるか」　を意識してレイアウトします。

STEP08｜Blog一覧と記事詳細ページ

UN HAMBURではブログページも制作します。

• 記事タイトル
• 日付
• カテゴリー
• アイキャッチ画像
• 記事一覧
• 検索
• 新着情報
• カテゴリー
• タグ
• ページネーション

などを配置します。

そしてBlog記事詳細では、

• 記事タイトル
• 投稿日
• カテゴリー
• アイキャッチ画像
• 本文
• サイドバー
• 前の記事
• 一覧へ戻る
• 次の記事

などを配置します。

このページは、特にWordPressとのつながりを意識した内容です。

WordPressでは、投稿画面で入力した記事タイトルや本文、カテゴリー、アイキャッチ画像などがテンプレートを通して表示されます。

FigmaでBlog一覧とBlog記事ページを作ることで、　一覧ページと詳細ページは役割が違う　ということも視覚的に理解できます。

後からWordPressの、　home.php　archive.php　single.php　などを学ぶときにもつながる内容です。

STEP09｜プロトタイプを設定

各ページが完成したら、ページ同士をつなぎます。

Figmaのプロトタイプ機能を使い、

• HOME → TopPage
• MENU → Menu
• STAFF → Staff
• ACCESS → Access
• BLOG → BlogList

といったリンクを設定します。

さらに、トップページのMenuボタンからMenuページへ移動する、Blog一覧の記事をクリックするとBlog記事へ移動する、ロゴをクリックするとトップページへ戻る、といった実際のWebサイトと同じ動きを設定します。

ここで大切なのは、デザインは1枚の画像ではないということです。

Webサイトは、ユーザーがリンクをクリックしながら複数のページを移動します。プロトタイプを作ることで、

「このボタンを押したらどこへ行くのか」「ユーザーは迷わず目的のページへ進めるか」

という画面の流れまで確認できます。

Figmaだけで終わらない教材

今回のFigma実践で特に意識したのは、「Figmaを覚えて終わり」にしないことです。

WebTraining.jpでは、このあとHTML/CSSやWordPressを学習します。

Figmaで作ったデザインは、最終的にはブラウザで表示されるWebページになります。

Figmaで、「コンテンツ幅は1080px」「左右には余白が必要」「PCでは2列」「スマートフォンでは1列」と考えたものを、HTML/CSSでは、

max-width padding margin display: grid display: flex @mediaなどを使って実装していきます。

デザインとコーディングは別々のものではありません。

Figmaでレイアウトを考える経験があると、 「なぜこのCSSを書くのか」 が分かりやすくなります。

Design to Codeにもつながります

WebTraining.jpでは、FigmaでデザインしたあとにHTML/CSSへつなげる「Design to Code」の実践教材も用意しています。

Design to Codeでは、

• ワイヤーフレームを観察する
• HTMLで構造を作る
• CSSでワイヤーフレームを再現する
• Figmaでデザインカンプを作る
• デザインをHTML/CSSで再現する

という流れで制作します。

Figma実践で学んだ内容を、そのままコーディングへつなげることができます。

FigmaとHTML/CSSを別々に練習するのではなく、デザイン → コーディングまで1つの制作工程として経験してみてください。

こんな方におすすめです

Figma実践講座は、次のような方におすすめです。

• Figmaの基本操作は覚えたけれど、何を作ればよいか分からない
• ワイヤーフレームの作り方を練習したい
• PC版とスマートフォン版の違いを学びたい
• Webサイトのデザインを作ってみたい
• コンポーネントやインスタンスを実際に使ってみたい
• 複数ページのWebサイトを設計したい
• プロトタイプを使ってページ遷移を確認したい
• HTML/CSSを学ぶ前にWebページの構造を理解したい
• WordPressのデザインを作る練習をしたい
• Web制作の流れを一通り経験したい

Figmaを初めて使う方は、先にFigma基礎から進めることをおすすめします。