そもそもデザインガイドラインとは何？
- デザイナーによる、アプリやWeb製作者に向けた、デザイン指示書です。
- デザイナーが直接指示をしなくても、常に一定の品質のデザインを担保するために作ります。
- 内容に決まりはないですが、画面ごとの詳細の設計方法ではなく、製品全体を通したデザインの共通ルールが記載されています。
- アプリのプラットフォームを展開している大手企業(AppleやMicrosoft、Google)は、無料でデザインガイドラインを公開しており、それぞれのプラットフォームのアプリの品質を担保しています。
OSやデバイスなどのプラットフォームごとにデザインガイドラインがありますが、たとえそのプラットフォームのデザインをするつもりはなくても、UIデザインに関する多くの知見を得ることができます。
Apple Human Interface Guidelines(英語)
アップル製品をデザインする際のデバイスごとの最新のガイドラインです。英語ですが、Chromeの自動翻訳を使えば問題なく読めます。
実は最新のドキュメントよりも、初期のヒューマンインターフェースガイドラインのほうが、文量が少なく読みやすいです。かろでん☆みゅーあさんが保管されています。 アップル ヒューマンインターフェースガイド。
Microsoft WindowsアプリUXデザインガイドライン(日本語PDF)
Microsoftのデザインガイドラインです。
特に37ページの"デザイナー向けユニバーサル Windows プラットフォーム (UWP) アプリの概要"の章にデザインに関する記述がまとめられています。
開発者用デザインガイドラインはWebで公開されています。内容はPDF版と少し重複していますが、一部デザインに関する内容の除外とコーディングに関する記述が追加されています。
こちらも、Windows7時代のUXデザインガイドラインがおすすめです Windows ユーザーエクスペリエンスガイドライン。最新のものは抽象的でボリュームも少ないですが、デザインに関する細かいコンセプトが多く記載されており勉強になります。
特に645ページのレイアウトに関する記述を見て、僕がデザインしていた当時(2010年ごろ)、要素をどこにおけばいいのかということが少しわかりました。
Google Material Design(英語)
Googleが提案しているマテリアルデザインのガイドラインサイトです
AppleやMicrosoftと比較すると、よりコンセプチュアルになっています。こちらは勉強するというよりは、非常によく考えられたデザインの設計書を読むという感じです。UIをマテリアル(素材)と考え、物質的に捉えます。それがどんな薄さなのか、影を落とすのか、といった内容です。
AppleやWindowsと異なり、面白いなと思うのは、Galleryというデザインコミュニケーションツールを公開していたり、Device Metricsというデバイスの情報一覧ページを作っていたり、音に関するガイドを体験できたりするところです。
ガイドライン自体もかっこよくレイアウトされており、絵と文章のバランスが絶妙で見ていて楽しいです。やはりWebで一気に世界に名を馳せらせたGoogleらしいアプローチですね。
その他のガイドラインについて
デザインの勉強となる情報として、続けて紹介するとボリュームがとても多くなるので、別記事で紹介します。
- BtoB向けのUIフレームワークにもデザインガイドライン
- ユーザビリティに関する研究や論文