いろいろと思うところがあったので、サイトのデザインになどに多々変更を加えました。

Before

After

ヘッダーの画像に目が行ってしまうと思うのですが、一番大きい変更は記事一覧のサムネイルを止めるなどした点です。

Before

After

なんで変えたのか


私は自分のサイトが好きすぎるのでしょっちゅう見ています。もちろんスマホで見ることもあるのですが、スマホで見たときに思ったんですね「あれ、サムネイルいらなくない??」

もともと画面幅が一定以下であればサムネイルを表示していなかったのですが「画面幅に限らずいらんくない??」と思った。思ったので消すことにしました。

トリガーとなったのはいつも通り思い付きなのですが、いちおう、それなりの理由もあります。

  • サムネイル作るのが手間
  • デザイン変更し難い
  • Front-matterにできるだけ特別なメタ情報は記述したくない

という感じです。もうちょっと具体的に書いてみます。

サムネイル作るのが手間

サムネイルはまごころ込めて手作業で作成(だいたい120pxくらいに雰囲気でトリミングして圧縮)しており、非常に手間でした。「そのうち自動化…そのうち自動化…」などと思ううちに気が付けば3年以上500記事もまごころ込め続けてしまいました。これはもはや、まごころを通り越して苦行の域に達しており、やりたくないのでやめることにしました。

デザイン変更し難い

前述のとおりなのですが、このサムネイルは私がだいたい120pxくらいの正方形に雰囲気でトリミングしていました。これはメチャクチャデザインが変更し難いんです。解りますか?

例えばサムネイルの形を正方形から長方形(例えば300px * 100pxとか)にしたいとします。そうすると画像を引き伸ばさない(あるいは作成しなおさない)といけなくなるんですね。これメチャクチャ手間じゃないですか??

まあ、もちろん、基にしているテーマは素晴らしくて記事の最初の画像からサムネイルを生成するというオプションがあるんですね。これだと万事解決しそうに思えるんですが、このオプションの実態は元画像から指定したサイズをCSS上でトリミングして表示するというものなんです。これの意味が解りますか?

これを用いてサムネイルを自動で生成するということは、全ての記事に何かしらの画像を表示するようにしないといけないんですね。私は全ての記事に画像を貼り付けているわけではないので、これは非常に手間です。また、記事内にクソデカ画像を張ったらサムネイル画像が(容量的な意味で)大きくなる。そういった画像をいくつも読み込んだら記事一覧のページが遅くなるということです。遅いというのはダメなことです。リッチなクソデカ画像で重くなるとかいうのは論外です。

そういった理由で変更に弱いんですね。まあ、もちろん詳しい方はご存知の通りもっといろいろとやりようはあるんですが、私はそこまでここにコスト掛けれないので…

Front-matterにできるだけ特別なメタ情報は記述したくない

Front-matterというのは下記のような感じのメタ情報書くようなときによく用いられます。

1
2
3
4
5
6
7
8
9
10
11
---
layout: post
title: "サムネイルの廃止やヘッダー画像の変更など"
date: 2019-06-28 05:53:54
tags:
- "サイト"
- "デザイン"
- "雑談"
categories:
- "サイト"
---

これらはだいたいどのブログ・静的サイトジェネレータでも同じようなキーで指定できるようになっている(別にそういった共通仕様があるわけではないのですが、いろんなやつのドキュメント読む限りだいたい一緒です)のですが、サムネイルの情報は私が使用しているテーマ完全オリジナルメタ情報でした。

要するに移植性が低いということです。別に他のジェネレータに乗り換えるとか、テーマを別のものにするつもりはないのですが、私は基本的にこういう共通的な仕様から外れるような実装したり、そういった機能を使うのは好みではありません。まあ、私のポリシーというかフィロソフィー的な理由でやめました。

サムネイル重要ちゃうのん??


そもそもサムネイルは主にクリック率的なアレで重要なのは間違いないというのは私もわかってるんですよ。いいですか、よく考えてください。例えば「芸能人の○○が不倫!!」みたいなマジで超絶マッハどうでもいい[1]見出しのニュースがあったとしますね。こんなニュースマジで本当に心の底からどうでもいいんですが、その横に超絶美味しそうな刺身と日本酒のサムネイルが貼ってあったとしましょう。どうでしょうか?超絶マジでどうでもいい記事でも押してみたくなりませんか??私はなります。

