見やすい文字デザインのポイント

初めまして、ベトナムのUX UIデザイナーのズイと申します。最初は未経験でしたので、アイデアがあっても「実際になれるかな」、「このようなアイデアがあるかな」、「このアイデアはダサイかな」と考えて話すことはありませんでした。しかし、当時の先輩からの激励のおかげで自分の考えを話す勇気を持ちました。幸運にも私のアイデアは選ばれ、そのプロジェクトを通じて経験を積む機会を得ました。その後、毎日SNSでプロフェッショナルなアカウントからトレンドのUIやスキル、ティップスを学ぶことで、自身のスキルを向上させました。ですから、今回はUIのチップスについて詳しく書いてみたいと思います。

ある時、どのUIが良いかを選ぶことができても、なぜそれが良いのかを説明できないことがありますよね？理由を説明できないと、私たちの決定は曖昧になり、説得力に欠けてしまいます。だからこそ、私は常に問い続け、答えを探し続けています。その中の一つの分野がタイポグラフィであり、今日はそのタイポグラフィのヒントをいくつか共有したいと思います。デザイナーとして、「適切なフォントを見つける」という苦労に直面したことがあると思います。完璧主義者の私にとって、それは本当に悪夢です。プロジェクトに適していると思うフォントを見つけるのに一日中かかることがあり、翌日にはもっと良いフォントを見つけてしまうこともあります。しかし、フォントの使用は単にスタイルを選ぶことだけでなく、そのフォントをどのように表示するかにも関わることに気づきました。スペーシング、行間、ガターといった要素がUIをより良くする手助けをしてくれます。これらは優れたデザインの陰の立役者です。

行間

行間はテキストの行間のスペースです。これが悪いデザインを良いデザインに変える最速の方法です。通常、行間はテキストサイズの約1.2から1.5倍です。テキストサイズが大きくなるほど、行間は小さくするべきです。Google、Dropbox、Uberなどの有名企業を調査した結果、見出しの行間は1.1から1.3、本文の行間は1.3から1.5に設定することをお勧めします。                     

ビフォー
アフター

字間

もう一つのデザイン改善のヒントは字間です。字間とは、テキスト内の文字間の距離を指します。私は通常、-1％または-2％に設定しますが、フォントによっては-0.5％に調整することもあります。なぜ最初から負の字間を使用しないのか疑問に思うかもしれません。その答えは、負の字間は見出しのみに使用すべきだからです。本文に使用すると可読性に影響を与える可能性があります。したがって、見出しの字間を調整し、使用するフォントに応じて数値を調整する必要があります。

ビフォー
アフター

テキストの整列

これはあなたのデザインにとっても大きな問題です。長い中央揃えの段落を読んだ時に、情報を理解するのに時間がかかったと感じたことはありますか？ これは、読む際に次の行の始まりを探す集中力が必要になるためです。しかし、これは中央揃えが悪いということではありません。多くの大手企業がウェブサイトで中央揃えを使用しています。以下は、配置に関するいくつかのヒントです

• 中央揃えの見出しと左揃えの本文を混ぜないでください。
• 三行以上の段落には左揃えを使用してください。
• 短い見出しには中央揃えが適しています。

ビフォー
アフター

階層構造

テキストの階層構造に関する一般的な間違いは、テキストのサイズを過度に使用して表示することです。これにより、デザインが乱雑でランダム、そしてプロフェッショナルではなく見えます。「少ないほど良い」ということで、このケースのための迅速でシンプルな解決策があります。次回デザインする際には、たった二つのフォントサイズを使用し、フォントの太さ、影、色などを使って階層を表示してください。

ビフォー
アフター

間隔

余白は、新しいデザイナーにとって最も無視されがちなデザインの側面の一つです。私は動画から新しい引用を学びました（URLは以下の通りです）「余白は受動的な背景ではなく、積極的な要素と見なされるべきです。」これは、余白が画像やボタンなどの要素と同じくらい、あるいはそれ以上に注意深く考慮されるべきであるという意味です。ここでのヒントは、UIデザインにおける関係性のアドバイスの考え方でデザインに取り組むことです。この考え方では、要素のグループがある場合、それらの関係性について常に自問自答し、特定の要素が他の要素よりも近い関係にあることに気づきます。例えば、最初のコンテンツブロックの見出しと本文は、2番目のコンテンツブロックよりも密接な関係にあります。したがって、見出しと本文がより密接な関係にある場合、それらはお互いにより近く配置されるべきです。見出しと本文の間の距離が16px（x）であれば、最初と2番目のコンテンツブロックの間の距離は32px（2x）であるべきです。このルールはデザインのすべての要素に適用できます。

ビフォー
アフター

参考URL：https://www.youtube.com/watch?v=88XxC0_zs74

見やすい文字デザインのポイントについてこちらで以上となります。

最初は「トレンドなUIや使えるカラー、新しいUIルールを使うと素晴らしいUIが作成される」と思っていましたが、最近は細部にも気を配るようになりました。UIを作成した後はフレーム名を確認し、コンポーネントやスタイルが正しく使われているか、適切なスペースがあるかを確認しています。また、デザインチームだけでなく、他の職種のメンバーもこのUIを見て使い方が理解できるかどうかを考えています。

このように、デザインプロセスにおいて細部を見逃さずに注意を払うことで、より優れたUIを作成できることがわかります。UIデザインは単なる美的要素だけでなく、使いやすさや理解しやすさも重要ですね。他のチームメンバーとのコミュニケーションも大切にし、全体の目標を達成するために努力していきましょう。お役に立てれば幸いです！