デザインツールといえばPhotoshopやIllustrator、Canvaなどが有名どころですが、「Figma」もかなり優秀です。
Figmaは無料で使える上に動作が軽く、操作方法も簡単なので私は普段から愛用しています。
そしてこのツールすごいのがアプリをわざわざインストールしなくてもブラウザ上で操作が可能なこと！
なので試しに使ってみたいという方もアカウントさえ作ればアプリを入れずに使用感を確かめることができます。
今記事では「Figmaを使ったアイキャッチ画像の作り方」と「私が普段からよく使うイラスト・フリー素材サイト」の2つを紹介していきます！
アイキャッチ画像の作り方については、誰でもこの記事を見ながら作成できるようかなり詳しく解説しています。
写真付きで分かりやすいと思うので記事を見ながらぜひ一緒に作ってみてください(^^)
Figmaの使い方とブログアイキャッチ画像の作り方
上記写真はこのブログ記事で使用しているアイキャッチ画像です。
ちなみにこのブログで使っているアイキャッチ画像は全てFigmaを使って無料で作っています。
専門用語は一切使わず、誰でも簡単に作れるよう分かりやすく解説していきます(^^)
ちなみに今回はこの記事で使用している以下のアイキャッチ画像を作りながらFigmaの使い方を説明します。
（まだFigmaのアカウントを作成していない方はこちらの公式ページから作成してください。）
フレームを用意する
それでは早速作成していきましょう！
まずは文字や画像を載せる土台となる「フレーム」を用意します。
新しいファイルを開くとこのような画面となるため、
左上にある❶番の「＃」ボタンをクリックします。
そしたら❷の「Frame」をクリックし、
右側❸番の「Presentation」の中にある「Slide16:9」をクリックしてください。
（※新しいファイルはログイン後ホーム画面の、「New design file」を押すと出てきます。）
この画面が出てきたら準備完了です！
画像挿入
次に画像を挿入していきます。
画面左上❶番の「四角い形のボタン」をクリックし、
❷番横にある「Place image」ボタンを押してください。
そしたらこのように自分のPCファイルが出てくるので、自分の使用したい画像をダブルクリックします。
上記で画像をダブルクリックをすると選んだ画像がカーソルに引っ付いて表示されるので、そのまま1度だけクリックをしてください。
そしたら上記のようにFigma上に画像が貼り付けされます。
画像はクリックしたまま動かすと好きな位置に移動することができます。
テキスト(文字)の挿入＋装飾
テキストの挿入
次にテキスト（文字）を挿入していきます。
画面左上❶番の「Tボタン」をクリックします。
するとカーソルが十時型になるため画面上で1度クリックしてください。
そしたらテキスト入力スペースが現れるので❷番のように文字を入力します。
テキストの装飾
テキストの装飾は画面右側の「Text」の部分を変更すると装飾ができます。
よく使うテキストの装飾は上記写真の通りです。
変更したいテキストをクリックしてから、変更したい部分を変えていきます。
ちなみに今回使用したそれぞれのテキストは、上記赤枠部分をこのように装飾しています。
装飾が終わったらフレーム内に文字を移動させてください。
外枠（フレーム）を入れる
最後は外枠を入れたら完成です。
あともう少しです！頑張りましょう(^^)
外枠をつけるには画面右側の「Stroke」部分を変更していきます。
Stroke横❶番の「＋ボタン」を押すと外枠が追加されます。
❷番で外枠のカラー、❸番で外枠の太さを変更すると完成です！
画像を保存する
ここまでお疲れ様でした！
アイキャッチ画像は完成したので後は保存するだけです。
右下の❶番にある「＋ボタン」を押してください。
❷番の「Preview」を押すとどのように保存されるか確認することができます。（確認不要なら飛ばしてOKです。）
❸番右横に出ているボタンを押すとポップアップが出てくるため、「保存」を押すと保存することができます。
おすすめのイラスト・フリー素材サイト紹介！
こちらでは私がアイキャッチ画像を作成する際によく利用しているイラストやフリー素材サイトを紹介していきます！
どのサイトも個人・商用共に無料で利用できます(^^)
（※利用規約が変わっている場合があるため利用前にライセンスの確認をお願いいたします。）
↓こちらの記事では海外のイラストフリーサイトを10個厳選してるので良ければこちらもぜひ覗いてみてください♪
storyset（ストーリーセット）
かなりお気に入りで普段作成するアイキャッチ画像によく利用しています！
カラーの変更やイラスト内の不要な部分を削除するのも簡単で便利です。
vector shelf（ベクターシェルフ）
この手書き感が可愛くてこちらのサイトもよくお世話になっています(^^)
カラーを数種類から選べ、背景を透過して保存することも可能です。
イラストAC
こちらのサイトはフレームや背景を探してる時によく使っています。
様々なイラストがあってどれを使うか迷うほど種類豊富です！
おわりに
Figmaでブログのアイキャッチ画像を作る方法と、お気に入りのイラスト・フリー素材サイトを紹介してきました。
Figmaやフリー素材サイトを使えば簡単におしゃれなアイキャッチ画像を作ることができるのでぜひ皆さんも試してみてください(^^)
＼こちらの記事もよく読まれています／
ブログ村ランキングに参加中です。クリック応援頂けると更新の励みになります！
↓いつもクリック応援ありがとうございます😸
コメント