noteの記事サムネイルをfigmaで作ってみたら意外とおすすめだった

サムネイルをオシャレにしたいけど怠惰なヒトへ

突然ですが、面倒くさがりなので、noteの記事のサムネイルをfigmaで作っています（デザイナーなのに！）

figmaとはUIデザインを目的に作られたデザインツールです

（サービスとしての競合はAdobe XDやsketch）

figmaは軽いですし、意外と操作も簡単なのでオススメです（しかも個人利用であれば無料）

このサムネイルの作り方はCanvaなどのバナー作成サービスで足りないな〜オリジナルでサムネイル創りたいな、でもAdobe税払うほどではないな、という方におすすめのやり方だと思います

基本的に文字を改変するようなタイポを作る、精緻なイラストを作るくらいだとイラレが必要ですが、figmaだけでも割と色々まかなえることがわかりました

参考までに、、、過去figmaで色々試行錯誤したサムネイルたちです

グラデや文字枠線も出来ますし、オーバーレイや減算といった効果も使えますし、簡単なものであればベジェ曲線を使ってイラストも描けてしまうことがわかります（何と便利！）

今回のサムネイルもfigmaで、タイポグラフィもいけます

figmaの本懐はUIデザインですが、意外とこのようにサムネイルを作り込めちゃうんです

figmaを使う時のコツ、応用があるので色々紹介したいと思います

figma応用①フリー画像を追加する

テクスチャの追加のやり方はUnsplashというfigmaプラグインを追加します

これはfigmaコミュニティでプラグイン検索をかけると出てきます

Community (Beta)から

プラグインのUnsplashを追加します

これはフリー画像を勝手に追加してくれるプラグインです

figmaで右クリックからPlugins→Unsplashを追加します

追加できたら背景のピンク色の四角形を選び、、、

適当にテクスチャを追加します

できました！

一気におしゃれになります

figma応用①色彩効果テクスチャを追加する

デザイン四原則を知っているがバナー作成うまく出来ない！イケてるレイアウトや色なのに何かが足りない！という人にありがちなのが、情報の複雑性をコントロールできていないという状態だと思います

そういう時はテクスチャを足してみると整ったりなじんだりします

↓これは背景にテクスチャを足した例です

手順は①のUnsplashを追加した後のちょっとした応用で可能です

そして、この色彩効果のエフェクトを減算や、オーバーレイ、スクリーンなどに変えていきます

完成です、画像の趣が変わりました
こんな感じでフリー画像と色彩効果を掛け合わせてちょっとしたテクスチャを自作することができます

Photoshopと同じくらい楽に使うことができます

figma応用③ パスでイラストを描く

ここでイラレのようなペンツールでベジェ曲線が使えます！

頑張ればベジェでイラストも描ける気がします笑

↑試しにfigmaのベジェで描いてみたイラスト

figmaで作るメリットとデメリット

いいところばかり言っても良くないので、figmaで作っていて感じたメリットとデメリットを書き残します

Adobeイラレ、フォトショがベンチマークでしょうか

デメリットはあれどサムネイルを作る分にはfigmaは十分な機能なのでこれからもfigmaを使い続ける予定です

メリット
・カラーを変えるのが簡単
・アートボード複製が簡単
・そもそもfigma軽い、立ち上がるの一瞬
・自動保存なので、勝手に保存してくれる
・フリーイラストなどのsvgデータすぐ入る、色変えやすい
・豊富なプラグイン（波やハーフトーン、無料画像入れるなど使用可能）
・パッと保存しやすい
・誰かにリンクを見せて共有できる
・実機確認が楽（しなくてもいいですが出来ます）

デメリット
・ブラウザデザインツールなのでオンライン環境でないとfigmaが使えない（まぁ家にwifiあれば問題ない）
・フォントが探しにくい（font previewというプラグインを入れるとなんとかなる）
・カーニング調整が面倒
・複雑なタイポグラフィを作るのは非推奨（やるならベジェで書く！）
・複雑な文字組を作るのはめんどい（やればできる！）
・複雑な図形を作成はできない（歪めたり、魚眼っぽくしたり、8角形など）

ざっとこんな感じだと思います
本当にAdobeの方がいい！と感じるのはフォント選びにくいことくらいで、他は致命的なデメリットはないです

最後に

いかがだったでしょうか。

ちょっとブログのサムネイル作りで使おうかなというだけではイラレやフォトショはオーバースペックすぎる場合もあるので、figmaで無料で小さく試して、興味が出たらAdobeを契約するという方法でもいいと思います。

是非figmaは便利なので使ってみて下さい！

おわり