仕事

UIデザインについて

デザインスケッチ

こんにちは、
ラクガキブログのコスダです。

今回は「WebのUIデザイン」についてお話しようかと思います。

僕の専門分野はWebのUI及びビジュアルデザインです。
もう15年以上やってます。

Webデザインと一言で言いますが、実は結構複合的で、かなり広いジャンルをカバーしなければなりません。
そこで今回はUI(ユーザーインターフェース)デザインにテーマを絞ってお話します。

そもそもUIってなんですか?
というところなのですが、簡単に言うと

ヒトとモノをつなげるもの

というところでしょうか。
Webの画面上のみならず、例えばテレビのリモコンや車操作系のデザイン、キーボード、洗濯機の操作パネルなどなど。

このあたり全部UIデザインです。

つまり、そのモノを使うときになるべく不都合がないようにデザインするというのがUIデザインということになります。

誰もが理解できるようにすることが最大の目的

なにげに普段使っているものはある意味すべてUIデザインされています。
そして、意識しないレベルで浸透してこそのUIデザインです。

例えばテレビのリモンコンなど。
どのメーカーのテレビでも特に困ったことは無いかとおもいます。

ただ、Webデザインというジャンルではもう少し複雑で難しい場合があります。
理由は

デザインすべき要素が多いから

ボタンなのか、見出しなのか、ただの画像なのか、タップ出来るのか、スライドするのか、どのような状態になったら押せるのか。
エラー表示はどう出すのか?

と、上げればキリがないです。

押せたり、動かせたり、音が出たりする、雑誌だと思っていただければその複雑性がわかると思います。

であるからこそ、UIデザイナーという職業が成り立つ訳です。

基本の考え方

僕がUIデザインをする上でたどり着いた結論があります。
それは、

デザインは常に相対的である

ということです。
わかりやすく言うと、

白地に赤いボタンは目立ちます。

薄い地色に赤い文字

これは白と赤のコントラストの値が高いのと、赤は血の色なので、危険色という認識が心理的にあるからです。

実際、赤いボタンはクリック率が高いという集計結果も出ています。

ところが、オレンジの地色に、赤いボタンだとどうでしょうか?

同系色に赤い色

全く目立ちません。
それどころか、どこにあるのかすら
わからない。

「当たり前じゃん」と思うかもしれませんが、これに、動きや上下左右の要素、罫線や文字が入ってきたらどうでしょうか?
かなり複雑になってきますよね?

つまり、周りの状況に応じて形や色は相対的に変化させながら精度、完成度を上げてゆくのがデザインの基本です。

相対的ということはつまり、関係する要素が多ければ多いほど複雑性を増すのでWebにおいてのUIは結構ハードルが高いです。

どうすれば身につく?

正直なところ、師匠がいたほうが良いです。(泣)

なぜならば、デザインは相対的といいましたが、相対的ということは、マニュアル化しにくいということです。

ですが、いくつか出来ることもあります。

  1. かっこいい!と思ったサイトを丸パクリする
  2. とりあえず、photoshop、AdobeXDなどの、アプリケーションの使い方だけはマスターする

この2つは単独でも出来るので、やってみて損は無いと思います。

あと、UIデザインは複合的にCSSの仕組みも知識としては知らないといけないので、コーティング先に習得してしまうとかも学習ルートとしてはあります。

まとめ

今回は軽くUIデザインについて触れました。
考え方も多様にあるので、僕の

デザインは相対的である

という定義もそうじゃないかもしれません。デザインは「これが決定版!」といえないので曖昧なままですいません。

というか、曖昧なままで良いとかなと。
その余白が面白い部分だと思いますので。

では、また次回