Webサイトで使う画像素材の選び方と加工テクニック

サイト作りにおいて、素材は選び方・使い方次第で与える印象が大きく影響します。
ホームページ作成サービス「BiNDup」では、写真素材サービスPIXTAやUnsplashと連携しているため多くの素材から選んで使うことができます。今回はWebサイトで画像素材を使用する時に気をつけたい選び方や加工方法などを紹介します。

素材選びの前に——利用規約には必ず目を通す

有料・無料を問わず、配布されている素材には必ず利用するための条件があります。あらかじめ利用規約や条件に目を通してください。

どんなメディアに使うか

Webサイト、印刷物、映像作品など、用途によって使用条件が異なります

個人での利用か商用利用か

商用利用を許可している場合もあれば、個人的な用途のみに限定している場合もあります

使用回数など

同じ素材を繰り返し使える場合もあれば、制限がある場合もあります

クレジット

使用時の条件として、リンクやクレジットの掲載を求めるケースもあります

改変

加工について制限がある場合もあります

著作権や肖像権

写真素材の使用は許可していても、著作権は基本的に提供しているサービスや撮影者に属しています。また、写っている内容によっては肖像権や意匠権があることも忘れないようにしましょう
※なかには著作権も放棄した素材もあります

以上、よくある事例をあげましたが、サービスごとに利用規約は異なります。必ず確認するようにしましょう。
BiNDupの素材サービス「materials」の利用規約はこちらで確認できます。

素材の選び方

素材を選ぶ時に心がけたいポイントについてです。

トーン＆マナーに合わせる

素材選びの大前提として、サイトの目的や伝えたいメッセージを意識しながら、デザインのトーン＆マナーに合わせたものを選ぶことが大切です。

例えば、同じ人物であっても表情などで受ける印象は変わってきます。
以下のように似た写真でも、左なら堅実な印象に、右ならカジュアルな印象になるでしょう。

シチュエーションが不自然にならないように

素材には芝居がかった表情やポーズも多いですが、そういったものを意図的に必要としていない限りは避けた方が無難でしょう。また、小道具やファッションなどは、流行り廃りの影響が出やすい部分なので、場合によっては古くさく感じられてしまうこともあります。
人物の表情やポーズ、小道具、背景など、全体を見ながらできるだけ不自然さがないような素材を選びます。

上記にあげた例が絶対にダメという訳ではありません。誇張した表現が必要なケースもあると思います。意図やイメージに合っているかどうかを気にしながら選ぶようにしましょう。

使用する時の状態を想定する

構図にも注意します。実際に使う時はトリミングしたりして使うことがほとんどです。
素材の比率と実際に使用する比率が異なる場合は、トリミングできる余裕がある素材を選びましょう。

コピースペースを確保する

素材にテキストを重ねる場合は、コピースペース（文字を入れられる空間）があるものを選択するようにします。

イラストを使う

写真ではなくイラスト素材を使うのも良いです。
イラストを使うと、写真とはまた違った表現ができます。写真ではウソっぽくなりがちな構図も、イラストでは違和感なく表現できることもあります。

イラストを使う場合も、基本的には写真と同じようにトーン＆マナーに合わせることが大切です。どういう絵柄が合うのかなど、方向性を定めて選びましょう。

サービスによってはイラスト素材をベクターデータで提供していることもあります。ベクターデータはIllustratorなどで編集して使えるので、色やレイアウトをサイトに合わせて調整できる利点があります。

見本画像で試してみる

素材を選んだ時点では大丈夫そうに思えても、実際のデザインに当てはめると「イメージと違った」「構図が合わない」なんていうこともよくあります。
素材の候補は少し多めに見繕っておき、実際のサイトやデザインカンプに当てはめて確かめるようにしましょう。無料素材であれば、いろいろ試しやすいと思います。

有料素材の場合

有料素材の場合でもウォーターマーク（透かしロゴなど）ありの見本画像をカンプ用に使用できることがあります。イメージを確かめるには見本画像でも十分ですので、目星をつけた素材の見本をデザインに当てはめて確認するといいでしょう。

見本画像などを実際のデザインに当てはめてみる

見本画像で確認してOKだったら、その画像を購入をして本番用に差し替えます。
見本画像のままで購入した素材に差し替え忘れていた、というミスもあるので忘れないようにしましょう。

画像を加工する

トリミング

使用するデザインに合わせてトリミングします。全体像が分かるようにトリミングにしたり、部分的にクローズアップしたり。その素材をコンテンツの中でどう見せたいかを踏まえて調整しましょう。

写真のトーンを合わせる

複数の素材を使用する場合、写真のトーンが不揃いになることがあります。その場合は画像編集ソフトなどで色味を調整して使います。

以下の例の場合、やや青みが強い写真と黄みが強い写真の組み合わせになっています。二つの中間ぐらいに寄せたのが、右側です。わずかな違いですが、気を使いたいところです。

テキストを重ねる

テキストを重ねる時は、可読性が落ちないように背景の明るさに合わせて文字色を調整します。

背景の色味によって文字が見にくくなりそうな時は、テキストを載せる部分に画像に馴染むくらいの薄いグレー地を敷くこともあります。
また、コピースペースが確保できなかった時は、ベタ塗りを組み合わせることもできます。

いかがでしたか？

BiNDupで使える画像素材サービス「materials」では、素材サービス大手PIXTAと提携した素材含めて日本の素材2400万点以上を用意しています。ポイントを利用すれば無料で使うことができるのでぜひ試してみてください。

無料でBiNDupを使ってみるBiNDの制作事例を見る