🍎HIGざっくりまとめ Foundations編 vol.2 ブランディング / アプリアイコン

はらぐち | COMPASS

2022年9月16日 15:19

　2022年6月7日、AppleのHuman Interface Guidelinesが改訂されました。これを期にしっかり読み込み、個人的視点からのざっくりなまとめを記していきます。

※私はブラウザで動くWEBアプリーケーションのUIをデザインしています。その視点から大切だと思った点を残してくので、対象外のデバイスや各プラットフォームの細やかな話は端折っています。

Branding（ブランディング）

アプリやゲームは、一目でわかるように独自のブランドアイデンティティを表現しながら、プラットフォームに馴染み、一貫した体験を人々に提供します。

要点

ブランド独自のボイス&トーンで、すべての文章を表現してください
例えば、平易な言葉、時折使う感嘆符や絵文字、シンプルな文章構成で、励ましや楽観的な気持ちを伝えるとよいでしょう。
（以前読んだ「UXライティングの教科書」にもありましたが「このプロダクト（自社ブランド）にマッチしたボイス&トーンとは何か？」をちゃんと定義しておく必要がありそう。）
アクセントカラーの選択を検討する
カスタムフォントの使用を検討する
見出しや小見出しにはカスタムフォントを使用し、本文やキャプションにはシステムフォントを使用すると効果的です。システムフォントは、小さいサイズでも読みやすいように設計されているからです。
（カスタムフォントを使う場合、通常モードの表示で読めても、ユーザーによる文字サイズ設定変更に耐えれない可能性があるのでいろんなサイズ、グリフでチェックが必要）
標準的なパターンを一貫して使用することで、人々が快適に感じられるようにします
誰もが慣れ親しんだ操作方法に沿ったごく定型的なインターフェイスを使用するだけで、ユーザの操作感は向上します。例えば、ユーザが予想できる場所にUIコンポーネントを配置したり、よく使うアクションを標準的なシンボルで表したりするとよいでしょう。
アプリやゲーム中にロゴを表示する誘惑は、コンテキストを提供するために不可欠な場合を除き、我慢してください。
どのアプリを使用しているか思い出させる必要はほとんどなく、通常は、貴重な情報や操作方法を提供するためにスペースを使用する方がよいでしょう。
起動画面をブランディングの機会として使用しないようにします。
起動画面は、情報を伝えるにはあまりにも早く消えてしまいますが、ブランディングコンテンツを組み込んだウェルカム画面またはオンボーディング画面をエクスペリエンスの最初に表示することを検討するとよいでしょう。
（「起動画面」のページで出てきますが、起動画面は、機能自体の起動に本当は時間かかるんだけどとりあえずすぐ出せる画面があることで「ちゃんとすぐ反応できるアプリだよ！」って印象を与えるためだそうで、ここにコンテンツを盛ってはいけないそうです）

App_icon（アプリアイコン）

ユニークで印象的なアイコンは、体験の目的と個性を伝え、App Storeやデバイス上で一目であなたのアプリやゲームを認識させることができます。

（アプリアイコンはサラッと書いてます・・・
原文には細かいサイズやプラットフォームごとのポイントが記載されてます）

要点

シンプルであること。
本質を捉えたコンセプトや要素を見つけ、それをアイコンの中心に据え、シンプルかつユニークな方法で表現しましょう。
複数のプラットフォームに対応できるようなデザインを作成し、それぞれのプラットフォームで違和感のないようにします。
テキストは、あなたの体験やブランドにとって不可欠な部分である場合にのみ含めるようにしましょう。
写真よりも画像を優先し、UIコンポーネントの複製を流用しない。
必要に応じて、Spotlight検索結果、設定、および通知などの場所でシステムが表示する特定のサイズのためにあなたのアイコンを最適化します。
アイコンをフルブリードの正方形画像としてデザインします。
ほとんどのプラットフォームでは、システムがマスクを適用して、プラットフォームの美観に合うようにアイコンの角を自動的に調整します。例えば、watchOSでは自動的に円形のマスクが適用されます。
代替アプリアイコンを提供することを検討する。
iOS、iPadOS、tvOS、visionOSでは、ユーザが代替バージョンのアイコンを選択できます。例えば、スポーツアプリでは、チームごとに異なるアイコンを提供することができます。

フルブリード（full-bleed）とは
フルブリードは出版用語で、日本語で言うと「余白なし」。フチに余白をつけず幅いっぱいに表示する方式

感想

ブランディング < コンテンツ だよ！というのがとりあえず１番のポイントかなと感じました。やたらとロゴを表示するのは我慢してください。

「親しみやすい」という表現はアクセシビリティでも出てきましたが。「親しみやすい人・好かれる人」というのは「何考えてるかわかる人」だそう。
UIでいうと「振る舞いが予測できる」（または学習が容易ですぐ予測できるようになる）という意味合いで受け取っていい気がします。

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