AppleがiOS 7向けアプリのUIデザインで「すべきこと」や「してはいけないこと」などをまとめたサイトをオープン

iOS 7ではユーザーインターフェース(以下、UI)がフラットデザインになり、見た目も操作方法もこれまでのiOSとは違うものになりました。そんなiOS 7向けアプリを開発するデベロッパー向けに、AppleがUIデザインで気をつけるべき点やガイドラインなどをまとめています。

Designing Great Apps - Apple Developer
https://developer.apple.com/design/

このサイトは登録済みiOSデベロッパー向けのもので、iOS 7向けアプリをデザインする上で必要な要素を、複数のページとApple World Wide Developer ConferenceやTech Talksのムービーを使って解説してくれます。

例えば、UIデザインのヒントを集めているのが以下のページ。

UI Design Dos and Don'ts - Apple Developer
https://developer.apple.com/design/tips/

◆コンテンツをフォーマット化
これは、デベロッパーはiOS端末のスクリーンサイズに合ったレイアウトでアプリを作成するべき、ということ。例えばユーザーが画面を拡大したり縮小したり、水平方向にスクロールしたりする必要がないように、主要なコンテンツを配置すべきです。

以下の画像の場合、右側のiPhoneスクリーン上に表示されている画像やテキストを見たり読んだりするには、ピンチ操作で画像を拡大したり、水平方向に画面をスクロールしてテキストを追う必要があります。しかし、左側のスクリーンに表示されているように画像とテキストを配置すれば、ユーザーは画面を縦にスクロールするだけで済み、細かい操作をする必要がなくなるというわけです。

また、レイアウトによりアプリの操作性は変化してくるので、ユーザーがコンテンツを操作しやすいように、それぞれの要素の間隔を十分に開け、タップ可能なアイコンは44×44ポイント程度のサイズを割り当てるのがベストなようです。

さらに、メインコンテンツやアプリの機能部分にユーザーが集中しやすいようにレイアウトを決定することも非常に重要です。これを実現するのに良い方法は、重要なアイテムをスクリーンの左上に配置するというもの。

スクリーン上に表示される各アイコンの相対的な重要度を表すために、「視覚的なバランスを使う」という方法もあります。他のアイコンよりも大きなアイコンやカラーの違うアイコンは、目を引きそれが他のアイコンよりも重要なものである、とユーザーに理解させることができます。

これらの要素を理解してアイコンやレイアウトをフォーマット化してしまえば、より簡単に使いやすいUIをデザインできるようになるわけです。

◆タッチ操作
iOS 7向けアプリのUIでは、アプリをより自然かつ簡単に操作できるようにするために、各要素をタッチ操作できるようにデザインすべきです。

例えば年月日時分を入力するような画面では、右側のように年月日はカレンダーをタップし、時間は文字入力するものよりも、左側のように全ての要素をタッチ操作で入力できる方がより自然かつ簡単に操作できる、ということ。

◆アイコンのタップしやすさ
ユーザーが指で正確にアイコンをタップできるように、少なくとも44ポイント以上のサイズのアイコンを作成してください、とのこと。

◆テキストサイズ
テキストサイズは最低でも11ポイントが良いようで、このサイズならばiOS端末で文字を読む際に画面を拡大したりしなくとも明瞭に文字を読むことができるようになります。

◆コントラスト
フォントカラーと背景色の間に十分なコントラストの差を設けることで、文字はとても読みやすくなるわけです。

◆スペース
テキストを読みやすくするには行間を広げるのがグッド。

◆高解像度
全ての画像にその2倍以上の解像度の画像を用意しておくと、Retinaディスプレイ上でも画像が不明瞭に見えることはなくなるとのこと。

◆ひずみ
ひずみを回避するために、画像は常に意図した縦横比を指定しておくのがベター。

◆構成
変更可能なコンテンツを規則的に配置することで、読みやすいレイアウトが作成できます。