この授業のゴール
Figmaで図形と文字を置いて、ページの設計図(ラフ)を1枚描けるようになる。
1. なぜ設計図を描くの?
いきなりHTMLを書き始めると、途中で「あれ、何を作りたかったんだっけ」と迷子になりがちです。プロの現場では、必ず先に設計図(デザインカンプやラフ)を描いてから作ります。
- 完成イメージが先にあると、作るのが速くなり、迷いが減ります。
- 「作る前に、人に見せて相談できる」のが最大の利点です。作ってからの直しは大変ですが、絵の段階の直しは一瞬です。
- デザインコース(Step 4)に進む人には、Figmaがメインの道具になります。
2. アカウントを作る
- ブラウザで
figma.comを開く検索で「Figma」でもOKです。 - 「始める」または「Get started」をクリック登録画面が開きます。
- メールアドレスとパスワードを入力して登録事業所の学習用メールアドレスを使うか、スタッフに確認してください。Googleアカウントがあれば「Continue with Google」が早くて簡単です。
- 途中の質問は気楽に答えてOK「何に使いますか?」などの質問が出ますが、どれを選んでも機能は変わりません。無料プラン(Starter)のままで、この教室の内容はすべてできます。
- 「Design file」または「デザインファイルを新規作成」をクリック白い画面(キャンバス)が開けば準備完了です。
3. 3つの道具だけ覚える
Figmaには道具がたくさんありますが、今日は3つだけ。キーボードの1文字で切り替えられます。
| キー | 道具 | 使い方 |
|---|---|---|
| F | フレーム(画用紙) | 押してから右側で「Desktop」を選ぶと、パソコン画面サイズの画用紙が置けます。この上に描いていきます。 |
| R | 四角形 | 押してからドラッグすると四角が描けます。ヘッダー・ボタン・写真の場所など、ほとんどの部品はまず四角です。 |
| T | テキスト | 押してからクリックすると文字が打てます。見出しや本文を置きます。 |
- 色を変える: 図形や文字を選ぶと、右側に「Fill(塗り)」が出ます。色の四角をクリックして選びます。
- 動かす・大きさを変える: V(または Esc)で「選択」にもどってからドラッグ。角をつまむと大きさが変わります。
- 間違えたら: ここでも Ctrl + Z が効きます。
4. やってみよう ― 見本とそっくりに作る
やってみよう
下の見本を、Figmaでそっくりに再現してみましょう。ゼロから考える必要はありません。「見本どおりに作る」のは、プロの練習でも定番の方法です。文章は見本のまま写してOK、自分の名前に変えてもOKです。
Figmaの雛形ファイルを開く(見本・色パレット・練習フレーム入り) ― 開いたら、上のファイル名「DarekanCurriculum」をクリック →「複製」で自分用のコピーを作ってから練習します。
- F でフレーム(Desktop)を置く。
- 一番上に横長の四角(R)を置いて、青(カラーコード
2E86AB)を塗る。これがヘッダーです。 - ヘッダーの中に T で「山田太郎の自己紹介」と白い文字を置く。(自分の名前でもOK)
- 左に丸(O)をグレー(
D9D9D9)で置き、中に「写真」と文字を置く。写真の場所のしるしです。 - 下に、うすい水色(
F2F7FA)の横長の四角を2つ並べ、それぞれに「好きなこと」「ひとこと」の見出しと本文を置く。 - 見本と見比べて、ずれているところを直したら、スタッフに見せて完成報告する。
ヒント: この設計図は、授業7「作品づくり」の作品1(自己紹介ページ)でそのまま使います。配色に迷ったら「メインの色1つ + グレー + 白」。色が少ないほど、まとまって見えます。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- 図形を選んで右側の「Corner radius」に数字を入れると角が丸くなります。ボタンらしいボタンを作ってみましょう。
- 要素をまとめて選んで右クリック →「Frame selection」でグループ化できます。「カード」部品を1つ作って、Ctrl + D(複製)で3枚並べてみましょう。
- 「オートレイアウト(Auto layout)」を調べて使ってみましょう。中身を増やすと自動でレイアウトが広がる、Figma最強の機能です(Shift + A)。