記事タイトルの付け方を変更します

記事タイトルの付け方を変更することにしました。記事番号と日付を外します。前回の記事を例にすると、以下のようになります。

  • 以前:0048-141217 リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話
  • これから:リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話

元々は shiology というブログの真似

この特徴的な記事タイトルの付け方には元ネタがありました。Mac を購入したての時に物凄く参考にしていた shiology というブログがこのような記事タイトルの付け方をされていました。で、自分でブログを始めた際に shiology の真似をしたということです。

やめることにした2つの理由

  1. 書くのが面倒
  2. 検索された際に表示される記事タイトルの文字数が少ない

1. 書くのが面倒

これは、もうそのまま。結構前から、いちいち今回の記事は何番かなと調べたり、日付を打ったりするのが面倒になっていました。あと、0043-140625 ブログデザイン変更点メモを更新する際、日付変更付近で作業していたため、記事タイトルは 140625 なのに、WordPress で付けられる更新日時が 2014-06-26 になってしまったということもありました。記事タイトルに日付を書かなければ、そのズレでモヤモヤすることもなくなります。

2. 検索された際に表示される記事タイトルの文字数が少ない

これは少し前に気づきました。今回記事タイトルの付け方を変更しようと思った理由の大部分がこれです。何で記事番号と日付を外そうと思ったかは以下の検索結果の画面を見ていただくとわかりやすいと思います。

「svg 表示されない」というキーワードの Google 検索結果画面

上から4つ目に私のブログ記事が掲載されているのですが、記事番号と日付があるせいで、記事タイトルの後ろの方が表示されていません。今サッと調べたところ、2014年3月時点で Google 検索で表示される記事タイトルの文字数は 30から28文字 以内が目安とのことです。表示される文字数は諸説あるようですが、どのみち記事番号と日付があるせいで、記事タイトルの後ろの方が省略されていることに変わりはありません。

日付に関しては、更新日が Google 検索結果画面でも表示されますし、記事内でも一番上に表示するようにしているので無くしても問題ありません。

ちなみに、私が日付表示を重視するのは、調べ物をしている時に見つけた記事がいつ書かれたものかわからずに困った経験があるからです。特に、Web 関連の技術は変化が早いので、1年前の記事を参照しても全く意味が無かったりすることもあります。about ページにも書いたとおり、私がブログを書いている理由の一つに、困っている人の助けになりたいというものがあるので、困っている人が凄く古い記事をガッツリ参照して更にドツボにはまることが無いように、記事が書かれた日付というものを重視するようにしています。

本題に戻りまして、記事番号に関しては、これはもう完全に管理する側の事項であって、読んでくれている人にとってはほぼ意味が無いものだと思うので、こちらも無くしてよいと判断しました。

リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話

以前の記事「0045-140827 文字色のコントラスト比を確認したら、リンクテキストの色を修正することになった – mzmjp.net::blog」で書いた通り、リンクテキスト色のコントラスト比が WCAG2.0 の 等級AA にあたる「最低限のコントラスト」すらクリアしていない問題がこのブログでありました。

今回はこの問題を解消したことについてのメモ書きと、上の記事内で Colour Contrast Analyser というアプリケーションについて書いたことの訂正です。

リンクテキスト色を修正した話

ずっとほっぽらかしていたリンクテキスト色修正。なんで放置していたかというと、色の決め手が無かったからです。青系の色にするのは決まっていたのですが、どんな色がいいんだろうと考えていました。

で、リンクテキスト色について参考になるページは無いかなと探していたところ、クリック率の高いテキストリンクの色は?【2013年版】 | ウェブ力学というページにたどり着きました。こちらのページでは、「有名なサイトではリンクテキストにどんな色を使っているのか」が表でまとめられています。

こちらを参考にして、いくつか試した結果、リンクテキスト色は color: #1122cc; にしました。Google の2013年1月時点でのリンクテキスト色です。問題だったコントラスト比は“8.60”になりました。これで問題解決です。

Colour Contrast Analyser でカラーピッカー機能を発見した話

コントラスト比の問題を書いた記事内で、コントラスト比を調べるアプリケーション“Colour Contrast Analyser”のことを書きました。その時は気づかずに「スポイトのアイコンが無いので、カラーピッカー機能が無い」と書いてしまったのですが、数日前にカラーピッカー機能を発見しました。以下に、どうやって色をピックするかを書いておきます。気づいてしまえば、なんてこと無いことでした。。。

Colour Contrast Analyserの初期画面

Foreground(前景色)の Colour select という項目の色を表示している部分をクリックすると、“Colors”というウィンドウが出てきます。

色を調節するためのウィンドウ

このウィンドウの左下の部分にスポイトがありました。そのアイコンをクリックしたら、無事カラーピッカーとして動いてくれました。何で前にさわった時は気づかなかったんだろう。。。

はてブアプリのネイティブ広告、普通のエントリーと判別しやすくて良かった

以前、はてなブックマークを iPhoneアプリから見ていて良いなと思ったことがあったので、それについてメモしておきます。

ネイティブ広告(記事広告)というものがあります。これは、そのサイトにおけるコンテンツと同様の形式で掲載される広告のことを指します。例えば Twitter だったら普通のツイートと同じ形式で広告が流れてくるし、ニュースサイトだったらニュース見出し一覧の中に広告の見出しが紛れているような状態です。

このネイティブ広告、自分はあまり良い印象がありません。最近はどうなのかわからないのですが、広告であるという表記が凄くわかりづらいことが多く、ヒドいものだと広告を踏んで記事を読み終わった時にページ下部に小さく広告の表記があることに気づくものもあった気がします。

そんな感じでユーザーに気付かれないように、まるで人を騙すかのようにして広告を踏ませるものが多いため、記事内容に関しては満足したにも関わらず、広告記事だったということがわかってしまうと、途端にその広告主とそんな掲載の仕方をしているサービスに対しての不信感が増してしまうこともあります。

そんな時に、このはてなブックマークの iPhoneアプリを見て「おお」と思いました。それまで私が見てきたネイティブ広告の中で一番わかりやすく広告であるという表記がされていたのです。下の画像の「ロケーション抜群〜」というエントリーの箇所に “PR” という文字があります。

記事見出しの中にPRという文字がある

このようにちゃんと表記してもらえると、通常のエントリーとは違うものとして認識できます。やりすぎかもしれないけど、更に判別しやすくするために、背景色を通常のエントリーと変えてもいいかもしれないです。

このはてなブックマークの iPhoneアプリに限りませんが、ちゃんと広告であることを明示してくれると、そのサービスに対する信頼感が上がります。ちゃんとわかりやすく広告であるということが明示されていれば、絶対に広告を踏みたくない人は避けらるし、広告とわかっていても見出しの内容に興味があれば踏めるし。

うまいこと隠したと発信側は思っていても、大抵の場合誰かが気付くし、今の時代共有されて悪名や不信感が高まる可能性もある。なので、隠さずにもっと広告であるということを主張していった方がいいと思う。