【Figma】バナーを作ってみよう！～第2回～
こんにちは。
パソコン教室ISA船橋FACE校のNakaiです。
今日は、Figmaを利用してバナーを作る！」第2回のご案内です。
間が空いてしまいましたが、皆様Figmaのユーザー登録はお済みですか？
今回は下記の内容で、オンラインセミナーの申し込みページに掲載するバナー画像を作成してみます。
イメージとして、オンラインセミナーで参加費が無料ということを強調したい。
イベントの内容がイメージできる写真などがあるとよい。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ISA無料オンラインセミナー開催！
未来を広げる資格シリーズ 第2弾
自動化スキルで差をつける
〜VBAエキスパート＆Python認定基礎資格編〜
日時：2025年12月13日 16:00
開催場所：Zoom
参加費：無料
＝＝＝＝＝＝＝＝＝＝＝＝＝＝
大きさはOGP（XやFacebookなどのSNSでURLを投稿したときに表示される画像のこと）のサイズに合わせて、幅1200PX/高さ630PXで作成します。
新規ファイルとフレームを作成します
Figmaを起動し、ファイルブラウザを表示します。
ドラフトの[+]をクリックして、[デザインファイル]を選択します。
新規ファイルが作成されます。
幅1200PX/高さ630PXのフレームを作成します。
フレームツールを選択し、ドラッグして適当な大きさの長方形を作成します。
右側のデザインパネルのレイアウトの項目で「W 1200 H 630」と入力します。
レイアウトグリッドの作成
オブジェクト同士の間隔や余白を揃えるために、レイアウトグリッドを設定できます。
移動ツールを選択し、Frame1を選択します。
[デザイン]パネルの[レイアウトガイド]の
テキストを配置し書式設定をします
[T テキストツール]を選択します。
フレーム内をクリックし、下記のとおり入力します。
文字を入力すると、テキストツールが移動ツールに切り替わります。
テキストの外側をクリックすると、下記のとおり青い枠のテキストボックスが選択されます。
右側のデザインパネルの[タイプグラフィ]で、フォントや文字の大きさを変更します。
FigmaはGoogleフォントが利用できます。
Webサイトでデザイン性の高いフォントを表現できて、商用利用も可能です。
今回は、Googleフォントの「Noto Sans JP」を選択します。
一部分のみの変更をしたい場合は、[テキストツール]で文字を選択してから変更します。
大きさは下記の通り設定してみてください。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ISA無料オンラインセミナー開催！→サイズは48
未来を広げる資格シリーズ 第2弾→サイズ 32
自動化スキルで差をつける→サイズ 24
〜VBAエキスパート＆Python認定基礎資格編〜→サイズ 24
日時：2025年12月13日 16:00～17:00→サイズ 32
開催場所：Zoom→サイズ 32
参加費：無料→サイズ 32
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
本日は、フレームを作成し、テキストを入力するところまで確認していただきました。
次回は、画像を入れたり、テキストをデザインしていく方法をご紹介いたします。
Follow me!
夢を叶えるキャリアアップスクール パソコン教室ISA船橋FACE校
「すべては受講生のために」をモットーに、ビジネスに必要なパソコンスキルから
就転職に向けてのパソコン資格の取得まで個別授業を行っています。
是非お気軽にご来校ください。
住所：千葉県船橋市本町1丁目3-1 FACEビル12F
連絡先：TEL: 047-424-3544
Mail: isa_funabashi@isa-school.co.jp
授業時間
月～木 10:30～20:30
金～日 10:00～17:00
