ユーザーアイコンの形状について考える

こんにちは、さだこえ (@sadako_a_) です。デジタルプロダクトデザイナーとして、株式会社FOLIOでオンライン証券のUI設計・開発に従事しています。この「考える」シリーズも1ヶ月続き、次は3ヶ月続けるのを目指したいと思います!

目次

1.ユーザーアイコンの形状はどちらにするべき?
2.円形のユーザーアイコン調査
3.四角形のユーザーアイコン調査
4.円形による視覚補助の考察
5.まとめ

1.ユーザーアイコンの形状はどちらにするべき?

業務中に、ふと「なぜユーザーアイコンは、一般的に円形状が多いんだろう」という疑問が頭に浮かびました。昔、ユーザーアイコンの形が四角形だったサービスも、今はみな円形にアップデートされています。

世のサービスのユーザーアイコンは、一般的に「円形」と「四角形」の2つの形状に大きく分類できます。そこで今回はサービスの調査を通じて、ユーザーアイコンが円形によるメリットを考察し、円形のユーザーアイコンが多い理由を考えていきたいと思います。

2.円形のユーザーアイコン調査

今回ユーザーアイコンの形状を調べるにあたり、世界的にシェアがあるグローバルなサービスを範囲に調査しました。

Google、LinkedIn、Twitterといったサービスは、ユーザーアイコンの形状が円形になっています。Twitterに関しては、昔ユーザーアイコンの形状が四角形でしたが、2017年のメジャーアップデートを期に、円形に変更しています。

当時四角形で最適化されていた画像が円形になることで色々批判もありましたが、現在は円形が一般的に受け入れられており、Twitterのユーザーアイコンを四角形にしてみると、少しやぼったく感じます。

3.四角形のユーザーアイコン調査

「あれ、円形の画像と比べて四角形の例、少なくない?」

調査してから驚いたのですが、ユーザーアイコンが四角形であるサービスの少なさに驚きました...(本当に円形が多い)日常的に業務で利用する、GithubやSlackといったサービスのユーザーアイコンの形状は四角形でした。

こうも円形が多いと、四角形のユーザーアイコンに対して違和感を感じるのかなと思いましたが、SlackやGithubを利用する上で、特に違和感を感じたことは無いので、形状による視覚的違和感は関係ないのかなと思います。

Slackは何故ユーザーアイコンを四角形にしているのか...と考えましたが、ビジネスチャットという立ち位置のもと、IT業界以外で今後普及していくと考えた場合、四角形のほうが可愛すぎず、中年層にも受け入れられやすいのかなと考えています。

4.円形による視覚補助の考察

ユーザーアイコンの形状を調査していく中で、円形は四角形に比べて視覚補助に関するメリットが多いと感じた為、いくつか考察をまとめてみました。

A.投稿されるコンテンツとの区別

円形のユーザーアイコンは四角形と比べて、投稿されるコンテンツとの区別化に大きいメリットがあります。

画像、文書といったコンテンツは四角い面積ですが、ユーザーアイコンは円形の面積なので、ぱっと見てユーザーアイコンがどちらなのかが明確に分かりやすいです。またユーザーアイコンが風景の写真などでも、形状などから投稿されるコンテンツと関連が無い要素ということが分かります。

B.視点の焦点が当たる顔が強調される

一般的なSNSにおいて、ユーザーアイコンとの名の通り、主に設定される写真は自分の顔写真の場合が多いと思われます。

円形は四角形に比べて写真の面積が狭い分、顔の部分に視点のフォーカスが当たり、強調されやすいメリットがあるのではないでしょうか。

C.重なった場合でも視覚領域が広い

共通の知り合いや、グループに友達を追加するといった機能で、ユーザーアイコンを重ねて表示するインターフェースデザインを見かけることが、多々あると思います。

円形は四角形に比べて重なった場合の視覚領域が広いため、狭いスペースでもそれぞれの顔写真が見えやすいといったメリットがあります。

D.情報のノイズが少ない

ユーザーアイコンを円形にすることで、写真自体の情報のノイズを減らすことができます。

例として上記の写真のように、自分の後ろに通行人が写っている写真を設定した場合、四角形だと主体が全体的に定まっておらず、モヤっとした構図ですが、円形の場合はちゃんと前方の人物にフォーカスが当たり通行人が四角形と比べて目立たない為、情報のノイズ低減に繋がります。

E.円形=ユーザーアイコンのデファクトスタンダード

視覚補助とは少し話が逸れますが、ユーザーアイコンが円形であるというデファクトスタンダードが生まれることで、ユーザーが新しいサービスを使う時でも、スムーズな理解に繋げることができるのかなと思います。

特別なことが無い限り、UIはデファクトスタンダードに沿うべきなので、そのような観点でも、円形のユーザーアイコンが標準である文化が生まれつつあるのかな?と考えています。

5.まとめ

「TwitterやFacebookもユーザーアイコンが円形だから、僕らのサービスのユーザーアイコンもとりあえず円形にしておこう!」

そんな考えも、デファクトスタンダードに沿うという観点では、1つの正解だと思います。ただなぜ世のユーザーアイコンは円形が多いのか、今一度その意味を考えると、単純な造形でも様々な考察ができます。

今でもまだまだ「デザインは感性で作られている」と思われがちですが、このように一見浅いと思われている事象でも、そこには論理が存在し、それを僕たちデザイナーが説明することで、「デザインは感性で作られているのではなく、論理をもとにした設計である」という理解が深まるのかな、と思います。

ここまで読んで頂き、大変ありがとうございました。
ご意見やFBは @sadako_a_ までよろしくお願い致します。

------------------------------------------------

SNSではUIデザインなどの情報や考察、制作物などを発信しています!🎉


この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

頂いたサポートは記事執筆のための活動費や、書籍購入費用に当てさせて頂きます!💪また記事を読んで思うことがあったら、Twitterなどで感想やFBを頂けると大変うれしいです!

いつもスキありがとうございます!記事を執筆する励みになります🙋
137

MAMORU KIJIMA

「◯◯を考える」

デジタルプロダクトデザイン関係の記事をまとめています。
5つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。