検索について

こんにちは。今回のブログ更新担当のデジマースのはらです。

皆さんはアプリやwebサイトで欲しい商品や見たいコンテンツなどがある時、どのようにして探しますか?「新着」ページや「人気」ページ、あるいは「おすすめ」などから探しますか?
最近流行している商品などは、大抵どのサービスでも目につくように紹介されているので、上記の方法ですぐに見つかるかもしれません。
しかし少し古い商品、あるいはマニアックなコンテンツなどはすぐには見つかりません。そんな時、皆さんはサイト内で何をしますか? おそらく「検索」を行いますよね? 虫眼鏡のアイコンやテキストフィールドを探しますよね?
と、いうことで今回は「検索」について紹介していきたいと思います。

代表的な検索方法は?

代表的な検索方法は2つ、「キーワード検索」と「カテゴリ検索」があります。今回は見せ方や関連の機能も合わせて解説して行きたいと思います。


1.キーワード検索

読んで字のごとく、入力されたキーワードを基に情報を検索する方法です。キーワード検索は意外に難しく、慣れている人は多いのですが、普段アプリやwebを使わない方には高度で、本当に必要な情報を引き出す言葉を見つけるには慣れが必要です(慣れていても検索ワードを絞る事は難しい時があります)。少しでも検索を簡単にするためには、ローマ字・ひらがな・カタカナなど、どの入力方法でも検索できたり、検索候補の表示(サジェスト表示)されることが望ましいです。

検索ボックスの位置
商品やコンテンツの多いECサイトでは、サイトTOPに検索ボックスを配置することが望ましいです。なぜかと言いますと、「これが欲しい」と目的を持ったユーザーは、まずはじめに目当てのものを探すからです。その際に検索機能がサイト下部やメニューの奥に隠れていると、使用するたびにストレスになってしまいます。ですので特別な理由がない限りフッターや本文への検索ボックスの配置は避けたほうが良いです。(検索結果に情報が引っかからなかった場合のために検索ボックスをフッターに配置する事は問題はありません)
TOPに検索ボックスがあれば、慣れているユーザーには自然で使いやすくなります。また、不慣れなユーザーにとっては見つけやすい位置となります。

検索ボックスのデザイン
キーワード検索は通常テキストフィールドとボタンで構成されています。検索ボックスのデザインは、視認性が高い事が重要で、特にテキストフィールドの視認性が悪くならないように気を付けてデザインすることが重要です。検索開始を決定するボタンには「検索」「GO」「SEARCH」「虫眼鏡アイコン」などの文字・アイコンが一般的に使用されています。また、検索ボックス内にボタンの要素は含めず変わりにキーボードの決定ボタンで検索を開始するパターンもあります。


2.カテゴリー検索

カテゴリ検索は「バラエティ」「スポーツ」「ファッション」などに分けてまとめられた情報を、目的の情報まで選択して辿っていく検索方法です。ユーザーがキーワードを考えたり文字入力をする必要が無いため、分かりやすくカテゴリ分けされていれば、効率よく目的の情報までたどり着けます。カテゴリの分かりづらいものが多い場合に使用するとかえって使いにくくなってしまいます。

カテゴリ検索のデザイン
カテゴリ検索の見せ方や仕組みはサービスによって大きく変わってきます。シンプルなカテゴリ検索の場合、カテゴリの大項目にアイコンを使用したり、文字のサイズを変えてメリハリをつけるとより直感的に伝わり、使いやすくなります。

関連機能
カテゴリ検索時に、カテゴリ内の検索数を表示する機能を「ファセットカウント」と呼びます(例1)。これによりユーザーは求めているカテゴリの検索結果をページ遷移を行うことなく確認する事ができます。他には、検索時に「価格、色、サイズ、性別、機能」などの複数の条件を指定して結果を絞り込む「絞り込み機能(例2)」があります(そのままの呼び方ですね…)。

 


検索は便利です。しかし、めんどくさい作業です。検索機能は「手間が少なく正確で、目的のものに最短でたどり着ける」という事が重要です。位置や仕組を工夫して使ってもらえる検索機能にしていく事が大切です。また、検索機能の改善はすぐに大きな成果につながるわけではないのですが、こうしたユーザビリティの改善がサービスの印象を変えます。検索機能を実装しているサービスがある以上、実装していないと「こんな機能もないのか…」思われてしまうかもしれません。

