エクスクラメーション（！）アイコンが持つ意味に関して考えてみる｜アイコンの使われ方調査6

齋藤公一 / 2024年12月10日

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社フロントエンドエンジニアの齋藤 (@31mskz10) です。

最近のウェブサイトやアプリには、アイコンがよく使われています。
「アイコン」というシンプルなマークを見るだけで、ユーザーはどんな意味や機能なのか理解できるのは面白いなと感じます。

今回の記事では、数あるアイコンの中から「エクスクラメーション（！）」アイコンがどのようなUIに使われているのかと、アイコンが持つ意味について考えてみます。

エクスクラメーションアイコンが使われているUI

警告やエラーメッセージ

エクスクラメーション（Excalamation）は「Exclaim（叫ぶ）」の名詞形です。
語源をたどると、ラテン語の「exclamatio」にたどり着きました。

「ex」が「外へ」、「clamare」が「叫ぶ」で、「大声で叫ぶ」や「声を上げる」といった意味の言葉になります。
その意味の通り、エクスクラメーションマーク（！）は、まさに大声や強い感情を表すときに使われていますね。

そこから派生して、アイコンとして使われるときはユーザーに注意して欲しいときや、警告したいときに使われます。

例えば、ブラウザでSSL認証がされていないサイトにアクセスしようとすると、警告が表示されます。

この警告にも、エクスクラメーションマークが使われています。

他にも、少し前にFigmaの「下書き」の仕様が変わって、移動が必要になったときにも、警告を表すためにメッセージの最初にエクスクラメーションマークが使われていました。

コンバージョンテキストの強調

アイコンではないですが、コンバージョンボタン内のテキストにエクスクラメーションマークを使う例も見かけました。

「会員登録はこちら！」のように、ボタン内のテキストに付いているパターンです。

強調させる意図なのだと思いますが、正直このようなコンバージョンボタンは、ボタンそのものが既に目立つようなデザインになっているので、「！」の有る無しで効果が変わるかどうかは分かりませんが、そのような使われ方もされているパターンもありました。

過度な強調に注意が必要

事例を探していて気がついたのですが、最近は「赤色 + エクスクラメーションマーク」の組み合わせが少ないように感じました。
よくあるのが「黄色 + エクスクラメーションマーク」の組み合わせです。

赤色は黄色に比べて目立ってしまいますし、それとエクスクラメーションマークを組み合わせてしまうと過度な強調になってしまうのではないかと思います。
なんでも強調してしまうと、逆に強調の印象は薄れていってしまいます。

また、緊急度の低いものまで過度に強調していると、ユーザーが慣れて「どうせ大したことじゃない」とスルーされてしまう可能性も高まります。

ユーザーの注目を引きつける強力なアイコンだからこそ、使い方には注意しなければなりません。