Web制作に便利なデザインツール「Figma」の使い方【初心者にも】※2022年7月27日 日本語対応

ブラウザ上で簡単に使えるデザインツール「Figma」。

プラグインを駆使すればプロレベルのデザインを制作でき、頻繁なアップデートによりどんどん進化している注目のツールです。

Web制作をする際の構成にあたるワイヤーフレームや、幅広いデザインの作成に便利なため、最近はFigmaを利用するデザイナーが増加しています。さらに操作の簡単さからデザイナーでない方にもおすすめです。

今回は初心者の方に向けてFigmaの使い方をご紹介します。特にWeb制作時によく使う機能を中心に、実際の作業画面をお見せしながら解説していきます。

・Figmaの画像つきに使い方が知りたい

・実際の作業画面をみたい

・基本的な操作が知りたい

こんな悩みを持った方に見ていただきたいです。

※2022年7月27日 日本語対応！設定は次のとおりです。

初心者がマスターすべきFigmaの基本操作

Figmaの操作方法は多岐に渡ります。細かい機能はたくさんありますが、よく使う機能は限られるため初心者の方でも簡単に扱えるところが特徴的です。

初心者の方が最初に覚えると便利な基本操作を紹介します

アートボード作成

制作物に合わせたサイズのアートボードを作成し、アートボードの中に素材を置いていきます。

1つのファイルの中に複数のアートボードを置ける点がFigmaの利点です。

まずはアートボードの作成方法をご紹介します。

上部にあるバーの左から3つ目のアイコンにカーソルを合わせて、「フレーム」をクリック。右側に出てくるフレームの一覧から目的のサイズを選ぶことも、カーソルを合わせて自由にサイズを変更することも可能です。

ショートカットキー「A」もしくは「F」でも同様の操作ができます。

右側のバー内にある「フレーム」の項目から1px単位でサイズ調整も可能です。「W」が横幅、「H」が縦幅を表しています。

よく使用する機能は以下の4つです。

アートボードの左上に記載されている文字をダブルクリックすると名前を変更できます。任意の名前に設定するとアートボードが増えてきた時に管理しやすいため、随時変更すると良いでしょう。

図形をつくる

さっそくアートボード内にデザイン制作をしていきましょう。

Figmaではさまざまな形の素材を作成できます。

上部にあるバーの左から4つ目のアイコンをクリックすると7つの項目が出てきます。

いずれかの項目をクリックするとカーソルが十字に変わり、ドラッグすると図形が現れます。

アートボードの時と同様に、右側のパネルから色や枠線の有無、1px単位のサイズ変更が可能です。初めから全ての機能を覚えるのは難しいため、使いながら慣れていきましょう。

テキストを入力

アートボード内にテキストを入力していきます。

上部にあるバーの左から6つ目のアイコンをクリックすると、カーソルが十字に変わります。任意の場所でドラッグしテキストボックスを作成すると、テキストボックス内に文字を入力できるようになります。

右側のパネルには文字色やフォント、文字間の幅を調整できる機能が表示されます。

ショートカットキー「T」で同様の操作ができ、「K」を押してテキストボックスを調整するとテキストボックスの大きさに合わせて文字サイズが変化します。

文字や素材の色を変更

色の変更をしたい素材をクリックし、下記画像の赤枠内から色を変更します。

赤枠内の文字列をクリックしてHex形式で直接色を指定することも、色のついた四角をクリックしてカラーチャートから色を選択することもできます。

Figmaでは一色塗りだけでなく、濃淡を使い分けたさまざまな形のグラデーションが簡単に作れます。

「べた塗り」をクリックすると項目が現れ、「線型」を選択すると線に沿ったグラデーションに切り替わります。細かい調整を行い好みのグラデーションを作成してみましょう。

制作スピードを上げるFigmaのショートカットキー

Figmaではそれぞれ項目をクリックすると操作できますが、ショートカットキーを活用すると作業効率を格段に上げられます。

いきなり全て覚えるのは難しいため、まずはよく使うショートカットキーから覚えて作業スピードを上げていきましょう。

【基本編】コピー&ペーストなど高頻度で使用するショートカットキー

まずは基本編、高頻度で使用するショートカットキーを5つ紹介します。