アイコンデザイン ―基礎編―

こんにちは!
みなさんのお住まいの地域は、雪は降りましたでしょうか?
私の地元は冬でもほとんど雪の降らない地域なので、雪と聞いただけでワクワクしてしまいました!

さて、今回のテーマですが、「アイコンデザイン ―基礎編―」についてです。
アイコンを使いたい!作りたい!でもどんなデザインが良いのかわからない…、意見が割れてしまって決まらない…。
そんな時のために、そもそも良いアイコンとは何か?を初心に返ってまとめてみました。

ここで言うアイコンとは、「アクションを直感的に伝える為の記号」を指します。
アプリやWEBサイトで、「物事を簡単な絵柄で記号化して表現(https://ja.wikipedia.org/wiki/アイコン)」した物です。

例えば、皆さんは下記の図のような状況で「○○を調べたいな…」と思った時どうしますか?

「虫眼鏡マーク」をタップする、と言う方が多いのではないでしょうか。
虫眼鏡マークは「調べる・検索」の意味を持つモチーフとして一般的ですので、直感的に「このアイコンを選択すれば調べられるな…」と想像できたかと思います。

このように、アイコンは出来る事や意味が記号として視覚的に表現されているので、ユーザーに直感的に何が出来るのか理解してもらう事が出来ます。


アイコンのメリットとデメリット

メリットは、記号として視覚的に表現されている事で、ユーザーに直感的に概要を理解してもらう事が出来ます。
また、機能の説明が多くなってしまったり文章が長くなってしまう場合に、アイコン化することで親近感のある見やすいデザインが出来ます。
これらによりUIの最適化に繋げることが出来ます。

デメリットは、ユーザーにとって親近感のないモチーフや認識しづらい形状だと、意味が伝わらず機能を理解してもらえません。
アイコンにしたことで余計にわかりづらいと言う、本末転倒な結果になってしまっては困りますね…。


良いアイコンとは?

アイコンは、「○○したい!」というユーザーの目的が達成出来るように誘導してあげなければなりません。
その為に気をつけたい事は、大きく分けて3つです。

1)親しみやすい形

多くの人に意味を理解してもらえる形にしましょう。
一般に広く普及しているアイコンなど、ユーザーにとって見慣れたアイコン・モチーフである程わかりやすいです。
デザインに情熱を注ぐあまり、またはクライアントからの要望で、凡庸から外れた独創的な物を求められるかもしれません。
ですが、そうして出来た物はアートの観点から見れば素晴らしいかもしれませんが、UIデザインとしては適切でないこともあります。
ユーザーはアートを見て感動したいのではなく、目的を達成する事を最優先に考えているはずです。

2)シンプルに

必要最小限に簡略化しましょう。
アイコンは小さく表示されるので、明確で何の形か認識しやすく、覚えやすい物がよいです。
装飾過多だと視認性が悪いだけでなく、画面全体のUIに悪影響を及ぼしてしまう事もあります。

3)テキストラベルをつける

サポートとしてテキストラベルをつけることも考慮しましょう。
全ての人がアイコンだけを見て、それぞれの意味を正確に理解することは難しいです。
もしユーザーがアイコンのみの表示で理解できなかった時、目的を達成するまで1つ1つ自分で確認してねとまかせてしまっては快適とは言えませんよね。
「わかりづらいな…」と使ってもらえなくなってしまいます。
テキストラベルをつけることで、ユーザーの想像する行程を省略し、統一された正確な意味を伝えることが出来ます。


おわりに

いかがでしたでしょうか?

今回はアイコンデザイン基礎編と言うことで、初心に返って考えてみました。
「初めてこのアイコンを見たユーザーは、意味を理解してアクションを起こせるだろうか?」と言う問題提起を常に忘れないようにしましょう。

それではまた!コンでした。

マテリアルデザイン~実演編~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!
2017年初アップとなります♪

先日鏡開きでしたが、おもちは頂きましたでしょうか?
私は年末より鏡餅をロックオンしておりましたのでしっかり食べました!

