【完全版】フリー素材サイトをワードプレスでサクッと作る方法 前編 | まるっとふくち
PR

フリー素材サイトの作成・運営方法完全ガイドー前編ー

スポンサーリンク
フリーイラストサイトの作り方完全ガイド前編イラストサイト制作

この記事のリンクにはプロモーション(広告)が含まれています。感想・レビューなどは誇張せずに正直に書いております。

こまるちゃん
こまるちゃん

「いらすとや」みたいなフリー素材(イラスト)配布サイトを立ち上げてみたいけど何からやればいいのかわからないよー!

ふくち
ふくち

任せなさい♪

2023年3月にフリーイラストサイト「ふくちのイラスト工房」を公開したわたしが、「フリーイラストサイトの制作方法」についてゼロからわかるように説明するよ♬

\こんな感じのサイトの完成を目指します!/

ふくちのイラスト工房

フリーイラストサイトを作るにあたり、数ヶ月間さまざまなサイトを参考にしたり、自分で色々いじってみたりと試行錯誤した中で、最低限必要な部分だけを抽出しました。

この記事を読んで実践してもらえば、わたしと同じレベルのサイトが完成します!

わたしは元々ブログ運営をしていたため、サイトの制作方法については理解しているところからのスタートでしたが、本当に「知識ゼロから」の方でもこの一連の記事だけを読んでいただければわかるように解説をしています(そのつもりです)。

ふくち
ふくち

万一わかりづらい点があれば問い合わせなどからご連絡ください!

ボリュームがあるので前編と後編に記事を分けています。

前編:事前準備・サーバーのレンタル〜WordPress・テーマのインストール
後編:サイト内のコンテンツ作成・イラストの投稿方法など
※その他必要な部分も別の記事で補足しています

ふくち
ふくち

最初はよくわからなくて難しく感じるかもしれませんが、1つ1つ実践していけば必ず完成するので頑張りましょう!

1日で作業を終えるのは難しいので、ブックマークしてじっくり取り組んでみてくださいね♪

\サイトを見てみる/

ふくちのイラスト工房

\後編記事/

\いいことたくさん!フリーイラストサイト運営のすすめ/

スポンサーリンク

フリーイラストサイトの運営に必要なもの

話を始める前に、フリーイラストサイトの運営にあたり最低限準備が必要なものが4つあります。

  • パソコン(ipadでも代用可能)
  • インターネット通信のできる環境
  • イラストを描く道具(タブレットなど)
  • 月々1000円程度のレンタルサーバー代
ふくち
ふくち

パソコンはiPadなどでも代用可能ですが、効率を考えるとやはりパソコンがベターです。

単純にサイト運営をするだけであればパソコンは高性能なものでなくても大丈夫です。

ただし、後からデザインソフトや動画編集ソフトなどを利用する予定があればスペックは良く考えたほうが良いです。

Amazonでお得なPCを探す

イラストを描く道具とレンタルサーバー代については後ほど少し掘り下げてご紹介します。

フリーイラストサイト公開までの流れ

フリーイラストサイト公開までの流れ

まずはフリーイラストサイトを公開するまでの全体像をつかんでおきましょう。

一連の流れをざっくりと4つのタームに分けました。

この前半記事では「サイト立ち上げ前」「サイト立ち上げ期」をカバーしています。

※サイト運営期はサイト公開後のお話になりますので、また別記事で作成を予定しています。
 今回の前後半記事では3つ目のタームのサイト公開までを扱っています。

イラストサイト立ち上げの流れを図解したもの

運営スタート後のお話は下記の記事でも触れているのでよかったらみてみてください♪

早速ですが流れに沿って説明をしていきます。

サイト立ち上げ前

サイト立ち上げ前
ふくち
ふくち

サイトを立ち上げる前までに準備しておきたいことは以下の6つです!

サイト立ち上げ前にする6つのこと
  • ターゲット・テーマの選定
  • テイストの決定
  • ドメイン名、サイト名の検討
  • 使用ツールの選定
  • イラスト制作

ターゲット・テーマの選定

まず最初に決めるべきは、「どんな人のためのフリーイラストサイトにするのか」です。

