ガイドラインを読め読め！と言ってる人がいたり、採用の募集要項に書かれていることがあります。ただ「ガイドラインを理解しているとは？」の定義ってまあ難しいです。
ただ、今回紹介するマテリアルデザインとヒューマンインターフェースガイドラインの2つは、UIを定義づけたスマホアプリのOSを開発した両者がまとめたもので、UIの基本的な指針になることがうまくまとめられています。
なので読んで理解するのも良いですが、業務で使う上で”いかに使いながら自分の身に入れていくか”かはレベルアップの大事な要素になります。
ここでは全くわからない人向けにどう使っていくのか？の概要をお伝えします。
具体的な使い方は、それぞれのコンポーネント解説の動画などをご覧ください。
UIを定義づけたスマホアプリのOSを開発した両者がまとめたもので、UIの基本的な指針になることがうまくまとめられているからです。
GUI（グラフィカルユーザーインターフェース）が出てきて、スマホが普及するタイミングで開発者向けに”誰でも使うためのソフトにするため”の指針としてガイドラインをAndroid/iOSを持つGoogleとAppleが出しました。多くのアプリ開発者がそれを指針にして開発したことでガイドライン（MDとHIG）の重要性が広まったわけです。
なのであくまでGoogleとAppleの方針ではあるのですが、UIを考える上で普遍的な定義がされていたら、どのサービスをやっていても使う基本UIパーツの定義はここで学んで置けるぐらいのクオリティです。
これがガイドライン読め読めのざっくりした理由です。
1: 日本語翻訳のプラグインを使う
2: 作っているUIパーツ、探して理解する
3: 概念部分を書籍のように読む
「2」はかなり普遍的な概念によっているし「3」のベースになっているので、正直「2」から読んでいくのはおすすめです！「3」はAndroidとして独自の取り組むである”Material You”の解説が色濃く出ているのでAndroidOSの色が強いです。
なので見た目の部分は極力スルーして、基本的なUIパーツの概念理解をする上では「2」がおすすめです。項目も「2」の方が多いです。
どちらも「Component」のページがあるのでそれをみましょう。
○ M2
https://m2.material.io/components?platform=android
○ M3
https://m3.material.io/components
まずは「2」の部分から見ていくのをオススメします。
概念とは例えば、ナビゲーションの考え方、UIは平面を立体的に表すことで情報を伝えやすくしている、シャドウの向きも実際の光源を考えましょう、など、UIを作る上での前提になっているような理論です。
AndroidOSであるMaterial Designで採用している考え方ではありますが「2」の方では全てのデザインに共通して使えるぐらい普遍的な内容があると思っています。
難しい書籍を読むような感じになりますが、具体的なUIを貼っている項目も多いので、Google系のデザインを見ながら「こういうことかな〜？」と見て推測、確認しながら読み進めるとかなり良いです。
初学者は読んでも良いけど、頭で考える前にまずは作る量を増やして普通のUIを知れ。っていう派なので「これを抑えれば私のデザイン力は上がる」と思わない方が僕は良いと思います。頭が先行するのは結構悪い癖がつきそうです。作りながら考えましょう。
M2（オススメ）
M3（網羅的ではない。）
https://m3.material.io/foundations
マテリアルデザインはGoogleが定義しているデザイン、HIGはAppleが定義しているデザインです。なので共通する部分もあればしない部分もあります。スタバと猿田彦は違うのと一緒です。セブンとファミマも違う部分はありますよね。
HIGはあえて具体的に定義せず抽象度と持たせて考える幅を広げているような書き方をしています。かつ、具体的なイメージが少ないのでUIに詳しくない人が見ると結構意味がわからない確率が高いです。
そのため、マテリアルデザインと比較して読むのをオススメします。
例えば「マテリアルデザイン：チェックボックス」を調べたら、”HIGではどんな定義になっているんだろう？”と思って、該当するページを探します。ちなみにHIGに「チェックボックス」というページはないです（2023年夏時点）。ただ該当する箇所はあります。
両者を比較しながら共通する部分と異なる部分を認識しながら一般的な考え方を身につけたり、使うユースケースを比較しながら考えていくとしっかり理解することができます。
HIGは日本語訳と中国語訳が出ています。英語が難しい人はこちらから読みましょう
https://developer.apple.com/jp/design/human-interface-guidelines/
1 基本要素
2 パターン
3 コンポーネント
の3つです。基本的にはAppleのOSの説明になる（iOS/iPadOS/macOS/VisionOS）ので、そこはうまく除外したりして読むと良いです。逆にAppleのソフトウェアデザインの哲学をキャッチアップする場所でもあります。
マテリアルデザインは各企業が紹介しているデザインガイドラインの一つです。これはGoogleによって作られ、Android OSやGmail、MeetなどのGoogle製品で使用されています。
マテリアルデザインページは主に以下の3つのパートから構成されています。
初学者は具体的な形を紹介するComponentから見ていくのがおすすめではあります。
初めにコンポーネントから始めることをお勧めします。なぜならそれは具体的で理解しやすいからです。
Card - Material Design 3
https://m3.material.io/components/cards/accessibility
MD3になってスタイルがAndroid独自になったのでちょっとわかりづらい気もする
Card - Material Design 2
https://m2.material.io/components/cards
こっちの方が大元の概念はわかりやすい気がする。
さまざまな情報をまとめて、”1つのオブジェクト”として認識することが容易である
⚡ カードを使用して、単一のトピックに関するコンテンツとアクションを表示します。
カードは、関連性のある実用的な情報を簡単にスキャンできる必要があります。テキストや画像などの要素は、階層を明確に示す方法でカードに配置する必要があります。
動画でも使っているドキュメントはこちら
https://takumikai.notion.site/1-Card-UI-a9050b76809841e798297736c1fd3b9d?pvs=4
Navigation Bar- Material Design 3
https://m3.material.io/components/navigation-bar/overview
MD3になってスタイルがAndroid独自になってます。
Bottom Navigation - Material Design 2
https://m2.material.io/components/bottom-navigation
名前が違いました。基本概念は一緒です。
Tab Bars
https://developer.apple.com/design/human-interface-guidelines/tab-bars
AppleはTab Barsという名称。役割としてはほぼ変わらないです。
動画でも使っているドキュメントはこちら
※メンバー限定
ユーザーインターフェース（UI）をデザインする上で、適切な選択系コンポーネントの使い分けは非常に重要です。Googleが提唱するデザインシステム「マテリアルデザイン」では、チェックボックス、ラジオボタン、スイッチの使い分けについて明確なガイドラインが示されています。本記事では、マテリアルデザインにおけるこれらのコンポーネントの違いと適切な活用法について、具体的な事例を交えながら解説していきます。
続きはクイズ形式で、実際のUIを使って選択UIの違いを考える動画になってます↓
動画の続きはこちら（メンバー限定です）UIを本格的に学びたい方はBONOのメンバーになろう
https://www.bo-no.design/contents/material-design-selectui-01
Material Design 3
https://m3.material.io/components/switch/guidelines
Material Design 2
https://m2.material.io/components/checkboxes#usage
※以下AIによる翻訳です。詳しい内容と理解には動画をご覧ください！
マテリアルデザインでは、以下のように選択系UIを使い分けるよう推奨しています。
これらのUIは一見似ていますが、使用目的が異なります。適切に使い分けることで、ユーザーにとってわかりやすく操作しやすいインターフェースを提供できます。
チェックボックスは、複数選択が可能な項目に使用します。例えば、メールの通知設定で「毎週のお知らせを受け取る」「新着情報を受け取る」など、複数の選択肢がある場合に適しています。また、親子関係のある階層構造で使用することもできます。親のチェックボックスをクリックすると、子の項目が全て選択・非選択されるといった動作が可能です。
チェックボックスを使用する際は、以下の点に注意が必要です。
ラジオボタンは、複数の選択肢から一つだけを選択する場合に使用します。例えば、「性別」や「支払い方法」など、複数のオプションから一つを選ぶ場合に適しています。
ラジオボタンを使用する際は、以下の点に注意が必要です。
スイッチは、オンとオフを切り替える際に使用します。Wi-Fiや車のスイッチなど、独立した項目の状態を切り替える場合に適しています。
スイッチを使用する際は、以下の点に注意が必要です。
マテリアルデザインはGoogle製のOSであるAndroidアプリの開発において主に使用されるガイドラインですが、一方でAppleが提供するiOSアプリの開発においては、ヒューマンインターフェースガイドライン（HIG）が参考にされます。
マテリアルデザインとHIGは、基本的な考え方は似ていますが、プラットフォームの特性を反映した違いがあります。例えば、iOSではスイッチの代わりに「トグル」と呼ばれるUIが使用されることがあります。トグルはスイッチと同様の役割を果たしますが、見た目が若干異なります。
UIデザインを行う際は、対象のプラットフォームのガイドラインを理解し、適切なコンポーネントを選択することが重要です。ただし、ガイドラインはあくまで参考であり、状況に応じて柔軟に対応することも必要でしょう。
マテリアルデザインは、UIデザインの辞書のような存在です。実際のプロジェクトでこれらのガイドラインを参考にし、ユーザー体験を向上させるUIを設計していくことが重要です。
選択系UIの適切な使い分けは、ユーザビリティの向上につながります。マテリアルデザインのガイドラインを参考に、実際のアプリやWebサイトのUIを観察し、ベストプラクティスを学んでいきましょう。UIデザインのスキルを磨くには、理論を学ぶだけでなく、実際に手を動かして経験を積むことが不可欠です。
本記事で紹介したチェックボックス、ラジオボタン、スイッチの使い分けを理解し、適切に活用することで、ユーザーにとって使いやすく直感的なUIを設計できるようになるでしょう。常にユーザー目線に立ち、テストを繰り返しながら、より良いUIを目指していきましょう。
HIGとの比較を見た後に、クイズ形式で選択UIの使い方を考える動画です！
本当は自分で作ることで1番理解が進むのでぜひ機会がある方はやってみてください。
解説編の動画はこちら
https://youtu.be/X_QFgX6VxX4
デザインは理論ではなく、実物をメインにして使ったり触ったりしながら学ぶのが1番良いので暗記などはしなくて良いです。というかしないでくださいね〜。
必要になったら検索すれば良いのと、使って考えて頭に入れましょう。
Part1の動画でも使ったNotion（メンバー限定）
マテリアルデザイン
MD1
https://m3.material.io/components/switch/guidelineshttps://m2.material.io/components/checkboxes#usage
MD2
https://m2.material.io/components/checkboxes#usage
HIG
Toggle
https://developer.apple.com/jp/design/human-interface-guidelines/toggles
Twitterでも見る馴染みのあるUIです。基本的なスタイルなど詳しくはMaterial Designを読んで参照するようにしてください。
・実際のUIを使ったクイズで、TabUI理解を深める
・HIGでTabUIに近いことは書かれているのか？を考える
UIを本格的に学びたい方はBONOのメンバーになろう
https://www.bo-no.design/contents/material-design-tabui-01
Material Design 3: Tabs
https://m3.material.io/components/tabs/guidelines
Material Design 2: Tabs
https://m2.material.io/components/tabs#usage
TabUIの基本的な解説については、以下の動画とマテリアルデザインのドキュメントをご覧ください〜！
この動画では以下のことと合わせてHIGについても解説することで、マテリアルデザイン的な"TabUI"についてと、HIG的な解釈も合わせて触れます。
比較を通してより理解することができると思います。
解説編の動画はこちら
https://youtu.be/X_QFgX6VxX4
□ Part1の動画でも使ったNotion（メンバー限定）
https://takumikai.notion.site/5-Tab-UI-23c4f028047341aea3209c5ed7ba448d?pvs=4
□ マテリアルデザイン
MD3
https://m3.material.io/components/tabs/guidelines
MD2
https://m2.material.io/components/tabs#usage
HIG
セグメントコントロール
https://developer.apple.com/jp/design/human-interface-guidelines/segmented-controls
HIG: タブビュー
https://developer.apple.com/jp/design/human-interface-guidelines/tab-views
