大阪WEB制作フリーランス

スブログWEB制作メモと奔放な記事

リンクボタンについて少し考えてみました

こんにちは。
5月から11月までは夏。そんな暑がりでインドアな私です。
この時期から湿気が出始めてくせ毛が曲がってくる辛い現象についても、いつかここでアウトプット出来たらと心から思っております。

さて今日はWEBサイトにおける「リンクボタン」について改めて考えてみます。
私個人の見解ですのであくまでもご参考にしていただければと思います。

リンクボタンの役割

WEBのお話は深く調べれば調べる程小難しい単語が出てくるものですが、
単純にリンクボタンとは、リンクを表すボタンです。
ですから、リンクだと明確に分かるUIがあれば一旦正解です。
極端な例ですが、下記の3パターンではどれが”リンクっぽい”でしょうか?

ボタンは大事だから目立たせないといけない、だから白抜きにしよう!だから一番左!
これも全ては間違いではありませんが、クリックできそうなのは右側2つですよね。
ボタンとは違いますが、あれこれ迷走するよりかはテキストリンクの方がより効果的な場合もあります。

また、何かしらのアクションを起こす場合はボタン、ページ遷移はテキストリンクといった考え方もありますが個人的には今はどちらでも問題ないと思っています。
綺麗さを1時間考えて100点を求める前に、基本的な所をちょっと考えてまずは90点。
そこが大事だと思います。

ではリンクボタンがリンクっぽく見せるにはどうすれば良いでしょうか。

余白と文字サイズを調整してリンクらしさを表現

リンクボタンをリンクっぽく見せる時に気をつけるのは1点のみ、余白と文字サイズを適切に取る事です。
さらにアイコンを付けたり影を付けるなど設計に合わせて変更します。

私が制作会社に在籍中先輩デザイナーさんから、文字とアイコンを集中して見せる事でリンクとして成り立つんだぞ、といった教育を受けました。
しかしながら理論的なお話には頭が痛くなる傾向がありますので、こういう理論があるからこの形にしている。よりも、こういう方が分かりやすいからこの形にしている。といった考え方にしています。
結果同じ意味かもしれませんが…。

その”分かりやすさ”については、尽きない悩みの一つでもあります…。

トレンドと分かりやすさについて

ボタンとして一番分かりやすいのは、個人的に一昔前に流行したこういうタイプだと思っています。

2018年現在のトレンドであるミニマルデザイン、あるいはマテリアルデザインなど、伝えたいメッセージに対して極力不要な装飾を省いていこうという流れがある今、こういった装飾のあるデザインは少し古臭い印象になってしまうかもしれません。

しかし、あまりWEBに触れてこなかったユーザーならどうでしょうか。

今の無駄の無いボタンデザインは、ここ十数年の間培われきたリテラシーがあって成り立っているものであり、例えばWEBに慣れていない高齢者の方がターゲットの場合はトレンドよりも分かりやすさに比重を置くべきと考えています。

もちろんボタンだけではなく文字のサイズや余白・行間など、サイト全体を通して本当にケースバイケースで変わってきますので、トレンドを追うだけではなく時には逆行してでもユーザー目線に立つ事が大事だと思っております。

四角?角丸?ボタンの形はどれがいいの?

私は角丸、または丸いデザインのものが良いかと思います。
自分なりの解釈なので厳密には正解か不明ですが、現実で慣れ親しまれているUIをある程度守ればユーザビリティに繋がるのではと考えています。
ボタンに関して言えば、現実世界ではあらゆる所で丸や角丸が使われています。

もちろん角ばったデザインのものも多くあります。
しかしながらそういったものは電卓や電話など、使い方が常識化されているものに多く見られるようです。
そういった所から、迷ったら角丸がいいのではと考えます。
リンクボタンはWEBの世界の事ですのでデザインやターゲットに合わせて四角形を選択するのも、当然アリです!あくまで参考にしていただけたらと思います。

まとめ

ユーザー目線になるというのは簡単そうに見えて本当に難しいです。
アンケートであったり、テストであったり、過去のデータからの分析であったり、いろんな方法で検証はされていますが、移り変わるトレンドやユーザーのリテラシーが絡み、おそらく1つの正解が出る事は無いのかもしれません。
ですが、可能な限り精度を上げて制作し、”サイトを育てる”という観点からどんどんグレードアップしていけたらと考えています。

(C) SB DESIGN.