はじめに
わたしがGoogle UX Design Certificateで得られた素晴らしい体験を、特に重要だと思われるポイントを小さく分割して、わかりやすく簡潔に紹介していきます。
興味があれば、ぜひ Google UX Design Certificateを受講してみてください。
これまでの振り返り
はじめに
前回、ビジュアルデザインの基本要素の一つであるタイポグラフィについて紹介しました。
今回、タイポグラフィについて、もう少し深ぼってみます。
もし、ページ上のすべてのテキストが同じサイズとビジュアルスタイルの場合、ユーザーはページの構成要素をすばやく理解し、探している特定の情報を見つけるのが難しくなりますね。そこで、タイポグラフィの出番となります。
1.階層を作ること
ユーザがより良くページをナビゲートできるようにするために、階層を作る必要があります。タイポグラフィーの階層とは、『レイアウトの中で書体やフォントを順番に並べ、ユーザーがどこに注目し、どのように情報を探せばよいかを示す区分を作る方法』 である。
製品のインターフェースは、多くの場合、画面上の多くの単語で構成されていることを忘れないでください。視覚的な合図を作ることで、ある単語やフレーズが他の単語よりも重要であることを区別するのに役立ちます。
タイポグラフィーの階層を作る2つの一般的な方法は、次の２つを変えることです。
- 書体のサイズ
- ウェイト
新聞を開いたときのことを考えてみよう。最初に目につくテキストは大きく、太い。見出しは、その記事でこれから起こることの文脈を示す。
この例では、見出しとタイトルの両方がヘッダースタイルとみなされています。どちらも、後に続く言葉よりも文字が大きく、太いのが特徴です。
デジタル製品のデザインでも同じことが言えます。ほとんどの製品のインターフェースには、少なくとも2種類の文字サイズがあります。長い文章に使われる小さいサイズと、タイトルや見出しに使われる大きいサイズです。
デジタル製品では、タイポグラフィの階層を作るために、書体の文字の太さであるウェイトを使用することもあります。例えば、太字の書体はテキストをより強調したり、重要視したりします。
2.テキストを読みやすくすること
タイポグラフィは、『テキストを読みやすくする』 ことができます。
UXデザイナーとして、あなたの仕事の1つは、製品をより読みやすく、ナビゲートしやすくすることです。
製品は、弱視の人を含むすべてのユーザーにとって読みやすいものである必要があります。食料品店で売られている食品の栄養成分表示について考えてみてください。
これらの食品ラベルは、通常、白地に黒の太字で印刷されている。デザイナーは、食品パッケージの周囲のデザインに関係なく、ラベルが読みやすいことを保証する。これによって、弱視の人を含むすべての食料品店の買い物客が、カロリー、ビタミン、成分など、食品の栄養情報を簡単に識別して読むことができるようになるのです。
同様に、UXデザイナーはデジタルプラットフォームで読みやすいタイポグラフィーを使用します。例えば、eコマースサイトのチェックアウト画面では、デザイナーは、ユーザーが正しく支払っていることを確認できるように、太くて読みやすいタイポグラフィを選択します。
3.ブランドガイドラインに合致していること
ブランドガイドラインは、『ブランドのアイデンティティ、価値観、使命を伝えるために使用される視覚的なスタイル』 の選択です。
ブランドガイドラインには、タイポグラフィーやその他の視覚的デザイン要素に関する規則があり、それらはすでに企業のデザインチームによって研究、テスト、承認されている。
タイポグラフィは、このビジュアルスタイルに加え、企業のアイデンティティを表示します。例えば、GoogleはGoogle Sansというサンセリフ体の書体を使用しています。この書体はGoogleのデザインチームが作成し、すべてのマーケティング資料で使われています。Googleのロゴにも使われています。
この書体は、Googleのブランドを強化するものです。特定の企業のためにデザインする場合は、始める前にその企業のブランドガイドラインを確認するようにしましょう。
Figmaでタイポグラフィを設定してみる
さて、タイポグラフィについて学んだことを、プロジェクトに適用する時が来ました。Figmaを開いてみましょう。
- 画面右側のデザインパネルから、書体やサイズ、太さなどを設定することができます。
- テキストボックスに、"Busy afternoon?" と入力し、Enterキーを押して改行して、"We can take them for a walk." と入力します。
- あとは、このテキストの書体やサイズ、太さなどで遊んでみましょう。たとえば、フォント「SF Pro Display」、サイズ「24ポイント」を選択します。
次のサンプルを見れば、タイポグラフィの重要性を理解できると思います。