いわゆる「サイト設計」と言われる部分です。

ここがブレてしまうと集客が難しくなります。

元々有名なイラストレーターさんでもない限りサイトを作っただけでは注目されません。

「このサイトに来れば必要なものが揃う!」と思ってもら必要があります。

例えば「学校の先生」をターゲットとするなら、学校の印刷物などに利用しやすい学校用品・先生・生徒の活動の様子・季節のフレームなどをテーマとしたイラストを作成すると良いです。

ふくち
ふくち

日本一有名なフリーイラストサイト「いらすとや」さんの様にオールジャンルを守備すれば最強ですが、描けるイラストにも限りがあるので最初は絞り込んでの運用をお勧めします。

ターゲット・テーマの一例

  • ターゲット:トレーニング・ダイエットに関する情報を発信しているブロガーさん
    テーマの一例:筋トレのイラスト・肥満に悩んでいる人・NGな食事、バランスの良い食事のイラストなど
  • ターゲット:会社の企画担当者
    テーマの一例:会社員のイラスト・資料や図解に役立ちそうなやや堅めのイラスト
ふくち
ふくち

わたしは「ゆるかわ好きの女子ブロガーさん」というかなりフワッとしたターゲットで始めてしまったので、素材にもばらつきがあり改善が必要だと考えています。

最初から決められない場合はまずは好きなイラストを投稿して、後から整えていくスタイルでも良いと思います!悩みすぎると動けなくなっちゃいますからね!

ポイント

ターゲット・イラストテーマの明確化でサイトのブランド力を高める

イラストのテイストを決める

テーマが決まったら次はイラストのテイストを決めましょう。

既に確立した描きかたや作風がある人は読み飛ばしてOK♪

ふくち
ふくち

ざっくり分けるとこんな感じ。

シンプルなイラストの一例
シンプル
スタイリッシュなイラストの一例
スタイリッシュ
ガーリーなイラストの一例
ガーリー
面白い・ゆる可愛いイラストの一例
おもしろ・ゆるかわ

あなたが得意とするイラストのテイストの中で、先ほど決めた「ターゲット・テーマ」に合うものを選びましょう。

あくまで無料配布するものなので、そこまで時間をかけずに描き上げられるものが望ましいです。

ターゲットにあったテイストを選ぶことで利用率が高まります

(子育て系のイラストであまり強い絵柄は好まれないですよね)

ふくち
ふくち

ターゲット・テーマ選びを先にお話ししましたが、あなたのイラストのテイストに合わせてターゲットを選ぶという順番でも大丈夫です♪

ポイント

サイトの統一感UP、また利用者の利便性の面でもイラストのテイストはできるだけ統一する。

サイト立ち上げ時に必要なドメイン名・サイト名を検討

いざサイトを立ち上げる!となった時に必ず必要になるのが「ドメイン名」と「サイト名」です。

ドメイン名とは

インターネット上のWebサイトの場所を示す住所のようなもの。

当ブログのURLは「https://www.fukuchinofukugyou.com」ですが、このうちfukuchinofukugyou.comの部分がドメインに当たります。

ふくち
ふくち

なるべくわかりやすいサイト名とドメイン名がいいね♪

サイト名は後から修正も可能ですが、ドメイン名は一度取得すると変更不可です。

また、既に世の中に存在しているドメイン名は利用ができないため、第3希望くらいまで考えておくと安心です。

具体的なサイト名やドメイン名の設定についてはサイト立ち上げのセクションでお話しします!

ポイント

サイト名・ドメイン名は事前に決めておくとスムースにサイト立ち上げができる。

使用ツールの選定

サイトに掲載するイラストを描くツール、すなわち「道具」と「ソフト」を決めましょう。

  • 道具
    パソコン+板タブ・ペンタブ・iPad・スマートフォンなど。
  • ソフト
    アイビスペイント・クリップスタジオペイント(クリスタ)・Adobe Illustrator・Adobe Fresco・プロクリエイトなど。
ふくち
ふくち

ちなみに私はiPad Air4でAdobeFresco(アドビフレスコ)というソフトを使っています。元々はスマートフォン+指で描いていましたがやはりスピードが違います!

