Inc.仕事百科デザインガイドラインって何?|仕事百科デザインガイドラインって何?|仕事百科デザインガイドライン仕事百科シェアツイートはてブ送るみなさんは「デザインガイドライン」という言葉を知っていますか?デザインガイドラインとは、デザインを進める際に従うべき指針やルールを文書化したもののことで、多くのアプリはこのデザインガイドラインに沿って設計されています。Design」について紹介しながら、デザインガイドラインとは何か、一緒に考えていきましょう。デザインガイドラインとはデザインガイドラインは、その名のとおり、デザインを進める際の指針のことです。対象のプラットフォームにおけるデザイン原則やレイアウトや色、インタラクションなどに関するルールが規定されています。あるプラットフォームで動作するアプリは、一般的に対象のデザインガイドラインに則ってデザインを行うことが推奨されています。代表的なデザインガイドラインとして以下の2つが挙げられます。GuidelinesApple社が設けたデザインガイドライン。iPhoneをはじめとする様々なApple社デバイスで動作するアプリに対するルールが規定されています。1978年の初版から更新され続けている歴史あるデザインガイドラインです。DesignGoogle社が設けたデザインガイドライン。Designに則った設計が推奨されています。(→原文はこちら)本稿ではあまり取り上げませんが、デザインガイドラインはサービス単位で設けられることもあります。その場合、サービス自体のブランドイメージなども反映され、より具体的なルールが規定されたガイドラインとなります。似たような言葉としては”トンマナ”や”スタイルガイド”などが挙げられます。デザインガイドラインを守るメリットデザインガイドラインは、あくまでガイドライン。絶対にガイドラインに従わなくてはいけないのかというと、そうではないのかもしれません。ガイドラインを守ることで得られるメリットもあります。そのメリットをいくつか紹介します。操作性を担保できるデザインガイドラインに従って設計されたアプリは、プラットフォーム全体と一貫性を持たせることができます。一貫性を持たせることは、使い慣れたUIやそのプラットフォーム特有の操作感から大きく外れることを防ぎ、ユーザーの期待する操作性を実現することに繋がります。結果として、プラットフォーム上での最適なUI設計を実現できます。美しさを担保できるデザインガイドラインは、操作性や視認性などももちろんですが、大前提として美しさへの配慮も為されています。デザイン未経験者でもデザインガイドラインに則って設計を行えば、美しいUIを最低限再現できるでしょう。大手企業の知見を得られるApple社やGoogle社などのような大手企業が設けているデザインガイドラインには、長年蓄え続けてきた様々な知見が詰め込まれています。一個人としての価値観に基づく設計ではなく、デザインガイドラインに基づく設計を行うことで、信頼性の高いUI設計のヒントを得ることができます。「ガイドラインを守らなければ!」という意識ではなく、「ガイドラインを参考にして、より良いデザインにしよう」という意識で利用すると良いでしょう。最低限抑えておきたいデザインガイドラインいざデザインガイドラインを読もうと思っても、全文英語かつ長文という点で挫折してしまう人もいるかと思います。Designにおいて最低限抑えておきたい項目をいくつか紹介していきます。原文には図解や動画もあるため、ご紹介した項目はぜひ見てみてください。(一部日本語翻訳されている項目もあります。iOSのデザイン原則iOSにおけるデザイン原則が規定されています。デザインガイドラインが何を目指しているのかを再確認しましょう。複数デバイスに適したレイアウトレイアウトに関して意識すべきポイントが記述されています。iOSには様々なデバイスや状態(縦・横)が存在するため、どのような環境でも適応可能な設計が必要になります。デバイスに関する知識を頭に入れておくと実践的な場面で役立つでしょう。色に関して意識すべきポイントが記述されています。色は、上手に使うことで視認性向上や誘目性向上など様々な効果が得られます。必要なシーンで適切な色を選択できるようになるヒントが得られると思います。(SF)というフォントが正式採用されています。サイズや太さなども用途ごとに決められています。Designにおけるデザイン原則が記述されています。デザインガイドラインが何を目指しているのかを再確認しましょう。Designでは、三次元空間を表現したUIが特徴的です。重なりや高さを表現するための光や影を意識した設計についてポイントを抑えておきましょう。レイアウト要素の大きさや間隔の取り方、配置方法などレイアウトに関するルールが規定されています。UI設計全般に共通することも多いため、設計のヒントとして参考にするのも良いでしょう。Designを設計するために必要な色の構成が決められています。その構成や色の使い方など、色に関する多くのことを習得できます。Designでは、Robotoというフォントがよく用いられます。ここではその他のフォントを例に挙げながら、タイポグラフィの基礎を習得することができます。Guidelinesに沿ったデザイン筆者が作った実例ガイドラインに沿ったデザインは、実際のアプリで触れることができますが、ここで、筆者(村田)が実際に制作したグルメアプリのUIの一部を解説します。Guidelinesに沿った設計を心掛けました。ガイドラインに沿った設計を行うことで、iOS全体との一貫性を保ったUIに仕上げることができます。Guidelinesに沿った設計を行うと言っても、アプリのブランドを意識した配色や見せ方を工夫することで、独自性も十分に表現できます。Apple社が公開しているiOSのデザインキットにある、iOS標準のものを使用しています。いった実際の部品(コンポーネント)を用いることで、実装されるイメージが湧きやすいデザインを制作できます。最後にデザインガイドラインは、UIデザインを学ぶ人の参考書としての役割が十分に果たせるくらい、為になる内容が詰め込まれています。一度に全てを把握することは難しいですが、要点だけでも抑えておくと今後の制作に活かせるはずです。ガイドラインという言葉に少し堅苦しいイメージを持ってしまうかもしれませんが、この記事で少しでも興味を持ってもらえたら嬉しいです。エンジニアリングとデザインの二刀流。UIUXデザインを勉強中。本コラム現役クリエイターに聞く!現場で使用するツールと学生時代に習得すべきツール制作ツールコラムゲームが社内のコミュニケーションツール。【PR】株式会社Aiming特集はたらくビビビットは、クリエイターを目指す学生のための、キャリア教育メディアです。はたらくデザイナーのポートフォリオや関わっているプロジェクトについて知ることができます。