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

Uppercase In UI
無料のメールマガジンに登録

毎週月曜日に、フリーランス向けニュースまとめをお届けします。 プライバシーポリシーはこちら

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

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

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

Uppercase In UI

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

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

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

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

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

Uppercase In UI

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

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

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

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

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

3. 短いサブタイトル

Uppercase In UI

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

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

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

4. テーブルの見出し

Uppercase In UI

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

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

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

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

5. ボタンとバッジ

Uppercase In UI

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

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

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

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

6. デザインの装飾

Uppercase In UI

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

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

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

おわりに

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

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

(執筆:Dan Romero 翻訳:Nakajima Asuka 編集:Sato Mizuki)

34,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 34,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