![見出し画像](https://assets.st-note.com/production/uploads/images/119711185/rectangle_large_type_2_23a5c3da290a6c55350d3e4485c0dee0.png?width=1200)
0からのfigma講座〜SNS画像の作り方〜
※このNoteは、有料エリアにレッスン動画2本(計2時間半分)を含みます。
※どちらの動画も、開催済みレッスンのアーカイブ動画です。
・
デザイン初心者向けに発信をしているわたしのInstagramは、発信内容にこだわっているのはもちろんですが、デザイナーとして発信していく上で画像の「見た目(ビジュアルデザイン)」や「情報のわかりやすさ(画像の構成)」にもかなりこだわって運用しています。
![](https://assets.st-note.com/img/1704465887968-sqWs3QHHiT.png?width=1200)
そんなわたしが画像作成するときに使用しているのはPhotoshopやIllustrator、Canvaでもなく「figma」というツールです。
![](https://assets.st-note.com/img/1698062368463-ANEZQLSU8f.png?width=1200)
figmaはUIデザインに特化したツールですが、その便利な機能を活用して、ウェブデザインやバナーデザイン、LPデザインにfigmaを使用しているデザイナーもとても増えてきました。
同じくUIデザインに特化したツールにAdobe XDがありましたが、単体販売を2023年1月に終了したのち、メンテナンスモードに入る(今後積極的な新機能の開発はしない)と発表がありました。
よって、今後figmaはますます注目を浴びるようになるのではないかと思います。
アプリをPCにインストールすることでオンライン環境がなくても使用できるAdobe製品とは違い、figmaはオンライン環境でしか利用はできませんが、その分ファイルデータのやり取りなく、複数名でリアルタイムにコラボレーションできる点が最大の強みです。
そしてベクター形式でデータを扱うので、アートボードをいくら複製したり、画像をたくさん挿入しても、カクカクせずに操作性抜群。
また、Instagram投稿のように1つの型をベースに、複数枚に展開していくデザインを作るときに便利な機能がたくさんありますし、PhotoshopにはないUIデザインに特化した機能が盛りだくさんです。
![](https://assets.st-note.com/img/1704466010606-ngjCGzo5HY.png?width=1200)
ですが、「まずはPhotoshopを覚えましょう!」と教えられるデザイン初心者さんは新しいツールを覚える余裕がなかったり、そもそもPhotoshopとの違いや使い分けすらわからない状態・・・
もちろん、わたしはPhotoshopも利用していますし、「まずはPhotoshopをから!」という考えもそれはそれで良いと思います。
ですが、普段ウェブデザインも、SNSのバナーも、広告バナーも、サムネイルも、全てfigmaで作成している以上、figmaの良さ・便利さを伝え、新たなデザインツールにチャレンジするハードルを下げたいなと思い、0からでも楽しく、そしてよく使うような必須機能を効率よく学べるような講座を開催しています。
動画の内容
このNoteでは、過去に開催した2つのレッスン動画をご視聴いただけます。
① 0からfigmaを学ぶための超入門レッスン
② インスタバナーの作り方大公開
・
① figma超入門 約60分
まずはここから!ということで、figmaを使って、X(Twitter)用の画像を作成しながら基本的な機能に触れてみるレッスンです。
【こんな人向け】
・アカウントを作った後、なにをすればいいかわからない
・編集画面の見方から丁寧に教えてほしい
・なにかを作りながら楽しく覚えていきたい
・実際に手を動かすことでインプットとアウトプット同時にしたい
こちらは実際にfigmaを操作していただく内容のため、無料プランを契約の上、figmaにログインした状態でご視聴いただく前提で進みます。
60分で画像を4枚作りますが、0からの初心者向けに一つ一つ順を追って、制作手順を説明をしています。
![](https://assets.st-note.com/img/1698071466625-gIzigI5gjw.png?width=1200)
【ざっくりアジェンダ】
・figmaの特徴、ファイル構成など
・編集画面の見方
・基本ツールの使い方
・画像を作成してみる
② インスタバナーの作り方大公開 約90分
とりあえずfigmaの特徴はわかったぞ!でも1〜2回触ったっきりで全然活用できてない!という方のために、わたしが普段どんな機能を使って、どんな手順で、どう効率よくインスタバナーを作っているのかを細かくお話しました。
【こんな人向け】
・もっと機能を知りたい!
・figmaのリアルな活用方法を知りたい!
・複数の種類の画像作成にトライしたい
・効率的にバナー制作をしたい方
・あまりに長すぎる動画は見ていて飽きる方
こちらは入門編のように、1つ1つ手順を追って全員で作業するレッスンではなく、5種類以上のインスタ用バナーをわたしがデモ制作していく内容となっています。
![](https://assets.st-note.com/img/1698071073100-GCDtSSXw0p.png?width=1200)
入門編では触れなかった機能、普段リアルに使っているプラグイン、効率的な作業ステップなどもはじめてお話しました。
90分間サクサク進むので、リアルタイムで参加いただいた方は一緒に作るのは難しかったと思いますが、受講後にお渡ししたアーカイブ動画を見返して、しっかりアウトプットしてくれた方がたくさんいらっしゃいました!ありがとうございます^^
【ざっくりアジェンダ】
・愛用プラグインと使い方
・画像作成で心がけていること
・フォントデザイン
・オートレイアウト機能
・
参加者さんから嬉しいお声たくさんいただいてます^^
![](https://assets.st-note.com/img/1704465787312-NHzPDPbI7D.png?width=1200)
・
動画の視聴期限は、このNoteが公開されている限り何度でもご視聴いただけます◎
また、作成したバナーはインスタ、X、どちらでタグつけいただいても嬉しいです^^(お待ちしてます!)
それではこちらからご視聴ください^^
・
ここから先は
¥ 9,900
この記事が気に入ったらサポートをしてみませんか?