Command（Ctrl）+Cでコピー、Command（Ctrl）+Vでペーストが基本ですが、option（Alt）+ドラッグはコピー&ペーストをしながら移動できるためよく使用します。

完成前に確認してもらう時などは、書き出さずにPNG形式でコピーして貼り付けるのが便利です。

【オブジェクト編】オブジェクトを整列させる

素材や文字などのオブジェクトも、ショートカットキーを使えば簡単に整列できます。

複数のオブジェクトを選択してショートカットキーを押すと簡単に整列できるため、一つずつオブジェクトを揃えていく必要はありません。一見揃っているように見えても、数px単位でずれている場合があるため、整列機能を活用しましょう。

ワンクリックで操作を切り替え

ショートカットキーを使えば、いちいちツールを選択しなくても操作を切り替えられます。

長方形や円、直線など、デザイン制作でよく使用するものばかりなので覚えておくと便利です。

Web制作に役立つ便利なFigmaプラグイン

Figmaでは既存の機能だけでなく、プラグインをインストールすることでより多くの操作が可能になります。

中でも初心者におすすめのプラグイン3つをご紹介します。

フリー画像が使える

フリー画像がたくさん掲載されている「Unsplash」。UnsplashのプラグインをインストールするとFigma内で画像検索・挿入までを行えます。

オブジェクトを用意して画像をクリックすると、オブジェクトのサイズに合わせて画像が挿入されるため、仮で画像を挿入しておきたい時にも便利です。

背景透過が簡単にできる「Remove BG」

背景透過もプラグインを使えば簡単にできます。Remove BGを使用する際はAPIの設定が必要な点に気をつけてください。

画像を選択してプラグイン→Remove BG→Runを選択すると背景が透過されます。

画質が鮮明でない場合があるため、気になる際は他のグラフィックツールをおすすめしますが、簡単な切り抜きであればFigmaで十分です。

フォント選びに便利な「Font Preview」

テキストを入力してフォントを選択する際、すでにフォントが決まっている場合は直接入力できますが、比較して選びたい場合にはFont Previewがおすすめです。

Preview text内に挿入したいテキストを入力すると、PC内で使えるフォントの一覧が出てきます。お気に入り登録もできるため、よく使用するフォントはお気に入りに登録しておくと便利です。

Figmaのデータを他人に共有する方法

Web制作などは特に、完成後や制作途中に他の人にデータを共有することが多いです。

Figmaでデータを作成した後、書き出し前に他の人に共有する方法を2つご紹介します。

Figmaアカウントを持っていない人に共有する方法

上部のバーにある「共有」ボタンを押すと共有に関する詳細設定が出てきます。

「Anyone with the link」「can view」になっていることを確認してリンクを発行すると、Figmaのアカウントを持っていない人でもデザインを見れるようになります。

編集データを共有

Figmaアカウントを持っている場合はアカウントに登録しているメールアドレスを入力し、「can edit」になっていることを確認して送信すると、招待された人はデータを編集できるようになります。

データ自体を下書きではなくTeam projectに移動しなければならない点に注意しましょう。無料プランではTeam projectにおけるデータは最大3つまでです。

初心者向けFigmaの使い方まとめ

初心者に向けたWeb制作時によく使用するFigmaの機能・使い方を紹介しました。

基本的な機能さえ抑えてショートカットキーを覚えると、作業スピードが格段に上がります。ショートカットキーは他のデザインツールと共通するものも多いため、今回紹介したショートカットキーをぜひ活用してみてください。

さらにプラグインを活用することで幅広いデザインを制作できます。無料ツールとは思えないほど優秀なツールであることから、多くのデザイナーに愛され、頻繁に使われるようになりました。

記事の最初の方でも紹介した通り、基本的な操作はあまり難しくありません。ちょっとしたバナーやポスターを作りたい時や、ホームページの構成を作る際にも役立つため、デザイナーでない方にもおすすめのツールです。

ぜひFigmaを活用してデザイン制作を行ってみてください。

このようなウェブサイト制作に関する画像編集はFigmaで対応できますが、専門的なウェブサイト制作や集客に関しては専門の企業を使った方がおすすめです。