のぐそんブログ

暗いおじさんがシコシコ書くブログです。

愛がいっぱいiOSのデザインガイドライン

iOSヒューマンインターフェイスガイドラインとは一体何なのかというと、 Appleが定めたiOS向けのユーザインターフェイスのガイドラインです。

UI設計の基本方針

iOSは下記の3点をUI設計の基本方針としています。

1.控えめであること

f:id:nogson2:20191231111618p:plain

UIはでしゃばるなよということでしょう。 主役はコンテンツであって、UIではないのよ!という意味でしょう。

2.明瞭であること

f:id:nogson2:20191231111632p:plain

UIは素直であれということでしょう。 UIはコンテンツの魅力を伝える為の裏方です。

文字は読みやすい大きさに!アイコンは機能をより分かりやすく伝えるデザインに! とにかく分かりやすいが重要です。

3.奥行きを与えること

f:id:nogson2:20191231111649p:plain

UIの世界にサプライズは必要ないということでしょう。

UIパーツの重なりや動きに、現実世界のルールを取り入れることでユーザーは直感的な操作できるでしょう。

UIの基本ルール

次にUIの基本について理解していこうと思います。

文字

コンテンツはテキストで構成される場合が多いです。 テキストの役割は重要です。

ガイドラインには以下のように書いてあります。

テキストは何と言っても読みやすさが重要です。何と書いてあるのか分からなければ、いくら美しい外観でも意味がありません。

文字サイズ

最小サイズは11pt、和文の場合は13ptが推奨です。 その他細かい指定はないですが、重要度によって出し分ける必要があります。

書体と、フォントスタイル

書体はアプリケーション全体を通して同じフォントを使うのが推奨です。 フォントスタイルもなるべく少ない種類にとどめるのが良いです。テキストブロックの意味によって使い分けます。

f:id:nogson2:20191231111710p:plain

ガイドラインには以下のように書いてあります。

独自の色をいくつか用いる場合、それぞれを組み合わせても問題がないようにする。 さまざまな状況を考慮し、色のコントラストに注意する。

上記のルールは大前提として、明確に記載されているのが前景色と背景色コントラストについてです。 4.5:1以上の比が理想的とされています。

しかし、4.5:1以上といわれてもピンとこないので、 実際に下記のツールを使ってコントラスト比を計測してみました。

◎Colour Contrast Analyser

文字と背景のコントラスト比を計測した結果が下です。

f:id:nogson2:20191231111805p:plain

9.2:1なので基準をクリアです。

晴れた日の屋外で使用する場合や、色弱者に配慮した配色にする必要があります。

アニメーションのルール

ガイドラインには以下のように書いてあります。

特段の理由がない限り、アニメーションの使い方を組み込みアプリケーションと合わせる。 アニメーションは控えめに使う。

ゲームなど没入型のアプリケーションは例外かもしれませんが、行き過ぎたアニメーションはユーザーにとってはストレスでしかありません。

アニメーションは、以下の効果を狙って組み込みます。

  • ユーザーアクションの進行状況を伝える
  • ユーザーアクションの結果を伝える
  • アプリケーションの使い方をユーザーに伝える

アプリケーションは、ユーザーのアクションで動作します。 その為、アクションに対して適切なフィードバックをすることで、進捗状況を伝え、ユーザーを次のアクションに導くことができます。

まずは、iOSの組み込みアプリケーションに合わせた動きにすれば間違いないと思います。

ボタン

配置

ガイドラインには以下のように書いてあります。

タップするのが最も自然なボタンとは、一番実行したいであろうアクションを実行すること、誤ってタップしても問題が生じにくいこと、という条件を満たすもののことです。これを次のように配置します。

・ 最も自然なボタンのアクションが非破壊的であれば、2つボタン型アラートの右側に置いてください。アクションを取り消すボタンは左側にします。 ・ 最も自然なボタンのアクションが破壊的であれば、2つボタン型アラートの左側に置いてください。アクションを取り消すボタンは右側にします。

よくわかりませんが、 簡単に言えば、「OK」は右、キャンセルは「左」だと思います。

f:id:nogson2:20191231111832p:plain

ただし、誤って操作されてはまずいアクション(破壊的)は「OK」は左側、「キャンセル」は右側になります。 これは実行するアクションの文脈によって判断します。

f:id:nogson2:20191231112018p:plain

もちろん例外もあり、誤って操作されてはまずいアクションが右側に来る場合もあります。 その際も、ユーザーの誤操作を防止する為、フォントの色を変えるなどの予防策があるとユーザーに優しいです。

f:id:nogson2:20191231111845p:plain

大きさ

ガイドラインには以下のように書いてあります。

ユーザが操作する要素は、扱いやすいよう適切な間隔を置いて配置する。タップ可能なコントロール部品には、約44×44ポイントの領域を与えてください。

ボタンのサイズは44ポイント(物理サイズ約7ミリ)、ボタンとボタンの間のサイズは12ポイント以上が推奨です。 解像度が160ppiを想定した場合44pxです(retinaの場合は倍の88pxが必要です)。

f:id:nogson2:20191231112044p:plain

モバイルではアプリケーションを指で操作する為、ボタンの大きさや間隔がユーザービリティへの影響大です。

情報の移動方向と画面遷移

アプリケーションでの情報の移動方向は、文字の進行方向に合わせて左から右が原則のようです。 右が進むで、左が戻るです。

情報の移動方向に係る画面遷移の設計で悩むのが、プッシュ遷移(左右の移動)を使うか、モーダル遷移(上下の移動)を使うかです。 なんとなくで決めていましたが、使い分けのルールで分かりやすいコメントがありました。

f:id:nogson2:20191231112132p:plain

名詞はプッシュ遷移、動詞はモーダル遷移です。

また、画面遷移だけでなく左から右のルールは他にもあります。

プログレスバーや、スイッチ、スライダなど既存のUIコンポーネントも情報の移動方向のルールに則って作成されています。

まとめ

私はデザインについてしっかり学んだことがない為、人様に仕事でデザインをやっていると言えません。 ガイドラインでしっかり学び、いつの日か自信を持ってデザインについて語れるようになりたいと思います。

デザインガイドラインはiOSヒューマンインターフェイスガイドライン以外にも沢山あります。 時間がある時に、他のガイドラインの記事も書きたいと思います。

Design Guidelines.