初心者向けFigmaチュートリアル

目次
1.Figmaとは？
2.アカウント登録からプロジェクト作成
3.基本操作を覚えよう!
4.実践！シンプルなデザインを作ってみよう
5.まとめ

1.Figmaとは？

「Figmaってよく聞くけど、何ができるの？」と思っている方、多いですよね。簡単に言うと、Figmaはデザインを作るためのツールなんですけれど、最大のポイントは“誰でも簡単に使える”ことです！

普通、デザインツールって専門的で難しそうなイメージがあるじゃないですか。でもFigmaは、ブラウザ上で動くし、ソフトをインストールする必要もありません。しかも、基本無料で始められます！

Figmaについて、この記事で基本をサクッと押さえて、すぐに試してみましょう！

2.アカウント登録からプロジェクト作成

まず、Figmaの公式サイトにアクセスします。無料プランで十分いろいろ試せるので、気軽に始められます！

まずは、Figmaのアカウント登録です。メールアドレスを入力し指定の手続きを行い、登録が完了すると、ログイン画面に移ります。

ログインすると、Figmaの画面がでてきます。そこで、新規ファイルを作成します。これが、デザインのスタート地点です。

また、Figmaのすごいところは、保存が自動でされること。いちいち「保存ボタン」を押す必要がありません。

これでFigmaの準備は完了です！あとは自由に作って楽しむだけです。具体的な操作性については、以下で説明していきます。

3.基本操作を覚えよう!

ここで、Figmaの基本操作について説明していきます。

上の図は、Figmaの基本ツールになります。左から順に、「移動」、「フレーム」、「図形」、「ペン」、「テキスト」、「コメントの追加」、「リソース」となっています。表にて詳しい操作性は説明します。

基本操作	効果
移動	「移動」では、画面上のものの位置を動かせます。また、「移動」の中の「拡大縮小」では、パーツの大きさを変更することができます。
フレーム	「フレーム」は、枠を作成できます。その中の「セクション」では画面上のものをグループ化できます。「スライス」は範囲を指定することで画像を書き出すことができます。
図形	「長方形」や「直線」、「矢印」などのツールで、各形状の図形を作成できます。「画像／動画を配置」は、文字通り画像や動画を配置できます。
ペン	「ペン」ではペンを使って直線や曲線を作成できます。「鉛筆」はドラッグした軌跡を描きます。
テキスト	「テキスト」では画面上にテキストボックスを作成し、文字を入力できます。
コメントの追加	「コメントの追加」では、デザインについてのコメントを残せます。
リソース	「リソース」ではこれまでに作成した画像などを検索できます。

基本ツールの説明は以上になります。これらの機能を使いこなすことで、作りたいものを制作できます。

4.実践！シンプルなデザインを作ってみよう

では、実際にシンプルなデザインを作ってみるための準備をします。

まずは、先程説明したデザインファイルの新規作成です。

ファイルが作成できたら、以下の画像のように、「フレーム」を選択し、画面右側からサイズを選択すると、枠組みを作成できます。

様々な大きさがあるので、用途に合わせて選択しましょう。

これができれば、基本ツールを使用して、図形を描いてもいいですし、ペンで線を書いてもいいので、自由に作品を描いてみてください！最初は難しいかもしれませんが、段々と作っていくうちに慣れていくはずです。後に、さらなるスキルを身につけていくのも面白いかもしれませんね。

5.まとめ

ここまで、Figmaを使い始めるための基本をお話ししてきました。「Figmaって何？」から始まり、アカウント登録の方法や基本操作まで、これさえ押さえておけば、デザイン初心者でも迷うことなくスタートできます。

Figmaのいいところは、直感的に操作できるシンプルさと、プロ顔負けのデザインが作れる本格的な機能が両方そろっているところ！これから少しずつ使い方を覚えていけば、「こんなデザイン、自分に作れるのかな？」と思っていたものが、意外と簡単に作れるようになるはずです。

あとは、実際に触って慣れていくのみ！最初は遊び感覚でOK。気軽にいろんな機能を試してみてくださいね。

当社が提供する広報宣隊は28年制作実績のある株式会社ティー・オー・エムが運営をしており、社内のデザイナーが全ての制作を担当するため安定した高いクオリティでのご提供が可能です。

Figmaやデザインに興味、相談がある方は、まずはお気軽に広報宣隊のお問い合わせフォームからご相談ください！