⭐️

【Polaris和訳】Content/Actionable language

2021/10/29に公開

Shopify

polaris

tech

この記事について

この記事は、Polaris/Content/Actionable languageの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

実用的な言語｜ Actionable language

マーチャントは Shopify を使って物事を成し遂げます。コンテンツは、彼らが理解し、最も重要な行動を取れるように書かれ、構成されていなければなりません。

見出しと小見出し｜ Headings and subheadings

見出しと小見出しは、インターフェイスのセクションを参照するタイトルとサブタイトルです。

基本構造

見出しと小見出しは次のようになります。

情報量が多く、説明的であること
- マーチャントにとって最も重要なコンセプトや情報を強調する
- マーチャントが下のセクションに何があるかを理解できるようにする
簡潔でスキャンしやすい
- シンプルでわかりやすい言葉を使う
- 見出しは一文にまとめる
- ピリオド、カンマ、セミコロンなどの句読点の使用を避ける
- 文語体で書く（最初の単語を大文字にし、固有名詞のみ）

ブログ記事

見出しと小見出しに冠詞（"the"、"an"、"a"）を使用するかどうかは、メッセージの種類によって異なります。

会話の見出し

ホームカード、販売ページ、空の状態など、製品のより会話的な領域では、記事を使用します。これにより、言語がより親しみやすくなり、新しく複雑な概念を理解するのに役立ちます。

マイクロコピーの見出し

ラベル、タイトル、マイクロコピーの場合は、コンテンツを短く実用的なものにするために記事を避けてください。これにより、読みやすさが向上し、すぐに行動できるようになります。

文｜ Sentences

マーチャントに何ができるかを伝えるとき（特に新しいことを紹介するとき）は、命令形の動詞で文章を始めます。

マーチャントが命令形の動詞で始まる文章を読むと、何をすべきか指示されているように聞こえるはずです。"you can"のような寛容な言葉は使わないようにしましょう。

ボタン｜ Buttons

ボタンは明確で予測可能でなければなりません。マーチャントは、ボタンを選択したときに何が起こるのかを予測できなければなりません。ボタンのラベルを間違えて誰かを惑わせてはいけません。

ボタンには、行動を促すような強い動詞を必ず入れるべきです。マーチャントに十分な文脈を提供するために、{動詞}+{名詞}の内容式を使用してください。ボタンには、"Done"、"Close"、"Cancel"、"OK"などの一般的なアクションの場合を除き、{動詞} + {名詞}の内容式を使用します。

ボタンのテキストは常に大文字で記述してください。つまり、最初の単語は大文字で、残りは小文字です（用語が固有名詞でない限り）。

"the"、"an"、"a"などの不要な単語や記事は避けてください。

リンク｜ Links

リンクは明確で予測可能でなければならない。マーチャントは、リンクを選択したときに何が起こるのかを予測できなければなりません。リンクの表示を間違えて、相手に誤解を与えてはいけません。

リンクテキストに"click here"や"here"を使用してはいけません。

文中のリンク

フルセンテンスでのリンクは、文章全体をリンクすべきではなく、マーチャントがリンクを選択したときにどこに行くかを説明するテキストのみをリンクすべきです。

国際化のためには、単一の用語やフレーズの小さな部分だけをリンクさせる方が良いでしょう。フレーズ全体をリンクすると、語順が変わってリンクが 2 つの部分に分かれてしまう可能性があるため、問題があります。

文外のリンク

フルセンテンスでないリンクは {動詞＋名詞} のパターンを使用し、クエスチョンマークを除いて句読点は使用しません。

確認｜ Confirmations

元に戻すことができない、または元に戻すことが困難なアクションには、確認メッセージが表示されます。

確認メッセージは以下の通りです。

常にマーチャントにアクションを確認またはキャンセルする選択肢を与える。
1 つの主要なタスクに使用すること
本文は 1 行のみとし、2 つ以上のコールトゥアクションは使用しない。

確認メッセージのタイトルは以下の通りです。

簡潔な{動詞}+{名詞}の質問で、お客様が続行するかどうかを尋ねます。
クエスチョンマーク以外の句読点を使用せず、1 つの文章で構成する。
冠詞（the、a、an）を避け、内容を短く、実行可能なものにします。
センテンスケース（最初の単語は大文字、残りは小文字）で記述する。

確認書の本文の内容は以下の通りです。

その行為が不可逆的であるか、元に戻すことが困難であるかを、平易な言葉で明確に説明する。
簡潔であること: テキストは 1 行のみ使用します。文章を "Are you sure? "で始めないこと。

確認のプライマリーアクションとセカンダリーアクションは以下の通りです。

明確で予測可能であること：マーチャントがボタンをクリックすると何が起こるかを予測できること
スキャン可能であること："the"、"an"、"a "などの不必要な単語や冠詞を避ける。

削除

確認メッセージはモーダルに配置されるため、タイトルのコールトゥアクションはボタンと密接な関係にあります。このため、ボタン上のコールトゥアクションのテキストは、{動詞}+{名詞}のパターンに従う必要はありません。代わりに、[Cancel] [Delete]のように、1 語のコールトゥアクションを使用することができます。

主要なアクション:

二次的な行動:

ページ上での変更の破棄

主要なアクション:

二次的な行動:

保存されていない変更を含むページを残す

主要なアクション:

二次的な行動:

方向性言語｜ Directional language

リンクに "click here "と書いてはいけないのと同じように、"above/below "や "right/left "などの方向性を示す言葉は使わないようにしましょう。

方向性のある言葉は、スクリーン・リーダーが声に出して話すと混乱を招き、助けになりません。また、国際化への対応も難しくなりますし（例：右から左への言語）、モバイルのデザインパターンとも矛盾してしまいます。

