こんにちは、デザイナーの比嘉です。

同じサービスなのに、iPhoneとAndroidでボタンの形や操作方法が少し違う。そんな違いに気づいたことはありませんか？

その背景にあるのが、Appleの「Human Interface Guidelines（HIG）」と、Googleの「Material Design」です。

どちらもUI/UXデザインの重要な手がかりですが、特徴的な見た目を真似するだけでは、使いやすいアプリにはなりません。

実際の制作では、サービスとして目指す体験と、OSによる表現や操作の違いの間で、どう判断するか迷うことがあります。

今回は自分自身の勉強も兼ねて、HIGとMaterial Designの考え方や違いをまとめてみました。これまでの制作で迷ったことも振り返りながら、アプリの新規開発やリニューアルで、どう活かせるのかを考えていきます。

AppleのHIGはコンテンツが主役になる体験をつくる

HIGは、iPhoneやMacなど、Appleのプラットフォームで体験を設計するためのガイドラインです。

その特徴をわかりやすく捉えるなら、「ユーザーが見たいもの、やりたいことを引き立てる」という考え方です。

写真アプリなら写真を楽しむこと。メッセージアプリなら会話すること。操作のためのUIは、その目的を支える存在です。

透明感と奥行きでコンテンツと操作を整理する

Appleらしい表現のひとつが、透明感や奥行きを使った階層づくりです。

現在の「Liquid Glass」は、タブバーなどの操作要素をコンテンツの上に浮かぶ層として表現します。背後の内容を感じられることで、画面のつながりを保ちながら、操作する場所を区別できます。

ただし、透明にすればAppleらしくなるわけではありません。Appleも、Liquid Glassをコンテンツの層に広く使うことや、効果を多用することを避けるよう案内しています。大切なのは、見やすさと階層が伝わることです。

慣れた操作が使いやすさを支える

見た目と同じくらい重要なのが、ユーザーがこれまで覚えてきた操作です。

「ここを押せば次に進める」「この操作で前の画面に戻れる」と予想できると、説明を読まなくてもアプリを使いやすくなります。

ブランドの個性を表現しながら、操作する場所やアイコンにはプラットフォームの慣習を取り入れる。HIGは、そうした判断を支える手がかりになります。

GoogleのMaterial Designは一貫したUIを仕組みでつくる

Material Designは、Googleが提供するデザインシステムです。

色、文字、形、コンポーネントなどを共通の仕組みで扱い、さまざまな画面で一貫したUIをつくれることが特徴です。Androidのアプリ設計でよく使われますが、Androidだけに限定されたものではありません。

重なりや操作の反応を視覚的に伝える

Material Designでは、面の重なりや操作への反応を通じて、画面の構造を伝えます。

例えば、コンテンツの上に浮かぶボタンや、タップしたことがわかる反応です。何を操作できるのか、操作すると何が起きたのかを、視覚的に理解しやすくします。

Materialと聞くと「影のあるカードUI」を思い浮かべるかもしれません。ただ、Material 3では、影に加えて面の色の違いでも階層を表現します。強い影をつけること自体が目的ではありません。

色や文字に役割を持たせる

例えば、主要なボタンにはブランドカラーを使い、見出しは本文より大きくする。こうした使い分けによって、押してほしい場所や情報の優先順位を伝えられます。

Material 3 Expressiveでは、形の変化や動きも活かし、操作への反応を伝えたり、印象に残る体験をつくったりする表現が広がっています。

HIGとMaterial Designの違い

HIGは体験設計のガイドライン、Material Designはコンポーネントやツールも含むデザインシステムです。性質は異なりますが、UIを考える際の着眼点として比較すると、特徴が見えてきます。

比較ポイントApple HIGGoogle Material Design
考え方の特徴コンテンツを引き立て、Appleの環境で自然に使える体験を考える共通の仕組みで一貫性を保ち、ユーザーやブランドに合わせて表現する
階層の表現素材の透明感や重なりなどで、コンテンツと操作の層を区別する面の色や影などで、要素の関係を伝える
ナビゲーションタブバーなどを、プラットフォームや画面に合わせて使うナビゲーションバーやレールなどを、画面の広さに合わせて使う
個性の出し方操作の慣れを活かしながら、コンテンツやブランドを引き立てる色、文字、形などを共通の仕組みで調整する

この表は、それぞれの特徴を整理したものです。「iOSなら必ずこの配置」「Androidなら必ずこの形」という固定ルールではありません。

例えば、Androidでも画面下のナビゲーションを使いますし、広い画面では横のナビゲーションレールへ切り替える設計ができます。OSだけでなく、画面の広さや利用状況も判断材料になります。

iPhone Duoから考える慣れた体験を残す設計

