.webp)
.jpg)
.webp)
読み方→いかにして使うかが大事
ガイドラインを読め読め！と言ってる人がいたり、採用の募集要項に書かれていることがあります。ただ「ガイドラインを理解しているとは？」の定義ってまあ難しいです。
ただ、今回紹介するマテリアルデザインとヒューマンインターフェースガイドラインの2つは、UIを定義づけたスマホアプリのOSを開発した両者がまとめたもので、UIの基本的な指針になることがうまくまとめられています。
なので読んで理解するのも良いですが、業務で使う上で”いかに使いながら自分の身に入れていくか”かはレベルアップの大事な要素になります。
ここでは全くわからない人向けにどう使っていくのか？の概要をお伝えします。
具体的な使い方は、それぞれのコンポーネント解説の動画などをご覧ください。
なんでガイドライン読め読め言われるのか
UIを定義づけたスマホアプリのOSを開発した両者がまとめたもので、UIの基本的な指針になることがうまくまとめられているからです。
GUI（グラフィカルユーザーインターフェース）が出てきて、スマホが普及するタイミングで開発者向けに”誰でも使うためのソフトにするため”の指針としてガイドラインをAndroid/iOSを持つGoogleとAppleが出しました。多くのアプリ開発者がそれを指針にして開発したことでガイドライン（MDとHIG）の重要性が広まったわけです。
なのであくまでGoogleとAppleの方針ではあるのですが、UIを考える上で普遍的な定義がされていたら、どのサービスをやっていても使う基本UIパーツの定義はここで学んで置けるぐらいのクオリティです。
これがガイドライン読め読めのざっくりした理由です。
読み方（使い方）
1: 日本語翻訳のプラグインを使う
2: 作っているUIパーツ、探して理解する
3: 概念部分を書籍のように読む
🌟マテリアルデザイン
1 「2」と「3」がある。「2」は古いけど「3」より汎用的な項目が多い
「2」はかなり普遍的な概念によっているし「3」のベースになっているので、正直「2」から読んでいくのはおすすめです！「3」はAndroidとして独自の取り組むである”Material You”の解説が色濃く出ているのでAndroidOSの色が強いです。
なので見た目の部分は極力スルーして、基本的なUIパーツの概念理解をする上では「2」がおすすめです。項目も「2」の方が多いです。
2 見方: UIパーツ/コンポーネント
どちらも「Component」のページがあるのでそれをみましょう。
○ M2
https://m2.material.io/components?platform=android
○ M3
https://m3.material.io/components
3 見方2: ソフトウェアUIの基本概念
まずは「2」の部分から見ていくのをオススメします。
概念とは例えば、ナビゲーションの考え方、UIは平面を立体的に表すことで情報を伝えやすくしている、シャドウの向きも実際の光源を考えましょう、など、UIを作る上での前提になっているような理論です。
AndroidOSであるMaterial Designで採用している考え方ではありますが「2」の方では全てのデザインに共通して使えるぐらい普遍的な内容があると思っています。
難しい書籍を読むような感じになりますが、具体的なUIを貼っている項目も多いので、Google系のデザインを見ながら「こういうことかな〜？」と見て推測、確認しながら読み進めるとかなり良いです。
初学者は読んでも良いけど、頭で考える前にまずは作る量を増やして普通のUIを知れ。っていう派なので「これを抑えれば私のデザイン力は上がる」と思わない方が僕は良いと思います。頭が先行するのは結構悪い癖がつきそうです。作りながら考えましょう。
M2（オススメ）
M3（網羅的ではない。）
https://m3.material.io/foundations
🌟HIG
かなり抽象度高く設定しているので初心者はMaterial Designと同じことを書いている場所を探して比較していくのがオススメです
マテリアルデザインは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製品で使用されています。
マテリアルデザインが学習に使える理由
- マテリアルデザインは、Android OS用のGoogleのデザインシステムです。そのため、Androidアプリをデザインする場合、マテリアルデザインはAndroid OSのベースとなります。
- Androidアプリをデザインする際は、Android OSのUIコンポーネントの基礎となるマテリアルデザインについて読むことを強くお勧めします。
- しかし、UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な解説を提供しています。だから、これを読むことが役立つでしょう。
マテリアルデザインページの全体構造
マテリアルデザインページは主に以下の3つのパートから構成されています。
- Foundation（基礎）
- Style（スタイル）
- Component（コンポーネント）
初学者は具体的な形を紹介するComponentから見ていくのがおすすめではあります。
Foundation（基礎）
- Google Design（マテリアルデザイン）の基礎となる概念です。
- しかし、そのトピックはどんなUIをデザインする上でも有用です。
- 特に以下のトピックは誰にとっても役立つでしょう。
- Accessibility（アクセシビリティ）
- Adaptive design（適応的デザイン）
- Design tokens（デザイントークン）
- Interaction states（インタラクションの状態）
Style（スタイル）
- UIの視覚的な外観の基礎を作る上で必須となる要素の説明です。
- 注意: 一部のトピックはMD3向けに書かれており、全てのUIコンセプトに対応しているわけではありません。
- Color（色）
- 色のシステム: MD3向けに基づいているため、全てのUIコンセプトには適応できません。
- Typography（タイポグラフィ）
- タイプスケール: タイポグラフィのシステムパターン
- タイプの適用
- Elevation（エレベーション）
- Icon（アイコン）
- Motion（モーション）
- Shape（形状）
Component（コンポーネント）
- 特定のUIパターンとその使用方法です。
初めにコンポーネントから始めることをお勧めします。なぜならそれは具体的で理解しやすいからです。
なぜ重要なのか？
- UI/UXデザイナーにとって、マテリアルデザインはUIをどのようにデザインし、それを有用にするかについて詳細な探求を提供しています。だから、これを読むことが役立つでしょう。
- 例えば、デザインシステム:
- UIデザインに必要な色やタイポグラフィの種類、それの操作方法を教えてくれます。
- デザインシステムがない場合、マテリアルデザインは色やタイポグラフィのバリエーションの設定方法を教えてくれます。
- 例えば、コンポーネント:
- UIコンポーネントの機能的な使用は、マテリアルデザインに関係なくUIを扱う際には同じです。
- だから、あなたがダイアログのUIコンポーネントを使う場合、基本的な使い方をチェックすることが可能です。
これをどのように使用し、学習するか？
- まず最初にUIデザインに慣れておくことが重要です。UIデザインの経験が少ないと、マテリアルデザインを理解するのは難しいでしょう。
- まず全体を一冊の本として読むことが重要です。理解できない部分があっても大丈夫です。重要なのは、「マテリアルデザインには何が書かれているか」を知ることです。
- 次に、何かをデザインするときにマテリアルデザインをチェックします。マテリアルデザインを何度もチェックしながらデザインすることで、少しずつマテリアルデザインを理解することができるでしょう。
推奨の使用方法
- まずは、コンポーネント部分から始めることをお勧めします。コンポーネントは具体的で、理解しやすく、使用しやすいからです。
- コンポーネント、スタイル、基礎の順で理解しやすいです。
目次
- 00:00イントロ
- 00:23 CardUIについて
- 03:52 事例で理解する
- 08:23 Cardにするデメリット
- 10:39 いろんなCardUIを見る
公式のドキュメント
Card - Material Design 3
https://m3.material.io/components/cards/accessibility
MD3になってスタイルがAndroid独自になったのでちょっとわかりづらい気もする
Card - Material Design 2
https://m2.material.io/components/cards
こっちの方が大元の概念はわかりやすい気がする。
□ 公式に書かれていること
- ⚡ カードは単一の含まれるユニットとして識別可能
https://m3.material.io/components/cards/overview - ⚡ カードには、画像から見出し、サポート テキスト、ボタン、リスト、その他のコンポーネントまで、あらゆるものを保持できます。
https://m3.material.io/components/cards/overview - ⚡ カードのレイアウトとサイズは、その内容によって異なります。カードを作成する唯一の正しい方法はありません。
https://m3.material.io/components/cards/overview
□ よくある使い方と特徴
- Cardは”オブジェクト/コンテンツ”を表現する時に使われるUIパターン
- 例:食べログのお店一覧の「お店」オブジェクト
- 特徴としては、Card内にさまざまな情報を詰め込めるが1つの独立したものとして見えること
- そのため、複数のアクション、複数の情報を1つにまとめたいときに重宝される
- 独立して見えるので、タップ範囲が明確である
□ カードの利点
さまざまな情報をまとめて、”1つのオブジェクト”として認識することが容易である
⚡ カードを使用して、単一のトピックに関するコンテンツとアクションを表示します。
カードは、関連性のある実用的な情報を簡単にスキャンできる必要があります。テキストや画像などの要素は、階層を明確に示す方法でカードに配置する必要があります。
ドキュメント
動画でも使っているドキュメントはこちら
https://takumikai.notion.site/1-Card-UI-a9050b76809841e798297736c1fd3b9d?pvs=4
目次
- 00:41 NavigationBarとは？
- 07:26 NavigationBarの使い方
- 14:05 NGな使い方
- 19:41 質問に答える
- 22:17 スマホとWebでナビが違う理由は？
公式のドキュメント + 関連
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の基本を学ぼう！
ユーザーインターフェース（UI）をデザインする上で、適切な選択系コンポーネントの使い分けは非常に重要です。Googleが提唱するデザインシステム「マテリアルデザイン」では、チェックボックス、ラジオボタン、スイッチの使い分けについて明確なガイドラインが示されています。本記事では、マテリアルデザインにおけるこれらのコンポーネントの違いと適切な活用法について、具体的な事例を交えながら解説していきます。
続きはクイズ形式で、実際のUIを使って選択UIの違いを考える動画になってます↓
動画の続きはこちら（メンバー限定です）UIを本格的に学びたい方はBONOのメンバーになろう
https://www.bo-no.design/contents/material-design-selectui-01
目次
- 00:00 3つの選択UIを解説
- 00:23 選択UIについて
- 06:17 チェックボックスの使い方
- 11:04 ラジオボタンの使い方
- 14:52 スイッチの使い方
- 19:20 後編でさらに使い方を学びます
マテリアルデザイン
Material Design 3
https://m3.material.io/components/switch/guidelines
Material Design 2
https://m2.material.io/components/checkboxes#usage
【AI要約】チェックボックス、ラジオボタン、スイッチのUIの違い
※以下AIによる翻訳です。詳しい内容と理解には動画をご覧ください！
マテリアルデザインでは、以下のように選択系UIを使い分けるよう推奨しています。
- チェックボックス：複数の項目から複数選択が可能な場合に使用
- ラジオボタン：複数の選択肢から一つだけを選択する場合に使用
- スイッチ：オン・オフやアクティブ・非アクティブなど、独立した項目の状態を切り替える場合に使用
これらのUIは一見似ていますが、使用目的が異なります。適切に使い分けることで、ユーザーにとってわかりやすく操作しやすいインターフェースを提供できます。
各UIの詳細な使用方法と注意点
チェックボックス
チェックボックスは、複数選択が可能な項目に使用します。例えば、メールの通知設定で「毎週のお知らせを受け取る」「新着情報を受け取る」など、複数の選択肢がある場合に適しています。また、親子関係のある階層構造で使用することもできます。親のチェックボックスをクリックすると、子の項目が全て選択・非選択されるといった動作が可能です。
チェックボックスを使用する際は、以下の点に注意が必要です。
- 選択肢が複数ある場合に使用し、単一選択の場合はラジオボタンを使用する
- クリック範囲は十分に確保し、ユーザーが選択しやすいようにする
- 親子関係がある場合、階層構造をわかりやすく表現する
ラジオボタン
ラジオボタンは、複数の選択肢から一つだけを選択する場合に使用します。例えば、「性別」や「支払い方法」など、複数のオプションから一つを選ぶ場合に適しています。
ラジオボタンを使用する際は、以下の点に注意が必要です。
- 一度に一つだけ選択できるオプションを示すために使用する
- 選択肢が5つ以下の場合に使用するのが望ましい（それ以上の場合はドロップダウンメニューを検討）
- 水平方向に並べるよりも、縦方向に並べる方が選択肢の区切りがわかりやすい
スイッチ
スイッチは、オンとオフを切り替える際に使用します。Wi-Fiや車のスイッチなど、独立した項目の状態を切り替える場合に適しています。
スイッチを使用する際は、以下の点に注意が必要です。
- オンとオフの選択以外には使用しない
- 対象の項目が独立していて、オンオフの状態が明確な場合に使用する
- 複数選択や順序がある場合は、決定ボタンなど別の方法を検討する
マテリアルデザインとiOSのヒューマンインターフェースガイドラインの違い
マテリアルデザインはGoogle製のOSであるAndroidアプリの開発において主に使用されるガイドラインですが、一方でAppleが提供するiOSアプリの開発においては、ヒューマンインターフェースガイドライン（HIG）が参考にされます。
マテリアルデザインとHIGは、基本的な考え方は似ていますが、プラットフォームの特性を反映した違いがあります。例えば、iOSではスイッチの代わりに「トグル」と呼ばれるUIが使用されることがあります。トグルはスイッチと同様の役割を果たしますが、見た目が若干異なります。
UIデザインを行う際は、対象のプラットフォームのガイドラインを理解し、適切なコンポーネントを選択することが重要です。ただし、ガイドラインはあくまで参考であり、状況に応じて柔軟に対応することも必要でしょう。
マテリアルデザインを活用したUI設計
マテリアルデザインは、UIデザインの辞書のような存在です。実際のプロジェクトでこれらのガイドラインを参考にし、ユーザー体験を向上させるUIを設計していくことが重要です。
選択系UIの適切な使い分けは、ユーザビリティの向上につながります。マテリアルデザインのガイドラインを参考に、実際のアプリやWebサイトのUIを観察し、ベストプラクティスを学んでいきましょう。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
よく見るTabUIの基本を知ろう
Twitterでも見る馴染みのあるUIです。基本的なスタイルなど詳しくはMaterial Designを読んで参照するようにしてください。
続きはBONOメンバーになると閲覧できます！↓
・実際の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の理解を深めよう
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
