今回はブログの画像にまつわる失敗談とフリー素材や引用の正しい使い方についてまとめました。記事数が多くなればなるほど後々修正するのが非常に面倒ですので、ブログを運営されて間もない方や、これからブログを始める方は参考程度にお読みください。
ブログで使う画像について
画像に関わる失敗談と対処について下記にまとめました。ブログを開始する際に「画像はテキトーでいいや」と勝手に思い込んで投稿を続けていましたが、SEO対策などを学んでいくとそれが大間違いだったことに気が付いたわけです。ここでは実際に直面した失敗について共有いたします。
画像はブログの顔
ブログはテキストを読んでもらってナンボですが、画像は記事内に出来る限り載せたほうが良いというのが今のトレンド。なぜなら文字ばっかりだと読み手の読む気が失せるという統計が出ているらしいです。文字離れということが要因ではあるものの、情報ソースを必要とする場合はとにかく読むしかない。であれば、ワンクッションとして画像を張り付けるのはある程度緩衝材になると個人的には感じます。なのでなるべく関連性がある画像を載せているわけです。
CHU画像サイズは発信する媒体に準拠したサイズを公式ソースから確認するのが鉄則。Wordpressの場合は利用しているテーマに合わせましょう。
画像容量を無視して余計な手間に【失敗談】
ブログ開始当初は「画像の容量なんて気にしない」手抜き運用をしていました。これが大失敗で、サイトスピードが低下しSEO的には完全にアウト。結局今はリライトを兼ねて1記事ずつ画像を貼り返している始末です。プラグインなどで一括処理をすることも考えましたが、あまり使いたくないので遠回りかもしれませんが、記事内容を確認しつつメンテナンスをしているわけです。大体3割程度完了している感じです。目安は下記数値で設定してます。
- 1枚あたり100KB以内
- JPEG画質「高」
- サイズは幅1024pixel固定
- アスペクト比16：9
画像処理はサルカワさんが作成したサイトツールを利用中。幅と画質を固定して一括処理をした後、一括ダウンロードが出来るので手間はそんなに感じない、まさに神ツール。
CHUWebpにしたいけど…個人的に気になる点が多々あります（詳しくは下記）
画像拡張子はWebpが優遇される
Googleが提唱している「Webp」という拡張子は非常に優秀です。他の画像拡張子よりも圧縮率が高く、容量が少なくともほぼ劣化をしない非の打ちどころがないデータ拡張子です。しかし、全てのブラウザが対応しているわけでもなかったり、表示設定をしてもうまく反映されないことがあったりと、いまだ安定性に欠けるというのが個人的には引っ掛かる点です。現在はJPEGを軽量化して代用しているものの今後は対応しないといけない要素の一つです。
CHUSafariなどのブラウザの対応が最近出来たけど、ユーザーによってはまだ対応してない人もいる可能性があります。
画像のalt属性は書くべき【失敗談】
alt属性とは画像が表示されなかった場合に表示されるテキストのことです。これはGoogleの評価事項に結び付く重要な要素なのですが、意外と見逃されがちの要素でもあります。例に漏れず自分も開設当初は全く知らなかったわけで…。alt属性がないとGoogleツールの「PageSpeed Insights」のユーザー補助項目で注意されます。面倒ですがalt属性は必ず記載すべきだと思います。後々後悔する結果になりかねないです。
CHU100記事を突破してから焦って書いたけどかなり苦痛な作業でした
フリー画像や引用について
当ブログでもかなり使っているフリー素材。完全無料で商用利用も二次加工もOKなものを選ぶのが定石ですが、意外と引用については注意が必要のこと。個人的に調べて実際に使っている方法について下記に共有します。一歩間違えると配信元から怒られたり、最悪訴訟問題になりかねないので、画像とは違いしっかり調べて対応をしています。
CHU画像容量とサイズはこけましたけど、フリー画像使用と引用については現在アクセスが多い記事でもクレームはありません。
フリー画像利用の注意点
- 利用範囲
- 二次利用可能か
- 加工が可能か
- 記載事項の有無
ブログで利用が出来る画像配布サイトについては注意が必要です。自分の場合は海外サイトで「ダウンロード貼り付け、加工もOK」な「Pexels」というサイトを採用してます。フリー画像と言っても「二次利用や加工はだめ」というサイトもあります。利用規約は各サイトに必ず明記されているので不明なサイトはそもそも利用しないほうがいいです。
CHUアイキャッチ用に加工する場合も「加工OK」ではないと注意されることがあります。
Wikipediaの引用方法
Wikipediaなどのフリー情報サイトの場合でも「引用をしている明確な表記」が必要になります。特にWikipediaにアップロードされている画像はその画像によって「著作権や利用範囲」が指定されています。ダウンロードしてアップロードを許可しているものや、画像URLの解放までとしているものがあるので、自分は「著作権準拠」を表記する形でURLを転載する方法をとっています。詳しくは公式ソースをチェックしてみてください。
企業系の画像の引用方法
- 引用する必然性があること
- 自分の画像と明確に区別されていること
- 主従関係を明確化すること
- 出所の明示がされていること
- 内容を改変しないこと
これも上記と同様ですが、商標マークを付ければ終わりではなく、引用表示の明確化が必要とのことで「引用する正当な理由と必然性があって」始めて成立がします。さらに言えば「どこから引用しているか」という「出所」の明記が必要になってくるわけです。こちらも基本的には引用として画像URLを引用する形で当ブログでは扱っています。※基本ルールは全てを満たす必要があります。
CHU主従関係とは自分の記事が主として、引用はあくまで補足的要素だと示すことです。引用している意思表示と割合数を考慮します。
まとめ
今回はブログを開設した後に気が付いた注意点「画像編」を記事にしました。意外と運営しないと見えてこない要素が多くあって、現在も改修作業などに時間がとられてしまいます。特にWebpの取扱いについては任意事項になりますが、近い将来マストになる可能性があるかもしれません。今後変更点があったら随時修正していきたいと思います。
以上、ブログの書き方「画像」についてでした。