[&] UI Design Guidelines

本投稿は UI Design Advent Calendar 2015 のためのものです。
http://www.adventar.org/calendars/987

UI デザインも、スマートフォンのアプリ一個だとそんなに気にしなくていいかもしれないが、
複数のサービスにまたがってきたり、長い間サービスを続けると担当者が変わったりして、
統一感を保つ意味でも、ブランディングの意味でも、デザインガイドラインを用意して置いたほうが
良い場合が多い。最初の手間は多少かかったとしても、デザインガイドラインを作った方が指針として
拠り所ができる。
エンタープライズ系のアプリだと、数年間大きな変更無しに使い続けられることも多いし、
逆に更新頻度が高い新しいアプリでも、担当者が変わったりして、
最初の思想や考えが忘れ去られてしまうことも多いからだ。

ここでガイドライン作りの難しいところは、あまりにも厳密に規定を決めてしまうと、
反映しづらく、守りづらいものになってしまうことだ。
その一方、解釈の余地がありすぎると、迷いが生じてしまう。
そういった落とし穴に陥らないよう、ガイドラインのための 25のポイントの考えが役立つ。
また、最後に、参考となる、ちまたのガイドラインをいくつか紹介してあります。

■使いやすいデザインガイドライン、スタイルガイドを作るための 25のポイント

1. もったいぶらない

2. 細かすぎない

3. 完璧である必要は無い

4. ガイドラインに不可欠な要素
　　会社名の表記方法
　　倫理的規定
　　ロゴ、フォント、色、言葉の規定
　　写真の利用に関するガイド
　　付帯情報など

5. クライアントによってオプションを用意する
　　フルバージョンと、簡易バージョンなど

6. ブランドを理解し、すぐに適応できるもの

7. あれはダメこれはダメと、説教っぽく書かないこと

8. ガイドラインは、料理のレシピ本のようなもの
　多少のアレンジは許されても不味いものにならないように

9. 実際に目に見える事柄に集中すること

10. 素朴こそ美学

11. 親切に具体的に書く

12. PDF1ファイルにまとめるような扱いやすいものに。
　　ロゴの画像をダウンロードするため5回もクリックするようではいけない

13. 文章を書く専門家、コピーライターと一緒に作業しましょう

14. 正しい文体を定義しましょう。やさしく話しかけるように

15. 間違いが無いかチェックし、正しく校正しましょう

16. ページに表示される要素を定義しておきましょう

17. ガイドライン内の画像素材は別途ダウンロードできるようにしておきましょう
　将来更新の予定がある場合は、日付やバージョン番号で見分けられるようにしましょう

18. アートワークのサンプルをいくつか示しましょう

19. どの書体を選ぶのか、どんな時にどの大きさと太さの書体を使うのか示しましょう

20. なぜそのような決まりにするのか、根拠を説明しておきましょう

21. ありそうな質問とその回答をあらかじめ用意しておきましょう

22. 資料が説明無しで一人歩きする場合があることを考慮しましょう

23. 他のブランドとコラボレーションする時の許せる範囲と禁止事項を明確にしましょう

24. 部屋に籠って作ったものは完璧ではありません。外に出てどう利用されるかを考えましょう

25. いくつかの異なるパターンの例を示しておいてください

How to create a design style guide: 25 pro tips
via. http://www.creativebloq.com/design/create-style-guides-1012963

参考：

■定番もの
iOS Human Interface Guidelines
https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Material Design
http://www.google.com/design/spec/material-design/

Windows UX Guideline
http://msdn.microsoft.com/ja-jp/library/aa511258.aspx

Using Facebook Brand Assets
https://www.facebookbrand.com/

Google-Visual-Assets-Guidelines
https://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077
https://www.behance.net/gallery/9084309/Google-Visual-Assets-Guidelines-Part-2

Apple Identity Guidelines
http://issuu.com/bondo/docs/apple_identity_guidelines

Starbucks, “We Proudly Serve” Identity and Logo Usage Guidelines
http://issuu.com/bondo/docs/qsr_starbucks__we_proudly_serve__lo

Salesforce Lightning Design System
https://www.lightningdesignsystem.com
Salesforce Visual guidelines for Salesforce1
http://sfdc-styleguide.herokuapp.com/

HP Grommet
http://grommet.io/

Oracle Alta UI
http://www.oracle.com/webfolder/ux/middleware/alta/adoption.html

1975 NASA Graphics Standards Manual.
https://www.kickstarter.com/projects/thestandardsmanual/reissue-of-the-1975-nasa-graphics-standards-manual?ref=nav_search

SAP OpenUI5
http://sap.github.io/openui5/

New York City Transmit Authority Graphics Standards Manual
http://standardsmanual.com

Amazon User Interface Guidelines and Conventions
https://developer.amazon.com/appsandservices/apis/earn/in-app-purchasing/docs/cx-ux-guidelines

McDonalds, Reference Guide
http://issuu.com/corporateidentity.blog/docs/guidline_mcdonalds

KFC, Brand Book
http://issuu.com/janjaneczek/docs/brand_book

Sony, Name and Logo Guidelines
http://issuu.com/bondo/docs/logo_name_and_logo_guideline

Lexus, Brand Guidelines
http://issuu.com/janjaneczek/docs/lexusbrandguideline

LEGO, Identity
http://issuu.com/threesquaredesign/docs/lego_standard_manual

BBC Future Media Standards & Guidelines
http://www.bbc.co.uk/guidelines/futuremedia/
http://www.bbc.co.uk/guidelines/gel/

12 magically meticulous design style guides
http://www.creativebloq.com/branding/great-examples-design-style-guides-3132070

A huge list of Style Guides and UI Guidelines
http://www.theuxbookmark.com/2010/08/ux-articles-and-research-papers/creative-design/a-monster-list-of-ui-guidelines-style-guides/