なるんですが、ここで重要なアレが出てくるんですね。「関係ないサムネイル張るのおかしくね??」という気持ちですね。で、押したくなる気持ちもありながらもそっと去るわけですが、ここが重要なポイントなんですよ。サムネイルは重要だけども記事と大して関係のないサムネイル張ったとこで意味ない(個人的に)ということなんですね。

要するに、サムネイルは記事のタイトルを引き立てる役割であって、サムネイル張ったからクリック率が上がるかというと(個人的には)一概にはあり得ないんですよ。よく見かけるのがとりあえず「M〇cの画像」とか「いら〇と屋さんの画像」とか、その他フリー素材張ったりしたりしてるやつなんですけど、記事と直接関係ないサムネイル貼ったところであんまり意味ないんじゃないかと思うんですね。まあ、貼ってる目的にもよる(クリック率狙いではなくデザインその他の理由で貼ってたりもする)と思うので、一概には言えないんですけど。

で、このサイトで記事一覧でサムネイルを張る意味はデザイン的な意味以外では私がザっと記事を見たときに識別しやすい(例えばScalaなら赤色のサムネイル, C#なら自作のロゴっぽいやつ…など)ぐらいしか意味がなくて、デザインを変えたいとなった今、このサイトではほとんど意味をなさないなぁ。という感じです。

デザインの説明


まあ、別にデザイン詳しくもないんですが、素人なりにどういう理由があって、どのように変更したか雑に説明しておきます。まず、記事一覧について。

記事のセパレータについて

サムネイルと各記事の間にうっすら表示していた下線を削除することで、記事と記事の境界線が解り辛くなったため縦線を挿入することで区別しました。

タイトル

タイトルが埋もれないようにタイトルのみbold指定しました。正直ちょっと主張しすぎてると思ってます。もう少し太さを細かく指定できればよかったのですが、この辺りはフォントによって準備されてなかったりするのでもうあきらめてboldにしました。

日付について

日付とカテゴリが同じ行で表示されていたので明確に区別するために日付はタイトルの上部にもっていきました。

カテゴリーについて

カテゴリーという表示が野暮ったかったので、やめました。また、セパレータも/から>に変更しました。これは/だと階層構造というよりは単純な区切り文字として捉えられかねないと思ったからです。

ちなみに、正直ブログにカテゴリーは不要ではないか(タグの組み合わせで表現できる)と考えており、この考えについては「どこかで記事にしたいなぁ…」と思ったまま半年以上くらい経ちました。

続きを読むについて

なんか日本語だと野暮ったいので英語にしました。また、色も浮かないように他の色に合わせるようにしました。

ヘッダー画像について

タイトルをboldにしたせいで、ヘッダー画像の印象が薄くなったので負けないように少し濃い目(暗め)にしました。おおもとの画像は同じものなのですが、トリミングしなおしてRAWから再度書きだししなおしました。

もともとヘッダー画像高さは画面の40%という指定をおこなっていたのですが、それに加えて最大高さ250pxまでに変更しました。合わせて1200px * 800pxだった画像サイズを1500px * 300pxくらいに変更しました。800pxもあったところでどうせ表示されないので…。

これにより、以前より高解像度(かなり圧縮してるのでたかが知れていますが…)でサイズは1/3くらいになりました。その他、暗めの画像にしたので文字の透過を下げました。

画像自体はボケとクッキリの差も良さげな部分が切り出せて、なおかつ画像内で明暗もついてて結構いいんじゃないかと思います。出勤前にマッハ10分くらいでやったにはよくできたと思います。ちょっと暗くし過ぎたかとも思わなくはないですが…

その他


その他、あわせて下記のあたりを変更しました。

  • 重複していたCSSの削除
  • toc(目次の生成)機能の削除
  • h1~h6をboldに変更
  • 記事一覧の1ページの記事数を15から10に変更

感想


また一段、速くなってしまったでござる…。

このサイトはデザインも妥協せず[2]に速度も出来る限り速いもの[3]を目指します。


  1. 私にとってです ↩︎

  2. 素人なりにですが ↩︎

  3. 速くしたいのであれば広告を削るのが最も良いんですが… ↩︎