画像出典Figma
Figmaとは、誰でも簡単にwebサイトやアプリケーションのレイアウト・設計を行うことができるデザインツールです。
アプリやwebサイトを制作する際に、まずは、Figmaを使ってプロトタイプを作成することで、完成時のイメージを共有することができます。
どれだけ内容がわかりやすいwebサイトや使いやすいアプリケーションを作ったりしても、それらが使いづらかったり見栄えが悪かったりすると利用者は増えてくれません。そのため、内容・見た目ともにユーザーが快適に使用できるような設計をこころがける必要があるのです！
そこで本記事では、デザインツールfigmaの使い方や料金などについて説明していきます！
目次
１章『Figma』の概要・始め方
Figmaはwebページ・アプリケーションのUIデザインを設計できるツールです。日本語にも対応しているので、安心して使うことができます！
Figmaの特徴として「ブラウザからいつでも使うことができること」、「複数人で共同作業を行うことができること」、「無料プランでも快適に使えること」などがあります。特に、無料プランでも使いやすいという点は気軽に使うことができて嬉しい点なのではないでしょうか！料金プランや機能の違いなどは後ほどご紹介します。
さらにFigmaではスマホ・タブレット・デスクトップの主要な機種の画面を選択して、実際の画面の縦横比でデザインを作ることができるというのも大きな特徴といえます！
1-1『Figma』の始め方
早速figmaの始め方を紹介していきましょう！
①figmaの公式サイトにアクセス(URLはこちらから！ )
画像出典Figma
②「無料で始める」をクリック
画面の赤枠の「無料で始める」をクリックしてください。
③メールアドレスを入力
画像出典Figma
googleアカウントまたはメールアドレスからアカウントを作成できます。メールアドレスから入力する場合はパスワードも作成しましょう！
④メール認証をする
メールアドレスを登録すると、Figmaからこのようなメールが届きます。赤枠のメールを確認するをクリックしましょう！googleアカウントから登録した方はこの作業をスキップすることができます。
⑤アカウントの作成
画像出典Fimga
認証が終了するとアカウントの作成に入ります。ユーザネームを設定したり、Figmaからのいくつかの質問に答えたりする必要があります。
画像出典Figma
⑥料金プランの選択
画像出典Figma
今回は無料のスタータープランを選択します。
画像出典Figma
この画面でははじめに使う機能を問われています。「スキップ」を押せばホーム画面に移動します。
画像出典Figma
以上でFigmaを使うことができます。次の章ではFigmaの使い方を簡単に紹介します！
２章『Figma』の使い方
Figmaの使い方を紹介していきます！今回は基本的な操作方法や作業を進めていく上でのイメージを主にお伝えできたらと思います。
今回はこのサイトのページのレイアウトを例に配置を作っていきたいと思います。
2-1『Figma』の使い方
①新規ファイルを開く
画像出典Figma
新規ファイルはこのようになっています。
②フレームの設定
画像出典Figma
どの機種の画面を想定してレイアウトを作っていくかを決めます。画面左上の青くなっている＃のようなボタンをクリックすると、画面右赤枠の様にスマホ・タブレット・デスクトップなどから画面を選ぶことができます。今回はデスクトップから、筆者が使っているMacBook Airを選択しました！
画像出典Figma
フレームを選択するとこのようにMacBook Airの縦横比にあったフレームが現れます。
③図形・テキストの配置
画像出典Figma
画像のようにフレーム選択の隣のボタンをクリックすると、配置する図形を選択できます。
Webページの枠組みに合わせて図形を配置していきましょう！
さらに、「T」のボタンをクリックするとテキストを入力することができます。
画像出典Figma
簡単なものにはなりますが、画像の様な形でページの概形を作ることができました！実際にページを作るときにはこのようなイメージを作成してからデザインや配置を改善していきます。
2-2『Figma』の便利な操作方法
先ほどのページを作成するためにFigmaを使っていて便利だと思った使い方や機能が何点かあったので紹介したいと思います！
配置した図形・テキストの編集
これまでに配置した図形やテキストはページ左側に一覧になっています。
画像出典Figma
この一覧になっている部分から該当する図形を選ぶことで図形に編集を加えたりすることができます。目のイラストになっている部分をクリックすると、一時的にその図形を消すことができます。
テキストの間隔を揃える
テキストをページ内にいくつか配置するときに、これらを等間隔に置いた方が見やすくなりますよね！
Figmaでは、テキストを配置したときに、テキストの間隔が等間隔になると赤い数字の表示で等間隔であることを示してくれます。
画像出典Figma
直線の角度調整
図形を配置する際に直線を配置することができるのですが、「この直線をまっすぐ伸ばすのが難しい」「直線の角度をつけるときに、他の直線と角度を揃えたい」ということもあると思います。
画像出典Figma
この様に傾いてしまった直線をクリックする、またはページ左部分のこれまでに配置した図形やテキストの一覧から該当する直線(今回はLine 2)をクリックすると画面右に図形に関する情報が出てきます！
画面の赤枠部分に直線の角度が表示されていることがわかります。この部分を0°に変更すれば、直線を水平にすることができます！
３章『Figma』の料金と商用利用
今まで無料プランでの紹介をしてきましたが、有料プランと無料プランはどの様な違いがあるのかを紹介していきたいと思います！
3-1『Figma』の料金プラン
ここでは料金プラン別の主な機能について取り上げます。さらに詳しく料金プランの違いを確かめたい方は公式サイトの料金プランページをご覧ください！
| 機能\プラン | スターター | プロフェッショナル | ビジネス | エンタープライズ |
| 料金 | 無料 | 1人 1800円/月 | 1人 1800円/月 | 1人 1800円/月 |
| 過去の編集バージョンを参照 | 30日間まで利用可 | 常に利用可 | 常に利用可 | 常に利用可 |
| デザインツール | すべて利用可 | すべて利用可 | すべて利用可 | すべて利用可 |
| クロスプラットフォーム | 可能 | 可能 | 可能 | 可能 |
| 無制限ファイルストレージ | 有 | 有 | 有 | 有 |
| 無制限人数での共同編集 | 可能 | 可能 | 可能 | 可能 |
| チーム内での招待制のプロジェクト | 不可 | 可能 | 可能 | 可能 |
| チーム数の制限 | 有り | 有り | 無制限 | 無制限 |
| プロトタイプでのif/thenロジック・演算子の使用 | 不可 | 可能 | 可能 | 可能 |
| プロトタイプで一つのボタンに複数機能を付与 | 不可 | 可能 | 可能 | 可能 |
| ファイルのパスワード保護 | 不可 | 可能 | 可能 | 可能 |
以上からわかることは、デザイン目的で使う分にはほとんどの機能を無料で使うことができるということです。より発展的なプロトタイプ機能を使う場合であったり、複数のチームが存在する場合、企業内で部外秘のプロジェクトを進める場合には有料プランに加入する必要がありそうです！
3-2『Figma』の商用利用
Figmaは商用利用することができます。公式サイトの利用規約には以下の様に記載があります。
権利の留保。両当事者間では、本サービスに関する権利、権原、権益は、すべてFigmaに帰属し、お客様が本サービス上で開発した、または本サービスにアップロードしたアプリケーション/素材(以下「ユーザーコンテンツ」)の権利、権原、権益は、すべてお客様に帰属します。本規約に明示的に定める場合を除き、各当事者は、自己の知的財産権に関する権利、権原、権益をすべて保持します。明示的に付与されない権利はすべて留保されており、本規約に基づき、いかなるライセンス、誓約、免責、譲渡、許可、その他の権利も、制定法、禁反言、その他により黙示されることはありません。
４章『Figma』のまとめ
今回の記事では、WebページやアプリケーションのUIデザインができるツール、Figmaについてご紹介しました！
無料プランでもデザインに関しては、有料プランと遜色ない利用ができることがわかりました。これは言い換えれば、無料でプロと変わらない機能を使うこともできるということです。是非１度Figmaを試してみることをお勧めします！
今回の記事では、基本的な操作方法の紹介に留めましたが、次回以降Figmaについてさらに詳しい紹介をしていきたいと思っています。
本サイトでは、他にも様々なAIツールを紹介しています。本記事を読んで気になった方はそちらの方も是非チェックをお願いします！（リンクはこちらから)
「生成AIツールを導入して業務を効率化したいが、コストを抑える方法や適切なツールの選択がわからない」とお悩みの方は、お気軽に以下よりお問い合わせください。業務内容の分析から最適なツールの提案、導入のサポートまで、全面的にサポートいたします！
また、AIツールの掲載も無料で承っておりますので、お気軽にご連絡ください！
エラー: コンタクトフォームが見つかりません。
関連記事
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント