【wordpress】フリー素材サイトの作り方解説 | BGM配布サイト向けのオススメテーマも紹介

 

どうも、しんさんわーくすです。

先日、ロイヤリティフリーのBGM・イラスト素材を配布するサイトをオープンしました。

BGM・イラストフリー素材配布サイトはこちら

https://materiworks.shinsanworks.com/

 

以前の記事でもちょっと触れたのですが、
このフリー素材配布サイトは、ほぼスマホとwordpressを使って構築しました。

 

普通webサイトを作ろうと思ったら、皆さんPCは必須だと考えられるかと思います。

でも、スマホでも意外と自分のWEBサイトが作れてしまうんですね。

 

今回の記事では、スマホとwordpressを使った素材サイトを作り方や
大まかな流れや注意点についてお伝えできればと思います。

 

なお、かなりボリュームの多い内容なので、今回の記事では
wordpressを利用した素材配布サイトの作り方の概要をお伝えいたします。

 

詳細な解説が必要な箇所については、
別記事で解説予定なのでそちらもご覧いただけると嬉しいです！

 

 

 

フリー素材サイトを作るメリット・デメリット

 

BGMやイラスト、写真でも既に大手のフリー素材配布サイトがあるし、
フリー素材を配布したいなら
そこに参加すればいいんじゃないの？

と思われる方もいらっしゃるかもしれません。

 

私自身は、自分のフリー素材配布サイトを持っていますし、
DOVA-SYNDROMEやニコニ・コモンズといった大手の
フリー素材配布サイトにも参加していますので、
双方のリアルなメリット・デメリットについてお伝えすることができます。

 

具体的なフリー素材サイトの作り方に入る前に
素材サイトを自分で作るメリット・デメリットについて整理しましょう

 

自分でフリー素材サイトを作る場合のメリット・デメリット

 

 

 

個人フリー素材サイトは、大手のフリー素材サイトと比較して、
個人にファンが付きやすいです。

大手サイトは、いろんなクリエイターが日夜フリー素材を投稿しまくっているので、
どうしてもファンがつきにくいのですね。

 

また、大手のフリー素材サイトの場合は、
収入源がGoogleアドセンスや
そのサイト独自のポイントを換金する

というパターンが多いです。

対して、個人のフリー素材サイトの場合は、
マネタイズの方法は自由です。

Googleアドセンスはもちろん、
有料のコンテンツ販売につなげたり、
個別にコンテンツの制作依頼につながることもあります。

 

大手のフリー素材配布サイトに参加する場合のメリット・デメリット

 

 

 

第三者に起因するランサムウェア被害により、
サイトが閉鎖されるリスクが大手フリー素材サイトにはあります。

 

個人のフリー素材サイトは自衛にもなる

 

特に最近では、ニコニコがサイバー攻撃にあって、
一時的にサービスを閉鎖・縮小するということがありましたよね。

当然、フリー素材を配布しているニコニ・コモンズも縮小しました。

 

私自身もニコニ・コモンズで素材を公開しているのですが、
収益を現金化しようとしたところサイトにアクセスできず、
それでサイバー攻撃のことを知ったという状況でした。

 

しばらくは、収益はあるのに振込手続きができない
という状態が続いたので、大変でした。

 

ニコニコのことを悪く言いたいのではありません。

 

サイトの規模が大きければ大きいほど、
こういったサイバー攻撃の対象になりやすいですし、
人も多いのでその分ランサムウェアに引っかかってしまう
可能性も高くなります。

 

自衛のため、そして自分自身のブランディングのためにも、
個人のフリー素材サイトを持っておくというのは大切と言えるでしょう。

 

さて、次からはフリー素材サイトの作り方について、
一から詳しく解説していきます！

 

まずはサーバーとドメインを用意しよう

 

まずは、wordpressで自分のフリー素材配布サイトを作る際に
必須のサーバーと独自ドメインを用意します。

サーバーは、簡単に言ってしまえば常時稼働しているPCのことです。

 

wordpressでフリー素材配布サイトを作ったり、
動かしたりするにはこのサーバーが必要になります。

 

またドメイン(独自ドメイン)は、
素材配布サイト利用者があなたのサイトに辿り着くために必要となります。

 

ブラウザ(ChromeやSafari、Microsoft Edge等)の上部もしくは下部に、

等の文字があるかと思います。

この○○○.comの部分がドメインになります。

 

当サイトを例にドメインの説明をすると

 

このサイトでいうと、shinsanworks.com がドメインとなります。

 

私は、「しんさんわーくす」と申しますが、

「shinsanworks.com」

というドメイン名からもわかるように自分オリジナルの名前のドメインを使っています。

 

自分で好きな名前をつけて取得しているので、独自ドメインと呼ばれているのですね。

 

※例として「〇〇.com」の部分がドメインとご紹介しましたが、

「〇〇.net」や「〇〇.jp」というドメインもあります。

ご自身で契約しているドメインであれば、素材配布サイトには使えますので、

 

お好きなドメインを選ぶようにしましょう！

 

これから、wordpressで素材配布サイトを作る方は、
今後ずっとフリー素材配布サイトを運営していくことになります。

 

素材配布サイト利用者にも覚えてもらいやすい、
独自のドメインを取得したいですね！

 

サーバー代とドメイン代は必要経費

 

さて、このサーバーとドメインですが、有料サービスを利用しているので、
お金がかかってしまいます。

残念ながら今回のサイト構築で唯一お金がかかるのがサーバーとドメインです。

 

実際にはお金をかけないで、
サーバーやドメインを用意する方法はあるかとは思いますが、
無償版ならではの制限であったり、

今後長く活動を続けていくことを考えるとサーバー代やドメイン代はケチらない方が良いです。

 

サーバーのレンタル方法やドメインの取得方法については、
色々なサイトで既に紹介されているので、
詳細についてはそれらのサイトも参考にしてみてください。

ただ、個人的にレンタルサーバーやドメイン取得業者を選ぶ際にこれだけは気をつけた方がいいなと思う点が2つあるので紹介します。

 

ドメイン取得サービスを選ぶ際はwhois情報公開代行に対応しているか調べる

 

whoisって何？

といいますと、ドメインの保持者は氏名や住所、電話番号などの情報を一般に公開しないといけない
というルールが世界中のドメインを管理している団体によって決められているんですね。

 

なので、whois検索のサービスを使用すれば、
そのドメインが誰によって管理されているのか分かってしまうのです。

 

でも、そんな個人情報をネット上に晒すのは怖いじゃないですか？

そんな人のために、ドメイン取得業者ではwhois情報公開代行のサービスを行ってるんですね。

 

これは、ドメイン保持者の情報をドメイン取得業者の名義で
代わりに登録・公開してくれるサービスです。

 

大体どの業者であってもwhois情報公開代行に対応しているかと思いますが、
念のためドメイン取得の先に確認しておいた方が良いです。

 

ちなみに私は、お名前.comを利用しています。

 

レンタルサーバーはパフォーマンス重視で選ぶ

 

レンタルサーバーも色々サービスを提供している業者がいます。

値段はピンキリで中には、こんな安くて大丈夫？ってくらい格安の業者もあると思います。

 

出来るだけ安いサービスを利用したい！

という気持ちは分かりますが、選ぶ際はサーバーのパフォーマンスにも注意した方が良いです。

 

文章中心のブログサイトを作りたい！

という方ならそんなに気にする必要もないかもしれませんが、
今回作りたいのは素材配布サイトです。

訪問者が快適にサイトを利用できるように、
色々機能を追加したり、データ量の多い素材(ファイル)をサーバーにアップすることになります。

 

格安のサーバーをレンタルしたものの、
いざサイトを作ってみたら劇遅でとても使う気にならない！

という事態になってしまったら、お金も時間も無駄になってしまいますからね。

なので、維持費だけでなく、
パフォーマンスやストレージ等も考慮してサーバーを選んだ方が良いです。

 

ちなみに私はエックスサーバーを利用しています。

エックスサーバーは、後ほど紹介するwordpressも簡単に導入できるので、オススメです。

 

エックスサーバーには、
色々なプランがありますが、私はスタンダードプランを使用しています。

 

ブログサイト(3つ)とフリー素材サイトを運営していますが、
まだ、特にサイトが重い等で悩まされることなく快適に使用できているので、
エックスサーバーのスタンダードプランがコスパ最強でオススメです。

 

※現在エックスサーバーでは、
半額キャッシュバックキャンペーンを行っているようです。

フリー素材配布サイトを作りたい！

と考えている方は、こういうキャンペーンを狙って
サーバーを借りるとお得にサイトを作れます。

半額キャッシュバックのキャンペーンは、
10/3までなので、もしフリー素材サイトのためにサーバーを借りる予定がある方は、
このチャンスをお見逃しなく！

 

サーバーに独自ドメインを設定しよう

 

独自ドメインを取得し、サーバーのレンタルも完了したら、
次はサーバーに取得したドメインを登録します。

 

私はエックスサーバーを使っているので、
エックスサーバーの場合はサーバーパネルにログインし、
パネルから設定をちょこっと行うだけで、登録は完了です。

 

かなり簡単に登録作業ができます。

 

詳細な手順については、エックスサーバー公式が分かりやすく説明しているので、
設定の際はそちらをご覧ください。

エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方

 

エックスサーバー以外を契約された方は、独自ドメインの登録方法でググってみてください。

 

有名どころのレンタルサーバーであれば、
ドメインの設定方法やWordPressのインストール方法は記事が出てくると思います。

 

サーバーにwordpressをインストールしよう

 

独自ドメインが設定できたら、次はサーバーにwordpressをインストールしていきます。

インストールといってもこれも、エックスサーバーの場合はとても簡単。

 

サーバーパネルでぽちぽち操作していくだけです。

 

wordpressのインストール方法も、エックスサーバー公式が手順を公開しているので、
設定の際はこちらをご覧ください。

エックスサーバーでブログを始めよう！初心者でもわかるWordPressブログの始め方

 

ちなみに、エックスサーバーのサーバーパネルは、ブラウザ上で操作を行います。

なので、スマホからでも独自ドメインの登録やwordpressのインストールができてしまうのですね。

 

WEBサイトを作って公開するなら、
自分でサーバーを立てて一から設定していくって手もあるのですが、
そうするとどうしてもPC操作が必要になり、
スマホだけで構築を完結させることが難しくなります。

 

そういった意味でも個人的には、レンタルサーバーをオススメします。

 

なぜ、wordpressを使うの？

 

さて、wordpressをレンタルサーバーにインストールする所まで進みましたが、
そもそもなぜwordpressを使うかについても少し触れたいと思います。

 

なぜ、フリー素材サイトでwordpressを使うのか？

結論から先に申し上げると

 

WEBサイトを公開するなら、別にWordPressに限定しなくても良いかなと思います。

 

その他のCMSを使ったり、HTMLやCMS、Javascript、PHPが書けるのであれば
自分で一からコードを書いて作るのもありです。

 

ただ今回私がフリー素材配布サイト構築で重視したのが、

です。

 

「手間をかけない」ということについては、
移動中や待ち時間等のスキマ時間だけを使ってサイト作ると決めていたため、
素早くサイトの構築ができることを重視しました。

 

プラグインについても、
素材配布サイトは素材のダウンロード機能であったり、
お問い合わせフォームであったりと様々な機能が必要です。

 

それらを実装させるために、いちいちプログラムを書くのは時間がかかりますし、
初心者だとあまりに大変です。

 

今回のフリー素材配布サイトを手早く公開まで進める意味でも、
拡張機能を手軽に実装できるプラグインがたくさんあるwordpressがうってつけなのですね。

 

まずは、wordpressでフリー素材配布サイトを公開するとこまでこぎつける。

 

そのあと気になった部分については、修正方法や機能の作り方を調べて
自分のフリー素材配布サイトを少しずつ改善していきたいなと思いましたので、
今回はwordpressを採用しました。

 

サイトをSSL暗号化しよう

 

さて、話を戻しまして、

先程までの行程でレンタルサーバーにwordpressをインストールする所まで完了しました。

 

続いては、サイトをSSL暗号化する設定を行っていきましょう。

 

SSL暗号化って何？

 

SSL暗号化についてですが、

 

みなさんがChromeやMicrosoft Edge、safariなどのウェブブラウザを使って何か調べる際、
どのようにして検索するでしょうか?

 

きっとGoogle等の検索窓に、調べたいキーワードを入れて、
関係ありそうなサイトを探すかと思います。

 

では、検索結果で出てきたサイトのタイトルの上部を見てみてください。

 

「http」もしくは「https」と書かれた文字列がどのサイトにもあるのが分かると思います。
この「http」もしくは「https」で始まる文字列がサイトのURLです。

 

さて、もっとよく見てみると、「https」から始まるサイトがなんか多いかも
ということに気づくかと思います。

 

サイトをSSL暗号化するとはどういうことかざっくり言ってしまうと、

サイトのURLに「https」を使用するよう設定すること

です。

もう少し踏み込んで書くとSSLはインターネット上での通信を暗号化する技術です。

 

SSL暗号化がされていないと、
あなたのフリー素材配布サイトに訪れた人の通信が他の人に盗み見される可能性もあり、
訪問者は安心してあなたのサイトを利用することができません。

 

私は、別に「http」や「https」なんて意識したことがなかったし、
他の人もそんな気にしないんじゃない？

 

って思われるた方もいるかもしれません。

しかし、SSL暗号化されてないサイトにアクセスする際、警告文を表示するブラウザもありますし、

暗号化することでSEO対策(Googleの検索上位に引っかかりやすくする対策)にもなります。

 

SSL暗号化自体もXサーバーであれば、簡単に設定ができます。

なのでSSL暗号化は絶対にやっておきましょう。

 

XサーバーでのSSL暗号化設定方法は、こちらの記事がわかりやすいので、参考にしましょう。

 

SSL暗号化は、自分でサーバーを立ててサイトを作ろうとすると
結構設定が大変だったりするので、
Xサーバー等のレンタルサーバーの機能で実装できるのは
めちゃくちゃありがたいですよね。

サイトにパスワード認証を設定しよう

 

続いてサイトにパスワード認証を設定します。

こちらは、必要に応じて行ってください。

 

サーバーパネルで、サイトにパスワード認識をかける設定をしていきます。

これは、あなたのサイトに訪れた人がいても、ID・パスワードを入れないと続きを見られませんよ〜

という設定です。

 

なぜ、このような認識パスワードを設定するかというと、
構築中のフリー素材配布サイトに誤って誰かが訪れてサイトを見られないようにするためですね。

 

構築中限定でパスワード認証をかけてサイトが完成したら、認証設定を外して正式に公開します。

 

とは言うものの、まだ完成してもいないサイトには基本的に人は来ませんから、
そこまで気にする必要はないかもしれません。

 

なので、こちらのパスワード認証設定は必須ではありませんが、やらないよりはやっておいた方が何かと良いこともあるといった感じです。

 

wordpressのテーマを設定しよう

 

さて、wordpressのインストールも終わり、諸々の設定をサーバーパネルで行いましたら、
いよいよ次はwordpressでの素材サイト構築作業に移ります。

 

ここからが、wordpressを用いたフリー素材配布サイトの作り方の肝となる部分です。

 

まずは、インストールしたwordpressの管理コンソールにログインしましょう。

wordpressの管理コンソールでは、色々と制作項目があるのですが、まずはテーマの変更から行います。

 

テーマの変更とは、つまりはサイトのデザインを設定するいうことになります。

wordpressをインストールするとデフォルトのテーマが設定されていますが、
素材配布サイトのデザインとしては使いにくいので、使いやすそうなテーマに変更します。

 

wordpressは、
有志の方が作成したテーマが豊富なのでお好みのテーマを探し放題というのも魅力の一つです。

 

私の場合はシンプルなテーマにしたかったので、
「Lightning」というテンプレートを採用しました。

 

テンプレート選びでは、こちらのサイトを参考にさせていただきました！

 

私が使っている「Lightning」以外にも素材配布サイトに
オススメのテーマテンプレートを紹介されているので、
是非そちらも参考にしてみてください。

 

フリー素材サイトに必要な機能実装をしよう

 

使用するwordpressのテンプレートが決まったら、
次はフリー素材配布サイトに必要な機能を追加していきましょう。

 

ここでいう必要な機能というのは、

• 素材データのダウンロード機能
• お問い合わせフォーム
• 素材検索機能

等です。

 

機能を追加すると聞くと難しそうな感じがしますが、
基本はwordpressのプラグインをインストールしてそれぞれ設定をしていくだけです。

 

私のサイトでは、
素材検索機能とお問い合わせフォーム以外は全てwordpressのプラグインで機能を実装しました。

 

プラグインを使用しなかった、
素材検索機能とお問い合わせフォームについても後ほど解説しますね。

インストールしたプラグイン

 

まずはwordpressにインストールしたプラグインについてご紹介します。

AddToAny Share Buttons (シェアボタン)

 

これは、サイトにSNSのシェアボタンを追加できるプラグインです。

X(旧Twitter)、インスタグラムはもちろんLine等のボタンもあります。

サイトが成長してファンが増えれば、素材をシェアしてもらえる可能性も出てくるので、
SNSシェアボタンは是非設置しておきたいですね！

 

BackWPup

 

サイトのバックアップを取るプラグインです。

フリー素材配布サイトを利用しやすくするために、
サイトを公開した後も機能の追加やデザインの変更等を行っていきます。

その際に、プラグインの相性が合わなかったり、
大事な設定ファイルを消しちゃったりした場合でも
元の状態に戻せるようにバックアップは定期的にとっておきましょう。

 

Classic Editor

 

これは、WordPressの編集画面(エディター)を旧バージョンに戻すためのプラグインです。

wordpressは、今はブロックエディターという編集画面が採用されているのですが、
以前は編集画面が全く違うものだったのですね。

 

私は、旧エディターで慣れてしまっていて、
新しくブロックエディターの使い方を学ぶのが大変だと思ったので、
このプラグインを入れてます。

 

ブロックエディターの方が使い勝手も良くなっているようなので、
これからwordpressを使い始める人は、
新しいブロックエディターで慣れてしまった方が良いと思います。

 

Simple Download Monitor

 

こちらは、
フリー素材配布サイトのメイン機能である、ダウンロード機能を追加してくれるプラグインです。

 

ダウンロード機能追加のプラグインは、
いくつかありますがシンプルなものが良かったのでこちらのプラグインを採用しました。

 

ダウンロードボタンの設置方法も簡単で、

とても簡単に使えるし、素材毎にダウンロードされた数が分かるので便利です。

 

一つだけ難点をあげるとすると、
ダウンロードボタンが自分のサイトのデザインと比較すると小さいかなぁ

というところです。

 

もっと利用者に分かりやすくするために、
大きいサイズのボタンにできればいいなと思っております。

 

これに関しては、自分が設定項目を見落としているだけで、
改善できるかもしれないのでちゃんと調べてみようと思います。

もし、改善方法が分かったら共有しますね。

 

TinyMCE テンプレート

 

これはその名の通り、投稿ページのテンプレートを作ることができるプラグインです。

素材を配布する際、1素材につき1ページのような形で
公開することになるかと思いますが、大体は

• サンプル
• ダウンロードボタン
• 素材に対するコメント

みたいな感じで、決まりきった型があるかと思います。

それを毎回入力するのは大変なので、
このようなテンプレート化できるプラグインを入れて手間を省きます。

サイトは、作るよりも更新し続ける方が大変なので、
少しでも更新にかかる負担を減らしていきましょう。

 

WebSub (FKA. PubSubHubbub)

 

SEO対策(Google検索で見つけてもらいやすくするための対策)のプラグインです。

