エンジニア必見！デザインの基本 "デザインガイドライン" を学ぼう

"（自分は）エンジニアだからデザイン部分は関係ない"

エンジニアの方であれば、1度は上記のような思いが脳裏をかすめたことがあるはずです。
いかがでしょうか。

実際、デザイナーとエンジニアがそれぞれの専門分野を担当するのは当たり前のことです。ただ、だからといってデザインのことを全く知らなくても良い！というわけではありません。

業務上、様々なプロジェクトを進めていく上で、エンジニアがデザインの基本を知っておくことで役立つ場面というのは往々にしてあります。デザイン作業を直接行うことはなくとも、デザインを検討する上でデザイナーとのやり取りがスムーズにできるでしょう。

そこで今回は、デザインの基本「デザインガイドライン」のポイントをまとめてご紹介します。

エンジニアの方は、この機会にぜひデザインの基本を学んでみてはいかがでしょうか。
　　

エンジニアでもデザインの基本を知っておくべき理由

当然、業務を進めていく上でエンジニアとデザイナーは役割が違うので「エンジニアはデザインの基本なんて知らなくていい」と思ってしまいがちです。しかし、実際にはエンジニアだからといってデザインのことを全く知らなくていいというわけではありません。

その理由として、以下のようなことが考えられます。
　　

1. デザイン担当がいない

小さなプロジェクトやチームの場合には、必ずしもデザイン担当がいるとは限りません。エンジニアだけでプロトタイプを制作したり、プロジェクトを進行するケースもあるでしょう。デザインに問題がある場合、どんなにいい機能を持つサービスでも使いづらさなどから価値を損なってしまいます。

2. デザインに疑問があっても伝えることができない

デザインはサービスにおいて重要なもので、高いレベルが求められるものだからこそ、エンジニアから見ても「本当にこれでいいの？」「もう少しこういうデザインにしたほうが……」と感じてしまう部分も多いのではないでしょうか。疑問や不安に思っても、デザインのことをあまりに理解していなければ、デザイナーに対して意見したり、思いを伝えることができません。

プロジェクトに能力の高い完璧なデザイナーがいる場合も多いでしょうが、必ずしもそうとは限りません。そんな時に備えて、デザイナー任せにせず、エンジニアであってもデザインについて基本的なことは理解する必要があるのではないでしょうか。
　　

基本を知ることが上達の近道

エンジニアだからデザインのことは理解できないと考えている方は、実は型を知らないだけかもしれません。「良いデザインにしよう」「ほかにはないものにしよう」という考えだけで闇雲に作っても、良いものは仕上がりません。

まずは基本の型を知り、模倣をしながらデザイン力を高めていきましょう。斬新で独創的なデザインを作るにしても、最初は基本をしっかりと身に付けることが上達への近道です。

ところで、デザインにも色々とありますが、エンジニアが考えるべきデザインといえば「 UI デザイン」です。 UI デザインにおいての型は「デザインガイドライン」として明確にされており、エンジニアがデザインの基本を理解するためのヒントが詰まっています。
　　

デザインガイドラインとは？

「デザインガイドライン」とは、視覚効果、 レイアウト 、表現方法など……デザインに関する様々な要素のルールを定義しているものです。Apple、 Google でもデザインガイドラインを設けています。
　　

Google Material Design Guidelines

画像引用元：https://material.io/jp/guidelines/

マテリアルデザインは、 Google のデザインガイドラインです。現実世界の法則を踏まえたデザインであるマテリアルデザインは、 ユーザー がどのように操作すればいいか直感的に理解できるわかりやすさを目指しています。具体的には3D空間で表現しており、基本原理として「紙」と「インク」の要素があります。

従来、フラットデザインという手法がトレンドとなりましたが、立体感がなくどこを操作したらいいかわからなかったり、要素の区別がつきにくいという問題がありました。これに対してマテリアルデザインでは、現実世界に存在する光や影を追加することで、わかりやすさを表現しています。

影などをデザインに取り入れることはこれまでも一般的にありましたが、何も考えずに取り入れるのでは、意味のないものになってしまいがちです。マテリアルデザインのようにガイドラインに沿うことで、効果的に要素を取り入れ、利便性の高いデザインにすることができます。

また、マテリアルデザインではモーション（動作・動き）も重視しています。モーションには、 ユーザー が行った操作がどのように影響するのかヒントを与える、といった機能があります。

参考：
マテリアルデザイン時代のブランド戦略を考える際の3つのポイント｜ferret
　　

Apple Human Interface Guidelines

画像引用元：https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/

洗練された美しい iOS の UI デザインに関するルールをまとめたデザインガイドラインです。Apple Human Interface Guidelinesでは、デザインのテーマとして次の3つを掲げています。

Clarity.：
読みやすい
                  テキスト
                、正確かつ明瞭なアイコン、適切な装飾で、機能を明確にすること

Deference.：
最も重要な
                  コンテンツ
                と競合しないよう、デザインは控えめに
                  コンテンツ
                を尊重すること

Depth.：
奥行き感が理解の促進と、楽しさを高める

また、インパクトとリーチを最大限に高める アプリ 設計のデザイン原則として、以下の6つのポイントがあります。

Aesthetic Integrity：ビジュアル面で整合性がとれていること

Consistency：一貫性がとれていること

Direct Manipulation：直接的な操作ができること

Feedback：フィードバックが効果的に返ってくること

Metaphors：メタファーをうまく利用すること

User Control：
                  ユーザー
                コントロールが正しく行われること

このようにiOSのデザインは、ガイドラインに則って作られています。ガイドラインは、全体的なデザインのルールだけではなく、 アプリ を様々な壁紙でテストしてみること、システムボタンのタイトルは動詞を使用すること……など、かなり細かい部分まで設定してあります。

参考：
美しいアプリをデザインするには？iOSのアプリ制作に関するデザインガイドラインを徹底解説（前編）｜ferret
美しいアプリをデザインするには？iOSのアプリ制作に関するデザインガイドラインを徹底解説（後編）｜ferret
　　

面白法人カヤック

画像引用元：https://www.kayac.com/news/2016/07/renewal_guideline

面白法人カヤックでは、2016年にリニューアルした コーポレート サイトのデザインガイドラインを公開しています。

従来のものを5倍デザインするという大規模なリニューアルを、デザインガイドラインを作成することによりスムーズにすることに成功しています。5つのデザインごとに要素をまとめたファイルを準備しており、 URL 先ではその一部を見ることが可能です。デザインに合わせて、パンくずや書体も5つ用意しています。
　　

まとめ

以上、エンジニア必見！デザインの基本「デザインガイドライン」のポイントについてご紹介しました。いかがだったでしょうか。

エンジニアであれば、どのようなプロジェクトであっても ユーザー との接点である UI について無視することはできません。そのため、デザインを主に担当するのはデザイナーであっても、エンジニアもデザインについて学び常に意識すべきです。

「デザイナーではないから、デザインには関わらない」という姿勢ではなく、 ユーザー にとってよりよいデザインを提供するために、エンジニアもデザインを理解し時には口を出すことも大事なのではないでしょうか。