使い慣れているものがあればもちろんそれでOK!

Adobe Illustartorなどで描けるベクターデータは利用者側でのちょっとした加工もしやすく重宝されるので、可能であればベクターデータでの描画をお勧めしますが、絶対というわけではありません

ポイント

無理なく描ける環境を整えるのが大切です♪

\おすすめの機器はこちら/

イラスト・画像制作(サイトに使用するイラストや画像・配布するイラスト)

テーマが決まれば実際に配布するためのイラストサイトに使用するための画像を作成しましょう。

ふくち
ふくち

このセクションはサイトを立ち上げた後でもOK

配布用イラストのデータサイズについて

Adobe Illustrator形式のデータであれば拡大縮小しても劣化しないのであまり気にしなくて良いですが、PNGやJPEG形式で保存する場合は「縦横1000px」くらいあると安心です。

あまり小さいサイズで作成してしまうと、Webで使用する際サイズによってはきれいに見えないためです。

大きいほどきれいには見えますが、その分データが重くWebサイトの表示スピードに影響が出てくるため、個人的には縦横1000px程度をおすすめします。

サイトを公開する時には少なくとも10素材くらいはあると見栄えがすると思います。

ふくち
ふくち

私は過去作も含め50作品ほどアップロードした段階でサイトを公開しました

後ほど詳しく説明しますが、「サイトロゴ」「サイトアイコン」は配布するイラストとは別に必ず用意する必要があります。

必要な場合はトップページなどに入れるイラストも準備しましょう。

サイト立ち上げ期

サイト立ち上げ期

事前準備が整ったらサイトを立ち上げましょう。

ふくち
ふくち

経験がない方はここで行き詰まってしまうケースが多いと思いますが、本記事に沿ってやっていただけば大丈夫♪

サイト立ち上げ期にすること
  • サイト構成
  • サーバー契約
  • WordPressの立ち上げ
  • サイトセキュリティなどの設定

それぞれ説明していきます。

サイト構造設計

サイト構造設計とは、はじめに決めたサイトの「ターゲット・テーマ」に沿って、

  • どのようなコンテンツ(ページ)が必要かを考え
  • どのような構成(ページとページの繋がり)にするかを組み立てる

作業になります。

こまるちゃん
こまるちゃん

なんだか難しそう…

ふくち
ふくち

確かにいきなりやるのは難しいので、まずはわたしの構造設計をベースにやってみましょう!

後から使い勝手に合わせてカスタマイズすることができます。

用意すべきコンテンツ(ページ)

コンテンツには固定ページ」と「投稿があります。

固定ページは一度設定したら基本的にはそのままのもの。(必要に応じて更新)

投稿は随時増やしていくもの(イラストサイトでいえば、イラストのダウンロードページ)と理解しておけばOKです♪

固定ページの例
  • トップページ
  • プロフィール
  • 利用規約
  • プライバシーポリシー
  • リンク
  • FAQ
  • 問い合わせ
投稿ページの例
  • イラストのダウンロードページ
    ※ブログサイトなどの場合は記事

サイトの構成

上記のページをどのような繋がりで組み立るかという部分です。

私のサイトでは以下の図のようになっています。

ふくちのイラスト工房の構成を図解したもの
ふくち
ふくち

具体的な作業方法は次の「サイト立ち上げ後」でお話ししますので、今はなんとなくの雰囲気を理解しておいてもらえればOKです。

サーバー契約〜Wordpressの立ち上げ・セキュリティの設定

ここからはサイト運営では不可避のサーバー契約WordPressの立ち上げについてのお話です。

こまるちゃん
こまるちゃん

うーん。ついていけるかなぁ…

ふくち
ふくち

大丈夫!わたしもこのブログを立ち上げるときは知識ゼロだったけど30分くらいでサイトを立ち上げることができたよ!

今回はわたしが利用している「コノハウィング 」で説明をしています。他には業界最王手の「エックスサーバー 」もおすすめです。

ふくち
ふくち

実は、レンタルサーバーってたくさんあるので悩み始めるとキリがありません。ただ、初心者でも不安なく始められるのは上記の2つのサーバー会社。