Apple初の折りたたみiPhone「iPhone Duo」は、閉じた状態の外側ディスプレイと、開いた状態の7.6インチの内側ディスプレイを持っています。

画面そのものが折りたためるようになれば、UIにも変化が必要です。AppleはiPhone Duo向けの設計で、次のような対応を案内しています。

  • 端末の状態に合わせて、操作しやすい場所へコントロールを移す
  • 折り曲げた部分を避けて、ボタンなどの操作要素を配置する
  • 画面の広さに合わせて、レイアウトを適応させる
  • 画面比率の変化に対応する

ただ、折り方ごとにすべて別の画面をつくる、という考え方ではありません。基本的には、外側のCompactと内側のRegularという2つのサイズクラスを軸に、UIを適応させるよう案内しています。

さらに、内側と外側でアプリの基本的な階層を変えたり、特定の折り方でしか使えない機能を設けたりすることを避けるよう説明しています。

ここに、Appleが慣れた体験を大切にする姿勢が表れているように感じます。

新しい環境には適応する。でも、ユーザーが知っているiPhoneの体験は残す。

画面の広さや操作要素の配置が変わっても、ユーザーが「何ができるか」「どう使うか」を見失わない。iPhone Duoの設計は、見た目の変化と使いやすさの連続性を両立させる具体例として捉えられます。

現場ではOSとサービスのどちらを優先するか

ここまでHIGとMaterial Designを見てきましたが、実際の制作では、ガイドラインだけでは判断しきれない場面があります。

これまで私が関わった制作では、最初からOSを基準に画面を決めるよりも、サービスとしてどんな体験を届けたいかを先に考える進め方が多くありました。ブランドの方向性や、サービスの中で大切にしたい操作をもとに、まずデザインを検討します。

そのうえで、OSによっては考えた表現をそのまま実現することが難しく、OS標準に沿う表現へ調整することもありました。サービスとして目指す体験と、実装できる表現の間で、どこまで揃えて、どこから変えるかを考える必要があったのです。

ただ、「実現が難しい」といっても、OS標準の部品では難しいのか、開発期間や実装方法などの条件によるものなのかで、検討できる選択肢は変わります。今後は、何が制約になっているのかを整理したうえで、表現を変えてもサービスの目的を保てるかを考えていきたいです。

使い慣れたiOSを出発点にしていたこと

もうひとつ、振り返って気づくのが、つくる側の慣れです。

私が関わった制作現場ではiPhoneを使うデザイナーが多く、使い慣れたiOSの表現をデザインの出発点にすることもありました。

ただ、つくる側にとって自然な操作が、Androidを使う人にとっても自然とは限りません。自分が使い慣れていることと、ユーザーが使いやすいことは分けて考える必要がある。今回の読み比べを通じて、改めて意識したいと感じた点です。

案件ごとの判断を整理するための3つの視点

これまでは案件ごとに判断してきた部分が多く、自分の中でも、どこで線を引くかを十分に言語化できていませんでした。その迷いが、今回HIGとMaterial Designを読み比べてみようと思った理由のひとつです。

今後の設計では、次の3つに分けて考えることで、判断の根拠を整理できると考えます。

  • サービスとして共通にするもの： ブランド、情報の呼び方、サービスの基本的な流れ
  • OSの慣習に合わせて検討するもの： 戻る操作、標準的な選択UI、画面遷移の振る舞い
  • 利用環境に合わせて変えるもの： 情報量、一覧と詳細の配置、操作要素の位置

例えば、ブランドの印象やサービスの基本的な流れは揃えながら、操作の細部はそれぞれのOSで使い慣れた形を検討する。画面が広くなったときには、iPhone Duoの例のように、できることや基本の階層を保ちながら配置を変える、といった考え方です。

この整理をもとに、デザイナーとエンジニアが「何を共通にするか」「どこを変えるか」「なぜそうするか」を話し合えるようにしたいです。ガイドラインを、判断の根拠を共有するための手がかりとして活用していきたいと思います。

bravesoftへのUI/UXのご相談

こうした設計では、OSの慣習、ブランドの個性、ユーザーの使いやすさを一緒に考える必要があります。

bravesoftでは、ユーザー調査や企画から、UI/UXデザイン、プロトタイプ、開発、運用・改善まで一貫して支援しています。bravesoftのアプリ開発支援

「iOSとAndroidのデザインをどこまで揃えるべきかわからない」
「機能が増えて、アプリが使いにくくなってきた」
「ブランドを刷新しながら、操作性も改善したい」

そんな課題があれば、bravesoftへご相談ください。

HIGやMaterial Designを手がかりに、サービスの目的とユーザーの使い方に合うUI/UXを、一緒に考えていきます。

アプリ開発・UI/UX改善についてbravesoftに相談する

参考・出典