魅力的なアプリアイコンをデザインするための9つのポイント

Cleveroad

CleveroadはモバイルやWeb、アプリなどの開発や、UI/UXデザイン、バックエンドなどをフルスタックで提供する開発会社です。特にスタートアップや中小企業のサポートに力を入れています。

この記事はCleveroadからの翻訳転載です。配信元または著者の許可を得て配信しています。

App Store Optimization: 9 Tricks to Design a Captivating App Icon

あなたの作ったアプリの素晴らしさを、どのように人々に伝えればよいでしょうか? 掲題にあるとおり、「アイコン」はあなたのアプリの魅力を伝えるための大きな要素のうちの一つです。

アプリアイコンにはあなたのアプリの運命がかかっています。あなたの作品が埋もれてしまうか、頭抜きん出て光り輝くかは、アイコン次第です。

今回はどのようにしてユーザーの心をつかむようなアイコンを作ればいいのか、理解を深めていきましょう。

フラットデザイン

アプリのアイコンは、アプリ内部のデザインを反映するものなので、まずはデザインの基本のいくつかに触れておきましょう。

フラットデザインとは、グラデーションやテクスチャ、シャドウなどのディテールを廃したシンプルな2Dのデザインのことを指します。大雑把に言うと、フラットデザインは、アイコンと色とタイポグラフィから構成されています。

how_to_design_an_app_icon_cleveroad_flat_design_concept2

Cleveroadによるフラットデザインのコンセプト

このデザインは「読む」ことに特化しています。サンセリフ体を使うことと同様、シンプルなアイコンとベクター画像を使うことにより、ユーザーがどんなコンテンツでも把握しやすくなります。細かく装飾されたアイコンやベクター画像が必ずしもユーザーに価値があるものであるとは限りません。結局のところ、人々が最も欲していたのは「明確であること」なのです。(中略)

3-how_to_create_an_app_icon_flat_design

Cleveroadによるフラットデザインのコンセプト

マテリアルデザイン

マテリアルデザインは、広く知れ渡った哲学というより、ブランディングされたプロダクトに近い位置づけかもしれません。このデザインのアプローチはGoogleにより構築され、すべてのガイドラインはGoogleにより決められ、そしてコンセプトが変更されるときなどは、Googleにより承認されるのです。

フラットデザインとマテリアルデザインの違いはなんでしょう。この2つはとても似ていますし、そんな疑問が生じるのも不思議ではありません。実際、素人目ではこの2つの違いはほとんど見分けることができないでしょうし、その違いは細かいところにあります。

how_to_create_an_app_icon_material_design

Cleveroadによるマテリアルデザインのコンセプト

マテリアルデザインは、見た目的にはフラットで、色合いもそうなのですが、実は2Dではありません。マテリアルデザインで実現したいのは実世界とデジタルの融合で、オブジェクトに影がついていたり、スキュアモーフィックの面影が見られるのは、そのためです。(中略)

iOS、Android両者間の競争は激しく、それぞれがフラット・マテリアルデザインなどを用い、差別化することに必死ですが、どちらのデザインにも通じて言えることは、「シンプル化がトレンド」だということです。

例えば4月の初めに発表された新しいGoogle Play Family アイコンを見てみましょう。Googleは、とんとん拍子にこのシンプル化を進めているようです。

how_to_create_an_app_icon_google_play_family_new_icons

フラットデザイン・マテリアルデザインの前提知識も得たことで、ここからは魅力的なアプリのアイコンを創る方法に話を進めましょう。

魅力的なアプリをデザインするポイント

1. できるだけシンプルにする

GoogleとAppleはそれぞれ2つの異なるデザイン手法を唱えており、アプリのアイコンに対してもそれぞれ独自の特別な方針がありますが、2つには共通点もあります。それは上述したとおり、ただ単純にシンプルであるべきということです。

具体的には1つのアイコンの中で複数の色や画像を混ぜたりしないということです。アプリのすべての特徴を詰め込もうとしないようにしましょう。よりアプリのコンセプトに焦点があたるようにするべきです。あなたのアプリを表し、記憶に残るような1要素をピックアップしましょう。

