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

Pocket

今回のテーマは、「アプリに必要なアイコンサイズ-iOS編-」です。
Androidのアイコンサイズも知りたいと言う方は、ぜひ「Android編」の記事もご覧ください!

ここで言うアイコンとは、iPhoneのホーム画面などで表示されるアイコンのことです。

pic_161124_01

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

pic_161124_02

アプリ開発に関わっている方にとっては、頭を悩ませる要素の1つですよね…。
また、これからアプリを作りたい!と思っている方は、サイズはいくつ?何個作ればいいの?そもそも1サイズじゃ駄目なの?と疑問が沢山かと思います。

そんな時の為に、必要なアイコンのサイズをまとめました。
自社で開発する際にまとめたデータとなりますので、角丸の半径などは目安として考えてもらえればと思います。

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

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


iPhone

pic_161124_03


iPad

pic_161124_04


iPad Pro

pic_161124_05


AppStore申請用

pic_161124_06


いかがでしたでしょうか?
1つアプリを作るのに、こんなに沢山のサイズが必要なのか…と驚いた方もいるかもしれません。

基準となるアイコンを1つ作って、それを拡大・縮小すれば良いのでは?と思うかもしれませんが、それだと角丸の比率が変わってしまう場合があります。
比率が違うと実機で表示された際、アイコンの周りに意図しない枠線が付いてしまう事がありますので、1つ1つ丁寧に確認・作成を行って下さい。

せっかくプロジェクトメンバーと意見を出し合い、こだわって作ったアイコンです。
最後の詰めまでかっこよく決めてあげてください。

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


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


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

Pocket

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

Pocket

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

前回の記事にて、マテリアルデザインはこのようなもの、とざっくりお話しさせて頂きました。
今回は「マテリアルデザインのアニメーション」に触れていきたいと思います。

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


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

★「マテリアルデザイン」をそのまま直訳すると「物質的デザイン」という意味になる!
★デバイスが変わってもユーザーが使いやすいUI表現を目指す!
★フラットデザインに「光」や「影」、「奥行き」の触感的表現を含ませたものが「マテリアルデザイン」
★マテリアルデザインでは影の要素が大事!
フラットデザインとは異なりオブジェクト同士の階層の構造が重要になり、高さの概念がある。
★マテリアルデザインでは、1つのページ内で色を多様しません。

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

アニメーションといえばざっくりいえば動いているものを連想しますよね。
ですがマテリアルデザインとは触感的表現を含ませたものをさしますのでアニメーション効果にもリアリティのあるルールを適応させます。

例えば……

pic_161118_01

pic_161118_02

コロコロ…

pic_161118_03

紫のボールが先にゴールへたどり着きました。
もちろん紫のボールの方が急斜面になっていますので、スピードが早くなります。
黄色のボールの方は斜面が緩いのでゆっくりとした速さで進んでいきます。

この結果は現実的な自然なのものとなっています。
けして、紫のボールと黄色のボールが距離は同じといえど、斜面の関係から同じ速さにはなりません。

★基本的に状態が同じものを除き、アニメーションを行う際は個々のUIパーツが加減速され、等速の動きは致しません。
現実的な動きに合わせたモーションが推奨されます。

pic_161118_04

仮想ではなく現実によせることで、よりユーザーの視点や動きに合わせた表現が可能になるそう。
静止画の見え方だけではなく動的な動きの見せ方も新しさを感じますね。

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

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

Pocket

8bitに学ぶUIデザイン

Pocket

今回は、「8bitに学ぶUIデザイン」を考えてみました。


「8bit」とは?

「8bit」の言葉の響きに、あの古臭いやつね…とネガティブな想像する方もいると思いますが、心躍る方がいれば今回の内容について理解が早いです。

昨日(2016/11/10)は往年の名8bit家庭用ゲーム機がダウンサイジングして発売されて話題となっており、今の情報過多の時代にある意味新鮮に受け止められているのではないでしょうか。
今回は、そんな80年代に活躍したコンピューターゲーム機の画面表現力を、象徴的意味合いで「8bit」という用語に置き換えて使います。
正しい解説については割愛します。

8bitの表現をポジティブな目線で捉えると以下があげられます。

1)扱う情報量が少なく、リソース比重が現在と比較すると「アイデア」に多く充てることが出来た。

2)個人でも十分作業が出来た。

3)低解像度/低発色数による簡素な表現であったため、利用者の想像力を掻き立てた。

4)ハード性能不足による「制約」に挑戦する熱い想いが制作者/利用者共に生まれた。

5)必然と「アイコン化/シンボル化」された画像は、今の時代でも新たなファン層を広げている。

以上でしょうか。

今回のテーマはここからが本題でして、
ある意味何でも表現可能になった現在の情報デザインに、8bit時代の環境や表現、そして制限を「デザインルール」として充ててみようという記事です。
前置きが長かったですね。

広い表現力の弊害

現在、情報デザインを考える際、
「広い表現の幅」は、問題点の認識を遅らせたり、表現を複雑化してわかり難くする状況があります。
実はこれが、
開発案件では大きな問題になり、「悪いUI」を生む要因になっています。

そこで、「8bit風デザインルール」の登場です。

大げさですが、要はただのシンプルデザインレイアウトルールで、今流行りのワードを使いたかっただけですが…このルールを充てることで、適切なUIデザインに必然となります。
楽楽ですね。

8bit風デザインルールとは?

今度こそ本題です。

