ホームページ用の素材集めについて｜イラスト・写真・アイコンなど

そのホームページを訪れるかどうかは、そこに求めている情報がありそうか、または興味を引く何かがあるかで決まります。
ですが、訪れた後に文章を読み進めるか否かは、デザインや画像によるところも大きいでしょう。

デザインはテンプレートを使ったり、他サイトを参考にすることで改善しやすいですが、画像は用意しづらいものが少なくありません。
そこで、イラスト・写真・アイコンといったフリー素材が手に入れられるサイトの出番です。当ページでは、そういった素材に関することを書いています。

画像素材

体験談や商品レビューであれば、購入した商品を撮影し、その写真を使うのがベターです。
むしろ、写真を撮らずにレビューをしても、「本当に買ったのかな？」となるでしょう。

広告主によっては、アフィリエイト用の写真として、購入した商品が段ボールで届いた感じの写真、商品を手にした写真などをメールで送ってくれるところもあります。
ですが、それではオリジナリティがありません。他にも多くの人が使っていたら、先にページを作った人のコピーに思えるかも……。

それに、画像にオリジナリティがあった方が、SEO的に有利になるという話もあります。Googleの画像認識は、画像内の文字、人の表情、行われている行為などを判断していると聞きます。
もし そうなら、なるべく多くの人が使うフリー素材は避け、独自の画像を用意すべきでしょう。
とはいえ、費用対効果を考えると「画像」＜「文章」じゃないかと個人的には思います。

なお、「画像公開に関する Google のガイドライン」は、「Search Console」のヘルプにありますので、ガイドラインに沿ったページ作りを意識したい方は見てみてください。
そこには「画像やテキストが独自のコンテンツではないページは推奨されません」とあります。

かわいいフリー素材集 いらすとや

よく見かけるフリー素材と言えば、「いらすとや」でしょうか。
テレビ番組でも見ますし、役所の掲示物でも見かけます。
上の画像は、高齢化社会のイラストです。

利用規定の範囲内なら無料で使えますが、素材を21点以上使った商用デザインの場合は、お問い合わせメニューから連絡する必要があります。

素材のダウンロードは、パソコンであれば 画像の上で右クリックして、「名前を付けて画像を保存」で可能。

特徴的な絵柄ですので、不向きなサイトもあるでしょう。

AC系

「イラストAC」「写真AC」「シルエットAC」など、ACワークス株式会社が運営しているフリー素材サイトには、使いやすいものが少なくありません。

利用規約範囲内であれば、商用利用や加工が許可されていますが、利用するには会員登録する必要があります。

素材のダウンロードは、ページ内のボタンを押して行うタイプですが、その近くに「ボタン形状の広告」が出ていることもあるので、よく文字を見てクリックしてください。
また、ダウンロード時に広告が表示されたり、アンケートに答えるよう促されたりすることもあったように思います。

Free icons!

いろんな人が作ったアイコンがダウンロードできるサイトです。
日本語のサイトではないので、そういうのはパスという方はスルーしてください。

素材のダウンロードは、ページ内のボタンを押して行うタイプです。
有料のプレミアムアイコンもあります。

Font Awesome

「Font Awesome」は、ウェブ上で使えるアイコン・フォントのサービスです。
WordPress のテーマによっては、当然のようにデザインとして組み込まれているので、気付かずに使用していることもあるでしょう。

無料ホームページで使う場合は、専用のCSSを読み込んで「\f002」といった具合に、割り当てられた文字コードを当てます。
詳しいことは「Font Awesome」のサイトに書かれていますが、日本語のページではありません。

なお、無料のフリー版と有料のプロ版があり、フリーでは使用できるアイコンに制限があります。

そのほかの素材サイト

他にも「0円のweb素材屋さん」「人物イラスト館」「ストックマテリアル」「Line illustration labo」「human pictogram 2.0」「イラストボックス」「ガーリー素材」「TopeconHeroes」プロデュースのサイトなど、多くのフリー素材サイトがあります。

いろんなサイト名を挙げると、「どれがオススメ？」みたいになりますが、どんなサイトを作るのかによってオススメも異なってきますし、画像の形式によっても用途が限られます。
用途が限られるというのは、画像ソフトによって扱える画像形式が違ったり、形式によっては拡大すると劣化したりするといった話になります。
おそらく、当サイトに来る人で、ベクタ形式を使用する方は少ないと思うので、詳しいことは省略させていただきます。

「フリー素材」で検索すると、先に挙げたサイトの大半は引っかかるでしょう。
その手のキーワードで出てこない素材としては、「インフォトップ」登録後に使えるアフィリエイトページ用素材などがあります。

TinyPNG

「TinyPNG」は素材サイトではありませんが、画像を扱う際に利用しているので紹介します。

こちらは画像を圧縮するサイトになります。
使い方は簡単で、「Drop your .png or .jpg files here!」と表示されている箇所に画像を持っていくだけ。
ドラッグ・アンド・ドロップすれば圧縮が始まり、終わったら各ファイルの「download」をクリックし、ダウンロードするという流れ。対象となる画像の形式はPNGとJPGです。
画像にもよりますが、6割ほど容量を抑えられます。

画像の容量を減らせば、それだけサイトを読み込む時間が短くて済みますし、サイトの評価アップにも繋がるでしょう。
多くのサイトで、訪問者の半数がページの読み込み中に離脱していると、Googleのモバイルサイトの読み込み速度とパフォーマンスをテストするページに書いていますので、結果的に集客にも影響してくるはず。

WordPressを使用しているなら、「Compress JPEG & PNG images」という自動圧縮プラグインで同じことができます。ただ、動作が重くなるから「EWWW Image Optimizer」を使った方がいいという評判も。

