kukkanen’s diary

障害年金で暮らす片づけられない女の日記

ブログを読みやすくするために写真やイラストを取り入れる5つの方法

スポンサードリンク

「読者の利便性」を第一に考えることが検索エンジンに評価されるコツ

昨日、Googleの検索順位に影響を与える「重複コンテンツ」に関する記事を書きました。

www.kukkanen.tokyo

上記のリンクの本文中にもふれましたが、小手先のSEO*1は無駄などころか、ペナルティの対象となることもあります。

例えば、"ADHD"というキーワードで検索上位を狙っている人が、検索エンジンに拾ってもらう意図でタイトルや本文中でこの単語を連呼しても、「キーワードの乱用」と判定される場合があります。

ページにキーワードや数字を詰め込むと、ユーザーの利便性が低下し、サイトのランキングに悪影響が及ぶ可能性もあります。文脈に合ったキーワードを適切に使用した、情報に富んだ有用なコンテンツを作成することに焦点を合わせてサイトを運営してください

キーワードの乱用 - ウェブマスター ツール ヘルプ(Google)

このガイドラインから、Webサイトを運営する上で重要なポイントが2つ読み取れます。

  1. 検索する人(検索エンジンではなく人間)にとって、都合がよいこと
  2. コンテンツが人の役に立つものであること

《「ブログにおける引用タグ」と「あらすじで水増しが許される感想文」教育 》では、検索エンジンに「重複コンテンツ」と判断されないように正しいHTMLタグを記述すると同時に、2.を実践するために引用書式を明確にする方法を説明しました。

読者に「利便性が高い」と判断されたコンテンツは、自然と他のWebサイトからリンクが貼られたり、TwitterやFacebookなどのソーシャルメディアで言及されたりすることによって、ページランク*2上がるとされています。

つまり、「引用される回数がその論文の価値」という考え方と同じです。

無料で自由に掲載できる素材サイトの活用

《「ブログにおける引用タグ」と「あらすじで水増しが許される感想文」教育 》で、文章を正しく引用していない人の知的所有権軽視を指摘しましたが、写真などの画像にも同じことがいえます。

伍代さんは「お恥ずかしい話、ワタクシは今の今までウェブ上にある画像は自由に使っていいものだと思っておりました」と反省しきりだ。

伍代夏子さん、画像の無断転載でブログを当面閉鎖 - ITmedia ニュース

ふだんは自分の肖像権や著作権を厳しく管理している側のタレントさんが、他のサイトからダウンロードした画像を勝手に自分のブログに掲載したという事件です。

伍代さんは、無断転載した目的についてこう述べて、謝罪しています。

「思い道りの写真が取れなかった時などは、書いた記事のイメージに合った写真をわざわざ探して載せていたのですが・・・それは、著作者の許可が無ければ載せてはいけない事だったのですね」と無断転載を認め、「深く反省 しております」と謝罪した。

つまり、ブログの記事をより表現豊かなものにするために写真が必要だっというわけです。無断転載というやり方は間違ってはいたものの、読者にとって有益なコンテンツを作りたいという方向性は理解できます。

単調な文章ばかりが長く続く記事より、ところどころに画像がさしこまれていた方が、読みやすくなることは言うまでもありません。

ですが、Web上で見つけた写真の著作権者に掲載許可を求めることは容易ではありません。個人サイトの多くは、確実に連絡がとれるメールアドレスや電話番号などが公開されていないからです。

そこで、おススメなのが「素材サイト」です。私が実際に愛用しているサービスを2つ紹介します。

(1)フリー写真素材「パタクソ」

「フリー写真素材モデル」として有名な大川竜弥さん(Wikipedia)を中心とした人物写真が豊富なので、記事のイメージにあった画像が入手できます。

www.pakutaso.com

利用条件

フリーや無料と書かれている素材サイトでも、著作権そのものが放棄されているわけではありませんので、必ず利用条件を確認しましょう。

購入したり会員費を支払う必要がない

クレジットを表示する必要がない

ぱくたそのご利用規約 | ぱくたそフリー写真素材

利用できる写真のサンプル

例えば、選挙をテーマにした画像が欲しい場合は、こんな写真がおススメです。

日本の政治を変える為に脱サラして立候補した無所属の男性|フリー写真素材・無料ダウンロード-ぱくたそ

f:id:kukkanen:20150404110956j:plain

(2)ゆるいフリーイラスト素材屋「ぴよたそ」

パタクソの姉妹サイトの「ぴよたそ」では、"ひよこ"や"うさぎ"などの動物を中心にくすっと笑えるイラストがたくさんダウンロードできます。

hiyokoyarou.com

利用条件

個人利用の方:

基本的に何してもOK! スマホの壁紙、ブログのアクセント、子供のお絵描き遊び、などなど.. 何してもOK、全て無料です!ご自由にお使いください!(公序良俗に反しない範囲でお願い致します)

商用利用の方:

素材の再配布、転売等は以下をご参考に 商用利用や素材を加工しての利用はもちろんOK。

クレジットの記載も不要です。