さてさて、今回は良く見るWEBサイトの表現をマテリアルデザインにしてみたらどうなるのかな?
という実験的なことを部分的にとりあげてみたいと思います。
言葉より実際に目に見えた方が分かりやすいので、画像中心におおくり致します。
※わたくし個人の主観が入っております。

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*


①メニューを開く

よく見るメニューマークですね。タップすると何らかの形でメニューが開かれます。
左側の「従来」の形は見たことがある方が多いと思いますが、ページが切り替わるので、
一瞬メニューを開く流れが目の前からプツっと途切れたように見えます。遷移が遅かったら尚更です。

右側の「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
よくよく見るとメニューマークが切り取られ開かれたメニューに付属し、最後には戻る矢印に変換されています。
開いてから閉じるところまでさりげなくユーザーを誘導しています。

②ボタンタップ

一見、どちらのボタンもタップ時に色が変わっていますので、押したかどうかの判別はしやすいです。
あえてを言えば「マテリアルデザイン」の方はタップした際に指で触れた部分に変化が起きているため自分がどの部分に触れたか、よりリアルに体感できますね。

③ログインの遷移

手順としては、どちらも申し分はないですが①のメニューを開く同様「マテリアルデザイン」の方はタップしてからメニューが開くまでの流れが途切れずユーザーを誘導してくれています。
人は動いているものについつい目が向いてしまうものですが、モーションが入ることで自然とユーザーの行動を分かり易くサポートしてくれているのですね。

如何でしたでしょうか。
あくまでほんの一部ですが、見え方・捉え方に違いがあるのが分かると思います。
流れが切れずスムーズに遷移してくれるとモチベーションも上がりますよね。

一旦、今回にてマテリアルデザインについて最終回となります。
機会があればまた、同テーマについて書いていきたいと思います。

★★過去記事おさらいはこちら★★


マテリアルデザインを読む

マテリアルデザイン~アニメーション~を読む

マテリアルデザイン~アニメーションpart2~を読む

次回は別テーマをデザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。
それでは、またお会いしましょう!

ユーザーとの必然的UIリテラシー(ITリテラシー)格差を縮める為には?

今回は、サービス側とユーザー側のUIリテラシー格差(UI理解力の格差?)について考えてみたのでお付き合いください。


高リテラシー故に陥る危険な考え

生まれて間もなくスマホに触る…ともいえる世の中になりましたが、
機能やUIのリテラシーを高めるには、それなりの年月と経験、趣向が必要です。
また、アクティブ中心層はスマホの普及とともに増加していると思われますが、
全体に目を向けると、一定の初心者層は、いつの時代でも生まれ存在している事実を忘れてはいけません。

そこで問題となるのが、高リテラシー層の専門用語/先進的機能の常用です。
クールで先進的な表現が一見目を引きますが、
多くのユーザーからして見ればコワレモノに触る状態になってしまっているのが現実です。

リテラシー強者と弱者がターゲットユーザーに含まれる場合は、
弱者の利用を意識したUI設計が必要になりますが、
サービス側はその分野を知るが故に、一般的尺度にズレが生じがちなのです。

レベルアップを要求させない

あえてターゲットを絞った敷居の高いサービスなら問題ないのですが、
一般的なサービスであれば、「仕組み」「機能」を理解させる前提での要学習UIは避けるべきで、
本に例えるなら「実用書」よりも「雑誌」的な受け入れやすさが必要だと考えます。
サービスをわざわざ身構えて使用したいニーズは無いのではないでしょうか。

アイコン表現について紹介します。
「ハンバーガーアイコン」はメニューを表すものとして、業界では一般的ですが、
リテラシーの低い利用者にとっては認知できない表現でしょう。

数々の検証結果も見つけられるように、
アイコン記号だけではなく、文字によるラベル表現が伴った方が理解と実際の利用が多いようです。
全てをその様にする必要はありませんが、
単純な選択肢として、UIは、高いリテラシーと経験を必要としない表現からスタートするべきです。

受け売りではありますが、
必然的な考えとして、
「UI設計に関わる人間は新しい表現を認めない/追わない」ことで、
サービスの敷居を下げる必要があるのではないでしょうか。