方向性のない表現は、ビジュアルやコンテンツの階層化がなされていないことを意味します。可能な限り、指示コピーと関連するアクションを近くに配置し、指示語が必要ないようにしてください。

保存と完了｜ Save vs. done

変更した内容をすぐにデータベースに保存する場合は「Save」、保存を延期する場合は「Done」を使用します。

データベースへの即時保存

Web および iOS では、データベースに即時保存するアクションには、デフォルトで「保存」を使用します。Android ではチェックマークを使用してください。

コンテキストバーコンポーネントを使った保存

マーチャントがページに変更を加えると、上部にコンテキストバーが表示されることがあります。このコンテキストバーは、"Unsaved discount" のように、変更の状態を示すステータスメッセージを左に表示します。ステータスメッセージは、実行されるアクションに関する文脈を提供するため、ボタンは一般的な{動詞}+{名詞}コンテンツの公式に従う必要はありません。+ {名詞}という内容の公式に従う必要はありません。例えば、[Save product]ではなく[Save]とします。コンテキストバーコンポーネントでは、Web と iOS では動詞の「Save」を、Android ではチェックマークを使用します。

コンテキストバーのステータスメッセージは説明的で、{形容詞} + {名詞}の内容式に従う必要があります。

モーダルとシートでの保存

Web および iOS では、データベースに直接保存する場合、モーダルやシートで動詞"Save"を使用します。Android では、"Save"にチェックマークを付けてください。

Web でページの下部に保存

{Save}を使用します。保存アクションがモーダルやコンテキストバーのような周囲の文脈を持たない場合は、{Save} + {noun}のコンテンツ式を使用します。これは、Web のページ下部にある保存アクションに適用されます。

例えば、Web の割引の作成ページの下部にあるアクションでは、「Save discount」を使用しています。

Android と iOS では、画面上部のナビバーに 1 つの保存アクションがあります。これらのプラットフォームでは、ウェブのようにページの下部に保存バーがありません。

延期された保存

マーチャントがモーダルやシートの中で一連の変更を確認すると、その変更が現在のページに未保存の変更として適用されることがあります。つまり、変更内容がすぐにはデータベースに保存されなかったのです。このような場合、コールトゥアクションに"保存"という動詞を使うと誤解を招くのでやめましょう。

Web、Android、iOS では、延期された保存に対して"Done"という形容詞を使います。モーダルやシートが閉じたら、マーチャントは行ったすべての変更を保存することができます。

ほとんどの遅延保存は、追加、編集、管理、および選択のモーダルやシートで変更を確認するときに発生します。

日付ピッカー

日付ピッカーには、Web、Android、および iOS で形容詞「Done」を使用します。

OK と受容｜ OK vs. accept

マーチャントが何かを読んだことを確認する必要があるが、続行する前に法的に利用規約を承認する必要はない場合に、形容詞"OK"を使用します。例えば、モーダルやシートでセキュリティ通知を表示するときに"OK"を使います。

販売者が続行する前に利用規約で法的確認が必要な場合は、形容詞“Accept”を使用してください。

閉じる vs.キャンセル｜ Close vs. cancel

以下のような場合、モーダルやスクリーンのコールトゥアクションとして、Web では戻る矢印ボタン、iOS では“Close”、Android では“X”を使用してください。

コンテンツがビューオンリーの状態である

マーチャントが以下を行うことができる場合は、コールトゥアクションとして「閉じる」を使用しないでください。

モーダルやスクリーンに変更を加える
内容を確認する、または利用規約に同意する（OK vs. acceptを参照）。

マーチャントがページ、モーダル、シートで行った変更を取り消すためのオプションとして、“Cancel”を使用します。キャンセルボタンが押されると、変更内容が自動的に破棄されます。“Save”は、“Done”や「完了」のアクションと組み合わせて使用することが多いです（常に左側に配置されます）。

選択と選択｜ Select vs. choose

以下のような場合に"select"という動詞を使います。

同じ種類の限られた選択肢の中から何かを選ぶようにマーチャントに指示する場合
深い考察や分析を必要としない、簡単で明白な決定を下す必要がある場合
定義されたリストやドロップダウンメニューの場合
商品などの既存のオブジェクトのリストから選択するオプションが与えられている場合

セレクトモーダルやスクリーンを「Done」コールトゥアクションと組み合わせます。

以下のような場合に、"choose"という動詞を使います。

マーチャントに、より主観的、戦略的、感情的、またはオープンエンドな決断を促す場合
マーチャントは、テーマのように大量のアイテムの中から選ぶ必要がある場合や、価格プランのように戦略的な意思決定が必要なオプションがある場合

編集と管理｜ Edit vs. manage

フィールドの入力内容（文字、数字、プロパティ）を変更できる場合は、動詞の"edit"を使用します。リンクテキストとして、編集中のフィールドやエリアの横に配置します。何が編集されているのか不明な場合を除き、名詞は必要ありません。

複数のアクションが可能であることや、セクションや設定の更新が可能であることを伝えるには、より高いレベルで"manage"という動詞を使用します。この動詞がボタンの中にある場合や、何が管理されているのかが不明瞭な場合は、この動詞と名詞を組み合わせます。

変更と切り替え｜ Change vs. switch

マーチャントがオプションを置き換えることはできても、編集することができない場合は、動詞"change"を使用してください。例えば、画像やテーマを変更することはできても、そのプロパティを編集することはできません。リンクテキストとして、変更されるフィールドやエリアの横に配置します。何が変更されるのかが不明瞭な場合を除き、名詞は必要ありません。