アイキャッチ画像の設定方法/Cocoon

備忘録_25 / Cocoon_6

本当は別の挑戦したい目的があり、Just Now 今 このブログを立ち上げるべく奮闘している真っ最中ですが…、
何だかアフィリエイトサイトのような趣になってきてしまいました。

アイキャッチとは何か？

本日 あなたのハートを頂きに上がります♥

eye-catching【éye‐càtching】                                                                               レベル：14
形容詞        人目を引く.関心をつかむ.
eye-catch
和製英語    アイキャッチとは、主にアニメや特撮番組などの中盤でのCM放送前後に映される番組タイトルクレジットのこと。
via:weblio英和辞典_eye-catching

アイキャッチ、なんと和製英語だったのですね…。

アイキャッチは、投稿記事を読んでもらうためにユーザーの目を惹くことを目的として付ける画像です。先頭に付け加えれば、この後に綴られる記事内容を視覚情報としてインプレッションで伝えることが出来ますし、中間に挿し入れれば目休めになります。最後に付け加えればオチとして締めくくることが出来ます。
ここではWordPressの機能として実装されているページ先頭に貼られるアイキャッチの設定方法を説明していますが、投稿記事全体として１枚だけしか使ってはいけない決まりはありません。

私とて、内容の薄い記事をアイキャッチ画像で水増しするような暴挙は絶対に…しません‼…稀に時々しか……。。。

アイキャッチのもたらす効果

アイキャッチをつけるメリット、私個人の率直な理由は「NO IMAGE」ではカッコ悪いな、あった方が見栄えが良くてカッコ良いな位の理由ですが、真面目に考えてみます。先人が生み出した知恵、それなりの理由は絶対あるハズです。

1. ユーザーの満足度向上が見込める
   ファーストインプレッションで与えるインパクトが大きく視覚に映りやすい。パッと見で好印象を与えユーザーの興味を惹くことができる。印象操作でライバルとの差別化を計る。
2. セッション時間が増える
   ユーザーが画像を見ている時間が増えると、サイトの滞在時間も長くなります。このページの先頭に「この記事は約12分で読めます。」と書かれていますが、そこには画像を見ている時間は含まれてません。
   副次的な効果ですが、一つ目の記事を見たあと次の記事をクリックしてもらえる確率が高くなります。
3. SNSサイトからの集客が見込める
   FacebookやTwitterなどのSNSでシェアされた際に、[Open Graph protocol]の働きによりアイキャッチ画像（サムネイル）も引用してくれるためユーザーの目に留まりやすい。俗に言うバズりやすくなる？
   ※ Cocoon設定よりOGPの設定をする必要あり（今後の課題で、次回 part2 でやります）
4. SEO対策としてプラスに働く
   何だかんだで言っても、最後はそこに行き着くいつもの結論。私の記事を多くの人に読んで欲しい。ならばGoogleに広く紹介してもらう必要があり、そこに力の限りを尽くす。プロアマ問わず目的地は同じです。

など、挙げれば枚挙に遑がなく他にも色々ある模様ですね………。

アイキャッチを設定する方法

アイキャッチに使用する画像を用意する

1⃣ windos10_ペイントツールの起動の仕方

2⃣ windos10_ペイントツール 加工前

3⃣ windos10_ペイントツール 加工後

アイキャッチに使われる画像は文字情報を載せた方が２つの理由で効果が高いと言われてます。

1. ユーザーの満足度が高くなる
   ブログを閲覧するユーザーの多くは文字による情報を得る為にサイトを訪れます。ですから画像自体にオーバーレイされた文字情報もちゃんと読んでくれます。
   逆に、意味も薄くただ大きいだけの画像を投稿記事の随所にちりばめるならば、いちいちページを下にスクロール手間にイライラするでしょう。　
2. Googleウェブクローラの満足度が高くなる
   例えばGoogleの画像検索ですが、類似画像を検索できますよね？Googleのウェブクローラは、オリジナルと同じ画像の単なる二次配布なのか、改変が加わった画像なのか、他にない一点物の画像か、を見分ける技術を持っています。ですから、フリー素材配布サイトからお借りしてきたイラストや風景画像をそのまま取ってくっ付けたよりも、手の込んでいる作品の方が高得点を与えられやすく、素材画像をそのまま使うにしてもWeb上にあまり数が出回っていない有料画像配布サイトの物の方が得点が高くなる理由も頷けます。

記事を一本書くにしても費用対効果があります。書き手としては極力コスト（時間・労力・費用）を掛けずに最大の効果が得られれば良いとの考え方もあるでしょう。
特に文章の内容で勝負している人なら筆の速さ（更新頻度）も重要なスキルです。

アイキャッチの設定

1⃣ 新規で投稿記事作成する

2⃣ アイキャッチ画像を選ぶ

3⃣ 最終確認

アイキャッチ画像の適正サイズを考える

横幅を考える

本来ならば目次の最初の方に持ってくる重要な説明なのですが、作りながら実験して試しながら投稿記事を書いている関係で最後に来てしまいました。すいません…。
適用しているテーマによって多少違いはありますが、Word Pressは基本的に横:縦の比率「16:9」（800×450px）にすることで、アイキャッチ画像をキレイに表示させることができると言われてます。
横 800pixelというのは、テーマにより多少違いはあると思いますがメインカラム（記事本文）の横幅が800pixelだからだと思います。
さすがに昔のブラウン管型PCモニターを使われている方は少ないと思いますが、今、見ている液晶モニターのベゼル（縁の部分）をご覧ください。現在モニターの主流は横:縦の比率「16:9」で作られております。
ですからこの寸法に合わせて作ると「違和感を感じにくい」また、画面サイズの小さいノートPCやタブレットは一画面にぴったり収まります。
過去はPCモニタも一般のアナログテレビの画面に倣った横:縦の比率「4:3」のものが使われており、（640×480、800×600、1024×768など）の規格が長く使用されていました。youtube動画でも昔の作品は「4:3」の動画が残ってますね。