ついつい新しいものを取り入れて先進的にサービスを設計したいものですが、
利用者にとっては、
求めたコンテンツを手に入れるのが結局の目的で、
そのための手段は、できるだけストレスのない、
空気のように慣れ親しんだ理解あるUIコンポーネントなのではないでしょうか。

色々な方向での考え方があるとおもいますが、
皆様はどうお考えでしょうか。

次回も引き続き、UI/UXとサービス設計を妄想してみますので、
是非お付き合いください。

知らないと会話がストップ!?
コントロール系部品の名前(2)

新年最初の更新を担当いたします。デジマースの原です。
明けましておめでとうございます。
2017年もデジマースブログをよろしくお願い致します!

それでは昨年のUIに関する話題を振り返ってみたいと思いま………いえ、その前にまだ紹介していない内容がありました。それは…「地味ですが基本となるコントロール系部品(2)」の紹介です!
早速ですが第2段の紹介を始めていきたいと思います。

今回は「ステッパー」「ページコントロール」「テキストフィールド」「スイッチ」「チェックボックス」「ラジオボタン」についてご紹介いたしました。
各コンポーネントは、使用する場所を誤れば意味のないものとなってしまいます。そのため、名前だけではなく使用場面を合わせて知っておく事も大切です。
前回紹介したコンポーネントと、今回紹介したものを合わせて覚えれば、UIに関する打ち合わせで以前より会話がスムーズに進行すると思います。
それでは、みなさま本年もよろしくお願い致します。

マテリアルデザイン~アニメーションpart2~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

2016年も残すところあとわずかになりました。
お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。
日に日に時間の流れが速くなっているような気がします。

さてさて、前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。
今回も引き続きアニメーション部分に触れていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*


簡単に前回のおさらい!「マテリアルデザインのアニメーション」とは?

★マテリアルデザインとは触感的表現を含ませたものをさしますので、
よってアニメーション効果にもリアリティのあるルールを適応
★現実的な動きに合わせたモーションが推奨されている

マテリアルデザインのアニメーションの利点とは?

さっそくではありますが、アナタは下記の様に見たい記事を見つけました。

pic_161222_01

如何でしょうか。このパッと切り替わる動作は普段見慣れている人が多いかと思います。
求めている動作が早いことはとても良い事です。
まるで、長いマラソンのスタートとゴールの部分だけを見た様な感じです。

そこで、もっとユーザーメリットが組み込まれたらどうでしょう?
動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、
ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。

またまた、アナタは下記の様に見たい記事を見つけました。

pic_161222_02

如何でしょうか。動作と結果の間にこのようなモーションを加えることで、
ユーザーは自分が行った行動に対して、アクションが起こるので、
今自分がどのような状態なのかが一目で分かる状態になります。

長いマラソンはスタートとゴールの間に、走っている過程があります。
その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動き
を加えスライドや拡大などのモーションで次のページへ誘導を行います。
つまり今までなかったはっきりとした遷移過程のアニメーションによって、
ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)
次々起こる動作をスムーズに解消していくことが出来ますね。

最後に

現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。
これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり……様々なものがあります。

もしこれからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。
特に気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。

まだまだ、マテリアルデザインは奥が深いですね。
次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

アプリに必要なアイコンサイズ-Android編-

今回のテーマは、「アプリに必要なアイコンサイズ-Android編-」です。

前回私が作成した記事、「アプリに必要なアイコンサイズ-iOS編-」に続いて、Android端末のホーム画面に表示されるアイコンサイズについてご紹介したいと思います!
iOSのアイコンサイズも知りたいと言う方は、ぜひ「iOS編」の記事もご覧ください!


Androidのホームアイコンてどんな形?

さて、みなさんはAndroidのホームアイコンと言うと、どのような形を思い出しますか?四角でしょうか?丸でしょうか?

Androidのホームアイコンは、ベースの形に決まりはありません。視認性やコンセプトと整合性が取れていれば、自由に作ることが出来ます。
色合いだけでなく形も様々なので、ホーム画面が賑やかになり、見ていて楽しい気持ちになりますね!
また、アプリ開発者側としても、アプリの特徴や中身をより効果的に伝えることが出来ます。系統が同じアプリが並んだ場合も、より分かりやすい見た目である方がユーザーの意識が向きやすくなります。