注意

ゲームアプリは、この場合のたった一つの例外です。ゲームメーカーの場合、豊富なグラフィックスと鮮明で強烈なキャラクターを見せるべきだからです。しかし、例外とはいえ、やりすぎは禁物です。

7-how_to_design_an_app_icon_design_in_games

2. 独自性を演出する

ユーザーがストアの検索結果を見るときも、スマホのホーム画面を見るときも、あなたのアプリはいつでも他のアプリと並べられます。アプリアイコンの運命は、他の物にまぎれて埋もれてしまうか、逆に劇的に目立つか、二つに一つしかありません。前者のようにならないようにしましょう。

記憶に残る形と文字を使いましょう。ユーザーの注意をつかむだけでなく、ひと目で認識されるようにしましょう。

8-how_to_design_app_icons_the_most_memorable_icons

注意

アイコンのサイズは状況によって様々なサイズが存在します。ストアではより大きく、ホームスクリーンではより小さく、通知センターでは更に小さく表示されます。ですので、アプリのアイコンはどんなサイズでも、分かりやすく、見やすいものにしましょう。

3. タイトルや文章を全文入れない

アイコンで良い印象を与えるには、ひとつのシンボルやロゴがあれば十分です。タイトル全体をひとつのアイコンの中に押し込まないようにしましょう。大抵の場合は見づらく、魅力のないビジュアルになってしまいます。アプリの中身はいつでも説明する機会がありますし、割りきりましょう。

9-how_to_create_an_app_icon_lifesum

4. 明るい色を使う

アプリのアイコンに様々な色を使うことはあまり好ましくありません。限りのあるカラーパレットを選びましょう。良いアプリアイコンを創るには、1つか2つの色に絞るのがベストです。

10-how_to_design_an_app_icon_snapchat

5. 写真は使わない

写真やスクリーンショットは、アイコンデザインではご法度です。

写真は小さいサイズのアイコンでは視認性が悪く、見難くなります。写真やスクリーンショット以外のクリエイティブな方法を探るしかありません。

冒頭から述べています通り、業界的にはスキュアモーフィズムや写実的なデザインからシンプルでミニマルな方向にトレンドがシフトしていることだけは覚えておいて下さい。

11-how_to_design_an_app_icon_instagram_icon

6. リアルを精密に描く

ここに来てなお、リアルに近いビジュアルを使うと決めたなら、その対象物は精密に描き上げる必要があります。テクスチャ、シェイプ、シャドウなど写実的な手法を充分に考慮しましょう。Googleのマテリアルデザインなどを参考にすると良いでしょう。

7. 透明な背景を使用しない

アイコンのふちが必要なサイズより小さかったり、透明な部分があると、暗い背景や逆に明るい(そして多色の)背景に埋もれてしまいます。透過したファイルは使わないようにしましょう。

8. A/Bテストをする

模様や写真などのデザインのある壁紙上では単色の壁紙ほど、アイコンの見栄えは良くないかもしれないことを念頭に置いておきましょう。パステル調や彩度の高い色を含む様々な背景での配置を試しておきましょう。

一つのフォルダにいくつかの自分のデザインをグループ分けしておき、小さいバージョンはよく見えるかなどのチェックもしておくようにしましょう。

PickFuのようなbetaテストを行えるサービスで、アイコンの様々なバリエーションに対する人気を検証などすると更によいでしょう。

9. 他人のアイデアを盗まない

まず、他人のアイデアを盗むのはカッコ悪いのでやめましょう。

また、自分のアートワークが他のデベロッパーのものと混同されてしまいます。そして何よりも、当たり前ながらアプリのアイコンは通常著作権の対象ですし、他のアイコンや画像を複製することはできません。

ですが、実際に成功しているアプリからインスピレーションを受けるのは、むしろするべきことです。

12-how_to_create_an_app_icon_plagiarism

 


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて