先日、iOS8.4.1でhover擬似要素にopacityを設定している場合に、2クリックしないとリンクが飛べない問題を取り上げました。
急ぎで記事にしたことと、技術的な話だったことも有り、説明が足りなかったのも悪いのですが、「よくわかんないからとりあえずopacityに関する記述を全部削除した」みたいな話をよく見かけます。
「クリックで飛べないことでCVを逃してしまうくらいなら透明化なんてどうでもいいわ」と言われれば確かにそうなのかもしれませんが、本当にそれでいいの？っていうのが今回の話です。
じゃあなぜ:hoverにopacityで透明化させてたの？
- いやいや、もともと使ってたテーマがそうなってたから・・・
- デザイナーさん任せだからよくわからない・・・
- え、なんかカッコいいから・・・？
多分そういう声がほとんどだと思うんですが、ちょっと考えてみてください。
なぜ、マウスを当てると半透明にするのか？
・
・
・
では、ちょっと質問を変えましょうか。
「マウスを当てるとマウスカーソルが矢印から手のマークに変わるのはどうしてですか？」
これならわかりやすいんじゃないですかね。
そう、「クリックできることをわかりやすくするため」ですよね。
矢印が手のマークになることではじめて「あ、ここはクリックできるんだ」と理解できるからです。
じゃあ、もう一度聞きます。
「なぜ、マウスを当てると半透明にするのか？」
もう答えはわかりますよね？
じゃあ、もう一つ質問です。
「hoverの問題が起ったからってopacityを全部削除していいの？」
これももうわかりますよね、答えは否です。
アフィリ塾のAMCに最近入会して一つ目から鱗だったこと
一端少し話が脱線するのですが、AMCってご存じですか？
簡単に言うとアフィリ塾なのですが、実は、最近加入してみました。
で、こういう塾についても色々言いたいことは有るんですが、今日はちょっと置いておいてですね、AMCの話の中で一つだけ目から鱗だったノウハウがあります。
それがコレです↓
ひと目でリンクだと分かるような「書き方」「見せ方」をする。
たとえばバナーなら、バナーの上に「お申込みはコチラをクリック」と文章で分かるように書く、というノウハウ。
僕はずっと「バナー何だからクリックできるに決まってるだろ」と思ってました。
でも、わからない人もすごく多いんだ、と思い知らされました。
そして、僕らのアフィリエイトサイトからモノを買ってくれるのは往々にして「そういったパソコンに疎いお客さんたち」なのだ、と。
これも、さっきのopacityでの透明化やマウスカーソルの変化と同じで、「クリックできることをわかりやすく教えてあげる」ことの一つだと思います。
「命を刈り取る形をしてるだろ？」
ジャンプ漫画で有名なBLEACHというのが有るのですが、その中で登場する有名なセリフがこれです。
「命を刈り取る形をしてるだろ？」
BLEACHを読んでないのでどういう文脈で出てきた言葉なのかは知らないのですが、2chなどでよく使われるセリフで、僕も気に入っています。
「命を刈り取る形をしている」とはつまり北斗の拳で言う「お前はもう死んでいる」を意味してます。
つまり、「この武器を俺が使えばお前はすぐに死ぬ」をわかりやすく伝えているわけですね。
最後に
最後に2つだけ問います。
「あなたのリンクは、クリックを刈り取る形をしていますか？」
「単純にopacityを外していいんですか？」
今日のブログは以上です。