WEBで画像を使う際に注意すること

画像の取り扱い

記事関連ワード

画像 写真 肖像権 著作権 商標権 パブリシティー権 ロゴ サイズ 注意

画像取り扱いの注意事項

サイト構築関連の前回の記事にて、WEBで文章を書く際に注意することという記事を書きましたが、今回は画像に関しての注意事項を書きたいと思います。

画像付きのリンクがあった際や、ページを開いてもらった際に魅力的な画像があれば、ページを開くためにクリックしてもらえたり、 記事の本文を読んでもらえたり、画像はとても重要だと思います。

しかし、何も考えずに画像を貼っていると思わぬ痛い目に合うかもしれません。 知らなかったは通用しないので、良く勉強してから画像を使うようにしましょう。

では、さっそく注意点をあげていきたいと思います。

著作権に注意する

WEBで文章を書く際に注意することの記事でも触れましたが、画像や写真にも著作権があります。

基本的に使える画像・写真は、自分で作成したもの・自分で撮ったものです。 ただし、自分で撮ったものであっても、内容によっては使用できませんので、この後の文をよく読んでください。

まず、ネット上にある画像や写真は、簡単にダウンロードすることができますが、自分の作成するWEBページにそれらの画像を使ってはいけません。 著作権の侵害となります。

しかし、WEBページを作る際に、文章を書くだけでも一苦労なのに、画像や写真まで自分で作成、撮影できないという方は、無料または有料で写真や画像を提供してくれるサイトを見てみましょう。

リンクフリーのおすすめ写真・画像サイトという記事を書いたので、良かったら見てください。

無料または有料で写真や画像を提供してくれるサイトを利用する際にも注意してください。

それらのサイトの画像や写真も著作権を放棄しているわけではないということです。 ロイヤリティフリーと著作権フリーは意味が違います。画像や写真の利用規約をよく読んで使用しましょう。

例として、クレジット表記が必要な場合があります。これは、画像や写真をあなたのサイトで使っても良いですが、作品タイトル・作者名・URLは表記してね。ということです。

また、使用しても良いですが、改変禁止です。といった場合もあります。これは画像や写真の一部を切り取って使用したり、画像や写真にテキスト文章を挿入して使用したりしてはいけませんよ。ということです。

いちいちクレジット表記をするのも手間ですし、自由に使ってよい画像や写真を使用するのがおすすめです。

また、著作物などを自分で撮影したものも基本的にはNGです。 ただし、その著作物の著作権の所有者の死後50年後には権利は消滅するので、その著作物を【自分で撮影】すれば利用可能です。

様々なケースがあり、これはOKこれはNGと例をあげると大変なので、危ないかも。と思った際は確認してから使用しましょう。

肖像権に注意する

先ほど著作権に注意するの項目で自分で撮ったものであっても、内容によっては使用できないと言いましたが、使用できない場合の1つが、肖像権の問題です。

あなたが撮った写真であっても判別可能な状態で他の人が写っていれば、本人に公開してよいか了承を得る必要があります。

パブリシティー権に注意する

芸能人などの有名人は顔や名前を使うだけで経済的な効果を上げることができるため、パブリシティー権というものがあります。

そのため、許可なく有名人の写真等を掲載してはいけません。ただ明確な法律があるわけではないようなので、掲載する際は良く調べ、自己責任で。

商標権に注意する

商標登録された会社のロゴ等を無断で使用してはいけません。

また、これからブログ等を始められる方は、SNSなどのリンクボタンを設置する方も多いでしょう。 よく無料素材として公式のロゴとは違ったおしゃれなデザインのロゴが配布されたりしていますが、 公式ロゴ以外のロゴの使用や改変を禁止している場合も多いです。 SNSのボタン等を設置する際は、公式のガイドラインをよく読みましょう。

Facebookガイドラインへ
Twitterガイドラインへ
YouTubeロゴダウンロードへ
Instagramロゴダウンロードへ
LINEロゴダウンロードへ

などなど、他にも使用するものがあればチェックしてみましょう。

景表法に注意する

上にあげたような権利を脅かさない【何も問題のない画像や写真】であっても、表示すると違反となる場合があります。

例えば、あなたがある飲み物を宣伝するページを作ったとします。

