押せる画像・ボタンについて考えてみる

Pocket

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*

▼押せる画像・ボタン①

サイト内で画像やボタンを押す際に分かり辛くて、踏みとどまったり、探したりしたことはありませんか?
さて今回はそんな画像やボタンをどうしたらユーザーへ認識してもらいやすくなるか、改めて考えていきたいと思います。

上記のワンちゃんの画像をみて「押せる」と直感的に感じた方は少ないのではないでしょうか。
上記の画像は見出しの写真かと思いつつも、さりげなく押してみたら先へ進む事ができたというパターンになりやすい一例です。

とにかく押せるかどうかはちょっと分かり辛いですね。
それでは、この画像をどうしたら「押せる」と直感的に認識、感じることができるのでしょうか?考えていきたいと思います。

画面横いっぱいに画像を置いてしまっている為、上下にある帯(※コンテンツ帯)と同じく押せない領域と見えてしまいがちです。

■押せない画像との差別化(左右のスペース)
・押せるボタンは画面横いっぱいまで使用せず画像の左右のスペースをあけるとべたっとした状態から浮き出てくるので差別化がしやすく、この場合コンテンツ帯との押せる・押せないメリハリもついて分かりやすい。

■一目で押せると分かる様にする。
・?マークで遷移できることを視覚化。「こちら」などのダイレクトな文言でも可。
・押せるものは角丸で表現する等。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン②

サイト上部右上にもっと見るボタンが有るのがお分かりでしょうか。
文字が小さく見辛い点とそもそも帯上でのテキストの羅列ですので、「押せる」と認識するのに少々時間がかかってしまう気がします。
サイト運営側で意図してこの表現または優先度にしている場合を除き、このままですとユーザーが見落とす可能性が高くなってしまいますよね。
それでは見落としが無い様にするにはどうしたらよいか考えていきたいと思います。

・帯上にあるテキストの羅列ですので、「押せる」と認識がし辛い。
・文字が小さく視認性が悪い。

■視認性アップ(図A)
・単純に文字の視認性を上げて、見やすくする。
右側のの帯タイトルより大きくなると不自然になってしまうので注意が必要です。

■見やすく図形化させる(図B)
・四角いボタンにすることで「押せる」イメージをわきやすくさせる。

■目線の流れで見える位置に移動(図C)
・もっと見るを帯状ではなく、ダウンロードボタンの下などのコンテンツ内容内に置くことで自然と目に入る訴求にする。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼押せる画像・ボタン③

上記の画像、押せる画像なのですが一見「押せる」という認識よりも押せない画像に見えてしまいます。

押せるようなイメージがないから、といってしまえばそれまでなのですがそれ以上に注意しなければならないことがあります。
早速ですが見ていきましょう。

・(一応左右に空白スペースがあり帯との差別化はできているが)画像がファーストビューに収まりきれておらずスクロールしないと全体像がみえない。
・押せる画像は大きすぎると押せる=ボタンの認識が弱くなりやすい。

■画像を適度なサイズにする
・押せる画像を最低限ファーストビューに収まる様、調整をする。
一目で押せると判断できるとなるとこのサイズ感でも少々大きめなので、ファーストビューの2/3以下にまとめると良いと思います。

※これらは一例のため、目的があってこの形にしている場合はこの限りではございません。

▼最後に

デザイン案を考える際に押せるものの表現をどの様なものにするか等も内容と同じくらい細かく設定するとユーザーに
伝わりやすいサイトになるのではないでしょうか。
ex)角丸にする、左右に余白を置く、遷移マークを入れる等

遷移させる画像やボタン等が分かり辛く、それらの箇所で回遊が停滞してしまうのは致命的といっても過言ではございません。
ユーザーがスムーズに回遊できるよう改めて遷移させる画像やボタンの見直しをしてみるのも良いかもしれません。

次回もデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、スガがお送りいたしました。またお会いしましょう!

 

Pocket