学ぶプログラミング言語を間違えると悲惨な話

【5分】デザインツールfigmaの使い方を初心者向けに1番わかりやすく解説

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

figmaは、photoshopよりも簡単に無料でデザインができるツール

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

 

figmaでデザインをするメリット

  • 無料
  • 簡単でパワポを使う要領でデザインが出来る
  • 動作が軽い
  • オンラインでデザインができる
  • 複数人で一緒に同じアートボードを確認して同時にデザインが出来る
  • オンラインでデザインを共有できる

figmaと比較した時の他のデザインツールのデメリット

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

figmaでデザインをするデメリット

  • 日本語フォントが少ない(プラグインを使えば増やすことができるようです)

 

【5分】デザインツールfigmaの使い方を初心者向けに1番わかりやすく解説

デザインツールfigmaの使い方は3ステップ

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

 

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

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

 

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

次に、figmaの上にある□やTと書いてあるテキストで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」をクリックすると、リンク取得画面があらわれます。リンクをシェアしたい人に送りましょう。

 

 

Adobe XDのデザインツールは日本語フォントが豊富でオススメです。

【5分】初心者向けAdobe XDの効率化。プラグインなし