unicorn.studio 有料プラン（Legendプラン）でできること

## この記事の概要

[unicorn.studio](https://www.unicorn.studio/)というツールがあります。

ノーコードでWebGLを扱えて、インタラクティブなエフェクトやモーションを簡単に作ることができます。

無料でも使えるツールですが、無料プランでは`Made with unicorn.studio`というロゴが出るなど一部制限があります。

有料プラン（Legendプラン）だと何が変わるのかをまとめました。

## 変化すること一覧

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/309b8ae2-0616-92c3-dff8-e84eee75170c.png)

- Commercial license
    - Use unicorn.studio creations for commercial projects (Terms and Conditions apply)
- Public URLs without logo
    - Removes the logo from your published project links
- Code export
    - Own your compiled project code and self host it by exporting it as a JSON file
- CDN / Asset optimization
    - Make your scenes load faster with compressed assets served over global CDN
- Custom fonts
    - Upload your own fonts to use in projects
- Folders
    - Easily organize your projects
- Access to all new features and updates

### Commercial license

[利用規約](https://www.unicorn.studio/terms)にある通り、unicorn.studioは無料プランでは商業利用ができません。

営利目的であるかを問わず、ビジネス上使用したい場合は有料プラン（Legendプラン）を使うしかないみたいです。

:::note
個人的な気持ち
期間限定のプロモーション用サイトなどに使いたい場合、アーカイブ的にでもサイトを残し続けておくならお金を払わないといけません。
もしアーカイブとして残しておきたいなら、イベント期間中はunicorn.studioを使ってリッチな表現をしておいて、イベント終了後は「このイベントは終了しました」などの画像に差し替え（= unicorn.studioの使用をやめる）などの運用方針を予め考えておかないとな、と思いました。
:::

### Public URLs without logo

無料プランではこのようなバッジが表示されます。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/2f4a4912-6c11-e5e4-1f08-846d76f22bf4.png)

有料プランに切り替えると、export設定画面で`Logo`のオフを選べるようになります。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b552b2c1-daa0-30dd-cdaa-e1bb7bc92579.png)

### Code export

この機能が一番熱いというか、本当に良いのだろうか？と思っています。

Export設定の中の`Code`というタブが選べるようになり、そこにjsonが表示されています。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/903b9f47-1ade-fd21-ad42-d23eacb0a948.png)

公式の案内に従うのであればこれを保存し、以下のような形式で呼び出して使います。

```html
<div data-us-project-src="path/to/your/PROJECT_ID.json"></div>
<script>
  UnicornStudio.init()
</script>
```

ですが、このjsonの中身を見るとちゃんとシェーダーが書かれています。
試せていないですが、コードを読む限りではコピー＆ペーストすれば動きそうな気配がします。

WebGLの環境をセットアップできるのであれば、コード資産として使えそう（今後このシェーダーをもとに改修もできそう）です。
あとはunicorn.studioで視覚的に作ったものをコードとして眺めることで勉強にもなりそうです。

### CDN / Asset optimization

CDNを使って読み込みが早くなるようです。

具体的なスピードの違いは記載されておらず、自分でも測定できていません。

### Custom fonts

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/09cc1689-1ab7-060f-d881-3cd5d32e8d18.png)

テキスト要素において、フォント選択時にフォントをアップロードして適用できます。

試しに[Codec Pro](https://www.zetafonts.com/codec-pro)を適用してみましたが、ちゃんとフォントとして認識され適用されました。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/b326a5e3-1aff-950e-80c8-8eef67145696.png)

ただ、機能的にできるからといってフォント側のライセンスの問題もあるので、なんでもかんでも使って良いわけでもないと思います。

Webフォントとして配信するのはNGなフォントも多いのですが、canvas要素に埋め込む際は画像として使用するのと同じような扱いになるのでしょうか……？

ライセンス周りにあまり詳しくないので断言できないですが、使いたいフォントの規約をちゃんと読んだ方が良さそうに思います。

### Folders

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/214677/04260dbf-7375-eeaa-a93e-8865df05c231.png)

プロジェクト一覧のページに`New folder`が現れたので、これだと思います。

「思います」という書き方なのは、無料プランでもこのボタンはあったような気がしているからです。
これ以外の機能なのか、あるいは無料プランではフォルダ数に制限でもあったのか……。

細かい部分が分からずすみません。

### Access to all new features and updates

新機能が都度使える、ということですがSaasなのでむしろ当然の話かと思います。

## まとめ

「機能的には無料プランで十分」という場合でも、商業利用したいのであれば有料プランは必須なのでお気をつけください。

コードとしてエクスポートできる機能は非常に魅力的ですが、一度コレでエクスポートしたらどれだけでも改変できてしまうが、良いのだろうか？そのうちナーフされるのか？などと考えています。
エクスポートされたコードを更にいじってどうこうしたい、みたいな人はGUIを使わず最初からシェーダーを書くだろう、みたいな性善説なのでしょうか……？