アイコンを作るときのtips
この記事を書く前に一応UI Design Advent Calendar 2016。この15日目の記事です。 しれっとリスケしましたｗ また、Mie Kwon さんがiOS Human Interface Guidelinesについて書かれていたので、その後がちょうどいいかなと思い、この日にしました。
今回はいわゆるUI内で使われるボタンアイコンについて書こうと思います。
そもそもアイコンって何？
普段何気なく作っているものにスポットを当ててみたいと思います。 今回はアイコンについて
アイコン (英語: icon) は、物事を簡単な絵柄で記号化して表現するもの。アメリカの哲学者パースによる記号の三分類の一つ。コンピュータ上の記号表記を指すことが多い。アイコンは「εικών」の中世・現代ギリシア語での読み「イコン」を「icon」とラテン文字に転写したものの英語読みである。
ぼくらの身近にあるGUIの中にあるほとんどの機能はアイコンによって記号化、表現されてる事が多いと感じます。 そのアイコンをクリックしたり、タップする事で対象のアイコンが持つ機能を呼び出したりプログラムを開始する役割を担ってます。
また、モバイルアプリケーションに触れる事が多くなったこともありアイコンが望んだように機能するか。意図がユーザに伝わっているかはとても大事になっているケースが多いと感じます。
アイコンを作る時に考慮する点として
- 形状
- ラベル
- 状態
この3つの視点を踏まえ今回はiOS Human Interface Guidelinesを元にして気づいた点をまとめる的な感じで書いていきます。
アイコンの形状に関して
iOS向けの設計の指針
アイコンについては下記のように書かれています。
- 明瞭であること。 文字はどの大きさでも読みやすく、アイコンは的確明瞭で、装飾は控えめで適度、さらにその機能を明確に表すようでなければなりません。
- 統一感を持たせるためには一貫性が鍵となります。できる限り、各アイコンの全体的な釣り合いや、構成する線の太さを揃えてください。
UI設計でも言われているように明瞭という言葉がここでも使用されています。どのような役割があるかも記載されています。 大きさなどは下記リンクから参照出来ます。 アイコンや画像の大きさ
アプリ内のアイコンを独自で制作するときの注意点
下記にガイドライン内に記載されているものを列挙してみます。
- 標準アイコンでは表現できないタスクやモードがある（またはアプリケーションのスタイルにそぐわない）場合、独自のバーボタンアイコンを用意してください。
- シンプルで無駄がない。 細かすぎると粗雑で判別のできないアイコンになります。
- システムに用意されているアイコンの1つと簡単に見間違えられない。 ユーザは、カスタムアイコンを標準アイコンから一目で区別できる必要があります。
- 簡単に理解され、幅広く受け入れられる。 ほとんどのユーザが正しく解釈し、どのユーザも不快と感じない記号を作成するよう努力します。
- iOSのアイコンファミリーと調和するバーアイコンになるよう、非常に細いストロークで描画してください。具体的には、細かく描き込んだアイコンであれば2ピクセル（高解像度）、そうでなければ3ピクセルのストロークにするとよいでしょう。
- カスタムアイコンのみを使う場合でも、標準アイコンと併用する場合でも、見た目の大きさ、細かさのレベル、視覚的な重みなどを揃えて、同じファミリに属しているように見せてください。
ざっくり、オリジナルのアイコンは作ってもいいけど、標準と区別できるようする。ただ、オリジナルのアイコンを作る場合は、標準のものと並んでも違和感ないように。 ユーザに分かりやすく受け入れられるものにする。ほとんどのユーザ という視点はとても重要に感じます。
当たり前のような感じですが、iOSの上で動くソフトウェアである意識をとても大事にしている印象です。
アイコンのラベリングに関して
形状に関しては上記にて記載しましたが、アイコンに対してのラベリングは必要か、否か。という視点も必ず出てきます。 実際にリリースされたものを例に見ていきたいと思います。 一時期A/BテストでTwitterのタブバーがラベル無しで表示されていた事があります。
シンプルではあるものの、幅広く受け入れられるものになっているでしょうか。 多くの場合、ユーザのリテラシー、これまでの経験に依存してるため、アイコンの形状のみでは機能を100%明確に表す事ができていないように思います。 初めてインストールしたユーザがこれらのアイコンの意味を完全には理解できないでしょう。
ここで、アイコンに対してラベリングはどうしすべきかという話で、簡単に理解され、幅広く受け入れられる。 これがクリアできない場合は、デザインを変更するか、テキストラベルを入れる事で、アプリ内の機能を明確に表すようにしたほうがよいと考えます。
下記のブログではアイコンにはラベルがあったほうが良いよね。という話を色々な角度から記載しています。 The best icon is a text label
アイコンの状態変化について
アイコンの状態は分かりやすい所で言うと選択時/非選択時の状態があります。 1 標準のアイコンの多くの場合は下記図のように
非選択時…線アイコン 選択時…塗りアイコン で表現されているものが多いです。 また、重ねてみるとわかりますが、選択時には形状が少し変化しているアイコンもあります。
場合によってはどちらの状態でも塗りのアイコンを使用している場合もあります。
参考-標準的なiOSで使用されるアイコンの状態変化
線アイコン→塗りアイコンの方が視覚的に変化が分かるのでユーザには伝わりやすいのではと感じますがルールさえ統一できていればアイコンのトーンは揃います。
どちらの状態も塗りアイコンの時はコントラストに気をつけないと、視覚に障害を持っている方にとってはわかりづらいものになってしまうかもしれません。
skalapreview を用いる事でモバイルでの視認性の確認をする事ができます。
skalapreviewでは色盲、トリタノピアの方の見え方を擬似的に確認することができます。普段ピンクとして認識しているものがグレー、赤みがかったオレンジのようにスクリーン状では映っている事がわかります。 そしてiOSの標準のアプリは、塗のアイコンでも選択時/非選択のコントラストが分かりやすくついている事がわかります。
塗りアイコン(Solid icon)、線アイコン(Hollow icon)か
UIを作る上で塗りアイコンor線アイコンどちらがいいか議論になる事があります。多分。 その時何を基準に決定すべきか、指標になる項目としては下記が参考になるかもしれません。
- カスタムアイコンのみを使う場合でも、標準アイコンと併用する場合でも、見た目の大きさ、細かさのレベル、視覚的な重みなどを揃えて、同じファミリに属しているように見せてください。
基本的にはiOSの標準アイコンと併用する場合であれば同じファミリに属しているように見せるとあり、基本的にはどちらでも良いという認識です。ただ、先述であげたように、線アイコンの方が状態の変化が分かりやすく使い勝手は良いと感じています。
余談
塗りアイコン(Solid icon)か線アイコン(Hollow icon)かに関しては下記リンクのようにアイコン単体での議論は多くあります。 塗りアイコンの方が認識速度が早いとか書かれていますが、アイコン単体での結果だけではなく、UI全体から見た判断と状態が変化した時にきちんと視認できるものになっているか。など、他の視点も入れ検討しないといけません。
Are Hollow Icons Really Harder to Recognize Than Solid Icons? A Research Study Why hollow icons are more work for your users and ultimately create cognitive fatigue.
まとめ
当たり前のような話ですが、アイコン一つとっても標準のアプリケーションがどう考えられて出来ているか。ガイドラインと照らし合わせるならが見ると多くの発見があります。
すでにユーザが認知しているルールを用いる事でユーザの新たな学習を最小限にできるのが一番の利点であり、UIがガイドラインに沿っておらず独自性の高いものだとユーザはサービスの価値に気づく以前に、新たな学習を強いることになってしまいます。 これは提供者としてもメリットがないように感じます。
見てほしいのはグラフィックの完成度ももちろんあった上で、本来はどのような体験を提供したいかを考慮しながら、アイコンはどうあるべきか。 アイコンに限らず、UIを考える上で独自のものを考えなければいけないケースもあるかもしれません。
そういった時に僕は身の回りにあるガイドラインの事を思い出しながら作ります。変な例えですが、交通ルールが日本の中でバラバラだったら覚えるの大変だなー。とか建築物を建てる上で基準となる法律がなければどうなってしまうだろうとかとか。
ガイドラインが対象にとってどれだけの意味があるのかを一度考えます。 アイコンの話から徐々に逸れていってしまいますが、ガイドラインを前提として捉えることができれば、独自の視点を盛り込めるようになり、アプリケーションとしても良いものができると考えています。
そうなれるようにガイドラインを読み込みつつ、デザインしていきたいと思う次第です。
