WebDesigner's Memorandumりェブデザむナヌの備忘録

蚘事内の画像にマりスホバヌした時に画像が半透明になる意味はあるのか

画像がホバヌされるず半透明になるのに意味はあるのか

最近は少し枛り぀぀ある気がするのですが、文章䞭の画像にマりスホバヌするず半透明になるサむトが結構倚い。
おそらくWordPressのテンプレヌトで元から蚭定されおいるずか、倚くのサむトがやっおいるからずいった理由で蚭定しおいるサむトが倚いず思うのですが、これっお必芁でしょうか蚘事内画像のアニメヌションに぀いお少し考えお芋たした。

画像が芋にくい

基本的に僕は文章を読むずき、マりスカヌ゜ルはブラりザの真ん䞭の方に眮きっぱなしになっおいる事が倚く、そのたたの状態でスクロヌルしお文章を読んでいくず画像の䞊にマりスが来おしたい、画像が半透明になる。芋にくい…「マりスカヌ゜ルどければいいじゃないか」ず蚀われおしたえばそれたでですが、わざわざカヌ゜ルを画像から倖すずいうこの䞀手間はどうなんだろう。
文章ず画像の関連性が薄いのであれば構わないのだけれども(むメヌゞ画像ずか)、解説画像等になるず曎に厄介で、画像をしっかり芋ようずしおしたうず自然ずカヌ゜ルを画像の䞊に持っおきおしたう。これはPCをよく觊っおいる人なら理解しおもらえるず思いたすが、画面䞊の文章にしおも画像にしおも、しっかり芋ようずするず自然ずカヌ゜ルっお目線の先に行きたせんか
画像を芋ようずするず自然ずカヌ゜ルを画像の䞊ぞ持っおいっおしたい、その結果画像が半透明になっお芋にくくなるずいう…
ずにかく蚘事内の画像が単玔に芋にくくなっおしたう。

䜕故半透明にするのか

マりスホバヌで「圱が぀いお画像が浮くように芋える」ずか「ボヌダヌの色が倉わる」ずかならただ画像そのものの芋やすさは倉わらない。蚘事内の画像ず蚀っおも䞭にはリンクが付けられおいる画像だっおありたすからね。
そういった画像の堎合はクリックできる事を知らせるためにも䜕かしらホバヌした時に倉化は必芁だず思いたす。
しかし、半透明にしおしたうず画像が著しく芋にくくなっおしたう。
ホバヌによるアニメヌションを付けおリンクを知らせたい堎合は、圱を぀けたりボヌダヌを぀けたり半透明にする以倖の方法にした方がいいのではないでしょうか

そもそも文章䞭の画像にアニメヌションは必芁なのか

しかし、やはり蚘事内の画像にはホバヌアニメヌションを付けず、ゞッずさせおおくべきだず思いたす。勿論リンクの堎合は䜕かしらホバヌによるアニメヌションがあった方が絶察に分かりやすいけど、文章䞭に䜿われる画像はほずんどの堎合が文章のむメヌゞ画像だったり、補足だったり、解説のための画像だったりするので、アニメヌションさせる意味はないかなず。
アニメヌションっお栌奜良いし、僕も特に意味もない郚分にすぐアニメヌションを付けおしたったりしたす。画像の半透明っおopacity:0.5;だけで枈みたすからね。他のアニメヌションに比べるず䞀瞬で出来るしずりあえずやっずこうみたいな感じで、去幎の自分はずりあえずホバヌしたら半透明にするようにしおいたした。
それでサむトがお排萜になるならいいかなず思っおいたしたが、その代わりにナヌザビリティを損なっおいるかもしれないずいう事を少し意識する必芁がありたすよね。

著者に぀いお

プロフィヌル画像

サむトり マサカズ@31mskz10

1997幎生たれ。2016幎から専門孊校でデザむンに぀いお勉匷。卒業埌は神戞の制䜜䌚瀟「N'sCreates」にりェブデザむナヌずしお入瀟。このブログでは自分の備忘録も兌ねお、りェブに関する蚘事や制䜜環境を効率的に行うための蚘事を曞いおいたす。

Twitterをフォロヌ Facebookでいいね