👋 Figmaで使える絵文字&著作権のお話

こんにちは。Qiitaでデザイナーのインターンをさせて頂いている齋藤です。
今回はFigmaで絵文字を使う方法と著作権のお話をしたいと思います。

### 今、絵文字が熱い！
notionやzennなど、絵文字をデザインの一部に取り入れているサービスが散見されるように絵文字がトレンドとなっているように思われます。絵文字をデザインに取り入れたいと思われるデザイナーも少なくないのではないでしょうか。
![kiji-2_001.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/a7fccbc2-1c07-9876-1e43-dcb3925a54ff.png)
デバイスのキーボードにも実装されており、Appleの絵文字は誰もが一度は見たことのある絵文字だと思います。
他にもMicrosoftやTwitterなど様々なベンダーが絵文字を制作しています。

### 絵文字にも著作権がある
一見著作権フリーのように思われる絵文字ですが、著作権があり（当然）ベンダーの規約に沿って使用する必要があります。

:::note warn
注意
この記事ではライセンスについて述べています。正しくお伝えするよう心がけていますが、使用される場合はご自身でもライセンスの公式ページにアクセスしてご確認ください。トラブルの責任は一切負いません。
:::

### 無料&Figmaで使用できる絵文字をご紹介
今回は絵文字を無料で使用したい&Figmaで使用したい方に向けて、オープンに公開されている絵文字を2つご紹介したいと思います。

### Fluent Emoji
![kiji-2_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/9069bc06-0f03-c7b3-a579-35a8ac1a1b57.png)[^1]


こちらはMicrosoftがオープンソースで公開している絵文字です。
[Fluent Desigh](https://www.microsoft.com/design/fluent/)に基づいたデザインとなっており、ミニマムな印象を与えるフラットなものや、ポップな印象を与える3Dなものなどバリエーションが展開されているのが特徴です。
この絵文字は[MITライセンス](https://opensource.org/licenses/mit-license.php)で提供されています。

:::note info
MITライセンスとは
コピー利用・変更・再配布・商用利用・有料販売などが可能である非常に自由度の高いライセンスです。一方で、絶対条件として「著作権表示をすること」と「MITライセンスの全文を掲載すること」が求められます。
:::

Fluent Emojiは公式に[Figma Community](https://www.figma.com/community/file/1138254942249677742)で公開されている他、[GitHub](https://github.com/microsoft/fluentui-emoji)でもリポジトリが公開されています。

### Twemoji
![kiji-2_003.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/01dbd328-044a-cc92-aeef-e0a432592015.png)
[^2]
こちらはTwitterが公開している絵文字です。
フラットでミニマム、なんだか可愛らしい印象がある絵文字となっています。
この絵文字はコードは[MITライセンス](https://opensource.org/licenses/mit-license.php)、グラフィックは[CC-BY 4.0](https://creativecommons.org/licenses/by/4.0/deed.ja)で提供されています。

:::note info
MITライセンスとは
コピー利用・変更・再配布・商用利用・有料販売などが可能である非常に自由度の高いライセンスです。一方で、絶対条件として「著作権表示をすること」と「MITライセンスの全文を掲載すること」が求められます。
:::

:::note info
CC-BY 4.0とは
Creative Commonsライセンスの一種であり、複製・改変・再配布・商用利用などを自由に行えます。一方で、「適切なクレジット表示」と「変更があったらその旨を示す」ことが求められます。
:::

Twemojiも公式に[Figma Community](https://www.figma.com/community/file/806291777034672116)で公開されている他、[GitHub](https://github.com/twitter/twemoji)でもリポジトリが公開されています。

### Figmaで使ってみる
[Figma Communityで公開されているTwemoji](https://www.figma.com/community/file/806291777034672116)を使ってみましょう。
![kiji-2_004.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/78eb5766-9e47-93a5-9427-f2d7811b8fc3.png)
Figmaにログインしている状態で「コピーを取得する」を押すことで自動的に自身のFigmaにコピーが生成されます。
![kiji-2_007.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/6a29a424-7c2a-20b2-53e8-824ed94968e9.png)

### 応用テクニック
チームでデザインをする場合など多くのデザインを作成する場合は、ライブラリ機能を使うと便利です。ローカルのコンポーネントをプロジェクト内やチーム内で公開することができ、他のデザインファイルから簡単にコンポーネントを利用することができます。TwemojiやFluent EmojiのFigmaはありがたいことに絵文字ひとつひとつをコンポーネント化してくれてあるため、ライブラリ機能を使用することで簡単に複数のデザインで使用することができます。
![kiji-2_005.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/af53dc50-40b1-dc54-1cb9-43523fce31fc.png)
まずは画面左上の「アセット」をクリックし、次に「本マーク」をクリック。
![kiji-2_006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/04a34616-d634-5907-3c72-853c0810f156.png)
ライブラリが表示されるので、そのまま「公開」を押すと処理が行われます。
![kiji-2_008.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2919446/4ff71860-5d04-e3cb-ebea-47a94f701d6f.png)
別ファイルでコンポーネントを使用しても、簡単に右サイドバーから入れ替えができるようになりました。

### ルールを守り公正公明なデザイン活動を
著作権は創作者を保護し、誰もが安心して創作活動を行えるようにするためのルールです。フリーで公開されているものであっても、今一度ライセンスを確認してから使用するように心がけましょう。


[^1]:Copyright (c) 2021 Microsoft
以下に定める条件に従い、本ソフトウェアおよび関連文書のファイル（以下「ソフトウェア」）の複製を取得するすべての人に対し、ソフトウェアを無制限に扱うことを無償で許可します。これには、ソフトウェアの複製を使用、複写、変更、結合、掲載、頒布、サブライセンス、および/または販売する権利、およびソフトウェアを提供する相手に同じことを許可する権利も無制限に含まれます。
上記の著作権表示および本許諾表示を、ソフトウェアのすべての複製または重要な部分に記載するものとします。
ソフトウェアは「現状のまま」で、明示であるか暗黙であるかを問わず、何らの保証もなく提供されます。ここでいう保証とは、商品性、特定の目的への適合性、および権利非侵害についての保証も含みますが、それに限定されるものではありません。 作者または著作権者は、契約行為、不法行為、またはそれ以外であろうと、ソフトウェアに起因または関連し、あるいはソフトウェアの使用またはその他の扱いによって生じる一切の請求、損害、その他の義務について何らの責任も負わないものとします。

[^2]:Twemoji ©Twitter [クリエイティブ・コモンズ・ライセンス（表示4.0 国際）](https://creativecommons.org/licenses/by/4.0/deed.ja)