魅力的なアプリアイコンをデザインするための9つのポイントCleveroadCleveroadはモバイルやWeb、アプリなどの開発や、UI/UXデザイン、バックエンドなどをフルスタックで提供する開発会社です。スタートアップや中小企業のサポートに力を入れています。この記事はCleveroadからの翻訳転載です。配信元または著者の許可を得て配信しています。掲題にあるとおり、「アイコン」はあなたのアプリの魅力を伝えるための大きな要素のうちの一つです。アプリアイコンにはあなたのアプリの運命がかかっています。あなたの作品が埋もれてしまうか、頭抜きん出て光り輝くかは、アイコン次第です。今回はどのようにしてユーザーの心をつかむようなアイコンを作ればいいのか、理解を深めていきましょう。フラットデザインアプリのアイコンは、アプリ内部のデザインを反映するものなので、まずはデザインの基本のいくつかに触れておきましょう。フラットデザインとは、グラデーションやテクスチャ、シャドウなどのディテールを廃したシンプルな2Dのデザインのことを指します。大雑把に言うと、フラットデザインは、アイコンと色とタイポグラフィから構成されています。Cleveroadによるフラットデザインのコンセプトこのデザインは「読む」ことに特化しています。サンセリフ体を使うことと同様、シンプルなアイコンとベクター画像を使うことにより、ユーザーがどんなコンテンツでも把握しやすくなります。細かく装飾されたアイコンやベクター画像が必ずしもユーザーに価値があるものであるとは限りません。結局のところ、人々が最も欲していたのは「明確であること」なのです。(中略)Cleveroadによるフラットデザインのコンセプトマテリアルデザインマテリアルデザインは、広く知れ渡った哲学というより、ブランディングされたプロダクトに近い位置づけかもしれません。このデザインのアプローチはGoogleにより構築され、すべてのガイドラインはGoogleにより決められ、そしてコンセプトが変更されるときなどは、Googleにより承認されるのです。フラットデザインとマテリアルデザインの違いはなんでしょう。この2つはとても似ていますし、そんな疑問が生じるのも不思議ではありません。実際、素人目ではこの2つの違いはほとんど見分けることができないでしょうし、その違いは細かいところにあります。Cleveroadによるマテリアルデザインのコンセプトマテリアルデザインは、見た目的にはフラットで、色合いもそうなのですが、実は2Dではありません。マテリアルデザインで実現したいのは実世界とデジタルの融合で、オブジェクトに影がついていたり、スキュアモーフィックの面影が見られるのは、そのためです。(中略)iOS、Android両者間の競争は激しく、それぞれがフラット・マテリアルデザインなどを用い、差別化することに必死ですが、どちらのデザインにも通じて言えることは、「シンプル化がトレンド」だということです。アイコンを見てみましょう。Googleは、とんとん拍子にこのシンプル化を進めているようです。フラットデザイン・マテリアルデザインの前提知識も得たことで、ここからは魅力的なアプリのアイコンを創る方法に話を進めましょう。できるだけシンプルにするGoogleとAppleはそれぞれ2つの異なるデザイン手法を唱えており、アプリのアイコンに対してもそれぞれ独自の特別な方針がありますが、2つには共通点もあります。それは上述したとおり、ただ単純にシンプルであるべきということです。具体的には1つのアイコンの中で複数の色や画像を混ぜたりしないということです。アプリのすべての特徴を詰め込もうとしないようにしましょう。アプリのコンセプトに焦点があたるようにするべきです。あなたのアプリを表し、記憶に残るような1要素をピックアップしましょう。注意ゲームアプリは、この場合のたった一つの例外です。ゲームメーカーの場合、豊富なグラフィックスと鮮明で強烈なキャラクターを見せるべきだからです。例外とはいえ、やりすぎは禁物です。独自性を演出するユーザーがストアの検索結果を見るときも、スマホのホーム画面を見るときも、あなたのアプリはいつでも他のアプリと並べられます。アプリアイコンの運命は、他の物にまぎれて埋もれてしまうか、逆に劇的に目立つか、二つに一つしかありません。前者のようにならないようにしましょう。記憶に残る形と文字を使いましょう。ユーザーの注意をつかむだけでなく、ひと目で認識されるようにしましょう。注意アイコンのサイズは状況によって様々なサイズが存在します。ストアではより大きく、ホームスクリーンではより小さく、通知センターでは更に小さく表示されます。アプリのアイコンはどんなサイズでも、分かりやすく、見やすいものにしましょう。タイトルや文章を全文入れないアイコンで良い印象を与えるには、ひとつのシンボルやロゴがあれば十分です。タイトル全体をひとつのアイコンの中に押し込まないようにしましょう。場合は見づらく、魅力のないビジュアルになってしまいます。アプリの中身はいつでも説明する機会がありますし、割りきりましょう。明るい色を使うアプリのアイコンに様々な色を使うことはあまり好ましくありません。限りのあるカラーパレットを選びましょう。良いアプリアイコンを創るには、1つか2つの色に絞るのがベストです。写真は使わない写真やスクリーンショットは、アイコンデザインではご法度です。写真は小さいサイズのアイコンでは視認性が悪く、見難くなります。写真やスクリーンショット以外のクリエイティブな方法を探るしかありません。冒頭から述べています通り、業界的にはスキュアモーフィズムや写実的なデザインからシンプルでミニマルな方向にトレンドがシフトしていることだけは覚えておいて下さい。リアルを精密に描くここに来てなお、リアルに近いビジュアルを使うと決めたなら、その対象物は精密に描き上げる必要があります。テクスチャ、シェイプ、シャドウなど写実的な手法を充分に考慮しましょう。Googleのマテリアルデザインなどを参考にすると良いでしょう。透明な背景を使用しないアイコンのふちが必要なサイズより小さかったり、透明な部分があると、暗い背景や逆に明るい(そして多色の)背景に埋もれてしまいます。透過したファイルは使わないようにしましょう。A/Bテストをする模様や写真などのデザインのある壁紙上では単色の壁紙ほど、アイコンの見栄えは良くないかもしれないことを念頭に置いておきましょう。パステル調や彩度の高い色を含む様々な背景での配置を試しておきましょう。一つのフォルダにいくつかの自分のデザインをグループ分けしておき、小さいバージョンはよく見えるかなどのチェックもしておくようにしましょう。PickFuのようなbetaテストを行えるサービスで、アイコンの様々なバリエーションに対する人気を検証などすると更によいでしょう。他人のアイデアを盗まないまず、他人のアイデアを盗むのはカッコ悪いのでやめましょう。自分のアートワークが他のデベロッパーのものと混同されてしまいます。何よりも、当たり前ながらアプリのアイコンは通常著作権の対象ですし、他のアイコンや画像を複製することはできません。実際に成功しているアプリからインスピレーションを受けるのは、むしろするべきことです。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。