ボタン、リンク

ボタンやリンクの役割

画面上のボタンやリンクの役割は、ユーザーを次のアクションへと導くことです。たとえば「購入する」のようにユーザーに決定行動を促したり、「ガイドラインの詳細」のように別ページへの遷移を促したりします。アクションを起さないことは即ち、ユーザーが次のステップに進まずにページやサービスから離脱することを意味します。そのためボタンやリンクのUXライティングは、通常のテキスト以上に、ユーザーのアクションに結びつきやすいように配慮します。

ボタンやリンクの種類

ボタンやリンクには、状態変更型とページ遷移型があります。状態変更型は、ユーザーがステージの移動を伴う重要な決定を行う際に用います。たとえば「購入する」などです。対してページ遷移型は、より詳細な情報が記載されているページへ遷移する際に用います。たとえば状態変更型とページ遷移型では、ユーザーが次に行うアクションの種類や表示する情報が異なるため、テキストの書き方が異なります。

1. 状態変更型のボタンやリンクとは

状態変更型は、システム上のデータの変更や送信を伴うボタンやリンクです。「購入する」や「申請する」のように、カートに入れたり登録内容を申請したりする際に用います。多くはシステムの中でもCTAなどの重要な箇所に用いられます。UIとしてはボタンの場合が多いですが、テキストリンクの場合もあります。

Amazonの注文画面
「注文を確定する」のようにシステム上のデータに変更が伴う。

出典：Amazon

Amazonの商品画面
「カートに入れる」のようにデータ変更が発生する予定のページへの遷移にも用いる。

出典：Amazon

Airbnbのコンテンツ画面
「貸切グループを予約する」のようにボタンではなくテキストリンクの場合もある。

出典：Airbnb

状態変更型の書き方

ユーザーが発言者になるように書く

状態変更型のボタンやリンクは、原則としてユーザーが発言者になるように、短い動詞で書きます。たとえば「カートに入れる」のような形です。「（私が）送信する」「（私が）保存する」「（私が）もっと見る」のように発言者を意識すると書く時にイメージしやすくなります。

あるいはタイトルとボタンを通して、サービス提供者とユーザが対話するイメージで画面を構成すると考えてもよいでしょう。サービスにある大半の言葉は、サービス提供側が発言した言葉として書かれます。対してボタンやリンクはユーザーが発言した言葉として書かれます。

たとえば、次の例ではタイトルは「（サービス提供者の視点で）閲覧した商品」、ボタンは「（ユーザー自身の視点で）関連商品を見る」となり、対話しているイメージです。タイトルではサービス提供者がセリフを言い、ボタンではユーザーがセリフを言っています。

Behanceのクリエイタープロフィール画面

出典：Behance

テキストを短くする

テキストは極力短くします。余分な言葉を入れずに重要なキーワードはできるだけ先頭に書きます。ボタンのテキストは、1語もしくは2語で表記した場合にもっとも効果的に認識され、余分な言葉が増えるにつれて効果が落ちます。

アクションタイトルが用いられているページでは、タイトルとボタンのテキストを一致させる

アクションタイトルが用いられているページでは、原則としてアクションタイトルとボタンのテキストは一致させます。たとえば「アカウントを作成する」というアクションタイトルの場合、ボタンには「アカウントを作成する」と書きます。

名詞化した動詞は使わない

名詞化した動詞は使わずに、通常の動詞の形に直して使います。たとえば「表示する」は動詞ですがこれを名詞化して「表示をする」といった書き方をすることもできますが、テキストが長く冗長になります。そのため名詞化はせずにシンプルに「表示する」と記載します。

状態変更型の例外的な書き方（言葉の省略）

テキストを省略する場合がある

ボタンやリンクのテキストをできるだけ短く表現するために、言葉を省略する場合があります。特にボタンの文章はスペースが限られていることから、短く表現するために工夫が凝らされています。たとえば本来「購入する」と書くところを「購入」と書いたり、「このプランを選択する」を「このプランを選択」と書いたりします。

また、たとえば「ダウンロードする」のように日本語化した英語を使用する場合には、「する」を省いて「ダウンロード」と書くことがあります。しかし「する」がないと意味が通じにくいものは「する」を残すことになります。たとえば「検索、注文、返品」などは「する」を後ろにつけなくても意味が十分に通じます。しかしそれが「ギフトレシートを共有」の場合には、「共有」だけだと共有するのか共有されるのかが不明確です。このような場合には「する」を省略せずに「ギフトレシートを共有する」と書く必要があります。

意図的に省略しない場合もある

一方、省略できる場合にも意図的に「する」をつけて動詞を明確にする場合もあります。「購入する（動詞）」は「する」を削って「購入」としても、「（私は）購入」であることが暗示されています。しかし本来の形である「（私は）購入する」にしたほうがよりアクションが明確で力強くなります。そのため力強いトーンを用いたい場面では「する」は省略しません。

例：Appleでは場面に応じて「購入」と「購入する」が使い分けられている。出典：Apple

状態変更型の例外的な書き方（サービス提供側を発言者にする書き方）