それでは「8bit風デザインルール」の説明が以下となります。

1)大キャラばかりは無理なんです!だって8bitだから!

2)画面内にオブジェクト弾幕!憧れるけど出来ません!だって8bitだから!

3)ボタンが横並びに5個も!!…目がチラついて見難いです

4)画数が多い漢字は出しません…だって8bitだから;

5)UX!? ボスキャラの弱点にダメージ与えると点滅!

以上はワイヤーフレームレイアウトなどを作る際に充てる怪しげなルールですが、
何と今回は割愛します;
※気になる方が多ければ別の機会に説明します。

…まずは、
出来上がったワイヤーフレームがこちら

pic_161111_01

シンプルな情報量になってますね。

これからの工程はこれらの8bitルールで進めてみます↓

6)カラフルな色なんて知りません!世の中白黒しか無い!

前提として多すぎる情報量は余計なので、純粋に優先度や大きさ形の表現を検討する目的で、一切の有彩色を省きます。

pic_161111_02

7)配置の微調整必要なし!グリッドに置くだけ!

それでは、
まずは実際の8bit機よりもさらに簡素なグリッドフォーマットを作ってみます。

pic_161111_03
こちら厳密にはiPhone向けで、「44ルール」で作られています。
横の解像度は320pxで一つのマス目はw36xh22で作られています。
44ルールを使用してるのでその半分の22の高さで現実的なレイアウト再現させます。
横軸に、ボタンなどのコンポーネントは横4個まで配置するルールを適用しています。
左右にはマージンを既にとってます。
楽ですね。

それではマス目に単純に置いていきます。

pic_161111_04
テキストは端末依存のズレも大きいので、マス目のラインにセンター置きします。
標準の中フォントサイズであれば上下の余白も同時にできます…が、
大き目のフォントや複数行の文章の場合は別ルールを適応しましょう。

8)裏ワザ?!アイテム?! 1色だけ使用が許されるスペシャルな拡張機能「アクセントカラー(挿し色)」!

単色だけでは華がないので、スペシャルアイテムとして1色だけ有彩色の投下が許されますので、ここぞな場所だけで使いましょう!
割合は色MAPの2、3%でしょうか。

pic_161111_05

いかがでしょうか?

以上デザインルールでまとめたページがこちらです。

pic_161111_06

サービスカラーを充てるとこんな感じです。

pic_161111_07


コンテンツを提供するサービスであれば、
コンテンツ自体の優先度は高くあるべきなのですが、
実際は「サービス」自体を優先してしまい、色々な情報や広告、大人の事情、過度な色使いや装飾に埋もれてしまいがちです。
振り返って原点に返り、理解しやすい表現を求めると、
シンプルな方向性となり、シンプルになれば作業量も少なく効率的になり、結果、作業者にも、利用者にも、メリットが出てきます。

フラットデザインも理解が得られている現状ならなおさら、
もっと、考え方と作業はシンプルで良いのではないでしょうか?

一度お試しください!

以上、
サービスデザインに関わっている、デジマースのネモトでした。

/////////// 関連記事はこちら↓ ///////////

[必然的な利用シーン]環境/需要との接触


UX(ユーザー・エクスペリエンス)を解釈してみた


サービスVSユーザー!UIリテラシー格差を考える


あぁ…Flashツールに望みはあるか?


サービス運用中の注意点


データとセグメンテーション


サービス立ち上げとデザイン

Pocket

コーチマークについて

Pocket

こんにちは、今回のブログ更新担当のデジマースのはらです。私の初めての更新となります!


あのUIなんだっけ?

「UIに関してミーティングをしたとき、使いたいパーツの名称が分からず、上手く伝えることができなかった…」そんな経験、あなたにはありませんか?
と、いう事で今回は最近よく見るけれど、名称を知らない人が多いであろうUIをご紹介したいと思います。それでは…いきなりですが…問題です!

ph_01

コーチマーク

正解は「コーチマーク」です。パッと答えられた方…さすがです!
このコーチマーク、アプリを使っていると時々見かけますよね。これは問題文に記載している通り、操作方法などをユーザーに案内するためのものです。
表示のタイミングは主にアプリ起動時で、ユーザーがこれから使用する画面の上に半透明の地をのせ、さらにその上に説明文や矢印をのせ表示します。(大抵はオーバーレイ表示と呼ばれています)

コーチマークを平たく言うと「“実際の画面を利用”し、直接ボタンの意味や操作手順などを説明する」見せ方です。もっともっと平たく言うと「使用画面上に説明を直接表示する方法」です。
この方法だったらわざわざ別画面に遷移してチュートリアルやヘルプなどを確認しなくて済みますよね!

コーチマークは初めてアプリを起動したユーザーにボタンの場所を直接伝えたい時に使用すると効果的です。(本来は説明なしでも使い方が分かるように設計されていることが理想です)
直接表示で伝えやすい反面、すぐに使って試したいユーザーからは鬱陶しく思われてしまうかもしれません。アラートもそうですが、何度もコーチマークを出すとユーザーは無視するようになってしまいます。使う前に本当にこのタイミングで使用する必要があるのか検討した上で使用しましょう。

メリットとデメリット

では、まとめとして、メリットとデメリットを紹介していきます。

ph_02

UIは使いどころを間違えると、我慢できないほど使いにくいものになってしまいます。ですので、どのUIが適切なのか慎重に協議した上で導入しましょう。

Pocket