私は各Android端末の「設定」アイコンが好きです。歯車や工具をモチーフとしていることが多く武骨な印象になりがちですが、ベースの形に決まりがないおかげで、モチーフの凹凸を活かした表現ができます。
端末やOSによってフラットだったりシャドウが効いていたり、アクセントカラーが入っていたりとシンプルながらも特徴が出ていて面白いです。

話が少し逸れてしまいましたが、ここからが本題です。自由に形が作れても、サイズには決まりがあります。
下記は、2016年12月16日時点のデータです。仕様に変更があった際は、都度都度ブログにまとめていきたいと思います!

それでは、以下がサイズ一覧です。


Androidホーム


Android番外編

いかがでしたでしょうか?

サイズ内に収まっていれば、形は自由です。iOSでは出来ないようなデザインに挑戦するも良し、AndroidとiOSでも形を統一してブランディング重視のデザインにするも良し。
アプリの良さが伝わるような素敵なアイコンを作ってみてください。

今後も、作成に必要なサイズの調査は行っていきますので、新情報が出た際は、随時こちらでまとめていきたいと思います。

iOSに必要なアイコンサイズは、下記のページにまとめてありますので、興味のある方は覗いてみてください!
アプリに必要なアイコンサイズ-iOS編-

それではまた!デザイン業務に関わっております、デジマースのコンでした。

【Adobe Animate CC】Flashツールから進化したWebアニメーションとは

今回はWebの一時代を華やかに着飾った「Flash」の、
代表的な制作ツールの進化(需要対応?)についてです。


そもそも「Flash」とは?

元々は旧Macromediaが開発したインタラクティブWEBアニメーションファイルを制作するツールで、
現在はAdobe内にて開発が継続しています。
Webページの切り替えにオーバー表現なアニメーションが展開されたり、
アーティスティックな個人WebサイトのUIでは目を奪われる表現に使われたり、
さらには、
YouTubeなど、Web動画再生の仕組みにも過去使われていました。

そんなFlashの制作ツールはタイムライン制御GUIによる直感的な操作が特徴で、
JavaScriptやhtmlなどが苦手なWebデザイナーでも簡単にアニメーションが作れたことで大変支持を得たのです。

「Flash」で出来ること

また、
特に独自のActionScriptを使用することでインタラクティブな制御か可能となり、
プログラムスキルがあればFlashアプリも作ることが出来る特徴があります。

近年では、SEO対策や脆弱性問題とブラウザ組み込みプラグインという特性上から標準搭載されなくなっている傾向もあり、
AdobeはFlashを「2020年末に終了」を正式発表しております。

時代の流れにも対応

そんな、Web業界で余命を宣告されたFlashのオーサリングツールである「Adobe Flash」ですが、
ツールの名称を「Adobe Animate CC」に変更して開発が継続されることになり、世のフラッシャーに希望を与えました。

注目は、近年対応を進めてきた「HTML5 Canvas」機能の実装によるJavaScriptアニメーションアウトプットであり、
今後のアップデートによって、動画書き出し含めて機能充実が期待されています。

「Adobe Animate CC」の活用

個人的な意見を述べるのであれば、
デザイナーが慣れ親しんだこのオーサリングツールを、
最終的なアウトプットやコンテンツを制作する目的に限定するのは大変もったいないので、
UIの確認を行う「プロトタイピング」の工程で大いに活躍することが出来ると考えています!

UX全体を考慮するのであれば単純な画面遷移アニメーション(トランジション)具合も重要なサービスの振る舞いになってきますので、
「静」でなく「動」の表現を企画者や開発者に伝える手段として適切なツールなのではないでしょうか。

「Adobe CC」を導入している環境であれば「Adobe Animate CC」を是非活用して、
プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。

次回も日々変化するWeb制作環境などにスポットを当ててご紹介します。
サービスデザインに関わっているデジマースのネモトでした。

知らないと会話がストップ!?
コントロール系部品の名前(1)


「ちょっと待ってください、ピッカーって何でしたっけ?」

