INDEX
目次
用語集/ショートカット集について
- 今全てを読む必要はありません！
- 教材を進めていくにあたってわからない単語、知りたいショートカットが出てきたらこのページに戻ってきてください。
- Figma教材の学習をするときは、これから説明する「タブ複製」を行い、常にこのページを開けるようにしておくのをお勧めします！
このページの使い方
準備
1. 「タブを複製する」
教材を開いているブラウザ上部のタブ(図参照)を右クリックし、「タブを複製」をクリック
教材を開いているブラウザ上部のタブ(図参照)を右クリックし、「タブを複製」をクリック
2. 片方のタブで教材を進め、もう一つのタブは用語集/ショートカットキーのまま留めておく
これで他の章に進んでも、「用語集/ショートカット集」のタブをクリックすればいつでも戻ってこられます。
これで他の章に進んでも、「用語集/ショートカット集」のタブをクリックすればいつでも戻ってこられます。
わからない単語が出てきたとき
1. 「用語集/ショートカット集」を開いてWindowsなら「Ctrl+F」、Macなら「Command+F」をキーボードで同時に押す
※画像のような入力欄が現れる
※画像のような入力欄が現れる
2. 現れた入力欄にわからない単語またはショートカットを入力する
すると画像のようにハイライトで示されます。
すると画像のようにハイライトで示されます。
1. 用語集
第２章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
ホーム画面
|
Figmaを立ち上げたときに最初に表示される、ファイルが並んでいる管理画面のこと。
|
作りたいファイルを探すときや、新しくデザインを始めるとき。
|
|
デザインファイル
|
実際にWebサイトなどのデザインを描き込んで保存するための、1つの作品データのこと。
|
具体的な制作作業をスタートさせるとき。
|
|
インポート
|
自分のパソコンに保存されているファイルを、Figmaの中で使えるように読み込むこと。
|
配布されたサンプルデータを開いて中身を確認するとき。
|
|
下書き（ドラフト）
|
自分専用の練習場所や、まだ整理されていないアイデアを書き溜める作業スペースのこと。
|
個人的な練習をするときや、正式なファイルにする前のメモをとりたいとき。
|
|
ライブラリ / プラグイン
|
Figmaをより使いやすくするために追加できる、便利な素材集や補助ツールのこと。
|
作業を効率化するための特殊な機能を使いたいとき。
|
|
編集画面
|
実際に図形を描いたり、色を塗ったりするメインの作業用画面のこと。
|
デザインの実務作業を行っているとき。
|
|
ツールバー
|
四角形を描く、文字を打つなど、作業に必要な道具が並んでいる道具箱のこと。
|
目的の操作に合わせて使う道具を持ち替えたいとき。
|
|
左パネル
|
作ったパーツの一覧（レイヤー）や、ページの名前が並んでいる管理エリアのこと。
|
特定のパーツを選びたいときや、ページを切り替えたいとき。
|
|
レイヤー
|
デザインを構成する図形や文字など、一つひとつの部品のこと。
|
重なっているパーツの順番を入れ替えたり、名前を確認したりするとき。
|
|
右パネル
|
選択したパーツの色、大きさ、透明度などを細かく調整できる設定画面のこと。
|
パーツの見た目を変えたいときや、位置を数値で調整したいとき。
|
|
キャンバス
|
普段作業するスペースのこと
|
実際にパーツを置いてデザインを組み立てるとき。
|
|
プレゼンテーション（プレビュー）
|
作ったデザインを、実際のスマホやPCの画面のように映し出して確認できる機能のこと。
|
デザインの完成イメージをチェックするときや、動きを確認するとき。
|
|
オブジェクト
|
キャンバスの上に置かれた、図形や文字、写真などのあらゆるパーツの総称のこと。
|
パーツを移動させたり、形を変えようとして選択したとき。
|
第３章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
ポインタ
|
図形を選択したときに四隅に出る、サイズ変更のための小さな目印のこと。
|
マウスでドラッグして、図形の大きさを自由に変えたいとき。
|
|
縦横比率
|
図形や写真の、縦と横の長さのバランスのこと。
|
Shiftキーを押しながら、形を崩さずに拡大縮小したいとき。
|
|
不透明度
|
色の透け具合を0〜100％の数字で表したもの。
|
下にある図形を透かして見せたり、色を薄くしたりするとき。
|
|
角丸（かくまる）
|
四角形の尖った角を、丸く整える設定のこと。
|
ボタンの角を丸くして、柔らかい印象にしたいとき。
|
|
スポイトツール
|
画面上の好きな場所から、色を吸い取ってコピーできる道具のこと。
|
写真やロゴに使われている色を、そのまま自分の図形にも塗りたいとき。
|
|
トラッキング
|
文字と文字の間の「横方向の隙間」のこと。
|
タイトルの文字の間を等間隔に広げたいとき。
|
|
行間（ぎょうかん）
|
文章が数行にわたるときの、上下の行の隙間のこと。
|
文章を読みやすくするために、行の詰まり具合を調整するとき。
|
|
デバイスフレーム
|
iPhoneやPCなど、あらかじめ用意された端末専用の枠のこと。
|
制作したいスマホの機種にぴったりのサイズで、デザインを始めるとき。
|
|
トリミング
|
写真の必要な部分だけを残して、周りを隠す機能のこと。
|
写真の余計な部分をカットして、見せたい範囲だけを決めるとき。
|
|
手のひらツール
|
作業画面そのものを掴んで、上下左右にスライドさせる道具のこと。
|
画面を大きくズームしているときに、別の場所へ移動したいとき。
|
|
アンカーポイント
|
自由な線（パス）を描くときの、線の曲がり角や端っこにある「点」のこと。
|
ペンツールを使って、オリジナルの図形やイラストを作るとき。
|
|
エクスポート
|
Figmaで作ったものを、画像ファイル（PNGやJPGなど）として取り出すこと。
|
完成したデザインを画像にして、自分のパソコンに保存するとき。
|
|
ラスター画像
|
小さな色の点が集まってできている、写真のようなデータのこと。
|
デジタルカメラで撮った写真などを、デザインに貼り付けて使うとき。
|
|
ベクター画像
|
計算式で描かれていて、どれだけ拡大しても線がボヤけないデータのこと。
|
ロゴやアイコンなど、後からサイズを大きく変える予定があるとき。
|
第４章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
定規（じょうぎ）
|
画面の端に表示される、目安となる「ガイド線」を引き出すための目盛りのこと。
|
デザインの縦軸や横軸をピシッと綺麗に揃えたいとき。
|
|
グリッド
|
フレームの上に表示される、規則正しい網目模様のガイドのこと。
|
画面を何分割かして、バランスよく要素を配置したいとき。
|
|
コンポーネント
|
何度も使うパーツを、いつでも呼び出せる「部品」として登録したもの。
|
ボタンなどの共通パーツを、後から一気に作り直せるようにしたいとき。
|
|
親（メインコンポーネント）
|
部品の大元となる、マスターデータの役割を持つレイヤーのこと。
|
全てのパーツに共通する色や形の変更を、まとめて行いたいとき。
|
|
子（インスタンス）
|
親をコピーして作られた、分身のようなレイヤーのこと。
|
親のデザインを引き継ぎつつ、文字の中身だけ個別に変えたいとき。
|
|
アセットパネル
|
登録したコンポーネント（部品）が、一覧で整理されている棚のような場所のこと。
|
作っておいた部品を、別の画面にドラッグ＆ドロップで配置するとき。
|
|
バリアント
|
同じ部品の「色違い」や「状態違い」を1つのセットとして管理する機能のこと。
|
「通常時」と「クリック時」のボタンを、右パネルで素早く切り替えたいとき。
|
|
スタイル
|
よく使う色や文字の設定に名前をつけて、再利用できるように保存したもの。
|
ブランドカラーや見出しの文字サイズを、常に統一して使いたいとき。
|
|
オートレイアウト
|
中身の量に合わせて、要素の並びや余白を自動で整えてくれる機能のこと。
|
文字数に合わせてボタンの幅を自動で伸ばしたり、中身を等間隔に並べたいとき。
|
|
パディング
|
オートレイアウトの枠と、中にある要素との間の「内側の余白」のこと。
|
文字とボタンの端の間に、適切な隙間を作りたいとき。
|
|
コンテンツを内包
|
中に入っている要素の大きさに合わせて、外側のフレームが自動で伸び縮みする設定のこと。
|
文字を増やしたときに、外側の枠も一緒に大きくしたいとき。
|
|
コンテナに合わせて拡大
|
外側の枠の大きさに合わせて、中の要素が横いっぱいに広がる設定のこと。
|
スマホ画面の横幅いっぱいに、ボタンを広げて配置したいとき。
|
|
マスク
|
特定の形の範囲内だけを見せて、それ以外を隠す「型抜き」のような機能のこと。
|
四角い写真を、星形や丸い形に切り抜いて見せたいとき。
|
|
エフェクト
|
影をつけたり、全体をぼかしたりする装飾効果のこと。
|
ボタンを浮き上がらせて見せたり、背景をぼかしておしゃれにしたいとき。
|
|
プラグイン
|
Figmaに新しい便利機能を追加できる、スマートフォンのアプリのような拡張ツールのこと。
|
本物のような写真素材を自動で入れたり、アイコンを検索して持ってくる手間を省きたいとき。
|
第５章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
ワイヤーフレーム
|
ページのどこに何を置くかを決めるための、シンプルな「設計図」や「骨組み」のこと。
|
デザインの色や写真を決める前に、情報の配置を整理するとき。
|
|
サイトマップ
|
Webサイトの中にどんなページが必要かを一覧にした「地図」のようなもの。
|
サイト全体のボリュームを把握したり、必要なページを漏れなく洗い出したりするとき。
|
|
ヘッダー
|
Webサイトのページの一番上に共通して表示される、ロゴやメニューがある場所のこと。
|
どのページにいても他のメニューへ移動できるように、リンクをまとめるとき。
|
|
コンテンツ
|
ページの中身となる、文章や画像などの「メインの情報」が詰まった部分のこと。
|
サービスの特徴や詳細など、ユーザーに一番伝えたい情報を配置するとき。
|
|
フッター
|
Webサイトのページの一番下にある、連絡先や著作権などが書かれた場所のこと。
|
ページの締めくくりとして、サイトの補助的なメニューや情報をまとめるとき。
|
|
メインビジュアル
|
ページを開いたときに最初に目に飛び込んでくる、一番目立つ大きな画像や文字のこと。
|
サイトの第一印象を決める大事なイメージを、トップページの最上部に置くとき。
|
|
無彩色（むさいしょく）
|
白、黒、グレーといった、鮮やかな「色味」を持たない色のこと。
|
色の好みに左右されず、レイアウトの使いやすさだけに集中して確認したいとき。
|
|
コンテンツ幅
|
文章や画像などの主要な中身を収めるための、左右の横幅の決まりのこと。
|
画面のサイズが変わっても、中身がバラバラにならずに綺麗に揃って見えるようにするとき。
|
|
プレビュー
|
作っているデザインを、実際のWebサイトとして表示されたときの状態で見ること。
|
文字の大きさや配置のバランスが、実際の画面で見て使いやすいか確認するとき。
|
|
模写（もしゃ）
|
お手本となるデザインを、ピクセル単位でそっくりそのまま再現して作ってみること。
|
操作に慣れるために、プロが作ったデザインのルールを肌で感じて学びたいとき。
|
第６章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
プロトタイプ
|
本物のWebサイトのように、ボタンを押すと画面が切り替わる「試作品」のこと。
|
デザインの使い勝手や、ページが繋がる流れを実際に動かして確かめるとき。
|
|
導線（どうせん）
|
ユーザーが迷わずに目的のページまで辿り着けるような「通り道」のこと。
|
どのボタンを押したら、どの画面に移動させるかを計画するとき。
|
|
ノード（接続ポイント）
|
リンク元のパーツから出る、青い枠や白丸の「線のつなぎ目」のこと。
|
パーツと移動先の画面を、線でつなぐ作業をするとき。
|
|
フロー設定
|
画面がどこから始まって、どの画面へ繋がっていくかという「一連の流れ」のこと。
|
ユーザーがサイトを操作する順番を、線をつないでシミュレーションするとき。
|
|
遷移（せんい）
|
ボタンなどを押したときに、別の画面へ「パッと切り替わる」こと。
|
リンクをクリックして、正しく次のページが表示されるか確認するとき。
|
|
インタラクション
|
ボタンを押すなどの操作をしたときに起こる「反応」や「演出」のこと。
|
メニューが横から出てきたり、画面が切り替わったりする動きを細かく決めるとき。
|
|
ハンバーガーメニュー
|
三本線が並んだ、スマホサイトなどでよく見かける「メニューを開くボタン」のこと。
|
狭い画面の中で、たくさんのメニューを隠してスッキリ見せたいとき。
|
|
オーバーレイ
|
今見ている画面を消さずに、その上に別の画面を「重ねて表示」させること。
|
ハンバーガーメニューの中身や、お知らせの窓を画面の上に載せて出したいとき。
|
|
共有（共有機能）
|
自分が作ったFigmaのデータを、URLなどで他の人に見てもらえるようにすること。
|
作ったデザインや動きを、チームの仲間やクライアントに確認してほしいとき。
|
第７章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
ページ
|
1つのファイルの中に、別の独立した作業スペースを新しく作れる機能のこと。
|
設計図用と本番デザイン用で、作業場所をきれいに分けて整理したいとき。
|
|
サムネイル
|
記事の内容などがひと目でわかるように、小さく表示された見本画像のこと。
|
お知らせ一覧などのデザインで、それぞれの内容をイメージさせたいとき。
|
|
スタイルガイド
|
デザインで使う色や文字のルールを、誰が見てもわかるようにまとめた一覧表のこと。
|
ページが増えてもデザインがバラバラにならないよう、ルールを再確認して作業するとき。
|
第８章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
バナー（バナー広告）
|
他のページへ誘導するために設置される、画像形式の「看板」や「旗」のようなもの。
|
自分の作ったデザインをクリックしてもらい、別のWebサイトへ案内したいとき。
|
|
アイキャッチ
|
ユーザーの目をパッと引くための、印象的な写真やキャッチコピーのこと。
|
たくさんの情報の中で、自分のバナーを一番に注目させたいとき。
|
|
トンマナ（トーン＆マナー）
|
デザインの色、フォント、雰囲気などの「一貫性」や「ルール」のこと。
|
広告と、その先のWebサイトの雰囲気を合わせて、違和感がないようにするとき。
|
|
データ容量
|
画像ファイルの「データの重さ」を表す数値のこと。
|
Webサイトの表示を速くするために、決められた制限内にファイルサイズを収めるよう保存するとき。
|
|
ピクセル（px）
|
デジタル画像を構成する小さな「点」の単位で、画面上のサイズを表すもの。
|
バナーの横幅や縦幅を、決められた正確な大きさに設定するとき。
|
|
テンプレート
|
あらかじめ決まったサイズや配置が準備されている、「ひな形（土台）」のこと。
|
ゼロからサイズを測らなくても、よく使われる規格ですぐに制作を始めたいとき。
|
|
リサイズ
|
1つのデザインを、中身のバランスを整えながら別のサイズに作り替えること。
|
横長のバナーで作ったデザインを、Instagram用の四角い形に変更したいとき。
|
第９章新出ワード
|
用語
|
意味や説明
|
主に出てくるところ / 使用シーン
|
|---|---|---|
|
LP（ランディングページ）
|
広告などをクリックしたときに最初にたどり着く、注文や申し込みに特化した縦に長い1枚のページのこと。
|
ユーザーに「商品の購入」や「資料請求」などの具体的な行動を促したいとき。
|
|
アクション
|
ページを見た人が、ボタンを押して「申し込み」や「問い合わせ」などの具体的な行動を起こすこと。
|
ユーザーが迷わずボタンをクリックできるように、目立つデザインを考えるとき。
|
|
UI（ユーザーインターフェース）
|
ボタンの配置や情報の整理の仕方など、使う人が迷わず操作できるように工夫された仕組みのこと。
|
ホームページなどの、情報の探しやすさや使い心地を重視して設計するとき。
|
|
デザイン実装（デザインじっそう）
|
骨組みであるワイヤーフレームに沿って、実際に色や写真、文字を当てはめて完成品に仕上げていく作業のこと。
|
サイトの設計図が固まり、いよいよ最終的な見た目を作り込んでいくとき。
|
2. macOS特定キーの記号表記解説
|
記号表記
|
記号の意味
|
|---|---|
|
⌘
|
Command
|
|
⌥
|
Option(alt)
|
|
^
|
Control
|
|
⇧
|
Shift
|
|
⌫
|
Backspace
|
3. よく使う・覚えておきたいショートカット
a. レイヤー操作
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
一つ上の階層のレイヤーを選択する
|
⇧ + return(enter)
|
shift + return(enter)
|
|
ロックされたレイヤーを選択する
|
⌘ + 右クリック
|
ctrl + 右クリック
|
|
レイヤー(選択中以外)を全て閉じる
|
⌥ + L
|
alt + L
|
|
選択中のレイヤーの表示・非表示を切り替える
|
⌘ + ⇧ + H
|
ctrl + shift + H
|
|
選択中のレイヤーの階層を一つ上に上げる
|
⌘ + ]
|
ctrl + ]
|
|
選択中のレイヤーの階層を一つ下に下げる
|
⌘ + [
|
ctrl + [
|
|
選択中のレイヤーの階層を一番上に上げる
|
]
|
]
|
|
選択中のレイヤーの階層を一番下に下げる
|
[
|
[
|
|
選択中のレイヤーをAuto Layout化
|
⇧ + A
|
shift + A
|
|
選択中のレイヤーのAuto Layoutを解除
|
⌥ + ⇧ + A
|
alt + shift + A
|
b.オブジェクト
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
複数コンポーネントを作成する
|
コンポーネント化したい複数オブジェクト選択 ＞ カンバス上部のコンポーネントアイコンメニュークリック ＞ 「Create Multiple Components」
|
（macOSと同じ）
|
|
フォントの一括変更
※変更対象のテキストレイヤー選択しておく
|
⌘ + / ＞ 「Select all with same font」
|
ctrl + / ＞ 「Select all with same font」
|
|
表示されていないすべてのレイヤーを表示する
|
⌘ + / ＞ 「Unhide all objects」
|
ctrl + / ＞ 「Unhide all objects」
|
|
すべてのオブジェクトのロックを解除
|
⌘ + / ＞ 「Unlock all objects」
|
ctrl + / ＞ 「Unlock all objects」
|
|
他のオブジェクトの左上コーナーにペースト
※ペースト可能な状態で特定のオブジェクトを選択しておく
|
⌘ + ⇧ + V
|
ctrl + shift + V
|
|
スタイルを複製する
|
⌥ + ⌘ + C（スタイルをコピー）⌥ + ⌘ + V（スタイルを貼り付け）
|
ctrl + alt + C（スタイルをコピー）ctrl + alt + V（スタイルを貼り付け）
|
|
画像の自動インポート機能（表示したパネルより複数の画像を選択すると、それらを連続で使い、個別にシェイプを塗りつぶすことが可能）
|
⌘ + ⇧ + K
|
ctrl + shift + K
|
c.表示
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
Layers に切り替える
|
⌥ + 1
|
alt + 1
|
|
Assets に切り替える
|
⌥ + 2
|
alt + 2
|
|
Design に切り替える
|
⌥ + 8
|
alt + 8
|
|
Prototype に切り替える
|
⌥ + 9
|
alt + 9
|
|
Dev Mode に切り替える
|
⌥ + 0
|
alt + 0
|
|
UI の表示・非表示を切り替える
|
⌘ + .(ピリオド) or \(バックスラッシュ)
|
ctrl + \(バックスラッシュ)
|
|
上・下の Pages に移動する
|
PageUp or PageDown
|
PageUp or PageDown
|
d.整列
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
左寄せ・右寄せ（Align Left/Right）
|
⌥ + A and D
|
alt + A and D
|
|
上寄せ・下寄せ（Align Top/Bottom）
|
⌥ + W and S
|
alt + W and S
|
|
中心寄せ・中央寄せ（Align Center）
|
⌥ + H and V
|
alt + H and V
|
|
等間隔に分布 – 中心・中央（Distribute Spacing）
|
⌃ + ⌥ + H and V
|
alt + shift + H and V
|
|
オブジェクトを整列（Tidy Up）
|
⌃ + ⌥ + T
|
alt + shift + T
|
e.ファイル・バージョン
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
デザインのバージョン管理、保存をする
|
⌥ + ⌘ + S
|
ctrl + alt + S
|
f.その他
|
実行内容
|
コマンド(macOS)
|
コマンド(Windows)
|
|---|---|---|
|
ショートカットコマンド一覧を表示（これまでに使ったことのあるショートカットは青色に塗りつぶされる）
|
⌃ + ⇧ + ?
|
ctrl + shift + ?
|
|
Figmaのリソース使用状況を確認
|
⌘ + / ＞ 「Resource use」
|
ctrl + / ＞ 「Resource use」
|