Figmaで名刺サイズのUIを作ってみよう：練習に最適なチュートリアル

小さなキャンバスから始めよう：名刺サイズでUIを学ぶ理由

Figmaを開いたとき、広いキャンバスに何を描けばいいかわからなくなる人は多いです。
そんなときにおすすめなのが、「名刺サイズのUI」を作る練習。

名刺サイズ（約91×55mm）という小さな領域は、

• 要素を最小限にまとめる構成力
• レイアウトのバランス感覚
• 余白や文字サイズの基礎

を身につけるのにぴったりです。

このチュートリアルでは、名刺サイズを使ってミニUIカードを作りながら、Figmaの基本操作を自然に覚えていきましょう。

Step 1：新しいフレーム（キャンバス）を作る

まずは、名刺サイズのキャンバスを用意します。

▶ 操作手順

1. Figmaを開き、「New Design File」をクリック
2. 左上ツールバーから「Frame」ツール（またはFキー）を選択
3. 右側のサイズ設定欄に以下を入力
   　幅（Width）：91mm　高さ（Height）：55mm

ポイント：単位はmmでもpxでもOK（おおよそ 343×208px が目安）
mm指定にしたい場合は、右下の「Scale」から単位を切り替えましょう。

コツ

小さなフレームの中では、「どれだけ情報を整理して見やすくするか」が重要。
余白を広く取り、文字を詰め込みすぎないように意識しましょう。

Step 2：背景とレイアウトを設定する

フレームができたら、背景を整えていきます。

▶ 背景設定

• フレームをクリック → 右パネルの Fill で色を設定
  　→ 例：明るいグレー（#F5F5F5）やホワイト（#FFFFFF）

▶ レイアウト設定

ガイドラインを設定しておくと、要素の整列がしやすくなります。

1. 右クリック → Add Layout Grid
2. 「Grid」を「Columns（列）」に変更
3. Margin：8、Gutter：8 などで設定

ポイント
この設定をしておくと、テキストや図形を置くときに“きれいに揃う”感覚がつかめます。

Step 3：ロゴ・タイトル・ボタンを配置してみよう

ここからUIの基本要素を配置していきます。
名刺サイズを活かして、「名刺型プロフィールUIカード」を作るイメージです。

▶ 手順

1. ロゴまたはアイコンを配置
   　→ Oキーで円を作り、背景色を設定（例：ブルー #007BFF）
   　→ 中央にTキーでイニシャル文字（例：「K」）を追加
2. タイトル（名前）を追加
   　→ Tキーでテキスト入力
   　→ フォントサイズ：18〜20px、フォント：Noto Sans JP
3. サブタイトルや職種を追加
   　→ 小さめフォントで例：「Web Designer」「UI/UX Creator」など
4. ボタンを追加
   　→ Rキーで四角形を作成
   　→ 角丸（Corner Radius）を8に設定
   　→ テキスト「Follow」や「More」などを重ねる

Step 4：配色とフォントで“印象”を整える

デザインの印象を決めるのは「色」と「文字」です。
名刺サイズでは面積が小さいため、色選びがとても重要です。

▶ 配色の基本ルール

1. ベースカラー（背景）
   　→ 明るく、文字が読みやすい色（例：#FFFFFF, #F7F7F7）
2. アクセントカラー（ボタンや強調部分）
   　→ ブランドカラーやFigmaロゴのようなビビッドカラー
3. テキストカラー
   　→ 濃いグレー（#333333）で読みやすく

おすすめ組み合わせ

• ホワイト × ブルー × グレー
• ベージュ × ネイビー × オレンジ
• モノトーン × イエロー（シンプル×映える）

▶ フォント設定

• メイン：Noto Sans JP（日本語にも最適）
• 英語タイトル：InterやPoppins
• 見出し：太字（Bold）、本文：中（Regular）

Step 5：整列・余白を意識して“きれいに見せる”

初心者がつまずきやすいポイントは「余白の取り方」。
名刺サイズでは特に、上下左右のバランスが命です。

▶ 整列のコツ

• ロゴ・名前・ボタンは「中央揃え（Align center）」で統一
• 各要素の間隔を「8の倍数」で揃える（例：8px, 16px, 24px）

▶ 余白の目安

• 上下余白：8〜12px
• 各要素の間隔：8〜16px

💡見栄えが悪いときは、少し広げるだけで一気に整います。

Step 6：完成したらプロトタイプ化して“動かす”

Figmaの醍醐味は、デザインを「動かせる」こと。
名刺サイズでも、ちょっとした動きでUIを学ぶ練習になります。

▶ プロトタイプ設定

1. 右上タブの「Prototype」をクリック
2. ボタンを選択 → 他のフレームにリンクを設定
3. 「On Click → Navigate to → 別の画面」
4. 「Animation：Smart Animate」でふんわり切り替え

完成したら「Present」ボタンでプレビュー！
小さなUIでも、アプリのような体験ができます。

Step 7：学びを深める応用アイデア

慣れてきたら、次のような応用にも挑戦してみましょう

• 名刺デザインを「ダークモード」にしてみる
• 同じ構成をスマホサイズで作り直してみる
• 自分のSNSリンクをQRコード風に配置してみる
• 実際のプロフィールカードとしてPDF化する

Figmaは印刷用デザインにも対応しているので、名刺デザイン練習は実務にも役立ちます。

まとめ：名刺サイズは「UIデザインの縮図」

名刺サイズのUI練習は、Figmaの操作を自然に覚える最高の方法です。
ポイントを振り返ると

ステップ	内容
Step1	フレーム（名刺サイズ）を作る
Step2	背景とレイアウトを設定
Step3	ロゴ・テキスト・ボタンを配置
Step4	配色・フォントで印象を整える
Step5	整列と余白で見やすくする
Step6	プロトタイプで動きを確認

小さなキャンバスの中に「デザインのすべて」が詰まっています。
迷ったらまず“名刺サイズ”から始めてみましょう！

#Figma #Figma初心者 #Webデザイン初心者 #UIデザイン #Figma使い方 #Figma学習 #デザイン勉強 #UXデザイン #無料デザインツール #Figmaチュートリアル #Webデザイン学習 #Figma練習

Favorite