しかし、横:縦の比率「16:9」と一言に言っても（640×360）（800×450）（1280×720_HalfHD）（1920×1080_FullHD）といっぱいあります。実際にどのピクセル数を採用したらよいのでしょう？

…などと考えていたらマニュアルにしっかり書いてありました。

●小さなアイキャッチが設定されている場合は再生成されないので注意

アイキャッチに、設定サイズよりも小さな画像が選択されている場合（例えば320x180pxで設定されているのに300x160pxの画像だった場合）は、画像が再生成されません。
なるべくアイキャッチには、大きな画像を設定しておくことをおすすめします。少なくとも、横幅800px、できるならば横幅1280px以上の画像を設定することをお勧めします。
via:テーマが利用しているサムネイルを再生成して最適化する方法 / cocoonマニュアル

• 最低動作環境 横幅   800pixel
• 推奨動作環境 横幅 1280pixel

なんてことだ…最初から横幅をなど考える必要などなかったんやp…、とりまマニュアル嫁 orz
横幅は分かりました、…が、しかし、縦幅が書いてないですね！？？

縦幅を考える

・〔sample_1〕エントリーカード

アイキャッチ画像の設定方法/Cocoon

備忘録_25 / Cocoon_6 私の備忘録（仮）も、ブログとしてだいぶ見栄えが整ってきました。 そして、前々から気にはなっておりましたが、赤枠の部分ですね。思うに、ココには何かしらの画像が縮小されサムネイルになって表示されるような感じで...

www.offtoon.org

2021.01.17

それとは別にもう一つ考えなくてはならない事があります。それは自動的に作成されるサムネイルのサイズです。

私の使っているcocoonテーマでは、ブログカードが標準装備されています。上記〔図_1〕は内部ブログカードをこの投稿記事上に表示させたものです。ブログカードには幾つかタイプがあり、それぞれ〔図_1〕エントリーカード、〔図_2〕〔図_3〕縦型カード、〔図_4〕タイルカードと名称が付けられています。
これらブログカードが自動作成されるときにサムネイルも自動生成されます。

試しにインデックスページのカードのタイプを縦型カード、タイルカードにする場合の見た目を作ってみました。
何しろアイキャッチ画像を作るのは今回が初めてでしたから考え無しに、[16:9] （800×450px）で作成してしまいました。また、サイズを無理に変更して適用しているためにロゴが切れてしまっていますが、ここは参考イメージとして大目に見て下さい。
次からはその縦横比に合わせて綺麗なアイキャッチ画像を作成することを考えますと、〔図_3〕 [4:3]アナログ規格サイズ、〔図_4〕 [1:1] タイル形式、ともにクールでカッコ良いと思います。〔図_2 〕[16:9]標準サイズ は視覚情報と文による情報の半々でユーザーの目を引くことが出来ます。このスタイルも決して悪くありません。そういえばmsnニュースはこれらのタイルがミックスされて使われていますね…。

結論としてどの表示タイプもcoooL！で甲乙つけ難いです。これはあくまでも好み、センスの問題ですよね…。

…などと考えていたらマニュアルにしっかり書いてありました。

●アイキャッチには、できる限り大きな画像を設定してください。

Cocoonデフォルト設定状態でも、最低でも800×800px以上。できれば1024×1024px以上は欲しい。そして可能ならば出来る限り限り大きなサイズのアイキャッチを指定しておくことをおすすめします。
今後のことも考えた場合、アイキャッチは1280×1280px以上を推奨します。
via:テーマのサムネイルをRetinaディスプレイ対応させる方法 / cocoonマニュアル

• 最低動作環境 縦幅   800pixel
• 推奨動作環境 縦幅 1280pixel

なんと、アイキャッチの画像サイズは1280×1280pxの正方形が正解でした！
なんてことだ…最初から縦幅をなど考える必要などなかったんやp…、もちつけマニュアル嫁 orZ

Retinaディスプレイ

retina【ret・i・na】                                                  大学院以上の水準     レベル：10
名詞           (目の)網膜.レティナ.
via:weblio英和辞典_retina

一般的な高精細ディスプレイはドットで表示されていますが、Retinaディスプレイは人間の目で識別できる限界を超えてドットが見えなくなるまで綺麗に引き伸ばすスケーリング技術が使われた超高精細ディスプレイです。

主にMacやiPhone、iPadなどのApple製品に搭載されており、同社は今後のスタンダードにするべくビジネス展開しています。
実は、Retinaディスプレイの解像度で表示すると、表示解像度が半分になってしまうのです。
縦２px＋横２px＝合計４px を従来の 1px の大きさまで圧縮してしまうため、作り手である私たちも通常の画像サイズよりも大きな画像を用意してページを作成する必要があります。

Retinaディスプレイ対応は今後の課題で、次回 part2 でやります。

裏ワザ

.eye-catch {
  display: none;
}

取り敢えず今回は、”キャッチ♥アイ画像を表示させる” まででした。
以上です、ありがとうございました。