はじめに

わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。

興味があれば、ぜひ Google UX Design Certificateを受講してみてください。

これまでの振り返り

タイポグラフィー、アイコン、カラーといったビジュアルデザインの原則に加え、モックアップを作り始めるにあたって知っておくべきデザイン上の特徴がいくつかあります。

ここでは、使いやすい製品をデザインするために役立つ、ハイパーリンク、ボタン、入力などの要素について学びます。

ハイパーリンク

ハイパーリンクとは、あるページやファイルから別のページへのリンクのことで、通常、青く下線が引かれた単語や画像をクリックすることで有効になります。

ハイパーリンクを使用すると、デジタル製品を簡単にナビゲートできます。標準的なスタイルでは、テキストに青色と下線を付けると、リンクがすぐに認識されます。

モックアップにハイパーリンクを追加する際に注意すべき点を紹介します。

すっきりしたページは読みやすくなる

ハイパーリンクは、デザインを整理して、ユーザーが製品を簡単に操作できるようにすることができます。しかし、多くのハイパーリンクを追加すると、可読性が低下し、ユーザビリティに影響を与える可能性があります。

ハイパーリンクは慎重に選択し、青い文字でユーザーを圧倒したり、気を散らしたりしないようにしましょう。

ユーザーの期待に応える

- テキストに下線が引かれ、青く表示されている場合、それは常にリンクであるべきです。

一般的な慣例を無視し、ユーザーを混乱させないようにしましょう。

すべてのリンクが同じように見えるわけではない

UXデザインの進化とともに、デジタル製品におけるリンクの表現方法も進化してきました。企業のブランド基準によって、リンクが青色でないこともあります。また、画像もハイパーリンクになり得ます。

例えば、多くのユーザーは、企業のウェブサイトにあるロゴがホームページにリンクしていることを期待しています。下線テキストがなくても、ユーザーはロゴがリンクのように機能することを期待しているのです。

説明的なリンクを使用する

ハイパーリンクのテキストは、それがどこにつながっているのか、ユーザーに正確に伝える必要があります。「ここ」というハイパーリンクは避け、代わりに「フレンチクォーターの予約確認」のような説明的なフレーズを使いましょう。説明的な表現にすることで、ユーザーは十分な情報を得た上で選択することができます。

ボタン

ボタンは、ユーザーが「キャンセル」や「保存」のような特定のアクションを起こすことを可能にします。

モックアップでボタンを使用する際に従うべきベストプラクティスを紹介します。

ボタンがボタンらしく見える

ボタンは、その形、大きさ、色からボタンであることが容易に分かるようにします。ほとんどのボタンは長方形か円形なので、星形やハート形のボタンはユーザーを混乱させる可能性があります。

以下は、最も一般的なボタンの形です。

一貫性をもたせる

製品全体で一貫して同じ種類のボタンを使用します。

たとえば、アプリのトップページでゴーストボタンを使用する場合、すべての画面で同じスタイルを使用する必要があります。一貫性があることで、ユーザーはどの要素がボタンであるかを認識しやすくなります。

ネガティブスペースを入れる

ユーザーが簡単にタップやクリックができるように、ボタンの周囲にはネガティブスペース（またはホワイトスペース）を確保します。UXデザイナーは、ボタンにパディング（余白）を設けることが多いのですが、これは画面が乱雑になりすぎないようにするための余分なネガティブスペースです。

また、パディングを使用すると、ユーザーが誤って隣のボタンをタップしてしまう可能性も低くなります。

Appleのランディングページです。黒一色の背景に、『iPhone X』のシンプルな紹介と画像を配置しています。大きく余白を取ることで高級感を演出しつつ、詳細ページをクリックしたくなるように誘導しています。

入力

入力は、ユーザーが情報を入力するためのテキストフィールドです。入力欄には、どのような情報が入るのかが明確である必要があります。また、追加する情報が収まるように十分な大きさが必要です。

モックアップに入力を追加する際のベストプラクティスを紹介します。

視覚的な手がかりを使用する

ほとんどの入力は自由形式です。つまり、ユーザーはフィールドに何でも入力することができます。しかし、電話番号や電子メールアドレスなど、特定の情報を入力する必要がある場合もあります。ユーザーが正しい情報を入力できるようにする（そしてエラーメッセージを出さないようにする）には、視覚的な合図を与えることです。

たとえば、入力に必要な情報をモデル化したゴーストテキスト（ヒントテキスト）を使用することができます。ゴーストテキストは、画面上の他の文字よりも軽い場合が多く、ユーザーが情報を入力すると消えます。

以下のデザインには、ゴーストテキストのいくつかの例(mm/dd/yy)が含まれています。

サブカテゴリを使用して入力をグループ化する

1つのページに6つ以上の入力を追加する場合は、カテゴリにまとめるとよいでしょう。

たとえば、「個人情報」カテゴリを作成して、ユーザーの姓、名、生年月日、性別などを入力できるようにすることができます。
同様に、「連絡先」カテゴリーには、電子メールアドレス、電話番号、住所、市町村などを入力することができます。

入力項目をグループ化することで、ユーザーは必要な情報を把握しやすくなり、進捗状況を可視化することができます。