ファビコン作成

「favicon（ファビコン）」は、ブックマークした際に、その横に表示される画像のこと。
そのサイトを想起させる画像にすることで、たくさんのブックマークの中にあっても、探しやすくなるでしょう。

何も設定していないと、簡素なアイコンになります。パソコンなら、紙がめくれたようなアイコンといった具合に。
無料ホームページなどでfaviconを使うなら、LINKタグでfavicon画像の場所を指定し、rel属性で「icon」と書きます。
以前は「shortcut icon」と書いていましたが、今は非推奨になっているようです。とはいえ、古いブラウザが「shortcut icon」でないと表示されません。

faviconの拡張子と言えば「ico」でしたが、今では「png」「gif」も使えます。
その代わり、type属性で「image/png」といった指定が必要になります。

「png」を「ico」に変換してくれるサイトもありますし、フリー素材としてfaviconをダウンロードできるサイトもありますので、他の画像と同じような感覚で用意できると思います。

画像以外の素材

ここからは画像以外の素材に関して書いています。
具体的に言えば、HTMLとCSS、音、カラーコード、そして情報になります。

ホームページテンプレート.com

商用利用可能な無料テンプレートがダウンロードできるサイトです。
マルチデバイス対応のレスポンシブWebデザインのHTMLをはじめ、WordPressテーマが無料で配布されています。
同じ会社が運営する姉妹サイトには、白背景専門の無料写真素材サイト「White BG」、漫画やイラストの制作に使える写真資料集「漫画の資料ドットネット」、ホームページテンプレート・WordPressテーマの販売サイト「クラウドテンプレート」があります。

効果音ラボ

アフィリエイト用サイトで、効果音を必要とする人は少ないでしょう。
個人的には、HTML5とCSSとJavaScriptを使い、ウェブ上で遊べるゲームを作ったことがあるので、もしかしたら そういうゲームを集めたサイトを作り、広告収入を得る人もいるかと思って紹介しています。

効果音ラボでは、戦闘、演出・アニメ、声素材、生活、機械・乗り物、環境音、ボタン・システム音、自然・動物といったジャンルごとに音を探せます。

色見本と配色サイト

サイト制作時に色で悩むことは少なくありません。
そんなとき、役立つのが「色見本と配色サイト」です。

赤、橙、黄、緑、シアン、青、紫、ピンク、茶、白、黒といった大まかな区分けから、より細かな同系色のサンプルへと下っていけます。
聞きなれない色名を知ったり、主な使われ方を知ったりと、見ているだけでも楽しいです。
16進数カラーコードの表示もあるので、気に入った色をメモしてサッと取り入れることが可能です。

ネタ探しについて

何といっても、ホームページ最大の素材は情報です。

自分の知識だけでは記事として不十分な場合、どこかで調べて引用したり、リンクを貼ったりすることもあるでしょう。
その参考文献は本かもしれませんし、雑誌かもしれませんが、それを見つけるために使用するのは検索サイトではないでしょうか。

前世紀であれば、お目当てのページを探せる人が限られていて、検索のプロみたいな立ち位置の人がいました。
検索のプロとアマの差は、検索エンジンが認識しやすい言葉を選んでいるか否か。そんなところだったように思います。
他に、次のような差も考えられます。

意味を調べたいなら、知りたい語句の後に「とは」を入れるといったように、何をキーワードに入れるべきかをプロは知っていました。
今も昔も、キーワードを口語で書く人が少なくないですが、以前は口語を拾いづらかったこともあるかもしれません。

また、かわいいイラストを探したいからといって、「かわいい　イラスト」で検索しても、かわいいイラストが出るとは限りませんでした。
いくら「かわいい」と多くの人が思えるイラストを掲載していても、ページ内に「かわいい」の文字がなければ引っかからなかったのです。まぁ、「かわいいイラスト」というテキストリンクの飛び先として、多くのサイトから被リンクを集めていれば、話は別かもしれませんが……。

今では、「かわいいイラスト」を売りにしているサイトは、ページ内に「かわいい」というキーワードを入れるようになったので、前よりは見つけやすくなったように思います。
HTML的には、img要素のalt属性やtitle属性で、画像の説明をする人が増えたこともあるでしょう。

何より、画像検索ができるようになりました。
検索結果を「すべて」「画像」「動画」「ショッピング」「ニュース」といった具合に絞れます。ここで「画像」を選べば画像だけが表示されますし、そこから画像を掲載しているサイトに行くことも可能です。

画像検索に切り替えなくても、画像が関係する検索キーワードなら、検索結果に「イラストの画像検索結果」として画像が表示されるので、格段に探しやすくなったと言えます。

先の「すべて」「画像」「動画」「ショッピング」「ニュース」の続きとして、「もっと見る」というのがあり、そこには「書籍」「フライト」などがあります。
本を探したいなら「書籍」を選び、ニュースであれば「ニュース」を選ぶことで、効率よくネタ探しができることでしょう。

さらに、「ツール」というメニューを押せば、日付順に表示させたり、最終更新日を絞ることも可能です。
より細かく絞るなら、「ツール」の左にある「設定」メニューで「検索オプション」を選べば、ファイル形式を指定したり、言語や地域を指定できたりします。

中には、「動画」から情報を得ようとする人もいるでしょう。
その際、効率を意識するのであれば、YouTubeなら歯車マークの「設定」で「速度」を上げて、内容を把握する時間を短縮するのも手です。
倍速再生は他の動画サイトでも可能だったりしますし、比較的新しいDVDプレーヤーなら備わっているはず。
ただ、倍速再生に慣れると「せっかち」になる気がするので、運動後にクールダウンするように、最後は通常速度での再生に戻すようにしています。私は……。