ミーティングで飛び交うUIの用語、何か分からないまま話を進めてしまった…。質問して話の流れを止めてしまった…。
そんな経験をしたことのある今回のブログ更新担当のデジマースのはらです。こんにちは!

UIのミーティングをスムーズに進行するためには、やはり使用される各部品の名前を知っておく必要があります。あいまいな表現で相手に伝えたがために、のちに話が食い違う、なんて事があるかもしれません…。

%e3%83%96%e3%83%ad%e3%82%b0_161201_01

ということで今回も、私の前回のブログに引き続き、UIで使用される部品の紹介をします!
紹介する部品は、地味ですが基本となるコントロール系部品です。
少し知っているだけでも、打ち合わせがスムーズになると思います!

%e3%83%96%e3%83%ad%e3%82%b0_161201_02

今回は、コントロール 系部品を6種類、名前と使用場面を合わせて紹介しました。
名前をなんとなくでも頭に入れておくと、打ち合わせの最中に「あっ、これのことだ」となると思います。
まだまだ沢山紹介したいよく見るコンポーネントがあるのですが、量が多いのでそれはまた次回の更新で紹介したいと思っております。

アプリに必要なアイコンサイズ-iOS編-

こんにちは!
今回のテーマは、「アプリに必要なアイコンサイズ-iOS編-」です。(2018年8月更新)
ここで言うアイコンとは、iPhoneのホーム画面などで表示される角丸の付いた四角いアイコンのことです。

pic_161124_01

表示される場所は4ヵ所あります。上記の「アプリアイコン(App)」と、「スポットライト(Spotlight)」「設定(Settings)」「通知(Notification)」です。
「スポットライト」は、ホーム画面を左スワイプした時などに出てくる、検索画面の候補や結果として表示されます。「設定」は、設定アプリ内のリスト左側に表示されます。

pic_161124_02

初めてアプリを作る方は、サイズはいくつ?何個作ればいいの?そもそも1サイズじゃ駄目なの?と疑問が沢山かと思います。
そんな時の為に、iOSアプリに必要なアイコンのサイズをまとめました。

留意事項として、アイコンのサイズは、OSのバージョンアップのタイミングで変化する場合があります。あくまで、2018年8月時点のデータですのでご注意ください。
サイズが変わった際は、都度都度ブログにまとめていきたいと思います!

それでは、下記からサイズ一覧となります。


アイコンサイズ

iPhone

Xcode サイズ(px)
iPhone App
(iOS7-11)
180×180 (60×60 @3x)
120×120 (60×60 @2x)
Spotlight
(iOS7-11)
120×120 (40×40 @3x)
80×80 (40×40 @2x)
Spotlight
(iOS5,6)
Settings
(iOS5-11)
87×87 (29×29 @3x)
58×58 (29×29 @2x)
Notification
(iOS7-11)
60×60 (20×20 @3x)
40×40 (20×20 @2x)

iPad

Xcode サイズ(px)
iPad Pro App
(iOS9-11)
167×167 (83.5×83.5 @2x)
iPad App
(iOS7-11)
152×152 (76×76 @2x)
76×76 (76×76 @1x)
Spotlight
(iOS7-11)
80×80 (40×40 @2x)
40×40 (40×40 @1x)
Settings
(iOS5-11)
58×58 (29×29 @2x)
29×29 (29×29 @1x)
Notification
(iOS7-11)
40×40 (20×20 @2x)
20×20 (20×20 @1x)

App Store

Xcode サイズ(px)
App Store 1024×1024 (1024×1024 @1x)

※記載されている情報はXcode9向けのものとなっております。(2018年8月更新)


角丸について

iOS向けのアイコンは全て角が丸くなっています。
この角丸ですが、単純に半径の値を設定するだけでは表現出来ないApple独自の楕円になっています。
公式のテンプレートがありますので、アイコン作成の際はこちらを使う事をオススメします。

Human Interface Guidelines【Apple Design Resources】
※Apple公式の開発者向けページへ遷移しますので、テンプレートをダウンロードして下さい。


いかがでしたでしょうか?
コチラを確認しながらぜひ素敵なアイコンを作ってみて下さいね。

それではまた!デジマースのコンでした。