絞れば、出てくる、アイディア。

Figma(フィグマ)の始め方とブログ作成時の応用方法​

Figma(フィグマ)の始め方とブログの画像作成に応用する方法

Figma(フィグマ)は、UIデザイナーやWEBデザイナー向けのツールと思われがちですが、実は簡単に、直感的に、しかも無料で使えてブログの画像作成アイキャッチ画像の作成にも使える便利なツールです。

weblemonも、多くの画像をFigmaを使って作成しています!
今回は、Figmaの始め方と、ブログの画像作成に応用する方法を紹介します。

1. Figmaの始め方

まず初めに、Googleで「Figma」と検索します。「F」をモチーフにしたロゴが目印です。

↑まず初めに、Google「Figma」検索します。「F」をモチーフにしたロゴが目印です。
一番上に表示されている「Figma:The Collaborative…」というサイトをクリックします。

こちらからもFigmaのサイトにアクセスできます!

右上の「Get started for free」か、右中央の「Get started」をクリックします。どちらを押しても無料で始められます

↑このような画面が表示されるので、右上の「Get started for free」か、右中央の「Get started」をクリックします。どちらを押しても無料で始められます。

Googleアカウントでログイン、もしくは登録したいメールアドレスとパスワードを入れて、「Create account」をクリックします。

Googleアカウントでログイン、もしくは登録したいメールアドレスとパスワードを入れて、「Create account」をクリックします。

Googleアカウントで登録しない場合は、登録したメールアドレスに確認メールが届くので、メールを確認します。

Googleアカウントで登録しない場合は、登録したメールアドレスに確認メールが届くので、メールを確認します。

Figmaから届いているメール「Varify email」というボタンがあるので、それをクリックして登録を完了させます。

Figmaの画面に戻って、初めの設定を完了させます。まず初めの画面で「Nobody (just me)」を選択します。

Figmaの画面に戻って、初めの設定を完了させます。まず初めの画面「Nobody (just me)」を選択します。

「Starter」を選択
「Design with Figma」を選択

↑画面に従って、設定を進めます。無料プラン「Starter」を選択し、次の画面で「Design with Figma」を選択します。

Figmaの編集画面が表示されました!

↑最初の設定が完了し、Figmaの編集画面が表示されました!

↑編集画面右上の部分で、編集画面の背景色を変更することができます。

2. ブログの画像作成に応用する方法

編集画面左上の「井」のようなマークを押します。  「Frame」を選択して画像のサイズを決めていきます。

編集画面左上の「井」のようなマークを押します。
 「Frame」を選択して画像のサイズを決めていきます。

編集画面右側の「Frame」で、サイズを変更できます。 「W」は画像の幅を、「H」は画像の高さを表しています。ここの数字を変更することでサイズを変えることができます。

編集画面右側「Frame」で、サイズを変更できます。
「W」画像の幅を、「H」画像の高さを表しています。ここの数字を変更することでサイズを変えることができます。

画像を用意します。それぞれサイズが違っても大丈夫です。 編集画面に画像を貼り付けたら、画面左側の「Layers」に画像のファイル名が表示されます。

↑今回は、レモンシロップを作りましょう的なブログのアイキャッチ画像を作ります。
レモンとレモンシロップを使った飲み物の画像を用意します。それぞれサイズが違っても大丈夫です。

ドラッグ&ドロップでエクスプローラーやFinderから直接貼り付けできます。編集画面に画像を貼り付けたら、画面左側の「Layers」に画像のファイル名が表示されます。

まず、レモンの画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります。

↑まず、レモンの画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります
そうすると、画像がフレームの中に収まるようになり、画面左側の「Layers」のところに「image 1(=レモンの画像)」「Frame 1」の下に入ります。

同様に、飲み物の画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります。

↑同様に、飲み物の画像をマウスで掴んでドラッグし、フレームの中へ引っ張ります
初めに作ったフレームのサイズで、画像ができました!

↑最後に、編集画面左下「Export」から画像をダウンロード(書き出し)します。
PNGJPG、SVG、PDFの形式を選ぶことができます。

レモンシロップの作り方

↑この画像ができました!同じフレームサイズ画像複数作れば、画像サイズ統一でき簡単に画像が編集&作成できます!

まとめ〜

今回は、Figmaの始め方とセットアップ方法について、そしてブログに使える画像の簡単な作成方法について紹介しました✌️

Figmaはweblemonでもたくさん使っているので今後も応用法をたくさん書いていく予定です😆
ぜひ、Figmaを使ってみてください!!