ウェブサイトにおけるアイコンの重要性について

2020年6月8日

皆さんご無沙汰しています。末ちゃんです。

最近30度を超える日が連続しているんですが、もう夏でしょうか？
ゲリラ豪雨があったり、もう気付かぬ前に亜熱帯気候が定着しているような気がします。

さて、つい先日某有名メーカーから某FPSがリリースされました。
こぞってプロゲーマー達も参加し、正式リリース前から賞金総額2,000万円を超える国際大会の開催が決定しています。

ゲームも比較的純粋なFPSで、カジュアルでありつつもFPSの腕が試されるよきタイトルです。

しかし、ひとつもの申したい。ゲーム内インターフェースのアイコンが分かりづらい！

さて、折角なのでウェブサイトにおけるアイコンの重要性について今一度確認して見ましょう。

そもそもアイコンとは、ユーザーが行おうとするアクションやコンテンツをよく素早く分かりやすく伝えるための手段です。
アイコンを使う際には対象ユーザーが一般常識的に理解している実世界のカタチを、図式化して使う必要があります。

ではウェブサイトで非常によく使うアクション要素、「ボタン」でアイコンがある場合と無い場合を比べてみましょう。

アイコンなしのボタンに比べて、アイコンがあるボタンの方が恐らく分かりやすいです。
なぜなら、右矢印があるということは、次のページに進むというイメージが直感的に伝わってくるからです。

アイコン無しのボタンでは、ラベルを読んで初めてそのボタンの役割を理解します。

しかしアイコンがあるボタンでは、アイコンの存在がそのボタンの役割を概念的に説明してくれ、例えラベルを読まなかったとしてもその意味がおおよそ理解できるはずです。

例えばブランドデザインがあり、そのデザインに寄せるためにアイコンを一般的ではないものに変えてみるとします。

「自動車販売のサイトだから、アイコンも車にしてよ」と依頼された場合を想定して、アイコンを車にしました。

およそ10年前ほどはこのような個性を活かすデザインもよしとされていました。
しかし冷静に考えてください。訳が解りません。

次のページに進むと車が買えるのであれば百歩譲ってまだ良いかもしれませんが、ぱっと見何をしたいのか理解できません。

アイコンは、そのアクションを説明する図形であるべきです。

例えばアイコンを正しくない位置・向きに配置しても、そのアイコンは正しく役割を果たしません。

「前のページに戻る」ボタンのアイコンが、ラベルの右に、かつ右向きに配置されています。

ブラウザのインターフェースを見ると、戻るは左向きの矢印、進むは右向きの矢印です。
一般的にも、右向きの矢印は進むと理解するはずです。

この場合、アイコンはラベルの左側にかつ左向きに配置されるべきです。

これが正しい姿ですね。

ボタンデザインの難しいところです。例えば幅200px固定サイズのボタンを作るとします。
その際のラベルとアイコンの位置関係を比べてみてください。

アイコンをラベルに寄せず位置を固定した方が、縦に配列したときに美しく見えるし見やすいです。
しかしアイコンをラベルに寄せた方が、ボタン単体で見たときは美しく見やすいです。

配列の仕方によっても、アイコンの効果の出方は変わってくるので慎重に選びましょう。

よくスマホ等の画面下部のスティックするナビだとか、フロートするナビであることですが、アイコンだけで完結させるのも原則良くありません。

今まではアイコンがラベルの補助として存在しましたが、このようなシチュエーションではラベルがアイコンの補助として仕事します。

また、この際に「メール・コメント・電話」とラベルを並べた場合、その先のアクションが不明瞭であるため、「する」まで付けて、具体的にどのようなアクションが起きるのか明示しています。

以上、某ゲームへの不満から思いつき書いた記事ですが、このようなことを配慮できるのは専門家だからこそです。

店舗を構えるとき、自分で小屋ぐらい建てられる個人の知り合いに工事を任せるか、それともプロに任せるか、ウェブサイトでも同じことだと思います。

以上~~フロントエンドエンジニア~~デザイナーの末ちゃんからでした。