シグニファイア

認知科学者のドナルド・ノーマンが提唱した、利用者に「どう操作すべきか」を知らせる視覚的・聴覚的な「手がかり」や「合図」のことです。

Web サイトにおける代表的な例

ボタンについた立体的な影(＝「押せる」という合図)。
青色の文字と下線(＝「リンクである」という合図)。
マウスを乗せた時のカーソル形状の変化(＝「クリック可能」の予告)。

アフォーダンスとの違いと重要性

サイト側に「アフォーダンス(ボタンが押せる・操作できるという事実)」があったとしても、「シグニファイア(手がかり)」がなければ、ユーザーはその機能に気づくことができません。ユーザーが迷わず操作できる「発見可能性」を支える非常に重要な要素です。

実務における設計のポイント

「アコーディオン(開閉式のメニュー)が開かれない」「テキストリンクが押されない」といったトラブルの多くは、このシグニファイア不足が原因です。

解決策：メニューに「＋」や「▼」といったアイコンを添えたり、リンク文字に下線を引いたりして、「操作できること」をユーザーに明示します。

初心者が陥りがちな「シンプルすぎるデザインの罠」

フラットデザイン(立体感や影をなくした平面的なデザイン)などで「シンプルさ」や「見た目の美しさ」を追求するあまり、装飾と一緒に必要なシグニファイア(手がかり)まで削ぎ落としてしまう失敗がよくあります。「見た目のシンプルさ」と「操作のわかりやすさ」のバランスを保ち、最低限の視覚的な手がかりは必ず残すようにしましょう。

言葉をよく利用する人

デザイナー
Web 担当者(発注側)
コーダー / フロントエンドエンジニア

会話上での使用例

UIを徹底的に簡素化する案を検討する場面

デザイナー
デザインを徹底的にシンプルにして、余計なものは全部削ぎたいです。
Web担当者
方向性は素敵ですね。ただシグニファイア、操作できると気づかせる視覚的な手がかりまで削ってしまうと、利用者が操作方法に迷ってしまうんです。最低限の合図は残しておきましょう。
デザイナー
わかりました。押せる場所だけは、それと分かる印を残します。

アコーディオンが開かれない原因を探る場面

プロデューサー
FAQのアコーディオン、ほとんど開かれていないみたいなんです。
Web担当者
たぶんシグニファイアが不足しているんですね。プラスや下向き三角のアイコンを添えて、ここを押すと中身が開くんだと一目で伝わるようにすれば、開いてもらいやすくなりますよ。