【3分デザイン】 Figmaでオフィシャルバッジアイコンをつくる

こんにちは、株式会社PentagonでCDO / デザイナーをしている水谷です。今回のnoteは、3分でできる簡単デザインシリーズです。
Webデザインやアプリデザインなどでよく使うアイコンですが、商用フリーのアイコンを使っているデザイナーさんは多いのではないでしょうか?今回は、「Figmaでこんな感じのアイコンが簡単に制作できるよ〜」な過程を紹介いたします!

目次

必要なツールはFigmaだけ

デザインツールは数多く存在しますが、僕はFigmaのみでほとんどのデザイン業務を行っています。数多くのデザインツールを試してきましたが、現状はFigmaが最強かなと思っています。そこらへんのお話はまた今度お話します。

SNSでよく見かけるオフィシャルバッジアイコンを作ろう

今回は、著名人やブランド名の名前の横によく表示されているオフィシャルアイコンを作成してみます。作成手順は以下でご紹介します。

①Figma立ち上げる

https://assets.st-note.com/production/uploads/images/52957075/picture_pc_86cfe40e742b9c21c5f05db73d507ccc.png?width=800

②24×24pxのFrameを作成する

まずは、アイコンの箱となるFrameを作成します。なぜ24×24pxなのかというと、Webやアプリデザインで使いやすいサイズだからです。とりあえず迷ったら24×24pxで作成しておけば良し!

https://assets.st-note.com/production/uploads/images/52957284/picture_pc_40cc0f6dbd21c06f7a65e1b3b051b966.png?width=800

③Frameの中にStarを作成する

https://assets.st-note.com/production/uploads/images/52957807/picture_pc_e866ad98335298d7ffccccb1143aa7ed.png?width=800

左上のツールから「Star」を選択---

https://assets.st-note.com/production/uploads/images/52957869/picture_pc_bea73979c2895247aba88afc3e4191c0.png?width=800

Starのサイズは、24×24pxのサイズ内に収まるようにしましょう。「なぜ24×24px目一杯でオブジェクトを作らないの?」と疑問に思う方もいらっしゃるかもしれませんが、理由は後ほど補足で説明しますね---

https://assets.st-note.com/production/uploads/images/52958255/picture_pc_965d9e6d14b52f47f4c1fd081e4701df.png?width=800

赤で囲った箇所をいじれば、様々な多角形を作成できますよー---

https://assets.st-note.com/production/uploads/images/52958415/picture_pc_da15a92d2b6d987026bf2b2d97473438.png?width=800

Twitter風に角を丸くこれでベースは完了〜

チェックマークを作成する

次にチェックマークを作成していきます。アイコンって、基本的には図形と図形の組み合わせで出来ていますよね!長方形と長方形を組み合わせればチェックマークも簡単に作成できます。

https://assets.st-note.com/production/uploads/images/52959470/picture_pc_86e9b184bdc8562deddf463522af4e6c.png?width=800

R(Rectangle)で、1×2の長方形を作成。---

https://assets.st-note.com/production/uploads/images/52959493/picture_pc_08e995026a3c77646889a80ba84e0b37.png?width=800

次に、R(Rectangle)で、1×6の長方形を作成。---

https://assets.st-note.com/production/uploads/images/52959540/picture_pc_461ce9fbe763f6407926f822e2056998.png?width=800

2つの長方形をこんな感じで配置しちゃいましょ〜---

https://assets.st-note.com/production/uploads/images/52959571/picture_pc_23247aa05000e3e1ba9fe2a8a8e3881d.png?width=800

回転しちゃいましょ〜---

https://assets.st-note.com/production/uploads/images/52959614/picture_pc_f60bc134fd3ae53f02bf28ab5e3e2814.png?width=800

「Union selection」を選択して、合体しちゃいましょ〜---

https://assets.st-note.com/production/uploads/images/52959655/picture_pc_3838f18a603c4278d871dbe00802b7a3.png?width=800

これでチェックマークの完成です

さぁ、合体

これまで作成した2つを合体しましょう!

https://assets.st-note.com/production/uploads/images/52959782/picture_pc_6c1de6a62938e639ecaa4f011c21540e.png?width=800

とりあえず見分けやすくするために、チェックマークに色をつけて上に配置---

https://assets.st-note.com/production/uploads/images/52959876/picture_pc_f7be6ebb1e4cb501131624d29546a464.png?width=800

次に、両方を選択した状態で、「Subtract selection」を選択---

https://assets.st-note.com/production/uploads/images/52960008/picture_pc_bec2337ed19d8b90f6b12ea536b39b7b.png?width=800

チェックマークがくり抜かれましたね---

https://assets.st-note.com/production/uploads/images/52960113/picture_pc_968be83b17b78e1864598e2a1d7f40c5.png?width=800

あとは、お好みの色をつけてあげてください

最後にFrameを透過

いよいよ完成ですよ〜

https://assets.st-note.com/production/uploads/images/52960197/picture_pc_00dc250360b1ae4d2319a04bb2a8f345.png?width=800

24×24pxで作成したFrameを選択して、Fillを削除します---

https://assets.st-note.com/production/uploads/images/52960319/picture_pc_1579ce0ca24287730d8eb500851fff83.png?width=800

これで完成ですね!お疲れ様でした!

ぜひ、みなさんもオリジナルでアイコンを作成してみてください!

補足

「なぜ24×24px目一杯でオブジェクトを作らないの?」という疑問についてですが、以下に様々なオブジェクトを24×24px目一杯で作成してみました。

https://assets.st-note.com/production/uploads/images/52961229/picture_pc_59e96727831a59fdcd9fc449bf4b17e0.png?width=800

どうでしょう?同じ24×24pxでも、オブジェクトとの面積によってアイコンサイズの印象がだいぶ違いますよね。これだと、様々なアイコンを作成したときに統一感が失われてしまいます。
24×24pxのFrameの中に、それぞれのサイズ感を調整すると以下になります。

https://assets.st-note.com/production/uploads/images/52961777/picture_pc_2bf60be2c300cac56dbe0958a4e3aa18.png?width=800

こちらは、全体のサイズ感に統一感でました!

採用情報はこちら
目次
閉じる