Web制作の画像選定に便利な素材サイトをやさしく解説【初心者向け】

2023年7月11日

こんにちはTERUです。
フリーランスでWEB制作（コーディングとディレクション業務）をしています。

読者の悩み

Web制作で利用できる素材サイトが知りたい
Web制作で画像を使う際の注意点が知りたい

本記事では、こういった疑問に答えます。

Web制作で画像は、見た目や印象に大きな影響を与えます。
適切なイメージの画像を見つけてサイトをより良いものにしていきましょう。
実際に僕が使用している素材サイトと画像を使う上でよくある問題について説明します。

本記事の信頼性

Web制作会社にてWebディレクター経験あり
現在フリーランスでWEB制作をしている
WordPressを使ったWeb制作を数多く経験している

Web制作の画像選定に便利な素材サイト4選

Web制作の案件作業や自分でホームページを作る際によく利用する素材サイトを紹介します。
各素材サイトに特徴があるので使い分けるのがオススメです。

O-DAN（オーダン）

約40個の有名ストックフォトサイトから、フリー素材を横断検索できるサイトです。
商用利用が可能な海外のフリー素材を簡単に見つけることができます。

ポイント

日本語入力での検索が可能
複数サイトを横断検索するので画像数が多い
ブログに使いやすい

本ブログサイトでも、よく利用しています。
画像素材にお金をかけれない場合は、まずこのサイトで調べてみましょう。

PAKUTASO（ぱくたそ）

日本の風景や人物画像を中心にフリー素材を配布しているサイトです。
他の素材サイトと違い、市町村や企業とのコラボなど独自の方向性でクセの強い写真も多くあります。

ポイント

日本の風景や人物が中心
企業や市町村とのコラボ素材多い
クセが強い写真もある

クセが強い写真の例

クセが強い写真も多いですが、webデザインする際のサンプル画像（人物・風景）などコーポレートサイトの作成に利用することが多いです。

Shutterstock（シャッターストック）

海外の有料素材サイトの中では圧倒的画像数と品質です。
有名ブロガーさんやオシャレなサービスサイトでよく使用しされています。

ポイント

数百万点の画像あり
定額プランあり（月6,000円、画像10点から）
１ヶ月の無償トライアルあり

正直高いので、ブログや個人サイトでは、簡単に使いにくいですがコーポレートサイトでも数点利用するだけで、サイトのイメージがぐっと良くなります。

AdobeStock（アドビストック）

Adobe Stockは、アドビ社が提供するストックフォトサービスです。
画像だけでなく、動画や音楽も利用することが可能です。

ポイント

Adobeソフトと連携できる
定額プランあり（月3,480円、画像10点から）
１ヶ月の無償トライアルあり

WEB制作会社では、AdobeStockを使っている会社が多い印象です。
Webデザイナーとして仕事される方は、有料素材を使うならこちらの方がいいと思います。

Web制作で画像を使う際のよくある疑問

Web制作で画像を使う際のよくある疑問について下記に記載します。

ブラウザで見ると画像がぼやける
画像の表示が遅い
figureタグ内とpタグ内のどちらに画像要素（img）を含めればいいの？
alt属性は入力しないといけないのか？

一つずつ説明します。

ブラウザで見ると画像がぼやける

デザインデータ通りにコーディングしたのに、ブラウザで確認すると画像がぼやけることがあります。
原因としては、画像サイズが考えられます。

ブラウザは利用者によってサイズが違うため、表示しているブラウザのサイズより、実際の画像サイズが小さいと画像がぼやけてしまうことがあります。
また、最近のディスプレイは高解像度になっているのも原因の一つ（Retinaディスプレイでは通常等倍で表示されていた画像の縦横が2倍に引き伸ばされて表示される）

対処方法としては、デザインデータ（psdやxd）から画像を書き出す際に通常の倍サイズで書き出しをしましょう。

XDデータの場合

（１）対象のレイヤーを右クリックし、「選択した項目を書き出し・・」を選択します。

（２）画像の保存画面で、「書き出し先」で「Web」、「デザイン倍率」は「１x」を選択し、最後に「書き出し」を選択します。

（３）書き出し先のフォルダを確認すると２つファイルがあり、「〜＠2x」のファイル名が倍サイズで書き出された画像ファイルです。このファイルを使ってコーディングしましょう。