2023/02/16

【簡単】Figmaではじめてのバナー作成【初心者向け】

Figmaを使ってみよう

Figmaは、Webサイトやアプリのデザインを作成し、コラボレーションすることができるクラウドベースのデザインツールです。

Figmaの基本操作は以下の通りです。

Figmaをダウンロードしましょう。
公式サイトから無料版にサインアップ＆ログインします。

新しいデザインを作成するには、Figmaのダッシュボードにある「新規ファイル作成」ボタンをクリックするか、ファイルメニューから開始できます。

ツールバーのフレームツールをクリックするか、キーボードショートカット「F」で、デザインにフレームを追加することができます。また、”cmd + d “のショートカットで、既存のフレームを複製することができます。

シェイプを追加する。デザインに図形を追加するには、ツールバーの図形ツール（矩形、円、線ツールなど）を使用します。

デザインにテキストを追加するには、ツールバーのテキストツールか、キーボードショートカットの「T」を使います。また、シェイプをテキストボックスに変換することで、シェイプにテキストを追加することもできます。

上記で説明したFigmaの使い方を応用してバナーをつくってみましょう！バナーができるようになれば場合によってWebデザイナーとしてお仕事を受けることも可能です。

Figmaでバナーを作る方法を簡単にステップバイステップで説明します。

新しいデザインを作成するには、Figmaのダッシュボードにある「新規ファイル作成」ボタンをクリックするか、ファイルメニューから開始できます。

ツールバーのフレームツールをクリックするか、キーボードショートカット “F “を使用すると、デザインにフレームを追加することができます。また、フレームを選択して、プロパティパネルで幅と高さを調整することで、サイズを設定できます。

デザインに図形を追加するには、ツールバーの矩形ツール、円ツール、線ツールなどの図形ツールを使用します。これらの図形を利用して、バナーの背景を作成することができます。

デザインにテキストを追加するには、ツールバーのテキストツールまたはキーボードショートカットの「T」を使用します。テキストを使って、バナーのヘッドラインやコールトゥアクションを作成できます。

デザインに画像を追加するには、ツールバーの画像ツールを使うか、コンピュータから画像ファイルをドラッグ＆ドロップしてください。

バナー上の要素を選択し、キーボードの矢印キーを使って移動することで、要素を並べ替えることができます。また、ツールバーの整列ツールを使って、要素を垂直方向や水平方向に整列させることもできます。

バナー上の要素を選択し、「プロパティ」パネルでプロパティを調整することで、バナーのスタイルを変更することができます。色、フォント、その他のプロパティを変更して、バナーの外観を思い通りに仕上げることができます。

トップメニューの「プレビュー」ボタンを選択すると、バナーをプレビューすることができます。バナーをエクスポートするには、トップメニューの “File “から “Export “を選択します。バナーはPNGやJPGなどの画像形式で書き出すことができます。

以上、Figmaでバナーを作成する方法を簡単にご紹介しました。ツールのさまざまな機能を利用して、さらに好みのデザインにカスタマイズしたり、改良したりすることができます。

お題：ジムの入会キャンペーンのバナー
ターゲット：20代後半から30代前半の女性
悩み：体を動かしたいと思っているけど、仕事や家事に追われなかなか時間が取れない・ジムに行く勇気が出ない・価格がネック

タイトル：春の入会キャンペーン
訴求：入会金0円、1ヶ月50%OFF
キャンペーン期間：2023.3.1〜5.31まで

下記の参考サイトを参考にしながらオリジナルのバナーを練習でつくってみましょう
pinterest
BUNNER LIBRARY
バナー広場
Bannner.com