ユーザーではなく、サービス提供側を発言者にして書く場合もあります。ユーザーへの敬意を高める際には、自尊敬語にならないよう謙譲語の形をとります。そのため発言者の交代が発生します。
おもにログイン画面などで、ユーザーに対しておもてなしをするようなトーンを用いたい場合にこのような書き方をします。たとえば「パスワードをお忘れでですか」「アカウントをお持ちの場合はログインしてください」などの表現をします。

例：上記の「Apple IDまたはパスワードをお忘れですか？」はサービス提供側のセリフとして記載されている。出典：Apple

状態変更型の例外的な書き方（「名詞 + になる」を使う場合）

動詞ではなく「名詞 + になる」で書く場合もあります。名詞で表現することで帰属意識を高められるためです。たとえば「メンバーになる」のほうが「登録する」よりも集団の一員であることを意識させることができます。ただし基本的には原則に則って書き、シーンによって検証しながら使い分けるといった方法をとります。
出典：Gregory M. Walton『Mere Belonging: The Power of Social Connections』

2. ページ遷移型のボタンやリンクとは

ページ遷移型は、詳細ページに遷移するボタンやリンクです。たとえば「プライバシーポリシー」「詳細を見る」「在庫状況」などです。独立したテキストとして記載される場合もあれば、文章中の単語にリンクが貼られている場合もあります。クリックすることで、メニュー、ヘルプ、コンテンツなどの詳細ページが、別ページ遷移、モーダル、tooltipなどの方法で表示されます。

上記の「法的リクエストのヘルプページ」や「プライバシーポリシー」のように詳細ページにリンクします。出典：google

ページ遷移型の種類

ページ遷移型には、オブジェクト型、文章型、くわしく見る型があります。オブジェクト型は名詞（もしくは名詞節や名詞句）で単体で表現されることが特徴です。それに対して文章型は、文章で表現されたり文章中にアンダーラインを引いたりする形で表記されます。くわしく見る型は、前述した2種類とは異なり「詳しく見る」や「詳細」などの形でリンクテキストに内容を明記せずに詳細ページに遷移させます。ページ遷移型のUIは、ほとんどの場合がテキストのため、ボタンよりもスペースの自由度が高く、場合によってはかなり長い文章で表記されることがあります。

種類1. オブジェクト型とは

オブジェクト型は、名詞や名詞句、名詞節でリンクを表記する方法です。たとえば「プライバシーポリシー」や「概要」などをクリックすると該当のページに遷移するのがオブジェクト型です。

上記の「概要」のように詳細ページにリンクする。出典：Apple

オブジェクト型の書き方

オブジェクト型は、動詞で表現する（タスク指向）のではなく名詞で表現します（オブジェクト指向）。たとえば「概要」とすべきところを「概要を見る」といった動詞で表現することはしません。

種類2. 文章型とは

文章型とは、文章で表現したり文章中に記載したりする方法です。たとえば「英語版をインストールしてください。」のように文章中の単語にリンクを埋め込んだり「さらに配送オプションを表示」のように文章全文をリンクにします。

上記の「Macようのアップデート」等のように、文章中に下線を引いてリンクを埋め込む。出典：Apple

上記の「お客様情報を保護しています」のように、文章全体にリンクを埋め込んでいます。このリンクは別ページ遷移ではなくtooltipで表示されています。

文章型の書き方

文章型は、ある程度自由に記載することができます。名詞に限らず、動詞や修飾語を含んだ文章を作ることができます。文の長さも必要に応じて長い文章で表現することもできます。ただし文章を読んでどのようなページに遷移するのかは想像できる必要があります。

種類3.くわしく見る型とは

くわしく見る型は、オブジェクト型や文章型とは異なり、「詳しく見る」や「詳細」などの形でテキスト中に内容を明記せずに別のページに遷移させるものです。

くわしく見る型の書き方

くわしく見る型は、「詳細」「さらに詳しく」「詳しくはこちら」のような形で記載します。どのようなトーンで表記したいかによって、どのような表現を選択するかを選びます。たとえば、「詳細」はそれほど目立たせる必要がない場合に使用します。「詳しく見る」は目立つ導線として動かしたい部分に使用します。「くわしくはこちら」は少し丁寧なトーンを用いたい場合に使用します。

【補足】ボタンやリンクの文章に補足情報を加えたい場合

ボタンのリンクだけで充分に表現できない場合には、その内容を説明するためのディスクリプションを補足します。ボタンのスペースは限られているため、ディスクリプションを通して、そのボタンを押してアクションを起こすことで得られる価値を記載します。

Adobeの新規登録画面内のリンク（例外）
「アカウントを既にお持ちの場合は、ログインしてください」

【補足】ボタンやリンクのデザイン

ボタンの種類

ボタンは、メインアクションとサブアクションとに分けて考えます。原則としてメインアクションはページに1つのみ配置します。サブアクションには、メインアクションとは異なるデザインを適用します。

リンクのデザイン

リンクは、それがクリックできるものだとわかるようにデザインします。たとえばアンダーラインをつけたり、マウスオーバーした場合に文字色を変更したりするなどを検討します。