ガイドラインを読め読め！と言ってる人がいたり、採用の募集要項に書かれていることがあります。ただ「ガイドラインを理解しているとは？」の定義ってまあ難しいです。
ただ、今回紹介するマテリアルデザインとヒューマンインターフェースガイドラインの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のソフトウェアデザインの哲学をキャッチアップする場所でもあります。
ガイドラインを読め読め！と言ってる人がいたり、採用の募集要項に書かれていることがあります。ただ「ガイドラインを理解しているとは？」の定義ってまあ難しいです。
ただ、今回紹介するマテリアルデザインとヒューマンインターフェースガイドラインの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のソフトウェアデザインの哲学をキャッチアップする場所でもあります。
ガイドラインを読め読め！と言ってる人がいたり、採用の募集要項に書かれていることがあります。ただ「ガイドラインを理解しているとは？」の定義ってまあ難しいです。
ただ、今回紹介するマテリアルデザインとヒューマンインターフェースガイドラインの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のソフトウェアデザインの哲学をキャッチアップする場所でもあります。
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Block quote
Ordered list
Unordered list
Bold text
Emphasis
Superscript
Subscript
0 Comments