本日はこちらの記事を読んでみます。なお、画像も以下から引用しています。

本日もよろしくお願いいたします。

UIデザインのタイポグラフィーガイド

WebでもアプリでもUIをデザインするとき、デザイナーはすべてのディティールへ注意を配ることを心がけています。彼らはボタンや入力フィールド、タブ、ナビゲーションバーなどのコンポーネントを魅力的にデザインするよう努力します。

これらを達成させるためには考え抜かれた色やタイポグラフィ、余白やグラフィックの選択が必要です。考えることが多いがゆえに、デザイナーはUIにとって正しいものが何なのかを選択することに苦労してしまいます。
そのためこの記事では、私はUIデザインを良くするタイポグラフィの選び方の例をご紹介しようと思います。

さあ、以下の例を試してみましょう。

フォント（文字サイズ）

フォントサイズを選ぼうとする際、絶対的なルールはなく、プラットフォームやデザイン言語、目的、そしてユーザー層によって完全に異なります。
しかしながら、異なるユースケースにおけるいくつかの適切なフォントサイズのガイドラインをここに示します。

• タイトルやヘッドライン
  ここには24~36pxほどの大きめのフォントを使用してください。これによってユーザーの注意を引き、情報を素早く伝えることができます。

• サブタイトルやキャプション
  ここには14~18px程度の小さめのフォントを使用してください。この違いによってメインコンテンツとの差を意図的に作り出します。

• 本文
  ここには明解な可読性と視線の動きに負担をかけない十分な余白が必要です。16~20px程度が本文には最適でしょう。

• 入力フィールド
  入力フィールドには読みやすく入力しやすいフォントサイズを選ぶと良いでしょう。16~18pxくらいが最適です。

• メタデータ
  日付や時間、筆者の名前や小さいボタンの中の文字などのメタデータに関してはメインコンテンツを邪魔しない程度の小さめの文字サイズが良いでしょう。12~14pxくらいが適切です。

覚えておいてほしいのは、フォントサイズはユーザーが見つけやすく読みやすいものにするということです。これらのガイドラインは導入としては有用ですが、自由にあなたの好みやユーザーのニーズに合わせてサイズを変更することにもチャレンジしてみてください。

色

タイトルやコンテンツを区別したいと考えたとき、私達はフォントサイズを変更することを考えるでしょう。しかし、色によっても区別を生み出すことができるのをご存知でしたか？

これらの２つの例は良い・悪いを示しているものではなく、目的が異なっているものになります。

• 左側のヘッダーと本文に同じ文字色を用いている例は、見た目の統一感とコンテンツの可読性を向上させています

• ヘッダーと本文に異なる色を用いている右側の例は、見た目の上下関係をより明確化させ、ヘッダーと本文との違いを強く打ち出しています

太さ

フォントの太さは重要です。これについては大体どこでも上で述べたような色の法則に従って言及されています。太さもまた、コンテンツやタイトルの差を大きくして見分けやすくする効果があります。色と一緒にこれらを考慮してみましょう。

これら２つの例は私がすでに言及した色の法則と近いものです。しかしUX/UIデザイナーであるなら、あなたはUIやUXとしてどのようにユーザーが使いやすく親しみやすいものにするかを考えて、どれを採用するのかの方向性を決める能力があるはずです。ユーザビリティテストを行うことは、インタラクティブなデザインを作る工程においては必須となります。

大文字と小文字

小文字はめったに使われることがなく、良い選択肢とは限りません。しかしながら、小文字を使うことにちゃんとした理由がる場合は、ユーザーにとって自然な見た目となるように仕立てる必要があります。

大文字はタイポグラフィのバリエーションを面白いものにしてくれます。大文字は小文字よりも良く見かけます。

この例では、私はウェブサイトのドメイン部分に大文字と小文字を使い分けてみました。しかしながら、すべてのドメインは一般的には小文字で表記されています。実際に使ってみる際はこのようなことにも考慮してください。

最大文字数

１行あたりに適切な文字数を表記することは可読性において重要なポイントで、特にユーザビリティテストを行うモバイルにおいては良く考慮されるポイントです。理想的には位置行あたりに９語以下、文字数なら50~60文字以下にすることです。

この例において、私は各行の文字数の最大化させながら、段落をより読みやすい高さにできないかを試しています。

まとめ

UX/UIデザイナーが行うUIの改善において、適切なタイポグラフィの使用について考えることが必要です。私達はフォントサイズや色、太さ、大文字と小文字、さらに文章が表記されるエリアの高さに合わせて入れる単語数を最大化させることなどについて注意を払わなければなりません。
こうすることで、私達はUIの見た目や情報の見つけやすさ、可読性を高めることができるでしょう。

感想：大文字や小文字についてや段落の読みやすさにも注意を払いたい

記事の内容はフォントサイズ、色などの基本的な内容から、大文字と小文字の使い分けや文章の読みやすさなどちょっと細かい部分まで議論が展開されていました。
しかし内容は具体的な数字も混じえながら非常にわかりやすく、英文も易しくてとても読みやすい記事でした。

ユーザビリティテストのようなものを行っていると、どうしても文章の読みやすさなどよりもボタンの大きさやら記載している文言、文章の内容についての妥当性についてに注意が行きがちに自分はなってしまうのですが、そういった大きい部分の改善を行いつつ、タイポグラフィの細かい点にまでも注意を向ける必要があることを実感させられました。

個人的に気になった海外記事を週数本メモしていますので、よければフォローおねがいします

ポートフォリオ

X（note更新のお知らせなど発信しています）
https://twitter.com/yamashita_3

__________________________________________________________
#デザイン　#デザイナー 　 #UIデザイン 　#UX 　#UXデザイン 　#UI 　#海外記事翻訳