はじめに
本記事では、UI・UXデザイン方面でつよつよになりたい筆者が、UI・UXデザインに取り組んでいくなかで身に染みて感じたことを書いています。
一般的なデザインを学びたい
これまでの記事で幾度となく「変なオリジナリティを出すな！」「ベンチマーク大事！」ということを述べてきました。
しかし、いざやってみると難しいと感じます。
たとえば、「一般的な」トグルスイッチをUIに配置するとします。
すると、まず以下のようなことを考えることになります。
- トグルスイッチの色
- トグルスイッチの大きさ(クリック/タップできる領域)
- ラベルの位置(トグルスイッチの右？左？)
- ラベルに示す内容
もしかすると「そもそもその要素をトグルスイッチで選択させることは一般的であるか」自体も、考える必要があるかもしれません。
デザインに絶対的な正しさは無いと思いますが、「どういうデザインが一般的で良いとされているのか」は、知識として知っておきたいです。
そういった場合の参考先として、筆者はGoogleやApple等の有名企業の「デザインガイドライン」をまず見てみることが多いです。
デザインガイドラインとは、製品やwebサイト等のUI/UXの一貫性を確保する目的でデザインのルールをまとめた文書です。
企業によってはデザインガイドラインを公開しているため、web上で見てみることができます。
有名企業のガイドラインを見てみよう
有名企業のガイドラインとしては以下の3つが挙げられるかと思います。
Google Material Design
Googleが2014年に発表したデザインガイドラインです。
その名の通り物理的な世界からインスピレーションを受けた、美しく使いやすいUI/UXを追求したデザインスタイルです。
Figmaのデザインキットが公開されていたりもします。
https://www.figma.com/community/file/1035203688168086460/material-3-design-kit
例えばスイッチのガイドラインは以下のような感じ。
(出典：Google)
色やサイズ、使い方(どのような場合でスイッチを使うか、逆にどのような場合でスイッチではないUIを使うべきか)、インタラクションなどが詳細に決められています。
Human Interface Guidelines (Apple)
Appleのデザインガイドラインです。
直感的で自然なUXとシンプルで美しいデザインが特長のデザインスタイルです。
スイッチのガイドラインは以下のような感じ。
(出典：Apple)
iOSやMacOS等複数のプラットフォームがあるためか、それぞれのプラットフォームごとの考慮事項なども書かれています。
また、ベストプラクティスの記載がわかりやすく、読むだけでも勉強になりそうです。
Fluent2 Design System (Microsoft)
最近存在を知りました(もっと早く知りたかった……)。
複数のプラットフォームで使いやすく、ユーザーの邪魔をせず、「Microsoftらしい」ことをデザインの設計原則としています。
これもFigmaのデザインキットが存在します。
https://www.figma.com/community/file/836828295772957889/microsoft-fluent-2-web
スイッチのガイドラインは以下のような感じ。
(出典：Microsoft)
触ると動きます。ライトテーマ・ダークテーマでの見た目も確認できます。
また、ユーザーにとってわかりやすい(=認知負荷を低くする)ことを重視しているのか、スイッチのラベルの文言などの言葉の使い方にも「名詞または短い名詞句を使用する、分かりにくい場合は動詞を追加する」、「質問にしない」などの指定が入っています。
さいごに
今回は「一般的に良いとされているデザイン」の学習の目的で有名企業のデザインガイドラインを紹介しました。
しかし、デザインガイドラインは本来、企業や製品のデザインのルールを決めておくことによってデザイン業務の効率化を図ったり、デザインコンセプトの認識を関係者間で共通化したりすることを目的として作成するものです。
お勤めの企業やお使いの製品などにも、探してみるとロゴやwebサイト等にデザインガイドラインが存在すると思いますので、機会があれば見てみると良いかもしれません。