株式会社 dowonders

by mochi

リンク・ボタンのデザイン

どうもmochiです。
長い連休を終えて通常業務に戻りました。
連休前は、連休が終わると体がついていかないかもなぁと思っていましたが、案外始まってみるとスムーズに仕事できますね。

さて、今回はWebサイトに必ずあるボタンについての記事です。
弊社のWebサイトでもナビゲーションにリンクボタンを設置したり、バナーを設置してページ移動できるようにしてあります。
ひとことでボタンと言っても、デザインによって使いやすさが変わってきます。
当たり前に見ているボタンですが重要な要素です。ここでいくつか紹介します。

シンプルなテキストリンク

一番多く利用されているのは、テキストでのリンクボタンなのではないかと思います。
よく見るのはこのようなテキストリンクではないでしょうか。
トップページのお知らせ・ブログ記事のリンク・ページネーションなどなど・・・
装飾するよりシンプルな方が見やすい場合などよく使われていると思います。
テキストのリンクを設置する場合に使いやすくするポイントとしては
その他のテキストと色を分ける、アンダーライン有にする・カーソルを合わせたとき色を変える、アンダーラインなしからアンダーライン有にする
などがあります。
●カーソルを合わせても何も反応がない場合 ここは何も反応のないテキストリンク
ボタンになってるのかわかりづらいですよね。

●カーソルを合わせて反応するようにした場合 アンダーライン有・色が変わります
色分け有・アンダーラインが後から表示されます

これだけでもユーザーにはボタンであることをわかりやすく伝えることができます。
多くの場合デフォルトでリンクタグを入力するとアンダーラインがついて色が変わる場合が多いですが、 テキストでのリンクボタンが沢山並ぶ場合など、アンダーラインのある文字が並んでいるとごちゃついた印象になります。
アンダーラインが元からある
アンダーラインが元からある
アンダーラインが元からある
アンダーラインが元からある
アンダーラインが元からある
アンダーラインが元からある
アンダーラインが後から表示される
アンダーラインが後から表示される
アンダーラインが後から表示される
アンダーラインが後から表示される
アンダーラインが後から表示される
アンダーラインが後から表示される
アンダーラインなしからアンダーラインありにするボタンは見た目をすっきりさせつつ、わかりやすい表現ができます。
しかし、他のページでテキストでのリンクボタンがアンダーライン有で使用されている場合、ページ全体の統一感を持たせるために同じデザインにするということもあります。
その場合は、リンクごとの行間を開けるなどして、すっきりと見せるなどの調節をすると良いでしょう。

バナー型のボタン

ナビゲーションメニューや、重要なページへの移動はテキストよりもバナー型のボタンを設置する事が多いです。
バナー型のボタンもテキスト同様に、カーソルを置いたときに反応がある方が、ユーザーにはわかりやすい・使いやすいものになります。
●色が変わるボタン 色が変わります
●背景が表示されるボタン 背景が表示されます
●カーソルをおくと沈むボタン 沈みます
このようにボタンに反応をつけてあげることで、ユーザーに『クリックできる』ことをわかりやすく伝える事ができます。
ボタンを大量に並べると、画面がゴチャッついて見えるので、重要なページや要素へのリンクに活用すると良いかと。

アイコンのあるボタン

カテゴリー一覧などのリストに使うボタンは、ナビゲーションなどよりもシンプルな表示のものが多いです。
テキストよりもわかりやすく、バナーよりもシンプルにしたい場合はアイコンを活用するのも良いです。

このようにアイコンもカーソルを合わせると色が変わるなどして、デザインを統一するとわかりやすいです。

リンク・ボタンのデザインは使い分け・統一感を大事に

内容の重要度や情報量、設置する場所に合わせて、ボタンのデザインは使い分けることで見やすく、使いやすいWebサイトにできます。
また配色は合わせることで統一感のあるページのデザインになります。
どのようなボタンにすればユーザーにとって使いやすいか、少しだけ考えてみると良いページができると思いますので、ページの作成に関わる際はぜひ思い出してみてください。

TEL&Mail

※タップすると電話がかかります。
営業時間:10:00〜19:00
(電話受付時間:10:00〜18:00迄)