フリーランスが営業なしで受注する方法5つ

Figmaの使い方は5分で3つだけ覚えればOK【初心者向け】画像で説明

デザインツールFigmaの使い方を、5分で初心者向けに1番わかりやすく解説します。

Figmaの他の解説ブログは、あまり使わない枝葉末節まで説明しているので、絶対使う部分だけ効率よくマスターしましょう。

 

Figmaの使い方を知る前に、特徴を知ろう

Figmaは有名なデザインツールであるphotoshopよりも簡単にデザインができるツールで、今デザインツールの中で注目されているツールの一つです。

すでに知っている人は飛ばしてOKです。

 

Figmaのメリット

  • 無料
  • 簡単にパワポを使う要領でデザインが出来る
  • 動作が軽い
  • オンライン上でデザインができるので安心して保存できる
  • 複数人で同時にデザインが出来る
  • オンラインでデザインを共有できる

 

Figmaのデメリット

  • 日本語フォントが少ない(プラグインを使えば増やすことができるようです)
  • web制作会社に就職する、制作会社からの受託案件を行う場合はFigmaだけのスキルではダメ(PhotoshopやIllustratorのスキルも必要)

 

Figma以外のデザインツールのデメリット

  • 有料(sketchやphotoshop)
  • 動作が重い(photoshopやillustrator)
  • 使い方が難しい(photoshop)
  • オンライン共有が出来ないので送付に時間がかかる(photoshopやillustrator)

 

 

5分でわかるFigmaの使い方

Figmaの使い方は3ステップ

  1. Figmaの新規登録を行う
  2. アートボードを作成し、中身を入れてデザインをする
  3. webデザインを見てもらいたい人へ共有する

 

1.Figmaのサイトで新規登録する

まず「Figmaのサイト」に飛んで、右上にある緑色の「sign up」ボタンを押して、必要事項を記入してください。

 

2. Figmaのアートボードを作成しデザインをする

アートボードの作成

左上のマーク→Frameをクリック

 

グリッド線を引く

グリッド線を引くことで、レイアウトの位置関係がわかりやすくなります。

右にある「Layout Grid」の「+」をクリックします。

 

次に「Grid」を選択すると、色の変更やマス目の変更ができます。

デフォルトの10pxで大丈夫です。

 

中身のデザインをしていくデザイン

次に、画面の上部のツールバーからFigmaのデザインをしていきます。

 

Figmaの上部のツールバーにある各ボタンの説明

  • □ボタン:図形を作成する
  • /ボタン:線を作成する
  • →ボタン:矢印を作成する
  • Tボタン:テキストを入力する
  • 吹き出しボタン:デザインにコメントを入力します。共有してコメントをチェックしてもらえます。

Figmaのデフォルト設定でデザイン出来る日本語フォントは4つ

テキストの日本語フォントは以下4つのみを使うことができます。

  • Noto Sans JP
  • Noto Serif JP
  • Nico moji
  • Nikukyu

下2つは特徴的な装飾フォントなので、基本的には上2つのみを使っています。プラグインを入れることで日本語fontの数は増やせるようです。

英語フォントはGoogleフォントなら大体使えます。

テキストのフォントをFontawesomeに変えて、FontawesomeのCheet Seatからアイコンをコピペすればアイコンも使うことができます。

 

 

3.デザインを見てもらいたい人に共有する

右上の「Share」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。

 

Figmaの使い方まとめ

Figmaは5分で使い方が分かるような超簡単なツールです。

特にデザインに細かな決まりがないときなどは、ぱぱっと作って共有しやすいです。

Figmaの他に、Adobe XDというデザインツールもオススメです。こちらは日本語フォントが豊富でオススメです。

Adobe XDはデザイン初心者向け。プラグインなしで効率化する方法を紹介

 

webデザインを独学で最短マスターする方法もどうぞ

【無料】webデザインの独学方法!4ステップだけ