アプリアイコンを制作する際に気をつけること

今回はアプリアイコンを制作する際に気をつけておくことや知っておくべきことをまとめました。
Human Interface Guidelinesに書かれていたことや調べたことを書いていきます。

Human Interface Guidelines

・シンプルにする
・単一の焦点を提供する
・機能をすぐに認識できるようにする
・背景がシンプルで透明にしない
・不可欠なものかロゴ以外で文字を使用しない
・画像やスクリーンショットを使用しない
・Appleハードウェア製品の複製をしない
・インターフェイス全体にアプリアイコンを配置しない
・どの壁紙の上に置いてもデザインが保たれるようにする
・アイコンコーナーを四角に保つ

アプリアイコンのトレンドを把握する

・アプリアイコンはトレンドに合わせてしばしばアップデートされる
・有名なアプリのアプリアイコンデザインの履歴を辿っていくと今までのトレンドを知ることができる
・(例)Instagram　　old：リアルな質感でレトロな印象 → new：グラデーション

パターンから考える

パターン1：知名度が高いシンボルロゴを使用する(例)Twitter、Facebook、YouTubeなど
　・背景は白またはコンセプトカラー
パターン2：文字を削ってシンプルにする(例)ZOZOTOWN、huluなど
　・不必要な文字は使用しない
　・無料を表す「FREE」という文言はAppstoreの審査に通らない

パターン3：記号として文字を使う(例)Tumblr、Prottなど
　・アプリやサービス名の頭文字をロゴタイプ、ロゴマーク化する

パターン4：効果的な写真を使用する(例)AWA
　・ごちゃごちゃする、見せたいものがぼやけるなど使いこなすのは難しい
　・使うときは色味の調整を行って可読性を保つようにする
　・写真を使っているアイコンは少ない

パターン5：デザインを差別化する
　・直感的に機能を理解してもらうにはイラストが効果的
　・同じカテゴリのアイコンは似ていることが多い
　・写真 / ビデオはカメラや円形、メールアプリは封筒、タスク管理アプリはチェックなど

パターン6：世界観をアピール(例)FGO、パズドラ、LINEツムツム、グラブルなど
　・登場キャラクターを描くことで作画のタッチや雰囲気をアピールできる
　・ゲーム内のキャンペーンに合わせてアイコンを変更することも可能
　・ゲームアプリ以外ではできるだけ避ける

iOS7以降のアプリアイコンデザイン

・インターフェースやアプリアイコンにおいてフラットデザインが採用されている
・純粋なフラットデザインではなく、シートを重ねた奥行きをキーワードにしている

フラットデザインについて

特徴
　・グラデーションや影などの立体感を排除
　・金属光沢などの反射を排除
　・コントラストの強いカラーを使用
　・平面的な外観
　・グリドレイアウトのような均等的な配置

メリット
　・コンテンツを強調できる
　・データサイズを縮小できる
　・開発コストを削減できる

デメリット
　・完成度に大きな差が出る
　・ユーザーに不親切になりやすい
　・プラットホームによってルールが異なる

方法
・豊かな余白でコンテンツを強調
・2種類以上のコンテンツは別の画面に表示
・1つの見出しでのフォントは1種類
・クリックできるところはキーカラーに指定
・フォントカラーはベースとキーカラーを中心に2~3種類に絞る
・枠線は作らず面で構成

まとめ

こんちゃす、めいです。

アプリアイコンはサイズが小さいですが、その中にも様々なデザインルールがあります。
デザインルールに沿ってアプリアイコンを考えていくことで良いアプリアイコンを制作することができるかと思います。
ぜひ参考にしてください。

※この記事は2019/07/02に投稿されたものです