iOSアプリデザインをする際に気をつけた方がいいこと

2020年7月29日 10:44

こんちゃ！
さて、今回は
ヒューマンインターフェースガイドラインなどの基礎知識を学習したのでご紹介していきたいと思います。

はじめに

iOSのヒューマンインターフェースを理解するためにはappleが発表しているガイドラインを読む必要があります。
ここにはデザインの原則と理由、どのように活用していくのかがまとまっています。
しかし、全て英文で記載されているので私の方で簡単に解説していきたいと思います。
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/

デザイン原則

・インタラクティブ性
・読みやすさ
・グラフィック
・明確さ

この4つの法則を守っていればiOSデザインはバッチリです。
簡単に各項目の内容を説明していきます。

インタラクティブ性

・コンテンツの表示形態
iOS デバイスの画面に合ったレイアウトで作成します。主要なコンテンツは、ユーザがズームや横スクロールしなくても表示できるようにしましょう。
↓各デバイスのサイズ一覧↓

・レイアウトガイドと安全な領域
レイアウトガイドは、実際には画面上に表示されない長方形の領域のことです。安全な領域を確保しておくとコンテンツの配置、配置、および間隔に役立ちます。
↓セーフエリア一覧↓

読みやすさ

・タイポグラフィと間隔
iOSでは基本的にサンフランシスコを使用します。この書体のフォントはテキストに比類のない読みやすさ、明快さ、そして一貫性を与えるように最適化されています。
apple公式からダウンロードできるので、ダウンロードしておきましょう。
また、フォントサイズや間隔についても細かくサイズ指定があるので、下記URLから確認しましょう。

・色
カラーはそのアプリにあった色味を使うのもそうですが、iOSの基準のカラーパレットを参考に色味の選定をするとより良いものになります。
また、色味はユーザーに与える影響がもっとも大きい要素の一つになります。選定は慎重に行いましょう。

色は、活力を与え、視覚的な継続性を与え、ステータス情報を伝え、ユーザーの行動に応じてフィードバックを与え、そして人々がデータを視覚化するのを助けるための素晴らしい方法です。

グラフィック

・画像サイズと解像度
すべての画像アセットに、高解像度 (2 倍) バージョンを用意してください。2 倍の解像度のバージョンがない画像は、Retina ディスプレイでぼやけて表示されてしまいます。
また、歪みが発生しないように、画像は必ず本来のアスペクト比で表示させるようにしましょう。
↓各デバイスに合わせた倍率一覧↓

明確さ

・画面構成
iOSでは、ナビゲーションには主に3つのスタイルがあります。
コントロール部品は操作するコンテンツの近くに配置し、認識しやすいレイアウトにしましょう。

・階層ナビゲーション
目的地に到着するまで、画面ごとに1つ選択してください。別の目的地に行くには、自分のステップをたどるか最初からやり直して別の選択をする必要があります。設定とメールはこのナビゲーションスタイルを使用します。

・フラットナビゲーション
複数のコンテンツカテゴリを切り替えます。Music and App Storeではこのナビゲーションスタイルを使用しています。

・コンテンツ主導または経験主導のナビゲーション
コンテンツ内を自由に移動するか、コンテンツ自体がナビゲーションを定義します。ゲーム、書籍、およびその他の没入型アプリは通常、このナビゲーションスタイルを使用します。

一部のアプリは複数のナビゲーションスタイルを組み合わせたりしています。たとえば、フラットナビゲーションを使用するアプリでは、各カテゴリ内に階層型ナビゲーションを実装していたりと、部分的にスタイルを変更しているアプリもあります。またそれに合わせて、テキスト、画像、ボタンを適切に配置して、それぞれの情報の関連性を認識しやすくしてください。

まとめ

今回紹介した4つの法則は必要最低限をまとめたものになりますので
お時間のある方はぜひ一度appleが発表しているガイドラインを読んでみてください。
また、以前iOSとAndroidのガイドラインに違いという記事も公開しているので、合わせて読んで見てください。

宣伝

弊社の取り組みでファンカードというものを集めています！
今回の記事や以前投稿した記事などで
「役に立った！」
「勉強になりました！」
などありましたらぜひコメントください！

また弊社は現在社員募集中です。
一緒に強くてかっこいいビジネスマンを目指す仲間を募集しています。
一緒にビジネスマンとして働きませんか？勉強会も毎週土曜日に実施しています。ぜひご参加ください。

※この記事は2019/02/21に投稿されたものを修正したものです

この記事が気に入ったらサポートをしてみませんか？