正しく扱えてる？UIデザインで“大文字”を使うべき6つの場面

日本語とは異なり、英語には大文字と小文字があります。大文字は文頭で使うのが基本的なルールですが、それ以外にも大文字を見かけることはありますよね。

今回はUIデザインという観点から、大文字の使い方について解説します。

1. タイトルとキャッチコピー

▲ファーストビューに配置されている見出しに大文字を使用

大文字を使うと、文章の特定の部分を強調できます。フォントにもよりますが、見出しやキャッチコピーなどに使うと効果的です。上の例では見出しがすべて大文字になっていますね。こうしたケースには、サンセリフを使うのがとくにおすすめです。

見出しやキャッチコピーに大文字を使う際は、テキストを短くするように心がけましょう。文字間隔を調整するのも忘れずに。適切に使えば、コピーのインパクトを強くしてくれます。

また、大文字によって一部を際立たせることでヒエラルキーが明確になり、画面全体がまとまって見える利点もあります。

2. ナビゲーションとメニュー

▲メニューが4つに絞られているため、大文字が活きる

Webサイト上でのナビゲーションやメニューでも大文字が活躍します。

選択肢が4〜5つであれば、ナビゲーションやメニューを大文字にすると見栄えがよくなるはず。なお各メニューは、単語一つだけで表せるとなお良いでしょう。

この場合もタイトルやキャッチコピーと同じく、短さが重要です。文字数はできるだけ少なくして、各カテゴリーを的確にあらわす単語を選びましょう。

サイドバーパネルで使う場合には、アイコンを併用するのもおすすめです。文字とアイコンの高さを揃えることで、レイアウトが整って見えます。

3. 短いサブタイトル

▲料金表や機能紹介などのセクションに

短いサブタイトルを大文字で表すことで、ヒエラルキーを明確にできます。LP、ダッシュボードのメイン画面、設定ページ、価格リストなどのパネルにおいて、テキストのヒエラルキーを明確にしておくことは、優れたUXには不可欠です。

ユーザーが選択肢をすばやく識別できるように、目立たせたいところに大文字を使いましょう。短い文章と大文字を組み合わせれば、見栄えと機能を両立できます。

4. テーブルの見出し

▲テーブルをデザインする際にもヒエラルキーは必須

テーブルは頭痛の種ともいえる厄介な存在ですが、見出しに大文字を使えば手軽にヒエラルキーをつけられます。

シンプルなデータを表示するためのシンプルなテーブルを使っているなら、外観上の問題はあまり発生しないかもしれません。しかし行や列がたくさんある複雑なテーブルになると、視覚的なバランスをとるのはなかなか難しいはず。

それぞれの列の見出しに大文字を使えば、テーブル全体の構造をすっきりさせられます。ユーザーにとっても、より見やすいテーブルになるはずです。

5. ボタンとバッジ

▲ボタンやバッジにも大文字がおすすめ

CTAボタンや人気商品を強調するためのバッジは、重要な存在ですよね。こうした要素にも大文字を使ってみましょう。

ユーザーがはじめてページを訪れた際にCTAボタンをすぐ認識できると、コンバージョン率が上がり、またWebサイト全体を把握しやすくなります。

ユーザーに注目してもらうためのバッジについても同様です。カードに固定されている小さなバッジでも、大文字はしっかり注目を集めてくれます。

6. デザインの装飾

▲背景の袋文字が大文字になっている

機能重視の用途を紹介してきましたが、最後にご紹介するのは装飾です。装飾はどんなデザインにも存在していますが、使い方を一歩間違えるとデザインを台無しにしてしまうことも。

だからこそ、Webサイトのスタイルやターゲットに応じて、慎重に大文字を使いましょう。スライダーや見出しなどにソフトな透け感のある大文字を使えば、デザインをシンプルに仕上げられます。また上の例のように、袋文字で奥行きを演出するのもおすすめです。

おわりに

今回ご紹介した例からもわかるとおり、大文字はヒエラルキー作りに役立ちます。しかし大文字の魅力は見やすさだけではありません。さまざまなフォントで大文字だけの見出しやボタンなどを作って、まずはデザインで遊んでみてください。

大文字を使う際のもっとも重要なルールは、一度に大量に使いすぎないこと。長い文章をすべて大文字にしたり、見出しや本文もすべて大文字にしたりすることは避けましょう。文字間隔に気をつけて、シンプルな単語や文章を大文字にすれば、UI/UXをレベルアップさせてくれるはずです。

（執筆：Dan Romero　翻訳：Nakajima Asuka　編集：Sato Mizuki）