Googleのインデックスが早くなるようです。

 

XML Sitemap & Google News

こちらもSEO対策のプラグインです。

 

配布素材の検索機能を追加するPHP

 

プラグインによる機能追加とは別に、
素材検索機能を実装するために、wordpressのテーマのPHPファイルも編集しています。

 

素材配布サイトなので、当然利用者は欲しい素材があってサイトに来てくれるはずです。
なので、あなたのフリー素材配布サイトにある配布素材を絞り込む機能は必須です。

 

PHPとは、ざっくりいうとwordpressのページを表示するためのプログラミング言語のことです。

 

プログラミングと聞くと難しそうと思われるかもしれませんが、
今回行った検索機能の追加は既存のコードをほぼコピペしただけなので
プログラミング初心者であっても取り組めるかと思います。

 

さて、実装した具体的な機能についてですが、

wordpressでは素材投稿ページに

「楽しい」、「爽やか」、「暗い」 等

 

のイメージ検索用のタグをつけられるのですが、それを絞り込むためのタグ検索機能を追加してます。

 

追加するPHPとCSS(WEBサイトを装飾するための言語)は
こちらのサイトを参考にしました！

WordPress│自作の絞り込み検索の作成方法

 

PHPを編集する際の注意点ですが、編集する前は必ずバックアップを取るようにしましょう。

 

編集の際に、重要なコードを誤って消してしまって
自力で修正ができないということが起こっても
バックアップがあれば前のサイトの状態に戻すことができます。

 

もし、PHPの編集は難しそうだなと感じる場合は、
良さそうな検索機能を持つプラグインを探すのも一つの手だと思います！

 

こちらの記事で、素材配布サイトの検索機能を実装できそうなプラグインについて
解説されているので参考にしてみてください。

 

使用したその他サービス

 

プラグインとPHPの追加以外だと、
お問い合わせフォームとしてGoogleフォームを使用してます。

 

もちろん、お問い合わせフォーム用のプラグインはたくさんあるのですが、
先程のPHP追加の際にCSSもサイトに追加したのですが、
それの影響でお問い合わせフォームのプラグインを使用すると入力フォームの表示崩れが起きてしまいました。

 

原因となっているCSSを修正すれば良いのですが、
一つ一つコードを読み取って原因となっている部分を特定するのは面倒だし、
そこにあまり時間をかけたくなかったので別の方法を探しました。

 

そこで見つけたのが、Googleフォームです。

 

Googleフォームはアンケート機能として使われることが多いと思いますが、
お問い合わせフォームにも応用できます。

 

Googleフォームをお問い合わせフォームとして利用する方法は
こちらの記事が分かりやすいです。

Googleフォームでお問い合わせフォームを作成するには？手順から自動返信の設定まで解説

 

基本的には、私のフリー素材サイトでも記事に書かれているような設定を行いましたが、

フォームのサイズをデフォルトのまま使うと、
スマホでサイトを見た時画面をはみ出してしまっていたので、サイズだけ調整しています。

 

パスワード認識を解除してサイトを公開しよう

 

ここまでこれたら、フリー素材配布サイトはほぼ完成です。

 

あとは、プロフィールや利用規約等の体裁を整えてサイトを公開しましょう。

 

サイトにパスワード認証をかけていた人は、公開前にパスワード認証を解除するのを忘れずに！

 

まとめ

 

今回は、wordpressを使ったフリー素材配布サイトの作り方について解説しました。

「フリー素材配布サイトの作り方」とググってこの記事にたどり着いてくれた方は、
きっと音楽やイラスト、写真等の素材をすでに作っていて、
自分のサイトがほしい人だと思います。

 

大事なのは、素材を作ってそれを配布することなので、
wordpressのテーマやプラグイン等便利にショートカットできる部分は、
存分に活用してサクッと素材配布サイトを公開してしまいたいですよね！

 

今回の「wordpressによるフリー素材配布サイトの作り方」の記事が
みなさんの素材配布サイト制作のお役に立てると嬉しいです。

今回実際に作った素材配布サイトはこちら