【NFTクリエイター向け】ホームぺージの作り方を解説【誰でも制作可能です】
ホームページを作りたい人「NFTコレクション用のHPが欲しいけどどうやって作ろう…。外注したら、結構かかりそうだから自分で作りたい。」
こういった疑問に答えていきます。
この記事を書いている僕は、CryptoNinja公式サイトの制作者です。
この記事を読むことで、NFTクリエイター向けのホームぺージが作れるだけでなく、運用のコツまで知ることができるのでぜひ最後までチェックしてみてください！
それでは、さっそく見ていきましょう。
※ちょっと宣伝（NFTクリエイター向けのWeb制作代行サービスを始めました）
NFTコレクションのステップアップを考えているNFTクリエイター向けのプランです。
まずは、無料相談からどうぞ！
>>>無料相談はコチラ
NFTコレクションにホームぺージが必要な理由
まずは、ホームページが必要な理由について深堀していきます。
- Twitter上では伝えきれない情報を載せられる
- 権威性や信頼性につながる
- NFTマーケットでの差別化
まだまだ日本のNFTマーケットは小さいとはいえ、その中で差別化を図ることができれば大きなチャンスをつかめると考えています。
理由は、同じようなレベルのライバルが増えてきているからです。
具体的には「アーティストではないけどイラストが得意」「プロではないけどアートをやっている」「儲かりそうだからはじめてみた」といった感じ。
現状のNFTマーケットは、作品の質ももちろんですが「マーケティング力」で勝っている人が多いなと感じています。
そんなマーケットの中で、Twitter上では伝えきれない、濃い情報やNFT作品に対する思いなどを伝えられる公式サイトを設けることで差別化につながると考えています。
それでは、実際に作り方をみていきましょう。
【NFTクリエイター向け】ホームぺージの作り方を解説
- 手順①：サーバーとドメインの用意
- 手順②：WordPressの簡単インストール＆ログイン
- 手順③：WPテンプレートのダウンロード＆インストール
- 手順④：素材の制作
- 手順⑤：ホームページの制作に入ろう！
手順①：サーバーとドメインの用意
サーバーとドメインを用意していきましょう。
NFT業界の進化のスピードは速いので、お好みのドメインを先に取得しておきましょう。
今回の記事では、ロリポップ！とムームードメインを使用していきます。
サーバーとドメインはなんでもOKなのでエックスサーバーとXserverドメインなどを使用しても大丈夫です。
詳しくは下記を参考にしてみてください。
手順②：WordPressの簡単インストール＆ログイン
サーバーとドメインの用意が完了したら、WordPressのインストールとログインをしていきます。
各サーバーに「簡単インストール」という機能がありますので、サクッとインストールしていきましょう。
今回は、ロリポップで進めていきます。
なお、エックスサーバーで進めていきたい方はコチラを参考にしてみてください。
それでは、はじめていきます。
まずは、ロリポップ！にログイン。
ユーザー専用ページへ行き、ログイン情報を入力。
今回は、独自ドメインでログインしていきます。
すべて入力したら「ログイン」をクリック。
ログインができたら、簡単インストールをしていきます。
「サイト作成ツール」→「WordPress簡単インストール」をクリック。
WordPressのインストール先の設定をしていきます。
サイトURLの欄には、先程設定したドメインを選択してください。
「入力は任意です」の欄は、そのままでOKです。
WordPressの設定をしていきます。
| サイトのタイトル | WordPressサイトのタイトルを記入。後から変更可能。 |
| ユーザー名 | WordPressにログインする際に必要になります。 |
| パスワード | WordPressにログインする際のパスワード。 |
| メールアドレス | WordPressにログインする際に必要になります。 |
| プライバシー | ここにチェックを入れないとネット上に公開されないので、必ずチェックを入れましょう。 |
すべて記入したら「入力内容確認」をクリック。
入力内容を確認してたら「承諾する」にチェックを入れて「インストール」をクリック。
つぎに、WordPressにログインしていきます。
「管理者ぺージURL」のURLをクリック。
すると、WordPressのログイン画面に飛ぶので、先程設定した「ユーザー名orメールアドレス」と「パスワード」を入力して「ログイン」をクリック。
WordPressの管理画面にログインできれば完了です。
手順③：WPテンプレートのダウンロード＆インストール
今回は「SnowMonkey」というテンプレートを使用していきます。
制作者も日本人の方で、非常に使いやすいです。
また、無期限の無料体験もあるので気軽に始められますよね。
それでは、SnowMonkeyのインストールをしていきましょう。
SnowMonkey公式サイトから「試用を申し込む」をクリック。
お問い合わせフォームが開かれるので、必要情報を入力して送信をクリック。
少し待つと、制作者の方からメールが送られてきますので、メール内のダウンロードリンクからテーマをダウンロードしましょう。
※メールの送信作業は制作者の方が一つ一つ確認しながら、送信しているのでそこそこ時間がかかります。気長にまちましょう。
コチラのリンクからダウンロードが完了したら、テーマをWordPressにインストールしていきます。
WordPressの管理画面を開きます。
「外観」→「テーマ」→「新規追加」と進んでいきます。
つぎに「テーマのアップロード」をクリック。
さきほどダウンロードしたテーマをインストールしていきます。
Zipファイルのままアップロードしましょう！
ファイルを選択できたら「今すぐインストール」をクリック。
「有効化」をクリック。
おつかれさまです。
テーマのインストールが完了しました。
手順④：ホームページの制作に入ろう！
手順は下記のとおり。
- プラグインのインストール
- 使用する画像をアップロード
- サイトの基本設定をする
- トップページの制作
1. プラグインのインストール
「プラグイン」→「新規追加」をクリック。
続いて、検索欄に「SnowMonkey」と入れて検索をします。
「Snow Monkey Editor」「Snow Monkey Blocks」をインストールしていきます。
Snow Monkey Formsは今回は使用しないのでどちらでも大丈夫です。
インストールが完了したら、すべて有効化しておきましょう。
2．使用する画像をアップロード
各コレクションの画像などをアップロードしていきましょう。
「メディア」→「新規追加」から使用したい画像をアップロードしていきます。
ちなみに今回使用する素材は、Adobe Stockの無料素材です。
3．サイトの基本設定をする
管理画面から「外観」→「カスタマイズ」をクリック。
「サイトの基本情報」をクリック。
すべて入力したら「公開」をクリック。
| ロゴ | ロゴを選択。 |
| サイトのタイトル | サイトのタイトルを入力。 |
| キャッチフレーズ | キャッチフレーズを入力。 |
| コピーライト | 体験版では変更できません。 |
| サイトアイコン | ファビコンを選択。 |
次にデザインを整えていきます。
管理画面から先程の「外観」→「カスタマイズ」→「デザイン」→「基本デザイン設定」へ。
いろいろ設定するところがありますが「アクセントカラー」と「基本フォント」をお好みのものにしていきましょう。
個人的にフォントは「Noto Sans JP」がおすすめです。
設定が完了したら「公開」をクリック。
つぎに「カスタマイズ→ホームぺージ設定」を開く。
「ホームぺージのコンテンツエリアに上下余白を追加する」のチェックを外します。
さいごに、固定ページをトップページにしていきます。
まずは、トップページとなる固定ページを作成していきます。
管理画面から「固定ページ」→「新規追加」をクリック。
タイトルを入力する。
次に「テンプレート」のリストから「ランディングページ」を選択して「公開」をクリック。
つぎに、管理画面から「設定」→「表示設定」→「ホームページの表示」から「固定ページ」にチェックをいれて、「ホームページ」の選択欄から先程つくった、タイトル名を選択→変更が完了したら「変更を保存」をクリック。
これで、サイトの基本情報の設定は完了です。
さっそく、トップページの制作にはいりましょう。
4．ホームぺージの制作
1．ファーストビュー
NFTコレクションにおいてのファーストビューは非常に大切です。
理由は、作品のイメージや雰囲気を直感的に伝えられるからです。
コレクションの雰囲気が伝わるように、ファーストビューはシンプルにして、画像や動画を流すことがおすすめです。
また、ファーストビューにはコンバージョンにつながるボタンを設置しましょう。
クリック率がかなり上がります。
上記を意識して、ファーストビューを作り上げましょう。
それでは、解説していきます。
はじめに、先程つくった固定ページに移動して「＋をクリック」→「セクション(背景画像/動画)」を選択します。
次に、セクション(背景画像/動画)の設定をしていきます。
「タイトルタグ→none」「高さ→フル」に設定。「メディア」にファーストビューに乗せたい素材をアップロードします。
次にロゴを設定していきます。
ぼくは、シンプルな方が好きなので「ロゴ」と「SNSボタン」のみのデザインにしていきます。
「＋ボタン」→「ソーシャルアイコン」→「各SNSを追加」→「各SNSにリンクを記入」という手順で進めていきます。
さいごに、ソーシャルアイコンを中央寄せをしていきましょう。
ソーシャルアイコン全体を選択して「三本線のアイコン」→「中央揃え」をクリック。
こちらで完了です。
さいごに、OpenSeaのボタンを追加していきます。
つぎにボタンの設定をしていきます。
「ボタンサイズ→もっと広め」「角丸半径→50」「色設定→画像のとおり」と設定します。
また、ソーシャルアイコンと同じ手順で中央寄せをしていきます。
以上でファーストビューは完了です。
現状はこんな感じです！
2．コレクション紹介
コレクションのイメージや雰囲気をつかんでもらったら、コレクションの説明をしていきましょう。
ここでは、作者がどんなこだわりを持ってコレクションを運営していくのかを詳しく書いくことがポイントです。
さっそく解説していきます。
「＋ボタン」→「セクション」を選択。
セクションを選択した状態で「ブロック」から「背景(移動可能)の設定」「上下の仕切りの設定」「色設定」を下記の画像のとおりに設定していきます。
次に「＋をクリック」→「カラム」を選択。
「50％・50％」を選択します。
つぎに、左側の＋を押して「動画」、右側のプラスを押して「段落」を入れていきます。
左側の動画の設定は下記のとおり。
すべて入力するとこんな感じ。
以上で「コレクション紹介」は完了です。
3. コレクションの強み
コレクションの説明のあとは、コレクションの強みを打ち出していきましょう。
「他のコレクションとは何が違うのか」「なにがすごいのか」を知ってもらうセクションです。
他のコレクションとの差別化を図れるポイントなので独自性のある強みがベストです。
「自分のコレクションの強みとはなにか？」について考えるきっかけにもなるかと思います。
それでは、さっそく見ていきましょう。
はじめに、「＋を押して」→「セクション(背景画像/動画)」を選択。
ファーストビューと同じ手順で設定していきます。
ここでは「背景マスクの設定」「色設定」を画像のとおりに設定。「メディア」に背景に乗せたい素材をアップロードします。
アップロードが完了したら、タイトルを入力します。
つぎに「＋を押して」→「項目」を選択。
次にカラム数を変更していきます。
項目を選択した状態で、右側のカラムの設定をしていきます。
今回は、3つの強みを紹介するのでカラム数は「3」に設定します。
ここは、お好みでOKです。
つぎに、それぞれの項目を埋めていきます。
「＋を押して」→「項目(ブロックリンク)」を選択。
「画像」「見出し」「テキスト」をいれていきます。
詳しくは、画像を参考に埋めていきましょう。
今回はボタンは使わないので、何もしなくてOKです。
テキストと画像入れ終えたら、文字色を変更していきます。
「テキストを選択」→「サルのアイコン」→「文字色」を白に設定。
項目のすべてのテキストに設定していきます。
すべて入力したらこんな感じ。
以上で「コレクションの強み」は完成です。
応用として、コレクションの一覧を見せるというのもいいのかなと思いました。
下記を参考にしてみてください。
4．最新情報
このセクションでは、コレクションの最新情報を発信していきます。
今回は「ブログ」の埋め込み方法を紹介しますので、参考にしてみてください。
それでは、解説していきます。
「＋をおして」→「セクション」を選択。
右側の「ブロック」の「背景(移動可能)の設定」「上下の仕切りの設定」「色設定」を下記を参考にしていきます。
つぎに、「タイトルを記入」する。
さらに「＋を押して」→「赤い最新の投稿」を選択。
つぎに、「最新の投稿」の設定をしていきます。
右側の「ブロック」→「レイアウト」から「テキスト」を選択。
お好みで投稿数を設定してもよいでしょう。
基本的には、今回の設定にしておけばOKです。
また、投稿数を「6」に設定していますが、1つしか表示されないと思います。
その際は、ダミーの投稿を増やしてみてください。
「管理画面」から「投稿」→「新規追加」からできます。
すべて設定が完了するとこんな感じ。
以上で「最新情報」のセクションは終了です。
5．ロードマップ
コレクションにおいて、ロードマップの存在はかなり重要です。
なぜなら、コレクターは「今後価値が上がるのか」「このNFTをもっているとどんなメリットがあるのか」という未来のことを気にしているから。
このあたりを考えると、ロードマップを作りこむだけでもかなりの差別化につながるのかなと思います。
具体的にロードマップが完成しているコレクションって、かなり少ないですよね。
ここで差別化をはかっていきましょう。
それでは、解説していきます。
はじめに、「＋を押して」→「セクション(背景画像/動画)」を選択。
ここでは「背景マスクの設定」「色設定」を画像のとおりに設定。「メディア」に背景に乗せたい素材をアップロードします。
メディアに素材のアップロードが完了したら、タイトルを記入していきます。
このあたりは、何度か解説しているので簡単に終わらせていただきます。
「コレクションの強み」と同じように「＋を押して」→「セクション(背景画像/動画)」を選択。
「ブロック設定」の「コンテンツの幅をスリム幅にする」にチェックを入れて、「背景マスクの設定」「色設定」を画像のとおりに設定。「メディア」に背景に乗せたい素材をアップロードします。
アップロードが完了したら、セクションのタイトルも記入しましょう。
つぎに、ロードマップを入力していきます。
続いて、ロードマップを作成していきましょう。
下記の画像のようにステップ形式で、ロードマップを作成していきます。
コレクターにNFTを買うインセンティブを見せてあげると、購入に後押しにつながります。
ロードマップが完成したら「SNSボタン」と「OpenSeaのボタン」を追加していきます。
こちらは、ファーストビューで使用したものと同じですので、コピペで対応していきます。
すべての設定が完了したら下記のとおり。
お疲れさまでした。
NFTクリエイター向けのホームぺージが完成しました！
まとめ
今回は「【NFTクリエイター向け】ホームページの作り方を解説」といったテーマで解説しました。
かなり細かいところまで解説していったので、長くなってしまいましたが、今回紹介したポイントはかなり参考になるかと思います。
NFTクリエイターにとっての公式サイトの大切さについてもおわかりいただけたと思います。
本記事を通じて、少しでも多くのNFTクリエイターさんの助けになればと思います！
なお、Twitter上でも質問を受け付けますのでお気軽にご連絡ください！
>>>Twitterはコチラ
もっとこだわったサイトを制作したいというあなたへ
NFTコレクションのステップアップを考えているNFTクリエイター向けのプランを始めました。
まずは、無料相談からどうぞ！
>>>無料相談はコチラ