ConoHaWINGは管理ページが見やすく初心者にもわかりやすい!それにサイト運営には不可欠な独自ドメインが2つまで永久無料1つはイラストの無料配布、おいおいもう1つをブログや別のテイストのイラストサイト用に!なんて使い方もできちゃうので個人的にイチオシです

ふくち
ふくち

不思議なことにサイトって1つ作るとかなりの確率で2つ目も作りたくなるんだよね。

契約期間については、不安があれば3ヶ月からスタートしても良いと思いますが、12ヶ月以上のプランの方が断然お得なため続けることが決まっているならキャンペーンの実施時期に12ヶ月以上のプランで申し込むことをお勧めします!

各社のキャンペーン情報をチェック
エックスサーバー
ConoHaWING(コノハウィング)

\ConoHaWING(コノハウィング)詳細はこちら/

\ConoHaWINGとエックスサーバーの比較はこちら/

テーマのインストール「Fukasawa」

サーバーの契約が完了し、ワードプレスを開設できたら次は「テーマ」をインストールします。

WordPressにはたくさんの「テーマ」と呼ばれるサイトのテンプレートのようなものがあります。

また、テーマには「有料」のものと「無料」のものがあります。

今回はわたしがイラストサイトで使用している「Fukasawa」という無料のテーマで話を進めていきます。「Fukasawa」はデザイナーやイラストレーター向けの見栄えが洗練されたテーマです。

ワードプレステーマFukasawaの公式ページトップのスクリーンショット
引用元:Fukasawa公式ページ

Fukasawaの公式ページはこちら

ふくち
ふくち

ブログむけのテーマとは異なりあまり凝った装飾などはできませんが、イラストの投稿には十分!何よりスタイリッシュで気に入っています!

テーマのインストールの流れ

まずはテーマをインストールする手順です。

  • 外観→テーマをクリック
  • 新規追加をクリック
  • 検索窓に「Fukasawa」と入力
  • テーマが出てきたら、「インストール」をクリック
  • インストールが完了したら「有効化」をクリック

この後1つずつ画像つきで説明するので安心してくださいね!

もしWordPressの管理画面のログイン方法がわからなくなってしまった場合は後半の記事の「WordPressのログイン方法」をご確認ください。

ふくち
ふくち

順に見ていきましょう♪

外観→テーマをクリック

左側のメニューバーから外観→テーマの順で選択。

ワードプレスの管理画面で外観内のテーマを選択している画面
新規追加をクリック

新規追加ボタンをクリックします。

ワードプレスの管理画面でテーマの新規追加をしている画面
テーマFukasawaをダウンロードする

検索窓に「Fukasawa」と入力し、テーマが出てきたらインストールをクリック。

ワードプレスのテーマの新規追加画面でFukasawaを検索している画面
インストールが完了したら「有効化」をクリック

インストールが完了したら忘れずに「有効化」をクリック!

ふくち
ふくち

有効化しないとテーマが適用されないので要注意!

ワードプレスの管理画面でテーマの有効かをしている画面

まとめ:フリーイラストサイトの構想からサイトの立ち上げまで

まとめ

こちらの記事ではフリーイラストサイトの構成から、WordPressというシステムを使用したサイトの立ち上げ・レイアウトに必要なテーマのインストール方法まで説明しました。

フリーイラストサイト立ち上げ手順の図解

サイト立ち上げ前
  • ターゲット・テーマの選定
  • テイストの決定
  • ドメイン名、サイト名の検討
  • 使用ツールの選定
  • イラスト制作
サイト立ち上げ期
  • サイト構成
  • サーバー契約
  • WordPressの立ち上げ
  • サイトセキュリティなどの設定
  • テーマのインストール
ふくち
ふくち

もうすでに上記のことをこなしてきました!ここまで出来たらもう何も恐れることはありません!安心して次のステップに進んでください♪

なお、イラストの内容や使用ツールなどは現時点で固まっていない部分があっても大丈夫です。

WordPressを立ち上げればこっちのものです(笑)

細かいところは後からでも調整がききますので次のステップに進んでも良いですし、じっくり練りたい人は読み返しながら頑張ってみましょう!

\続きはこちら/

コメント

タイトルとURLをコピーしました