NEORTの作品を埋め込んで、STUDIOでデジタルアートを表現しよう！

STUDIOではiframe機能を使って、サイト上にデジタルアートの埋め込みができます✨
外部サービス「NEORT」を使えば、カンタンにデジタルアートクリエイター向けのポートフォリオサイトが作れます。

実際にSTUDIOのページにウィジェットを埋め込んでみた例：https://hyudoro.com

デジタルアートとは
デジタルアートとは、コンピューター技術を使って制作したアート作品です。3DCGやモーショングラフィックスなどの動画作品を始め、プログラミング技術によって生み出されるジェネラティブアートやインタラクティブアートなど、幅広いジャンルがあります。

動画形式はもちろん、JavaScriptやWebGLといったグラフィカルな技術を活用すれば、サイト上でデジタルアートを表現することもできます。最近では、デジタルアートをメインビジュアルに取り入れたサイトも数多くあり、注目が高まっていることが伺えます。

そうしたデジタルアートのプラットフォームサービスが「NEORT」です。このサービスでは、デジタルアートの投稿や閲覧ができ、投稿した自分の作品を、STUDIOの編集画面からサイトに埋め込むことが可能です。今回は、その連携方法についてご紹介します。

アート作品を投稿する

NEORTで作品を投稿するためには、まず会員登録/ログインが必要です。ログインしたら、「CREATE ART」をクリックしましょう。

PICKS

JavaScript、動画、GLSLの3つのなかから、自分が投稿したい形式を選択します。JavaScriptとGLSLの作品投稿に関しては、NEORTを含め多くのサービスに参考になるコードがありますので、そちらも参考にしましょう。

作品が完成したら、タイトルやサムネイルを追加して公開しましょう。作品ページに遷移するので、ページ下部のツールバーから埋め込みボタンをクリックしましょう。埋め込み用のコードをコピーできます。

アート作品を埋め込む

次にSTUDIOに遷移し、作品を埋め込みたいサイトのエディター画面を開きましょう。左のナビゲーションを開き、「Iframes」のリストから一番左のコード埋め込みボタンをクリックします。

ボタンをクリックすると、ビュー上に<iframe>ボックスが表示されます。ボックス上部のボタンをクリックし、先ほどコピーしたNEORTの埋め込み用のコードを、「埋め込みコード」のフォームにペーストします。ペーストするとすぐに、作品が表示されます。

以上、コピペでカンタンに、デジタルアート作品を表示する方法でした。

みなさんもWebデザインの知識や技術を活用して、NEORTでアートに挑戦してみましょう！