原文：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7著者：Taras Bakusevych本記事は2020年4月4日に公開された情報を和訳、追記したものです。英文を翻訳したものであるため、詳細や正しい表現は原文を参照ください。最適なフォームをデザインするためには、UIコンポーネントの前身である物理的な押しボタンの歴史と起源を振り返る必要があります。ボタンは、たとえユーザーが仕組みを理解していなくても、指でタッチするだけで、家電製品や自動車、システムを動かす事ができるのでとても素晴らしいものです。レイチェル・プロットニックは『Power Button』で、今日の押しボタン文化の起源を辿り、ボタンを押すことが、簡単で、目立たず、確実な操作性能を約束するデジタルコマンドの手段となったことを説明しています。"You press button, we do the rest," - コダックのカメラは、キャッチーでダイレクトなキャッチフレーズで、消費者に魅力をアピールしました引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7ユーザーは今でもボタンの魅力に惹かれています。触れるだけで何かが起こるという瞬間的な満足感。家電製品やその他のデバイスが次々とタッチスクリーンに移行しているにもかかわらず、物理的な押しボタンはすぐにはなくなりません。押しボタンの歴史が、今日の洗練されたボタンデザインにつながっているのです。Point 1: ボタンVSリンク引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7ボタンは、ユーザーが取ることのできるアクションを伝えるものです。ボタンは通常、ダイアログ、フォーム、ツールバーなどUIの至る所に配置されています。ここで重要なのは、「ボタン」を「リンク」と区別することです。リンク 別の場所に移動する際に使用します。 「view all」ページ、「Roger Wright」のプロフィールなどボタン 次のようなアクションを実行するときに使用されます。 「送信」、「結合」、「新規作成」、「アップロード」などPoint 2: ボタンの状態をユーザーに伝える引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7場所や用途に合わせたボタンの作成は、制作する中で最も重要なことの1つです。各ボタンの状態には、他のボタンや周囲のレイアウトと区別するための明確な余白が必要ですが、周囲を大幅に変更したり、視覚的な情報が多くなってはいけません。Normal - 要素が常に有効であることを示します。Focus - ユーザーがキーボードやその他の入力手段を使って、要素を強調したことを伝えます。Hover - ユーザーが要素の上にカーソルを置いたことを伝えます。Active - ユーザーがボタンを押したことを表します。Progress／Loading - アクションがすぐに実行されない場合に使用され、要素がアクションの完了に向けて進行中であることを伝えます。Disabled - 要素が現在無効であるが、いずれ有効にすることができることを示します。Point 3: ボタンには、さまざまな色、形、サイズがあります最も一般的なのは、角が丸い長方形のボタンです。簡単に識別でき、入力欄の横に置いても違和感がありません。ボタンに適したスタイルは、目的、プラットフォーム、ガイドラインによって異なります。ここでは、代表的なスタイルの種類をご紹介します。引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7Point 4: アクションの重要性を伝えるスタイル引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7スタイルは主に、より重要なアクションとそうでないものを区別するために使用されます。多数の選択肢がある場合に、ユーザーを誘導するアクションの優先順位を決めます。通常、1つの目立つボタン（このスタイルはよく「primary」と呼ばれます）と、中程度の「secondary」および強調度の低い「tertiary」アクションを持つことができます。Point 5: "デフォルト "が存在しない場合引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7一般的には、最もよく選択されるボタンを「デフォルト」にして（プライマリースタイルを使用）優先的に利用できる状態にするのが望ましいです。これにより、大多数のユーザーがより早くタスクを終えることができ、最適な方向に導くことができます。例外は、すべての選択肢が等しい場合や、アクションが特に曖昧な場合で、そのような場合には、ユーザーが進んでボタンを選択できるように誘導しましょう。Pint 6: Don't Make Me Think引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7「Don't Make Me Think」は、ユーザビリティ・エンジニアであるスティーブ・クルーグの著書のタイトルです。この本の中では、パズルや迷路を作るのではなく、ユーザーにとって当たり前のインターフェースを作ることが重要だと述べられています。私たちは、長年にわたってさまざまな機器や製品を使ってきたことで、ボタンの見た目や機能についてある種の期待を抱いています。「標準」とされるものから大きく外れてしまうと、ユーザーに遅れや混乱をもたらしてしまいます。活動中の要素とそうでない要素に同じ色を使わないようにしましょう。同じ色だと、どこをタップすればいいのかわからなくなってしまいます。Point 7: 一貫性がスピードと正確さを向上させる"一貫性はユーザビリティの最も強力な原則の一つです。いつも同じ動作をするものは、ユーザーが何が起こるか心配する必要がありません。" - Jakob Nielsen引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7一貫性は、スピードと正確性を向上させ、間違いを回避するのに役立ちます。一貫性によって誘導することで、ユーザーは製品を操作し、目的を達成することができると感じることができます。一次、二次、三次とスタイルを作る際には、色や形などの共通の要素を見つけるようにしましょう。デザインシステムの中で一貫性を保つだけでなく、デザインするプラットフォームを意識するようにしましょう。Point 8: 確実な操作のために、ボタンは十分な大きさにする引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7ボタンを押すのは簡単なことですが、ユーザーがうまくボタンをタップできなかったり、その過程で誤って隣の要素をタップしてしまったりすると、ネガティブな体験や時間の無駄につながります。ほとんどのプラットフォームでは、ボタンのサイズを48×48dp以上にすることを検討してください。このサイズは、スクリーンサイズに関係なく、物理的なサイズが約9mmになります。タッチスクリーン要素の推奨サイズは最低でも7～10mmです。アイコンボタンの場合は、ボタンが要素の視覚的な境界を超えていることを確認してください。これはモバイルやタブレットだけでなく、マウスのようなウェブ上のポインターデバイスでも同じサイズを推奨しています。Point 9: アクセシビリティを考慮した設計引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7この推奨事項は、すべての要素で忘れてはならないものです。ボタンのサイズは、アクセシビリティに影響を与える要因のひとつです。他には、フォントサイズ、色、コントラストなどがあります。要素のデザインがどのように機能しているかを簡単にチェックできるツールは数多くあります。デザイナーは開発チームと密接に連携して、ボタンがスクリーンリーダーで動作することを確認する必要があります。ボタンのロールは、ユーザーが操作するとレスポンスが発生するクリック可能な要素にである必要があります。role="button "を追加すると、要素がスクリーンリーダーにボタンコントロールとして表示されます。Point 10: ジェスチャーの普及引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7ジェスチャーは、ユーザーが簡単にアプリケーションを操作するためのものです。これにより、時間を節約し、触覚的な操作を行うことができます。スワイプで文脈上のアクションを起こしたり、ダブルタップで「いいね！」を押したり、長押しをしたりするジェスチャーは、日々広く使われるようになっていますが、平均的なユーザーにとってはまだあまり目立たない存在です。上級者向けのアクションを実行するための代替手段として、これらのジェスチャーを使用することをお勧めします。Point 11: ユーザーの行動を促すボタンラベル引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7ボタン内に書かれている内容は、ボタンの外見と同じくらい重要です。間違ったラベルを使用すると、ユーザーは混乱し、時間を無駄にし、大きな間違いに繋がってしまいます。良いボタンのラベルは、ユーザーの行動を促します。動詞を使い、実際に何をするボタンなのかを表示するのがベストです。ボタンがユーザーに問いかけているようなものです- "詳しくはこちら（詳細をみますか）?" or "注文を確認（確認しますか）？".はい、いいえ、または提出のような一般的すぎるラベルの使用は避けてください。Point 12:「OK/Cancel」か「Cancel/OK」か？引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7どちらも単なる選択肢であり、デザイナーはその好みについて何時間も議論することができます。どちらでも構いません。OKアクションを先にすることで、自然な読み取りをサポートします。これは、使用者が選択する可能性が高いことを知っていれば、時間の節約にもなるでしょう。WindowsはOKを最初に置きます。OKを最後にすることで、次のアクションへの流れが良くなります。次のボタンとしてのOKは、ユーザーを前進させると主張する人もいるでしょう。OKを最後にすることで、ユーザーは行動を起こす前にすべての選択肢を検討することができ、ミスや急な決断を避けることができます。ちなみにアップルはOKを最後にします。どちらを選んでも正論であり、使い勝手が悪くなるようなことはありません。個人的には、ダイアログウィンドウのようなアクションリストの最後に「OK」を置くことが多いです（私が主にMacユーザーだからかもしれませんが）。Point 13: 無効化されたボタンは避けましょう引用：https://uxdesign.cc/button-design-user-interface-components-series-85243b6736c7このような状況は誰もが経験したことがあるだろう。数秒から数分間、画面上で立ち往生し、なぜ無効なボタンによって進行が妨げられているのか、何をすれば復活するのか。無効化しているボタンは、現在無効中であるが、将来的には有効になることを示すために使用されます。無効中でもボタンが表示されていることで、「ここにボタンがある」ということをユーザーに伝えることができ、混乱させる可能性を最小限に抑えられるのです。できれば、ボタンを無効にしないことをお勧めします。常に有効にしておき、ユーザーが必要な情報を提供しなかった場合は、空の入力欄を強調表示するか、通知を表示するようにするのが良いでしょう。