エンジニア向けのデザイン入門

きーぼうです。
前職までデザインについては１ミリも考えたことがなかったのですが、
最近、デザインの重要性を強く感じたので学んだ内容を紹介します。
デザイン未経験のエンジニア向けの記事になります。

デザインとは？

デザイン　＝　設計　という意味です。
その中で、システムのデザインは利用者がシステムを利用して目的を達成するために見え方や見せ方を考えることになります。
業務効率化のためのシステムで、分かりにくく使いにくいデザインは無駄な業務を増やしてしまうためデザインを学ぶことは大変重要になります。

デザインの基本

デザインの4原則

近接、整列、強弱、反復。
*詳細の説明は、多くのwebサイトに説明が記載されているので割愛します。

色

Webサイトの配色は、ベースカラー、メインカラー、アクセントカラーの3色。
与えたい印象から色は決めましょう。

形

丸い形は柔和な印象を与えます。
丸い形はビジネスの場面において「安っぽく」「正確性に欠ける」印象を与えるので、注意が必要です。

人の特性とデザイン

デザインを学ぶ際に人の特性を理解しながら学ぶとよりデザインについて理解できます。今回はその中からいくつか紹介します。

経験による先入観(なじみのものに関する知覚パターン)

人は同じ場面を繰り返すうちに、その場面になると「自分が何を知覚するのか」予想するようになります。
例えば、風呂にいくと風呂桶とシャワーがあるとイメージするようにです。

それは、周囲の情報を毎回細かく精査せずに日々を快適にする知的ショートカットを行っているからです。
毎回、周囲の情報を精査していると大変ですからね。

システムに置き換えると、自分がよく使うアプリやなじみの操作パターンや習慣にしていることから影響をうけるので、
システムを作る際に多くの人が使っているアプリと同じボタンや似ているレイアウトにすると、システムの学習コストが少なくすみ、
説明があまり必要なくなり、多くの人に受け入れてもらいやすくなります。

逆に多くの人が使われているシステムと似ているのに、操作が微妙に違ったりするとご操作の原因になったりするので注意が必要です。

目標による先入観(ふるい分け)

目標に関係のない事は、ふるいにかけて除去し、意識にのぼらないようにする傾向があります。
例えば、初めて見る道具箱の中からハサミを取ってきてと頼まれたあとに、追加でドライバーもあったか確認されると、覚えてないといった現象です。

それは、必要なものを周囲の世界から選び出せるよう目標に沿った知覚内容の振り分けを行っており、ハサミ以外は目標に関係ないと判断されて
認識してないことが原因になります。
この現象は年齢が高いほど顕著になっていきます。

システムに置き換えると、目標に関係ない情報と判断されると認知されないので
システムを作る際に、利用する導線上に必要な情報を記載し、関連があるように思わせる必要がでてきます。

シンプルさと複雑さについて

基本的にシステムは、多くの人が使うのでわかりやすくシンプルであることが求められる傾向にあります。
それは説明不要で使いやすいツールが万人に愛されるからです。
ただ、一部を除いては複雑さが求められるシステムもあります。

それは、飛行機の操縦席などの専門的なシステムです。

１つの操作ミスが大きな事故になるため、そういったシステムは操作の信頼性や即時性が求められます。
なので、専門性が低い場合はシンプルなシステムがよく、専門性が高い場合は複雑なシステムがいいということになります。

他にも人の特性を学んでデザインに活かせることはまだまだあります。
気になる方はぜひ「UIデザインの心理学」を手にとってみてください。

まとめ

個人的にデザイン未経験ならまず、「UIデザインの教科書」と「UIデザインの心理学」を読んだほうがいいと思いました。
引き続き私もいろんなアプリやウェブサイトや書籍を見て、デザインを勉強したいと思います！

https://www.amazon.co.jp/exec/obidos/ASIN/4798155454/
https://www.amazon.co.jp/exec/obidos/ASIN/4844337718/
ではでは！