アプリ開発におけるアイコンデザインについて

最近はアプリ開発のUI面において少々書いたのですが、全て中国語の文章でしたし、今日のネタはUIが日本語となっていますのでせっかくだから日本語で書きたいと思います

では早速ですが本題に入りましょう

ご覧のとおり、アニメなどについてのニュースアプリです:
アニメニュース

では、これについてなにか違和感を感じているのでしょうか?アイコンについて
おそらく多くのユーザはすでに気づいたのですね、ニュースの横にあるアイコンが全部同じであり、必要のないアイコンとなっているのです。ほとんどの場合、そこにあるアイコンはニュースに添付されている写真のサムネイルとなる立場ですが、ニュースに写真がない場合はそのアイコンを省略するのが基本です、そもそもiPhoneのような小さい画面はただでさえ一行で表示できる文字数が少ないので、このようにタイトルすらまともに表示しきれない場合はデフォのアイコンを表示するのはあまりにもおかしいです(笑)

では次のスクリーンショットです
アニメニュース
これももはや説明不要ですね、アイコンの選択にあまりにもセンスがなさすぎます
カテゴリ画面で、あらゆるカテゴリを表示してくれるのは確かにありがたいものではありますが、この時に使うアイコンはそのカテゴリ自体を表しているため、特に気を使わなければならないのです。が、ご覧のとおり、今度はアイコンを表示するために表示しているような感じです。テニスボールは新作アニメと何の関係がありますか、ラグビーヘルメットはイベント情報と何の関係がありますか、ゴルフボールは放送、上映、配信情報と何の関係がありますか、ベースボールはまた新作アニメ映画と何の関係がありますか(以下略)全てにおいて意味のないアイコンを使っているだけです。前述通り、カテゴリの場合、アイコン自体はそのカテゴリ自体を表す大切なシンボルであるため、大事に選ばなければなりません。アイコンの選択に迷ってどうすればいいかわからなくてこのような全く意味のないアイコンを選ぶのでしたらむしろアイコンを使わないほうがはるかにましです。

続いては最後の画面です
アニメニュース
これも割りとどこがだめなのかわかりやすいですね、そもそも「アイコン」で言ったら前の2枚ですでにご覧になったアイコンを除いて3つしかありません。
まずはこの「今日」のアイコンです。このアイコンは特にiOSやMacにおいて「リフレッシュ」、つまり「更新」の意味です。まあこれで「今日」を表すにはどうしてもダメなのかっていえばそうでもないような気もしなくもありませんが…
続いては昨日のアイコンで、これは「アンドゥ」、つまり「取り消し」を表すアイコンで、「過去へ戻る」という意味合いで「昨日」に使うことも不可はないとも感じます
一番の問題は「過去」です。このアイコンは「さっきの取り消しを取り消し」、要は「やり直す」の意味です。「取り消し」は「過去へ戻る」という意味合いでしたら、この「やり直す」は真逆な立場で、現在いる時点が過去だと考え取り消された「未来」へ行く、という意味合いになります。「未来」へ行くアイコンなのに実際は「過去」へ戻る動作になってしまいます。これもやはりアイコンを選び直したほうが良いのですね。そしてさっきのカテゴリについても述べたとおり、もし本当に自分がよりふさわしいアイコンが見つけられなかったら、むしろアイコンを使わないほうが良いのです

まあここまで言うのは開発者にとってちょっと「文句言い過ぎ」な感もしますが、私はUIを一番重視しているユーザなので(このため動画閲覧もどうしてもQuickTime Xしか使いたくありません、PerianとFlip4macのコンポーネントを入れてほぼ全ての動画ファイルにおいてQuickTimeを使って、それでもどうしてもだめな場合だけMPlayer Xなどのサードパーティ製アプリを使います;ちなみによくMPlayer XはUI面も含めて結構好評なのですが、私からするとあのちょっとだけの違和感がどうしても苦手です(笑))、だいたい新しいアプリを使ってみたらとりあえずUI面をまず評価してしまうのです

そして余談ですが、こんな私なので、アニメもまずキャラデザインと作画クォリティーで見るかどうか判断しているのです(笑)

Author: 星野恵瑠

Mac user, Niji-Ota, Chinese, Now working in Japan at MAGES. Inc., Future's aim is that one day my name can be listed in Wikipedia

3 thoughts on “アプリ開発におけるアイコンデザインについて”

Leave a Reply to Bill gates hxk Cancel reply

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

(;;) (:D) (!!!!) (……) (^o^;) (==) (OoO) (=v=o) more »Note: Commenter is allowed to use '@User+blank' to automatically notify your reply to other commenter. e.g, if ABC is one of commenter of this post, then write '@ABC '(exclude ') will automatically send your comment to ABC. Using '@all ' to notify all previous commenters. Be sure that the value of User should exactly match with commenter's name (case sensitive).