INDEX
目次
前の章に戻る4章 便利な機能を覚えよう
この教材の学習時間:280分
【4-1】ショートカット
目安の学習時間:20分
今までの解説にも表記しましたが、Figmaには多くのショートカットが用意されています。
このショートカットを使いこなす事が出来れば、効率的に作業出来るようになります。
※Figmaの操作を覚えると同時に、ショートカットも覚えれば一石二鳥になると思います。
■ Figmaでよく使うショートカット
※Macの場合、Ctrlキー > Cmdキー、 Altキー > Optionキー として置き換えてください。
基本操作のショートカット
|
キー
|
効果
|
|---|---|
|
V
|
選択ツール
|
|
T
|
テキストツール
|
|
R
|
レクタングル（四角形）ツール
|
|
F
|
フレームツール
|
|
I
|
色選択
|
|
H or Spaceキー
|
手のひらツール
|
|
Ctrl + マウスホイール もしくは
Ctrl + プラス/マイナスキー
|
画面の拡大縮小
|
|
Ctrl + A
|
全選択
|
|
Esc
|
選択解除
|
|
Ctrl + C
|
コピー
|
|
Ctrl + V
|
ペースト
|
|
Ctrl + D もしくは
Alt + マウスドラッグ
|
複製
|
|
Ctrl + Z
|
元に戻す
|
|
Ctrl + Shift + Z
|
やり直す
|
|
Ctrl + 0
|
100%ズーム
|
|
Ctrl + Alt + Enter
|
プレビュー
|
便利なショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + G
|
グループ化
|
|
Ctrl + Shift + G
|
グループ化を解除
|
|
Ctrl + [
|
レイヤーを後方に移動
|
|
Ctrl + ]
|
レイヤーを前方に移動
|
|
Shift + R
|
定規を表示
|
|
Shift + G
|
グリッドを表示
|
|
Ctrl + Shift + K
|
画像を取り込む
|
テキスト系のショートカット
|
キー
|
効果
|
|---|---|
|
Ctrl + B
|
太字
|
|
Ctrl + Shift + < もしくは
Ctrl + Shift + >
|
フォントサイズ変更
|
|
Alt + < もしくは
Alt + >
|
文字詰め
|
|
Shift + Alt + < もしくは
Shift + Alt + >
|
行の調整
|
整列系のショートカット ※複数オブジェクトを選択時
|
キー
|
効果
|
|---|---|
|
Alt + H
|
水平方向に合わせる
|
|
Alt + V
|
垂直方向に合わせる
|
|
Alt + Shift + H
|
水平方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Alt + Shift + V
|
垂直方向のオブジェクトを均等配置
（オブジェクトを3つ以上選択時）
|
|
Ctrl + Alt + K
|
コンポーネント
|
|
Ctrl + Alt + B
|
インスタンスの切り離し（コンポーネント・親からの切り離し）
|
|
Shift + A
|
オートレイアウト
|
|
Shift + Alt + A
|
オートレイアウトを解除
|
■ Figma上でもショートカットの確認ができる
Figmaを操作していると右脇にキーボードのヒントが確認出来ます。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
※例えば、「長方形 : R」「矢印 : Shift + L」など。
これがショートカットのヒントになっています。
Figma使用時でも、ショートカット一覧を確認する事も出来ます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
下記のショートカットを入力すると、画面下に一覧が表示されます。
Control + Shift + ?
【4-2】ガイド（定規・グリッド）
目安の学習時間:20分
レイアウトを組む際、ガイドを使用すれば規則性のあるレイアウトを構築する事が簡単にできます。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
Figmaには「定規」「グリッド」の２種類のガイドを使う事ができます。
使いやすい方を使用しましょう。
☑️ サンプルデータはこちら
ガイド.fig (66.3 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 定規の使い方
定規は ”線” を配置するガイドです。レイアウトの縦軸・横軸を合わせるのに便利です。
定規は以下の2種類の出し方があります。
- 右上の倍率をクリックし、メニュー内にある「定規」を選択（消す時も同じ項目を選択）
- ショートカット
Shift + R（消す時も同じショートカット）
定規を出すと、キャンバスの左側・上側に定規が表示されます。ここからドラッグ＆ドロップする事で、定規のラインを引く事ができます。
使用例
直感で定規を置くよりも、規則性に沿った定規の配置をする事をおすすめします。
※例えば...
①目安となる図形を作成し、横脇に配置します。
② その図形を複製し、反対側の横脇に置きます。
③ 後はその図形に沿った定規を引けば、両脇に同じ幅の定規を引く事ができます。
Alt(Option)ボタンを押しながら、オブジェクトを選択
上記の方法で、選択しているオブジェクトの位置を知る事ができます。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
この方法を上手く使う事で定規を適切に配置したレイアウトを整える方法もあります。
■ グリッドの使い方
グリッドはフレームを等倍してガイドを配置する方法です。
グリッドは以下の方法で使用出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
"フレーム"を選択した状態で、画面右側の「レイアウトガイド」の "+" アイコンをクリックすると、グリッド線を敷く事が出来ます。
ただ、この状態（グリッド8px）の状態だと解りづらいので、”グリッド8pxの左のアイコン" をクリックし、「列」を選択。適切な数値を選択する事で解りやすくなると思います。
ショートカット Shift + G でグリッドの表示・非表示が出来ます。
✅ UIデザインにおいてレイアウト作成をする際、余白をバランスよく配置する事がUIデザインの重要な基礎の１つでもあります。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
ガイドを上手く利用し、バランスの取れた余白を作る事を意識してみましょう。
※詳しくは第５章以降で説明します。
【4-3】コンポーネントとは
目安の学習時間:20分
コンポーネントとは
FigmaはUIを作成する為の多くの機能を搭載していますが、最も習得しやすく、且つ使用頻度も高いと思われるのがこのコンポーネントになります。
同じようなパーツを使いまわしたい場合、コンポーネントを使うと便利です。
☑️ サンプルデータはこちら
コンポーネント.fig (59.4 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
✔ コンポーネント作成手順
1 . まず複製させたいオブジェクトを用意し、選択します。
2 . 次に右クリックから「コンポーネントを作成」を選択
※ショートカット Ctrl + Alt + K でもOK。
3 . レイヤーが紫色になり、アイコンも菱形（4つ）になっているのが確認出来ます。
これで「親」レイヤー完成です。
4 . この親レイヤーを”複製”してみましょう。すると、同じく紫色のレイヤーになっていますが、アイコンは菱形（１つ）になっています。これで「子」レイヤーの完成です。
※子レイヤーはいくらでも作成できます。
5 . 親レイヤーの中のオブジェクトを動かしてみましょう。
すると、子レイヤーのオブジェクトも同じ動きをします。
6 . 色やサイズ、テキスト、レイヤー追加など色々対応出来ます。
コンポーネントを上手く利用すれば、コンテンツ作りも容易に進める事が出来ます。
[複製について]
前章でも記載しましたが、Figmaで "複製"する方法を改めて記載します。(いずれかの方法でOK)
⭕️ Windowsの場合
- 複製したいオブジェクトを選択、
Ctrl + Cでコピー >Ctrl + Vでペースト - 複製したいオブジェクトを選択、
Ctrl + D。 Altキーを押しながら、複製したいオブジェクトを動かす。
⭕️ Macの場合
- 複製したいオブジェクトを選択、
Cmd + Cでコピー >Cmd + Vでペースト。 - 複製したいオブジェクトを選択、
Cmd + D。 Optionキーを押しながら、複製したいオブジェクトを動かす。
■ コンポーネントのもう１つのメリット - アセットパネル格納
コンポーネント化したレイヤーは、レイヤー隣のアセット（アセットパネル）に格納されます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
ドラッグ&ドロップで、アセットパネルから直ぐにキャンバスに配置する事も出来ます。
※他のフレームやページなど、広範囲に使い回せる為、規模のあるサイト制作時には重宝します。
【4-4】バリアント
目安の学習時間:30分
■ バリアントとは
バリアントとは、複数のコンポーネントをひとまとめにして管理する機能です。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
Figmaでは、ボタンや入力フォーム、アイコンなど、繰り返し使用する要素を「コンポーネント」として作成します。しかし、同じボタンでも「通常の状態」「ホバー時」「クリック時」「無効な状態（disabled）」など、複数の状態が存在します。
これらをすべて個別のコンポーネントとして作成すると、デザインファイルがコンポーネントだらけになり、管理が非常に大変になります。
そこで登場するのが「バリアント」です。
バリアントを使うと、これらの異なる状態を一つの「コンポーネントセット」としてグループ化し、管理することができます。
WEBに設置するボタンやアイコン等、同じパーツでも若干異なる状態を手軽に切り替えたい場合などに良く使われます。
☑️ サンプルデータはこちら
バリアント.fig (79.1 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
今回はバリアントを利用したボタンを作成してみましょう。
まずボタンの「お問い合わせ」のコンポーネントを作ります。
✔ バリアント作成手順
1 . コンポーネントを作成します。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
2 . 右側パネル「プロパティを追加」より、バリアントを選択。
3 . プロパティ名の決めましょう。今回は「ボタン」とします。
4 . コンポーネント下の + ボタンで複製します。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
5 . 各々別のボタンを作成します。今回は「資料請求 」「入力内容を確認」 のボタンを作成します。
これで準備完了です。
■ バリアント使用方法
バリアントで設定したパーツを設置した際、右側パネルで設定した「ボタン」の項目で、素早くパーツを切り替え出来ます。
【4-5】スタイル
目安の学習時間:20分
■ スタイルとは
フォントの色やサイズ、書体をそれぞれ登録することのできる機能です。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
この機能を利用する事で、統一したスタイルの構成がしやすくなります。
■ 作成手順
✔️ スタイル作成手順
1 . 色やサイズ、書体を登録したいテキストを選択し、右側パネル「タイポグラフィー」内の右上のアイコンを選択します。
2 . “+”のアイコンを選択し、スタイルを確認・編集します。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
「スタイルの作成」ボタンで登録します。※ここでは ” 背景水色用のテキスト ”とします。
3 . 「テキストスタイル」に追加されました。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
次に利用する際は、スタイルを適用したいテキストを選択し、この欄より選択するだけでサイズや書体が反映されます。
【4-6】オートレイアウト
目安の学習時間:80分
■ オートレイアウトとは
オートレイアウトとは、指定した複数のオブジェクトを、様々な設定により素早く規則的な整列ができる機能です。
※初めての方が使いこなすには少々難しい所もありますが、使いこなせるようになると便利です。
☑️ サンプルデータはこちら
オートレイアウト.fig (388 KB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ 作成手順
✔️ オートレイアウト作成方法
1 . オートレイアウトにしたい複数のオブジェクトや、グループやフレームを同時に選択。 (レイヤーの複数選択は、Shift キーを押しながら選択を行いましょう！)
2 . 右クリックで「オートレイアウトを追加」を選択。
※もしくはショートカット Shift + A
3 . オートレイアウト化したレイヤーが確認できます。（アイコンが変わります）
4 . オートレイアウト化したレイヤーを選択すると、右パネルに「オートレイアウト」の欄が確認出来ます。ここでオートレイアウトをコントロールします。
以下、オートレイアウトのテクニックをいくつか説明します。
■ 縦横並べ/折り返し
画像に記載の、右パネル「オートレイアウト」方向アイコンで選択できます。
横並べ
縦並べ
折り返し
■ 間隔の調整
画像に記載の、右パネル「オートレイアウト」間隔アイコン（縦横）で選択できます。
■ 揃えの調整
画像に記載の、右パネル「オートレイアウト」揃えアイコン（9方向）で選択できます。
■ 余白の調整
画像に記載の、右パネル「オートレイアウト」パディング（縦横、及び４方向）で選択できます。
■ フレームの調整（固定 / コンテンツの内包 / コンテナに合わせて拡大）
右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) を選択すると、
- 幅を固定
各固定サイズを設定できます。 - コンテンツを内包
「オートレイアウト状態のレイヤー」を選択した場合に発動できる。 → 「オートレイアウト内のオブジェクト」のサイズに応じて、「オートレイアウト状態のレイヤー」の大きさを可変することができる。 - コンテナに合わせて拡大
「オートレイアウと状態のレイヤー」を選択した場合に発動できる。
→ 「オートレイアウト状態のオブジェクト」のサイズに応じて、100%のサイズとなる。
■ フレームの最小幅（及び高さ）・最大幅（及び高さ）設定
オブジェクトの大きさに制限を決める事が出来ます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
上記と同じく、右パネル「オートレイアウト」の 幅(W) 及び 高さ(H) より選択できます。
- 最小幅（および高さ）を追加：
これ以上小さくしたくないサイズがある場合、設定できます。 - 最大幅（および高さ）を追加：
これ以上大きくしたくないサイズがある場合、設定できます。
【4-7】マスク
目安の学習時間:20分
■ マスクとは
オブジェクトの表示領域を限定させる方法です。画像や図形の一部だけを表示させたい場合に良く使われます。
☑️ サンプルデータはこちら
マスク.fig (1.33 MB)
※サンプルデータを開くには、ホーム画面右上の「インポート」より、入手した.figデータを選択。
■ 作成手順
１.サンプルデータをFigmaで開いてから、レイヤーの「4-7 マスク」→「parts」を選択して、 「表示するオブジェクト」と「表示するオブジェクトの表示範囲のオブジェクト」を用意します。
※今回は前者が写真、後者が星形レイヤーを指しており、写真を星形に切り抜くことを目標とします。
2 . 添付写真のように「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。（デフォルトでこのように配置されている）
※今回は前者が写真、後者が星形レイヤーを指しており、写真を星形に切り抜くことを目標とします。
2 . 添付写真のように「表示するオブジェクトの表示範囲のオブジェクト（星形レイヤー）」を「表示するオブジェクト（写真レイヤー）」のレイヤーの下に配置します。（デフォルトでこのように配置されている）
3 . 両レイヤーを選択し、右クリックして「マスクとして使用」を選択する。（レイヤーの複数選択はshiftを押しながらクリック）
※ショートカットはCtrl + Alt + M。MacはCmd + Control + M
4 . 星形レイヤーを写真レイヤーの上にドラッグ＆ドロップさせることで、写真レイヤーが、星形の表示領域のみに選択されました。（レイヤーの表示もマスク用に変化）
このマスクを応用すれば、色々な表現が出来ます。
このマスクを応用すれば、色々な表現が出来ます。
■ マスクパネル
マスクの種類（アルファ/ルミナンス）を変更するには、マスクグループを選択した状態で、ツールバーにあるマスクアイコンをクリックします。
- アルファ：透明度を使用してマスクの明確度を設定できます。
- ルミナンス：明るさを使用してマスクの明確度を設定できます。
【4-8】エフェクト
目安の学習時間:15分
■ エフェクトとは
オブジェクトに影を作ったり、ぼかしたり等の効果を付ける事ができます。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
手軽に付けられる便利な機能ですが、このエフェクトを多用、強調するとデザインによっては素人感が出てしまう事も多々あるので、さりげなく使う程度が良いと思います。
☑️ サンプルデータはこちら
エフェクト.fig (1.81 MB)
※サンプルデータを開くには、ホーム画面の「インポート」より、入手した.figデータを選択。
■ エフェクトの設定方法
右パネル下の「エフェクト」より、選択できます。（デフォルト時はドロップシャドウ）
■ エフェクトの種類
それぞれ ”位置” や ”ぼかし範囲” 等で、細かい設定が出来ます。
ドロップシャドウ：オブジェクトの外側に影を付けます。
インナーシャドウ：オブジェクトの内側に影を付けます。
レイヤーブラー：オブジェクトをぼかします。
背景のぼかし：画像の一部分をぼかします。
※このエフェクトは、多少の手順を要します。
※このエフェクトは、多少の手順を要します。
[ 手順 ]
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
1 . オブジェクトを2つ用意します。
下のレイヤーに「ぼかす対象となる画像」を配置、その上のレイヤーに「画像をぼかす範囲のオブジェクト」を設置。
※ぼかす範囲のオブジェクトは、簡単な図形でOKです。
2 . 「画像をぼかす範囲のオブジェクト」の透明度を変更。
→（”塗り”項目内）透明度を1%～99%のいずれかに設定。
3 . 「画像をぼかす範囲のオブジェクト」を選択し、エフェクト「背景のぼかし」を選択。
4 . 後は、”ぼかし範囲”を設定すればOKです。
4 . 後は、”ぼかし範囲”を設定すればOKです。
【4-9】プラグイン
目安の学習時間:30分
■ プラグインとは
Figmaの拡張機能です。フリー画像やSNSアイコンの設置やモックアップ（デザイン見本）を手早く作成したりなど、多くの便利な機能を使う事ができます。
■ プラグインの起動方法
以下3つの、いずれかの方法で起動できます。
クイックアクション（Ctrl/command + /）を開いて、「プラグインとウィジェット」タブでプラグイン名を直接入力します。
キャンバス上で、右クリック → プラグイン → プラグインを管理を選択。
選択後は、フォーム内にプラグイン名を入力。
選択後は、フォーム内にプラグイン名を入力。
ショートカット Ctrl + p でフォームを起動 → プラグイン名を入力。
■ 便利なプラグインを紹介
Unsplash
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
高品質な写真を手軽に入手できます。
フォームにテーマを入力すればテーマに近いイメージが表示され、使う事が出来ます。
Iconify
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
アイコン（SNSロゴなど）を入手できます。
フォームにテーマを入力すれば、テーマに近いイメージが表示され、使う事が出来ます。
※サンプルでは、Instagramを入力しています。
Brush
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
イラストを入手できます。
このプラグインもフォームにテーマを入力すれば、テーマに近いイメージが表示され使う事が出来ます。
※一部有料の素材もあります。
Mockup Plugin
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
PCやスマートフォン等のモックアップ（見本）を簡単に作成できます。
Japanese Font Picker
日本語フォントプレビューが出来ます。フォント選びに便利です。
日本語フォントプレビューが出来ます。フォント選びに便利です。
UIGradient
グラデーションを見本から付ける事が出来ます。
グラデーションを見本から付ける事が出来ます。
【4-10】第4章 章末問題
目安学習時間:40分
この章で学んだ「オートレイアウト」「コンポーネント」「バリアント」をフル活用して、実務に近いSNSのポストカードを作成します。
制作のポイントは崩れないレイアウトです。
文字が増えても、カードの大きさを変えても、見た目が綺麗に保たれるプロの組み方をマスターしましょう！
制作のポイントは崩れないレイアウトです。
文字が増えても、カードの大きさを変えても、見た目が綺麗に保たれるプロの組み方をマスターしましょう！
ステップ0：完成イメージを確認する
まずは、どのような動きをするカードを作るのか、動画で全体像を把握しましょう。
✅ 実装する機能チェックリスト
・バリアント機能：ボタン1つで「いいね前・後」を切り替えられる
・オートレイアウト：いいね数が増えてもアイコンとの間隔が崩れない
・レスポンシブ設定：外枠を伸ばすと、中の画像や文字も一緒に横に広がる
・バリアント機能：ボタン1つで「いいね前・後」を切り替えられる
・オートレイアウト：いいね数が増えてもアイコンとの間隔が崩れない
・レスポンシブ設定：外枠を伸ばすと、中の画像や文字も一緒に横に広がる
ステップ1：素材とスタイルの準備
作業を効率化するために、最初に色と素材を揃えます。
⓪事前準備：使用素材のダウンロード
制作に使用する画像素材をダウンロードしましょう。
zipファイルの解凍方法
ダウンロードしたファイルは「解凍」しないとFigmaで読み込めません。
- ダウンロードしたzipファイルを右クリック。
- 「すべて展開」 または 「この場所で解凍」 をクリック。
- 新しく現れたフォルダの中にある画像を使用してください。
① スタイルの登録
後で色を一括変更できるように、以下の2色をスタイルに登録しましょう。
・グレー：「#666666」（通常時の文字やアイコン用）
・赤色：「#ED4956」（いいね後のアクセントカラー）
・赤色：「#ED4956」（いいね後のアクセントカラー）
★復習はこちら：【4-5】スタイル
② アイコンの取得
プラグイン「Iconify」を使い、ハートのアイコンを用意します。
・検索ワード ： heart
★復習はこちら：【4-9】プラグイン
ステップ2：いいねボタンの作成（コンポーネント化）
一瞬で状態を切り替えられる「魔法のボタン」を作ります。
①アイコンといいね数を用意
いいね数が増えてもテキストBOXが自動で広がるように「幅の自動調整」を選択します。
▼デザイン仕様(目安)
・テキストサイズ：サイズ 30 / Regular
▼デザイン仕様(目安)
・テキストサイズ：サイズ 30 / Regular
★復習はこちら：【3-4】テキストを編集してみよう
②オートレイアウト化
アイコンと数値（例：120）を選択し、「Shift + A」でオートレイアウトを適用します。
▼デザイン仕様(目安)
・いいねアイコンと文字の間隔：20
▼デザイン仕様(目安)
・いいねアイコンと文字の間隔：20
★復習はこちら：【4-6】オートレイアウト
③コンポーネント＆バリアント化
作成したボタンをコンポーネント化し、バリアントで「通常」と「いいね後」の2パターンを作成します。
★復習はこちら：【4-3】コンポーネントとは
④エフェクトの追加
赤色のボタンには「ドロップシャドウ」を設定し、発光しているような演出を加えます。
▼デザイン仕様(目安)
・ドロップシャドウ：X:0 / Y:0 / ぼかし:30 / 色: #ED4956
▼デザイン仕様(目安)
・ドロップシャドウ：X:0 / Y:0 / ぼかし:30 / 色: #ED4956
★復習はこちら：【4-8】エフェクト
ステップ3：その他のパーツの作成
「ヘッダー」や「メイン画像」など、残りの部品を準備します。
① プロフィールアイコン（マスク機能）
円の図形と人物写真を使って、丸く切り抜きます。
▼デザイン仕様（目安）
・円のサイズ：150×150
・ユーザー名：サイズ 40 / 太さ Bold
▼デザイン仕様（目安）
・円のサイズ：150×150
・ユーザー名：サイズ 40 / 太さ Bold
💡ポイント
以下の図のようにレイヤーパネルで円を写真より下に配置してからマスクをかけましょう。
以下の図のようにレイヤーパネルで円を写真より下に配置してからマスクをかけましょう。
★復習はこちら：【4-7】マスク
② メイン画像とテキストの準備
- メイン画像枠：1080×1080px の正方形を作成します。
- 本文テキスト：テキストツールで作成します。
▼デザイン仕様(目安)
・画像枠：1080×1080px
・本文テキスト：サイズ 32 / 太さ Regular
★復習はこちら：【3-4】テキスト編集/【3-9】画像配置
ステップ4：全体の統合
最後にすべてのパーツを合体させ、レスポンシブ対応（伸縮自在）にします。
ここが最も重要な工程です。
ここが最も重要な工程です。
①縦のオートレイアウト
ヘッダー、画像、ボタン、本文をすべて選択し、「Shift + A 」で合体させます。
★復習はこちら：【4-6】オートレイアウト
②リサイズ設定
・Post_Card（外枠）：「幅を固定（1080px）」に設定
・メイン画像：「幅をコンテナに合わせて拡大（Fill）」に設定
・本文テキスト：「幅をコンテナに合わせて拡大（Fill）」に設定
・メイン画像：「幅をコンテナに合わせて拡大（Fill）」に設定
・本文テキスト：「幅をコンテナに合わせて拡大（Fill）」に設定
③仕上げ
カード全体の角を丸くし、背景に薄い影をつけて立体感を出しましょう。
▼デザイン仕様(目安)
・全体の余白（パディング）：50px
・全体の余白(間隔)：30px
・カードの角丸：40px
・外枠のドロップシャドウ：X:0 / Y:0 / ぼかし:10 / 不透明度:25%
▼デザイン仕様(目安)
・全体の余白（パディング）：50px
・全体の余白(間隔)：30px
・カードの角丸：40px
・外枠のドロップシャドウ：X:0 / Y:0 / ぼかし:10 / 不透明度:25%
④最終チェックポイント
カード（外枠）の端をマウスで左右にぐーっと広げたとき、中の画像やテキストも一緒に横に伸びれば完璧です！
お疲れ様でした！
これでSNSポストカードの完成です。
これでSNSポストカードの完成です。