ただし未加工(もしくはほぼ手が加わっていない)イラストの著作権の主張、転売はご遠慮ください。(何に使ってもらってもOKですが、元イラストの著作権は放棄しておりません

利用規約 | ぴよたそへようこそ | ゆるいフリーイラスト素材屋「ぴよたそ」

利用できるイラストのサンプル

花粉症の季節にこんなイラストはどうでしょう?

鼻水をかむ花粉症ひよこ | ゆるいフリーイラスト素材屋「ぴよたそ」

f:id:kukkanen:20150404112743p:plain

知的所有権に配慮した画像の埋め込み方法

前の項目で紹介した「素材サイト」は、著作権者が自由に使うことを許可してくれているので、サイトからダウンロードした画像ファイルを自分のサイトにアップロードして使います。

それぞれの素材サイトで利用規約が異なりますが、《ぱくたそ》では画像への直リンクが禁止されています。

次に紹介する3つは、画像ファイルをダウンロードするのではなく、画像が掲載されているURLにリンクを貼り、自分のサイトにそれを埋め込み表示する方法です。

  • CCライセンスで公開されているFlickrの写真
  • Googleの画像検索
  • アフィリエイトの商品画像

※ タイトルを「著作権をクリア」ではなく、「知的所有権に配慮」としました。著作権法を実運用する上で、相違するさまざまな見解が存在します。この記事では、法的な解釈を議論する目的はなく、既に多くの人が利用している一般的な画像埋め込み方法を紹介します。

(3)CCライセンスで公開されているFlickrの写真

Flickrは、世界規模で愛用されている写真投稿サイトです。

こちらに投稿されている写真のうち、クリティティブ・コモンズ*3と呼ばれるライセンスが設定されている画像は、非営利や"原作者のクレジット表示"などの一定の条件を満たせば、自分のブログの挿絵として使用できると考えられています。

CCライセンス表示用のプラグインを入れる

作者名のクレジットや、元の画像が公開されているページへのリンクなどのHTMLを自動生成できるツールを事前に用意しておくと便利です。

私は、"Flickr CC Attribution Helper"というGoogle Chromeの拡張機能を使っています。

詳細:Flickr CC Attribution Helper - Chrome Web Store

この他に、WordPress用のプラグインなどもあります。

参考:FlickrのCCライセンス写真を記事に簡単挿入できるプラグイン「PhotoDropper」 | WPナビ

欲しい写真に関連するキーワードを入力します

Flickrの画面右上にある検索ボックスに、自分が使いたい写真につけられていそうなキーワードを入力し、[Advanced]ボタンをクリックします。

f:id:kukkanen:20150404122209p:plain

表示する画像をCCライセンスに絞り込む

画面左側にある[All License]を、[All creative commons]に切り替えます。

f:id:kukkanen:20150404122536j:plain

クレジットとリンクを表示するHTMLコードを取得する

前述した"Flickr CC Attribution Helper"を用いて、使いたい画像のHTMLコードをコピーします。

f:id:kukkanen:20150404124119j:plain

ブログにCCライセンスの写真を貼り付けた例


creative commons licensed ( BY-SA ) flickr photo shared by LeoAmadeus

こんなふうに、写真の下にライセンス名と作者名が表示されます。

(4)Googleの画像検索

ご存知の方も多いとは思いますが、GoogleはWebページにある本文中のテキストを検索するだけでなく、つけられているタグなどの情報をもとに画像や動画を検索することもできます。

Googleの検索画面で[画像]-[検索ツール]を選択すると、下図ようにライセンスでフィルタをかけることができます。

▼「非営利目的での再使用が許可された画像」を検索する例

f:id:kukkanen:20150404132555j:plain

(5)アフィリエイトの商品画像

例えば、「イヤーマフ」について説明する時に「防音用のヘッドセットで、工事現場などで使われている」と書くだけでなく、実際に市販されている商品の画像を添えると、誰でも直感的にそれをイメージしやすくなります。

Amazonアソシエイトで画像付き商品情報のHTMLコードを取得している例

f:id:kukkanen:20150404140934j:plain

Amazonアソシエイトによるアフィリエイトリンク表示例

写真集やCDなどの商品画像であれば、タレントの肖像権を侵すことなく、写真を利用することができます。

楽天アフィリエイトによるリンク表示例

【本】【中古】 0805 Kou Shibasaki 柴崎コウ

【本】【中古】 0805 Kou Shibasaki 柴崎コウ
価格:1,200円(税込、送料別)

まとめ

この記事と、《「ブログにおける引用タグ」と「あらすじで水増しが許される感想文」教育》で解説した内容でポイントとなる点をまとめてみました。

  • 他者が公開している画像や文章の知的所有権に配慮する
  • 正しい引用形式で「重複コンテンツ」と判断されないようにする
  • ユーザー(検索者と読者)の利便性を第一に考える

なお、テキストだけの長文が続く記事は読みづらいものです。閲覧者がストレスなく、読めるコンテンツ作りを実践する際に、以下の内容を適宜段落にはさむのが望ましいです。

  • 見出し
  • 画像
  • 引用
  • 箇条書き

以上、検索エンジン向けではなく、人間による可読性を高める方法を紹介しました。

*1:Search Engine Optimizationの略語で検索エンジン向けにWebサイトを最適化することです。参考:SEOとは 〔 検索エンジン最適化 〕 〔 サーチエンジン最適化 〕 - 意味/解説/説明/定義 : IT用語辞典

*2:「ページランク」(PageRank)はGoogleが検索順位を決める一つの要素です。参考:アルゴリズム – 検索サービス – Google

*3:参考:クリエイティブ・コモンズ・ライセンスとは - クリエイティブ・コモンズ・ジャパン