thirdwebとSTUDIOで独自マーケットプレイスを作りNFTを販売する方法(ノーコード)

ヤッホー!マユマンソンです。

2023年2月月初にNFTを作ろうと思い立ち、当月中にリリースできた方法をお伝えします。

▼こういうサイトが作れるようになります

下準備

  • メタマスクでウォレットをつくる ※アプリインストールしたらすぐできる

  • ウォレットにイーサリアムを入れる ※メタマスクから買えばバリ早い

大まかな流れ

thirdweb

  • NFT Collectionをつくる

  • NFT Collection内にNFTをつくる

  • Marketplaceをつくる

  • Marketplace内にNFTをリストする

STUDIO

  • プロジェクトをつくる

  • 販売ページをデザインする

  • Marketplaceの挿入コードを貼り付ける

  • サイトを公開する

ここまでで分かる方はもう実施して大丈夫です。以下は詳細になります。

やり方

thirdweb

  • NFT Collectionをつくる

上記のthirdwebにアクセス。
Browse contractsからNFT Collectionを選びます。

NFTsの中にあります
NFTsの中にあります

Deploy Nowを押すと以下のような画面になります。
諸々の情報を入れて、最下部のDeploy Nowを押します。
※私の場合、Symbolは略称などを入れてみました。

最初はテストネットでやると安心
最初はテストネットでやると安心
  • NFT Collection内にNFTをつくる

次はNFTをMintしていきます。

Collectionページはこんな感じ
Collectionページはこんな感じ

Mintを押すと以下のような画面になります。
諸々の情報を入れて、最下部のMint NFTを押します。
※PropertiesはNFT内での種別分けのようなものなので、できるだけ入力しておいた方がいいと思います。
例:background; blue

Advanced Metadataは触らなくてOK
Advanced Metadataは触らなくてOK
  • Marketplaceをつくる

Browse contractsからMarketplaceを選びます。

Marketplacesの中にあります
Marketplacesの中にあります

Deploy Nowを押すと以下のような画面になります。
諸々の情報を入れて、最下部のDeploy Nowを押します。
※Advanced Configurationで二次販売のパーセンテージが決められます。

  • Marketplace内にNFTをリストする

Marketplaceコントラクトのページの左側からListingsを選択します。

見にくいが左側のExtensionsの中にあります
見にくいが左側のExtensionsの中にあります

がCreate Listingを押すと以下のような画面になります。
先ほどつくったNFTが表示されているので、選んで一つずつ情報を入れて最下部のCreate Listingを押します。
※価格や個数もここで決めれます。

オークション式にしたい場合はListing TypeをAuctionにします
オークション式にしたい場合はListing TypeをAuctionにします

thirdwebでの作業は一旦終わりで、最後にNFTを挿入する時にもう一度コードを取得するのに使います。

STUDIO

  • プロジェクトをつくる

上記のSTUDIOにアクセス。
新しいプロジェクトを作成を選びます。

自分でデザインでもテンプレートから作成でもOK
自分でデザインでもテンプレートから作成でもOK
  • 販売ページをデザインする

好きなようにデザインします。

  • Marketplaceの挿入コードを貼り付ける
STUDIOはモバイルが結構作りづらい
STUDIOはモバイルが結構作りづらい

左側の追加・ボックスからiframeを選択しページ上にドロップします。
thirdwebに戻り、Marketplaceページ左側のEmbedを選択し、Embed Codeをコピーします。
※この時にListing IDを0にすると0のNFTが表示されるコードになり、1にすると1のNFTが表示されるコードになります。

見にくいが左側のExtensionsの中にあります
見にくいが左側のExtensionsの中にあります

STUDIOに戻り、iframeボックスをクリックして、ページ右側の埋め込みコード欄にペーストします。

たくさん埋め込む場合はコード上のlistingIdを変更して作業すると早いです
たくさん埋め込む場合はコード上のlistingIdを変更して作業すると早いです
  • サイトを公開する

あとはサイトを公開すればOKです。

おわりに

自分でやってみて色々失敗もしたのですが、最終的に爆速で独自マーケットプレイスが公開できたので大変良かったです。ガス代がかかる以外はいいことだらけです。

もしこちらの記事を参考にNFTを販売できたらぜひ拝見したいので、Twitterご一報ください。

Subscribe to Mayu Manson
Receive the latest updates directly to your inbox.
Mint this entry as an NFT to add it to your collection.
Verification
This entry has been permanently stored onchain and signed by its creator.