これを書いている現時点より、少し前の話になってしまうのですが、10/23付のはてなブログ開発ブログにて、次のようなことが発表されました。
記事一覧ページのサムネイルはデフォルトで正方形で表示するため、記事アイキャッチ画像が長方形だった場合、内部的に画像両端をトリミングしていました。しかし、下記例のように、サムネイル部分のCSSを長方形に変更して運用されているブログが一定数ある実態を鑑みて、内部的なトリミングを廃止することにいたしました。
本変更で、以下の記事一覧ページに表示されるサムネイルのbackground-imageを「500x500pxの正方形」から「記事アイキャッチ画像の縦横比を保持したまま長辺500pxにリサイズ」としました。
引用元：記事一覧ページおよびトップページの一覧形式で、サムネイル画像のトリミング仕様を変更しました - はてなブログ開発ブログ
これまではどういう仕様だったかというと、正方形ではないアイキャッチ画像が使われた場合、基本的に「その真ん中を使う」という処理が行われていました。
例えば、横が1000ピクセルで縦が600ピクセルの場合、縦は600ピクセルすべて使われ、横に関しては、左端200ピクセルと右端200ピクセルが切り取られ、中央の600ピクセルが使われる、という風になっていたのです。
上で引用したブログ記事を読む限り、従来の仕様には批判的な意見が多かったようです。
なので、今回少し巷の反応を検索してみたところ、この仕様変更に対しては、ほとんどの人が歓迎する声を上げていました。
どうやら民主主義的に考えて、これは文字通り「改善」と言うべきものであるようです。
しかし、ここで私は、あえて反対の意思を表明したいと思います。
元のトリミングする仕様に戻して欲しい。もしそれができないのであれば、せめて以前のトリミング仕様と、今回の新しい仕様のどちらかを、好きなように選べるようにして欲しい。
そう思うのです。
今日の記事では、その辺りについての具体的なことを、少し書いていきたいと思います。
私の環境と現状
話の流れからおわかりの通り――というかこのブログの見た目からも一目瞭然でしょうが、私ははてなブログのユーザーです。
ブログを開設するときに、はてなにしようか、それとも独自にサーバーを借りてWordPressで始めるか、少し考えたのですが、はてなブログのほうが何かと簡単そうだという点を重視するかたちで、そちらを選んだわけです。
ブログには「テーマ」と呼ばれる、外観を決定する設定のセットがありますが、現在の当ブログは「Minimalism」というものを使っています。
選んだ理由は、たいしたものではありません。人気のテーマの一覧を見た中で、これがいちばん無難であるように見えた、というだけの話だったりします。
基本的にカスタマイズして使うテーマであり、当ブログも少しではありますが、自分なりのデザインを施した結果、今の外観になっている次第です。
ところがつい昨日のことですが、スマホ版の画面をチェックしてみたところ、アイキャッチ画像（サムネイル）が、私の認識と違う風になっていたのです。
内容は、上記の引用文の通り。私が想定していたトリミングがなされておらず、すべての画像が正方形の枠の中に、どこも切られないかたちで小さく表示されている、という状態になっていたのです。
何ともちぐはぐだと思ったのは、日付でソートされた記事一覧の部分はそのように変更されているにもかかわらず、下のほうに表示される人気記事の一覧については、今まで通りトリミングされたアイキャッチが表示されていたところです。
これでは、どの部分に合わせてアイキャッチ画像を作成すればいいのか、わからないではないですか。
それでちょっと困ってしまっているわけなのです。
なぜ今さら騒いでいるのか
先述した通り、この仕様変更が発表されたのは、これを書いている2019/11/06から2週間ほど遡った、10/23のことです。
いったい私は2週間ものあいだ、なぜこの件について沈黙していたのでしょうか？
それは、私がブログを更新する作業を原則としてPCでやっており、きちんと表示されているかどうかチェックするのも、ほとんどPCでのみ行っていたからです。
そしてPC版のほうは、今でも従来のままのトリミングが為されているため、気づくことができなかったのです。
スマホのほうチェックするのは本当に時々、たまに気まぐれでブラウザからアクセスする程度でした。
その気まぐれを昨日行い、そこで初めて、スマホ版の表示のアイキャッチ画像に「異変」が起きていることに気づき、検索してみた結果、仕様変更の事実を知った、というわけです。
この遅れに関しては、私のほうに落ち度があるかもしれません。
大切なブログを運営している以上、普段からPC版とスマホ版でどのように表示されるのか、両方ともしっかりチェックしておくべきだったとは思います。
しかし、あえて主張させていただくのであれば、私の使っているMinimalismは、いわゆるレスポンシブと呼ばれるもので、PC版とスマホ版とが連動して、同じように機能することが売りの一つとなっているのです。
なので、PC版とスマホ版とで、まさかアイキャッチ画像のトリミングのされ方が異なるなどとは、まったく想像もしていなかったわけです。
少し愚痴になってしまうのですが、今回どうしてPC版とスマホ版とで挙動が違っているのでしょうか。
レスポンシブというのは、内部処理的にもそれなりに美しくできているものだと思い込んでいたのですが、もしかしたら結構強引な手段で実現しているものだったのでしょうか。
それが今回の仕様変更によって、こういう不具合として出てしまった――ということなのだとしたら、まあ、わかる話ではありますが、正直困りますね。
トリミングと上手に付き合ってきたのに
確かに、はてなブログの正方形のアイキャッチは、基本的に変かもしれません。
アイキャッチ画像というのは、アイコンとは根本的に意味の異なるものです。
アイコンならば正方形のスペースを取るのが適切だと思いますが、アイキャッチ画像をそれと一緒に考えるべきではない、というのは、私も同意できる意見です。
そして、その正方形のアイキャッチを維持するのに使われていたトリミングの仕様も、確かにややこしくておかしなものだったかもしれません。
特に、アイキャッチ画像に文字を入れたい場合には不便で、主流である16:9の画像の中に目一杯文字を入れると、その文字の中央の部分だけがトリミングされ、文章をまともに読むことができない、という現象が起きていたのです。
そのことへの対処として、多くの人が独自に処理を行っているのが現状で、それを考慮したはてな側が今回のような仕様の変更を行ったのは、理解できると言えば理解できます。
しかし、ここで困ったことに、私はこれまで書いてきた180記事ほどのほとんどを、その仕様に乗っかるかたちで作ってきたのです。
もう少し正確に言うと、そのトリミングの仕様にすっかり慣れてしまい、それを逆手に取ったアイキャッチ画像の作り方を、たくさん実践してきてしまったのです。
例えば、Twitterに表示されるときには横長として整った表示が為され、ブログ内の一覧表示においては正方形として整った表示が為される――というような、両睨みの画像の作り方などを、いろいろ覚えてやってきたのです。
そのように工夫して作ったアイキャッチ画像は、新しい仕様においては、逆に不格好になってしまうのです。
今回スマホ版の記事一覧の表示を見て、私が愕然としてしまったのは、せっかくの工夫がすべて台無しになっており、画像ごとに縦横の比率がバラバラであることが、単なる雑な仕事のように丸わかりになってしまうことでした。
トリミング仕様を「ハック」することによって上手いことやっていたものが、その変更によって、まるでド素人の仕事のように変貌してしまったのです。
これを全部、何とかして修正していけ、と言うのでしょうか？
というか、先ほども疑問を呈しましたが、PC版とスマホ版で挙動が異なるのは、はてなを利用している限り避けられないことなのか、それともMinimalism固有の問題なのか、どちらなのでしょうか？
べつに責任の所在を特定して、その相手を責めたいわけではないのですが、この辺りがはっきりしないのは、なんとも気持ち悪いことだなと思います。
今後どうすべきか
問題は、これからどのような方針でアイキャッチ画像に取り組んでいくべきなのか、ということなわけですが……。
正直、どのような比率・構成のアイキャッチ画像を作っていけばいいのかがわかりません。
ここまで書いてきたように、PC版とスマホ版で表示のされ方が異なるだけではなく、記事一覧と人気記事一覧でも表示のされ方が異なるのです。
このような中で、果たしてどのように振る舞えばいいと言うのでしょうか。
あるいは、Minimalismから離れることで、この辺がきちんと整理された環境を手に入れることができるのでしょうか。
例えば、すべてにおいて完全に16:9のかたちでアイキャッチ画像を表示することができるテーマも、存在するのかもしれません。
もしそうならば、今回の仕様変更は、Minimalismから離れるきっかけになり得るものですよね。
これまで180記事ほど上げてきたわけですが、今後もずっとブログ運営が続くことを考えるならば、「まだ180記事」と表現することもできます。
思い切って動き出すなら、今のうちなのかもしれません。
これが1,000記事とかになった後では、もう身動きを取る気にもなれないでしょうから……。
おわりに
アイキャッチ画像が、PVにどれくらい影響しているのかはわかりません。
Googleから検索でやってくる人は、目的とする記事のアイキャッチ画像を見る機会はないでしょうから、SEO的にはあまり意味がないようにも思うのです。
しかし、読者を呼び込むかどうかという以前のところで、外観は綺麗に整えておきたいというシンプルな願望はあります。
その願望からしてみると、現在の状態にはちょっと耐え難いものを感じます。
単に思い通りに表示されていない、というのもさることながら、どうしてこのようになっているのかという原因がわからないことが、気になって仕方ないですね。
この辺りの情報まとめてくれる人が、どこかにいないかなあ……などと思っているところです。
現在の私は、記事の中身を考えるので精一杯の状況ですが、外観作りについても真剣に取り組んでいきたいとは思っています。
何とか現在の挙動の原因を突き止めて、PCでもスマホでも私の考えた通りにアイキャッチ画像を表示してくれる状態に修正したいですね。
どうしてもそれがうまくいかないときは、はてなを離れてWordPressに移行することも、念頭に置かなければいけないかな、と思っています。
