ブログやサイトを作り始めてまず、必要になってくるのが、写真やイラストですよね♪
一つのページに付き3〜4枚以上の写真を貼るだけで、文字だけのページに比べ想像を膨らましながら、文章を読むことができると思います♪
また白黒のページに比べて、読みやすくなります!
そこで今回ご紹介するのが、管理人リリーが愛用している、商用可能なロイヤリティフリーのサイトをご紹介していきます♪
目次
第一位 pixabay ★★★★★(WordPressにおすすめ)

Webサイトを作ってきた人は、もう知らない人はいないでしょう♪
ほとんどのWebサイト製作者が、一度は使用している事間違いないこ間違いないこの画像サイト!
このpixabayでは、画像はもちろんの事、高画質の動画もダウンロードできます♡
私も必ずここでまずは、素材を探します♪
使い方
使い方は、いたって簡単です♪
ちなみにですが、このサイトでは日本語でも英語でも入力が可能となっています♪
ステップ1 探している素材のワードを入力

(例)旅行で必要なスーツケースのおすすめブランドを、紹介する記事を書こうと思い、スーツケースの素材を探していました。
写真を見てを分かるかと思いますが「旅行」「スーツケース」と入力しました。
スーツケースだけでも大丈夫ですが、何万枚もある写真の中から選びやすくするために、あえて2つのワードを入れています♪
ステップ2 imagesを選びエンター(検索)

上の写真に 「images」と見えると思いますが、もしimagesとなっていない場合は、隣の▽を押していただくと、写真のように一覧が出てきます。
そこでimagesを選んでください!
もし動画を検索したい際は、「Videos」を押してくださいね♪
スッテプ3 写真を選び画像を開く

検索を押すと上の画像のように、沢山の写真が出てきます♪(写真では8枚ですが、実際に沢山出てきます)
ちなみにですが、上のグレーの枠で囲まれている画像の5枚は、Shutterstockの写真となるので、無料ではないです。

次に選んだ写真をクリックします♪
すると上の画像のように、画面いっぱいに写真が拡大されます!
ステップ4 写真をダウンロード!

写真の右隣に、「Free Download」とあるので、ここをクリックします。

するととどの大きさでダウンロードするか選ぶことができます。
開くとだいたいおすすめの大きさに、青丸が入っています♪
WordPressの記事内に写真を貼るときは、640×426の大きさが好ましいのですが、実際にこの大きさでダウンロードして、貼り付けると画質が荒くなります。
なので、ダウンロードは、おすすめの大きさとして最初から設定されている、青丸の1280×853でダウンロードして、記事内で写真の大きさを自分で小さく調節しましょう♪

次にサイズを選ぶと、上のような画像が現れます。
□I’m not a robotと実際は出てくるので、この□をクリックします。
として上のように、☑️が入ったら、Downloadを押してください♪

第2位 Unsplash ★★★★(サムネイル用・モバイル用に使いやすい)

こちらもpixabayに引き続き、人気なサイトです♪
WorldPressでももちろん使うこともできますが、写真が大きすぎてWordPressにアップデートできない写真などもたまにあるので、Instagramやアプリを使い加工してサムネイルを作る 、などの際にはおすすめです♪
こちらは、英語のみの入力となります

使い方
こちらは使い方が更に簡単になります♪
それでは、説明していきますね!
ステップ1 探している素材のワードを英語で入力

(例)記事の中で青色の色は、人の心理をどのように動かすのか、などの記事を書こうと思い、青の素材を探していました。
上の画像を見ても分かると思いますが、「blue」と入力しました。
すると、親切にもいろんな候補が下にずらっと出てきましたが、今回はただのblueで、そのまま検索をかけます。
ステップ2 写真を選ぶ

検索すると、上のように画像が沢山出てきます。
もし検索したけど、思ったような写真が出てこなかった場合は、blueの下にある関連キーワードを一度見てみましょう♪

私は、今回Oceanを押してみました♪

すると上の画像のように、海の写真が沢山出てきます♪
ステップ3 素材をインストールしよう(2パターン)
このサイトは、インストールの仕方が2パターンあります!
と言ってもとても簡単です♪

まず一つ目のパターンですが、気に入った素材の上にカーソルを持っていくと、このように♡・+Collect・↓と素材内に現れます。
この右下にある↓のマークを押すと、そのまま素材がパソコンにインストールされます♪

2つ目のパターンは、お気に入りの素材を見つけたら、その写真をクリックします。
すると上の画像のように、画面いっぱいに拡大された写真が表示されます。
そして今度は、右上にある緑の枠に囲まれた「Download」をクリックすると、インストール完了です♪
画像の大きさや、詳細を知りたいとき

画像の詳細を知りたい時は、気に入った素材をクリックし、画面いっぱいに写真を出します。
すると上の画像をみるとわかりますが、右下に「shareとInfo」というのが、見えると思います。
そのInfoという場所をクリックしてください♪


すると上の画像のように、画像の詳細がみれます。
画像の大きさが知りたい場合は、一番したのDimensionsというところをみると分かります♪
第3位 かわいいフリー素材集 いらすとや★★★★
3位としましたが、1位同様にとても使いやすい素材サイトとなります。

このサイトは、様々なイラストが無料で使えるとても、使い勝手も抜群なサイトとなります♪
使い方
使い方は、サイト内に分かりやすく説明されている為、説明がいらないと思いますが、一応ご紹介しておきます♪
ステップ1 写真を検索

上の画像を見て頂くと分かると思いますが、「イラストを検索」という場所があるので、そこに探している素材のワードを入力します。
下の「検索のコツ」を押して頂くと、文字通り検索のコツを説明してくれています♪
ステップ2 写真を選ぶ

(例)今回は、Webサイトについての記事を書こうと思ったので、「パソコン」をキーワードに打ち込み、検索をかけました。
「パソコン」とキーワードに入力すると、上の画像のように沢山の素材が出てきます。

欲しい素材が見つかったら、その素材をクリックします。
すると上の画像のように、素材が大きく画面に現れます。
ステップ3 写真を保存

今回、?マークのパソコンの素材を保存することにしました。
その場合、その?マークの素材をクリックします♪

すると上の画像のように、?マークのパソコン単体が画面いっぱいに現れます♪
そしてこの写真を右クリックします。
MacBookのノートパソコンを使用の場合は、2本の指で画像をクリックします♪
すると上の画像のような画面が出てくるので、「名前をつけて画像を保存」をクリックします♪
そして名前を変更して、保存先を設定し、保存をクリックしたら完了です♪
*名前は変更可能ですが、基本的すでに英語で分かりやすように、名前がつけられているので、変更はしなくても良いです。

特に今後WebデザインでHTMLなどを用いコーディングなどを考えている人は、写真の名前は原則英語なので、そのまま保存する方が良いです。
終わりに
いかがでしたでしょうか?!
Webサイト作り初心者の方でも分かりやすいように、まとめたつもりなのですが、参考にしていただければ幸いです♪
ちなみに、他にも沢山の無料サイトが今日では紹介されていますが、個人的に上の3つのサイトが最強と思います。
この3つのサイトだけでも利用していたら、プロ顔負けのサイトが作れること間違いないです♪
基本的に「Webサイトでは自分が撮った写真を使いたいとい!」という方もいらっしゃると思いますが、商品の紹介や旅のレビューなどの記事意外の場合は、今回紹介したようなサイトの素材をフル活用し、プロの方の写真(素材)を使う事を強くおすすめします♪