{"data":{"site":{"siteMetadata":{"title":"bauhausify","siteUrl":"https://www.bauhausify.com","subtitle":"美大出身のWEBエンジニアリング奮闘記","descriptionMyself":"\n多摩美術大学
プロダクトデザイン専攻卒業 ->
GUIデザイン会社勤務 ->
\n現在フロントエンジニア
\n
\nMy site ->
\nwww.mwrote.com\n"}},"markdownRemark":{"id":"58798d4e-8c27-562f-9281-b460a21a2fdb","html":"

\n \n \n \n \n \n \n \nそもそもデザインガイドラインとは何？

\n\n

OSやデバイスなどのプラットフォームごとにデザインガイドラインがありますが、たとえそのプラットフォームのデザインをするつもりはなくても、UIデザインに関する多くの知見を得ることができます。

\n

\n \n \n \n \n \n \n \nApple Human Interface Guidelines(英語)

\n

アップル製品をデザインする際のデバイスごとの最新のガイドラインです。英語ですが、Chromeの自動翻訳を使えば問題なく読めます。

\n

実は最新のドキュメントよりも、初期のヒューマンインターフェースガイドラインのほうが、文量が少なく読みやすいです。かろでん☆みゅーあさんが保管されています。 アップル ヒューマンインターフェースガイド。

\n

\n \n \n \n \n \n \n \nMicrosoft WindowsアプリUXデザインガイドライン(日本語PDF)

\n

Microsoftのデザインガイドラインです。
\n特に37ページの\"デザイナー向けユニバーサル Windows プラットフォーム (UWP) アプリの概要\"の章にデザインに関する記述がまとめられています。

\n

開発者用デザインガイドラインはWebで公開されています。内容はPDF版と少し重複していますが、一部デザインに関する内容の除外とコーディングに関する記述が追加されています。

\n

こちらも、Windows7時代のUXデザインガイドラインがおすすめです Windows ユーザーエクスペリエンスガイドライン。最新のものは抽象的でボリュームも少ないですが、デザインに関する細かいコンセプトが多く記載されており勉強になります。
\n特に645ページのレイアウトに関する記述を見て、僕がデザインしていた当時(2010年ごろ)、要素をどこにおけばいいのかということが少しわかりました。

\n

\n \n \n \n \n \n \n \nGoogle Material Design(英語)

\n

Googleが提案しているマテリアルデザインのガイドラインサイトです

\n

AppleやMicrosoftと比較すると、よりコンセプチュアルになっています。こちらは勉強するというよりは、非常によく考えられたデザインの設計書を読むという感じです。UIをマテリアル(素材)と考え、物質的に捉えます。それがどんな薄さなのか、影を落とすのか、といった内容です。

\n

AppleやWindowsと異なり、面白いなと思うのは、Galleryというデザインコミュニケーションツールを公開していたり、Device Metricsというデバイスの情報一覧ページを作っていたり、音に関するガイドを体験できたりするところです。
\nガイドライン自体もかっこよくレイアウトされており、絵と文章のバランスが絶妙で見ていて楽しいです。やはりWebで一気に世界に名を馳せらせたGoogleらしいアプローチですね。

\n

\n \n \n \n \n \n \n \nその他のガイドラインについて

\n

デザインの勉強となる情報として、続けて紹介するとボリュームがとても多くなるので、別記事で紹介します。

\n","fields":{"slug":"/2019-07-10_UIデザインの原則デザインガイドライン/"},"tableOfContents":"","frontmatter":{"date":"2019.07.10","title":"UIデザインの原則デザインガイドライン","cover":"https://res.cloudinary.com/mwrote/image/upload/v1563109479/bauhausify/3designguideline.svg","category":"Design","excerpt":"UIのデザインって何から始めたらいいのでしょうか？実はデザイナーは特にアプリをデザインする際に、デザインガイドラインをベースにデザインをしています。この記事では、有名な3社、Apple、Microsoft、Goolgeのデザインガイドラインを紹介します。"}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"58798d4e-8c27-562f-9281-b460a21a2fdb","next":{"path":"/2019-07-06_人生のパートナーとなるテキストエディタspacemacs/","title":"人生のパートナーとなるテキストエディタSpacemacs!","category":"Coding"},"prev":{"path":"/2019-07-15_Ptsjsによる実践ジェネラティブアート/","title":"Pts.jsによる実践ジェネラティブアート","category":"Coding"},"relatedPosts":[{"id":"f511504c-0429-54aa-a2b2-17d049680fa7","fields":{"slug":"/2019-09-08_アトミックデザインはコンポーネント再利用の設計方法/"},"frontmatter":{"title":"アトミックデザインはコンポーネント再利用の設計方法","date":"2019-09-08T00:00:00.007Z","excerpt":"アトミックデザイン(Atomic Design)はデザイン手法と思われがちですが、エンジニアリング、設計手法に近い考え方です。その考え方の一例を紹介します。","templateKey":"post","category":"Design","propertags":null,"commontags":["uidesign","arch"]}}]}}