ボタンやリンクのUI/UXとは:直感的で分かりやすくすること

ボタンやリンクのUI/UXとは:直感的で分かりやすくすること

サイトに何気なくボタンやリンクを設置していますが、UI/UXの観点からどのようなボタンやリンクにするべきか考えてみました。

一目でボタンやリンクだと分かるデザインにすること

言わずもがな、ですが、一目でボタンやリンクだと思わないデザインだと、クリックしてもらえません。

例えば、ボタンなのに境界線が無いデザイン

<button style="background: gray; border: none;">ボタン</button>

例えば、リンクなのに黒字。

<a style="color: black;">リンク</a>

リンク

このようなデザインではボタンやリンクだと認識されず、クリックされません。

一目でボタンやリンクだと分かるデザインにしましょう。

背景や他のオブジェクトと似た色にしないこと

クリックして欲しいボタンやリンクは、ある程度目立つ存在にしておくといいでしょう。

そのためには背景や隣接するオブジェクトと似た色にしないことがポイントです。

クリックしたときに何が起こるか簡単に想像できる文言にする

例えば以下のような「予約」だけ書かれたボタン

これだと、「予約確定」なのか、「予約内容確認画面の表示」なのか曖昧です。曖昧だとクリックを躊躇ってしまい、クリック率低下の要因になります。

以下のように、クリックしたときに何が起こるのか簡単に想像できる文言にしましょう。

終わりに

CSSフレームワークを使えば、色や下線などのデザインは用意されているものを使うため、間違いに陥ることはあまり無いかもしれません。

しかし、文言の検討はCSSフレームワークの範囲外ですので、設計者が十分に内容を検討していく必要があります。

速攻でメモできる QuickNote リリースしました!

QuickNoteは動作が超軽量でサクサクかけるノートアプリです。一瞬の閃きを逃さずにノートを開き書き始めることができます。 アカウント登録も不要です。お試しあれ!

Excel操作をコマンドで! proBoarderExcel

Excelはマウスで操作するのが基本ですが、マウス操作に疲れてはいませんか? キーボードでExcel操作ができるようになるアプリです。オープンソースで無料です。

積み上げ! Daily Stack リリースしました!

Daily Stack は日々の積み上げを管理するToDoアプリです。過去の積み上げの振り返りだけでなく、ツイート機能もあります。 アカウント登録不要ですぐに使い始めることができます。

ExecNote.app リリースしました!

ExecNoteは、コードが実行できるMarkdownアプリケーションです。Markdownドキュメント内に記載したコードをクリックすると実行ができます。わざわざターミナルを 起動させる必要がありません!無料ですのでもしよければダウンロードをお願いします。

About Me

11年目のシステムエンジニアです。アプリで生活や仕事を改善したい🐱仕事効率化、自動化のアプリ開発が得意です、ご相談ください。 🚀エンタメ系アプリの開発も模索中🐬社内SEや個人アプリ開発者、システムエンジニアになりたい人と繋がりたい🐱