その飲料は【無果汁】の飲料なのに、あたかもオレンジが入っているかのようにオレンジの写真を一緒に掲載すると、読んでいる人に誤解を与える可能性があります。 そのため、オレンジの写真自体に問題がなくても、使い方はNGです。

画像の解像度(サイズ)に注意する

PC用、タブレット用、スマホ用など、あなたのソースがデバイスサイズに対して別々に分かれていれば、デバイスのサイズに合った画像を表示させれば良いのですが、レスポンシブのテンプレートを使っているとそうはいきません。

特別な処理をしていない限り、どのサイズのデバイスに対しても、1枚の画像を使用してその画像の表示サイズを変えて表示しています。

あなたが最新のデジカメで撮影した写真をブログに載せようとした際、何も編集せずにその写真を載せたとします。 そしてその写真のファイルサイズが4Mあったとましょう。

写真のファイルが重たくてあなたの作ったブログページが全て表示されるまでに結構な時間がかかってしまいます。 そうすると、ブログページが全て表示される前に読者の方があなたのページから離脱してしまう可能性が高くなります。

ファイルサイズは小さければ小さいほど、ページの読み込み速度は速くなるため、できるだけファイルサイズを小さくしましょう。

サンプルとしてサイズの違う4枚の同一の画像を用意しました。

・A(1,240 × 660) 49.5kb
・B(620 × 330) 27.6kb
・C(310 × 165) 10.1kb
・D(160 × 85) 3.98kb

まずはそれぞれの画像をサイズ指定せずに表示します。(最大幅の制限はあり)

test画像A

test画像B

test画像C

test画像D

※このブログを読んでいるデバイスのサイズによっては、同じ大きさに見えます。 (大画面のパソコンで見るとサイズの違いがわかります)

このB・C・Dの画像は、Aの画像を縮小して作成しています。

ご覧になってわかるように、AとBの画像はくっきり文字が見えますが、Cの画像は少しぼやけており、Dの画像は文字が見えずらくなっています。

使うソフトにもよりますが、画像自体を縮小すると、画質が大きく劣化する可能性があります。

画像のファイルサイズは小さい方が良いですが、文字が見えなくなったり、写真の美しさが損なわれたりしては、画像を貼る目的に合わない場合も多いです。

画像の劣化を少しでも防げるソフトを探したり、許容できる範囲内で画像を縮小したりと、上手く画像のサイズを変更しましょう。

少なくとも、あなたのサイトで画像を表示した際に表示される画像のMAXサイズくらいは把握し、MAXサイズまで縮小するのも1つの方法です。

次に、A・B・C・Dの画像を表示サイズを指定(310,165)して表示しました。

test画像A

test画像B

test画像C

test画像D

タブレットやスマホで見るとよくわかると思います。PCの方は【Ctrl】ボタンを押しながらマウスのホイールを回すなどして、拡大して見てください。

A・Bは鮮明に文字が見えますが、Cは少しぼやけていますし、真っ白な字で書いた文字が若干灰色に見えます。 dに関しては小さい文字が見えません。

細かく実験はしていませんが、今回の実験では、A程の大きさはいらないけれど、Cだと文字がぼやけるため、Bのサイズまで縮小しよう。となります。

あくまでも、私が縮小した画像を使っているので、別のソフトを使えば、さらに小さくしても綺麗に見えるかもしれません。

今回は黒く塗った背景に白い字を書いただけの画像ファイルのため、AからBにサイズ変更しても20kbちょっとの削減ですが、最近のデジカメやスマホで撮った写真はけっこうなサイズボリュームありますので、大きな違いが出てきます。

あなたのサイトからの離脱を防ぐためにも、また、読者の方のパケット通信料を減らすためにも、最大表示幅までは縮小する努力をしましょう。

最後に

もうこんなにたくさんあると、画像や写真を使うのが怖くなりますよね。 許可を得てきちんと使っている方もいらっしゃると思いますが、その画像大丈夫なの? と思うシーンが多々あります。

アフィリエイトでお小遣いを稼ぎたい方は得に、最終的には多くのアクセスを集められるサイトを目指すわけですから、成功すれば多くの人の目につき、訴えられる可能性も高くになりますので、マナーを守って画像や写真を使いましょう。

また、上記項目に引っかかると、GoogleAdsenseの審査や、警告などにも影響してくるかもしれません。

記事作成日:2016.10.17

Facebookへ Twitterへ RSSへ このエントリーをはてなブックマークに追加