「デザインって難しそう…」と思っていませんか？
でも大丈夫。
Figmaを使えば、初心者でも意外とカンタンにおしゃれなバナーが作れちゃいます。
今回は「はじめてのFigma」シリーズ第3弾として、バナー制作の基本ステップを紹介します。
画像や文字を組み合わせていく過程は、まるで工作のようにワクワクするはず。
SNSの投稿やブログのアイキャッチにもすぐ使えるので、楽しみながらデザインに挑戦してみましょう！
バナー制作は、Figma初心者がデザインの基本を学ぶのにぴったりの練習です。
ここでは、実際にバナーを作る流れを 12ステップ に分けて解説していきます。
目次
① フレームを選択する
Figmaではデザインの土台となる「フレーム」から作業を始めます。ツールバーからフレームツールを選択しましょう。
どれでも大丈夫です、あとでサイズを変更するので。僕はA4選びました。
② フレームのサイズを設定する
フレームを選んだら、右側のプロパティパネルでサイズを入力します。
今回は小さめのサイズにしましたが、ブログ用なら 横1200 × 縦630 が定番サイズです。
③ フレームに名称を付ける
作業を進めていくとフレームやレイヤーが増えるので、分かりやすく管理するために名前を付けましょう。
例：「banner_main」などシンプルで後から探しやすい名称がおすすめです。
左上の青い線の四角内をクリックすると入力できます。
④ フレームのグラデーションを設定する
背景を単色ではなくグラデーションにすると、デザインの見栄えが一気にアップします。
右のプロパティから「塗り」の▢を選んで設定しましょう。
開いたカラーピッカーの上部（「カスタム」と書いてあるすぐ下）の左から2番目がグラデーションなので、クリック。
⑤ グラデーションをカスタマイズ
グラデーションの角度や色を調整して、オリジナル感を出します。
例えば ブルーからパープルへのグラデーションはSNSバナーに人気の配色です。
「ストップ」と書いてある行の右端の「＋」をクリックすると項目が増えますので、何段階かグラデーションの設定できたりします。（0％、２５％、５０％みたいな感じで）
⑥ ロゴを配置する
自分のブランドロゴやサイトロゴを配置してみましょう。
左上のFigmaマーク→ファイル→画像を配置で画像を選ぶか、下のツールバーの左から3番目の中から画像を貼り付けれます。
写真のように青い線に囲まれている状態で、線の部分をドラッグすると拡大・縮小が可能です。
良い大きさになったら、フレームの中に配置します。
⑦ 線ツールで直線を描く（点線にカスタマイズ）
線ツールを使って直線を引きます。
プロパティの「線」で 点線（破線） にカスタマイズすれば、デザインのアクセントになります。
位置と太さの右側にある、箱ひげ図のようなマークをクリック。
線のカラーは「５F6CF8」
線の太さは「４」
スタイルを「破線」にし、
破線「0.1」、間隔を「8」にして
線端を一番右の「丸先端」にしています。
こうするとドット状の破線ができあがります。
できあがったドット状の破線を右クリックでコピーし、下部に貼り付けます。
⑧ バナーに文字を入れよう
下部ツールバーから「T」（テキストツール）を選び、キャッチコピーやタイトル文字を入力します。
例：「Figmaで簡単バナー作成！」など、目的がひと目でわかる文字にしましょう。（といいながら見本の写真は「めがねのおじさん」という意味はあるけど意味のない文章で作っています。）
⑨ 文字に縁取り線を入れよう
文字を際立たせるには「線」を使った縁取りがおすすめです。
背景に溶け込んで見づらいときも、アウトラインを付ければぐっと読みやすくなります。
まずは色の変更をします。文字を選択し右サイドバーから「塗り」の▢をクリック。
カラーピッカーから色を選択。
文字の太さを変更。
上の写真でタイポグラフィ項目の「24」となっているところの左側（regular）をクリックすると変更できます。
次に文字に縁取り線を設定します。
「塗り」の下の「線」の右側の「＋」をクリックすると、下の写真のような項目が出てきます。
位置を「外側」にして、太さを「２」、カラーコードを変更します。
⑩ 影を設定しよう
文字やロゴに影（Drop Shadow）をつけると立体感が出ます。
プロパティパネルの「エフェクト」から「ドロップシャドウ」を選び、影の距離やぼかしを調整してみましょう。
⑪ エクスポート
完成したら、右下の「エクスポート」から画像として書き出します。
形式は PNGまたはJPG が一般的です。
Webサイトに載せる場合は PNG が推奨されます。
「2x」というのは大きさ（倍率）です。そのままの大きさで書き出すのなら「1x」でOKです。
Webサイトなどで使う場合は「2x」をオススメします。
⑫ 完成！
（ちょこっと修正しましたが）これでオリジナルバナーの完成です！🎉
これが皆にとって良いかはさて置き、一度作ってみると「背景の色を変えよう」「文字の雰囲気を変えたい」と自然にアレンジしたくなるはず。
Figmaは修正も簡単なので、どんどん試してみてください。
まとめ
Figmaを使えば、初心者でも簡単にバナーをデザインできます。
今回の流れを覚えておけば、ブログのアイキャッチやSNS投稿用の画像など、いろいろな場面で活用可能です。
次のステップとしては、配色パターンやフォント選びのコツを学ぶと、さらにデザインの幅が広がりますよ。
