Figma入門：お店の案内画面を作って、クリックでつなごう

ひよこ

Figmaって、絵が上手じゃないと使えない？

ペンギン先生

大丈夫。まずは「カフェの案内」と「メニュー」の2画面を、文字と箱で作ってみよう。配置を考え、ボタンで移動する様子を試せるのが入口だよ。

ひよこ

何から準備するの？

ペンギン先生

Figmaのアカウントと、デザインファイルを編集できる権限を用意しよう。ブラウザからも使えるよ。共有範囲や有料機能は契約で変わるので、自分用の練習ファイルから始めるといいね。

ひよこ

フレームって何？

ペンギン先生

画面や部品をまとめる入れ物だよ。カフェのトップ画面とメニュー画面を別のフレームにすると、どこからどこへ移るかを考えやすくなるんだ。

ひよこ

文字を長くするとボタンからはみ出しちゃう！

ペンギン先生

Auto layoutで文字と余白の関係を作ってみよう。内容に合わせて広がる設定と、幅を固定する設定を使い分けるよ。スマホ幅でも読めるかを確認しよう。

ひよこ

同じボタンを何個も作るの？

ペンギン先生

元になるコンポーネントを作り、そのインスタンスを使えるよ。元の変更を共有できるけれど、インスタンスで変更した文字や色などは保持される場合があるんだ。

ひよこ

押したら次の画面に行くようにできる？

ペンギン先生

Prototypeで、ボタンをクリックしたらメニューのフレームへ移る設定を付けよう。表示モードで押してみると、画面の流れを確認できるよ。

ひよこ

これでアプリが完成？

ペンギン先生

プロトタイプは操作の試作品だよ。実際の予約処理やデータ保存は別に実装する。開発者向けの情報やコードの一部を見られても、完成アプリが自動でできるわけではないよ。

ひよこ

覚え方を教えて！

ペンギン先生

「Figma」って出てきたら「画面の形と動きを、作る前に相談できる道具」と思えばだいたいOK！

最初のゴール：カフェの2画面をつなぐ

架空のカフェを題材にします。きれいな写真やロゴは後回しで大丈夫です。「メニューを見る」を押して、メニュー画面へ移れることを最初のゴールにしましょう。

準備するのはFigmaのアカウントと、Figma Designのファイルを編集できる権限です。画面の名称や利用できる機能は更新されるため、操作に迷ったら末尾の公式ヘルプを参照してください。

1. 新しいデザインファイルで、スマホ用のフレームを2つ作ります。名前は「カフェ案内」「メニュー」にします。
2. 案内画面に、店名「ひよこカフェ」、説明「駅前の小さなカフェ」、ボタンの文字「メニューを見る」を置きます。
3. メニュー画面には、見出し「メニュー」と「コーヒー」「紅茶」を置きます。
4. ボタンを選び、Prototypeの接続をメニュー画面へつなぎます。クリックをきっかけに、指定の画面へ移動する設定を選びます。
5. プロトタイプを表示してボタンを押します。メニュー画面へ移れたら最初の成功です。

フレーム名が付いていると、似た画面が増えても接続先を見分けやすくなります。戻るボタンも付けると、行き止まりにならず試せます。

文字が伸びても崩れにくいボタンを作る

「メニューを見る」のテキストを選び、Auto layoutを追加します。ショートカットはShift + Aです。できた入れ物に背景色と内側の余白を設定し、幅を内容に合わせる設定（Hug contents）にします。

文字を「今日のおすすめを見る」に変えて、入れ物も広がるか確かめましょう。画面幅を超えるほど長い文字なら、幅を固定して折り返すなど別の設計が必要です。Auto layoutを付けるだけで、どんな画面幅にも自動で対応するわけではありません。

コンポーネントは「元」と「使う場所」を分ける

ボタンをコンポーネントにし、インスタンスをもう1つ置きます。元の角丸や余白を変えて、両方へ反映されるか確認してください。次に片方だけ文字を変え、元の文字を変更したときの違いを見てみましょう。

インスタンスで行った上書きは保持されることがあります。「全部が必ず同じに変わる」ものではありません。また、元とのつながりを解除すると、後の変更は連動しなくなります。

見てもらうときの3つの質問

• 初めて見る人が、「メニューを見る」を見つけられるか。
• 押した先が想像どおりで、案内画面にも戻れるか。
• 長い店名やスマホ幅でも、文字やボタンが重ならないか。

共有前に、ファイルの閲覧・編集範囲も確認しましょう。プロトタイプで確かめた動きは、実装する人へ「このボタンはこの画面へ」と伝える材料になります。

次に学ぶなら

形をWebページへ変えてみたくなったらHTML・CSS入門、実際にボタンの処理を作るならJavaScript入門へ進めます。

参考資料

• Figma：Auto layout — 追加操作・配置・内容に応じたサイズ
• Figma：Prototypeの接続 — 接続・きっかけ・移動先の設定
• Figma：Components — 元とインスタンスの関係
• Figma：インスタンスの変更 — 上書きと元の変更の反映