UIデザインの小さな工夫がよく分かる良書！ 実践的なテクニックを詳しく解説したデザイン書 -縁の下のUIデザイン

WebサイトやスマホアプリのUIデザインには、小さな工夫がたくさん詰まっています。「なぜボタンがここにあるのか」「なぜその要素に赤を使用し、または避けなければいけないのか」などUIデザインに施された工夫の意味と意図を具体的な事例で詳しく解説したデザイン書を紹介します。

UIデザインの実践的な知識やテクニックを深めたい人、デザインの視野を広げたい人に特にオススメします！

本書は「WEB+DB PRESS」に掲載された著者の連載記事を最近のUIデザインに合わせて大幅に加筆修正し、新規の書き下ろしも加えられた解説書です。

WebサイトやスマホアプリのUIデザインに関するノウハウがさまざまな角度からまとめられており、具体的なUIデザインのテクニックも豊富に解説されています。

Kindle版も同時発売されています！

• 縁の下のUIデザイン Kindle版

版元様より許可をいただいたので、紙面のキャプチャを少しだけご紹介。

本書は全7章構成、色や文字や動きによる見せ方の工夫、機能表現やUIコンポーネントの使い方の工夫、ユーザーの行動への配慮、画面と画面遷移の設計など、小さな工夫でUIデザインに大きな効果をもたらす実践的なテクニックを学べます。

第1章は「色、文字、動きによる見せ方の工夫」
UIデザインでよく使用される色の一つが「赤」です。注意などを表現する要素に使用されることが多く、また数字の減少やセール品の価格表示にもよく使用されます。しかし、単に数字の減少を赤にするのではなく、上記のGoogleの左から3番目にある数字のようにネガティブな要素に赤を効果的に利用しています。

本書ではこういったぱっと見では気がつかないかもしれないけど、あるとないとでは大きく違うUIデザインの工夫がたくさん解説されています。

UIデザインで無彩色のグレーを使用することが多いと思います。ちょっとした要素の背景に色を敷きたいときに、明るいグレーは非常に便利な色です。しかし、グレーが多すぎると全体的に無機質で寂しい印象になりがちです。そんなときは、グレーにテーマカラーに使用している色を少し混ぜることで、全体の調和を美しく整えることができます。

第2章は「機能表現の工夫」
たとえば、更新した情報をユーザーにどのように認識させるか。「お知らせ」で伝えたり、「更新」のアイコンをつけて一覧に表示したり、モーダルを表示したり、いろいろな方法があります。それぞれにメリットとデメリットがあり、コンテンツにあった方法を使用したいですね。

第3章は「UIコンポーネントの使い方による工夫」
UIデザインでよく使用される要素の一つが、ボタンです。ボタンはユーザーのアクションを左右する重要な要素で、適切なデザイン、適切な配置をしないと使い勝手が大幅に低下してしまいます。

カードもUIデザインでよく使用される要素の一つです。複数の情報をまとめるのに便利なカードですが、カードのデザインや余白の取り方で使い勝手が大きく変わります。たくさんの事例とともに、そこに施されたUIの工夫が解説されています。

第4章は「ユーザーの行動への配慮」
ユーザーが起こすさまざまなアクション、エラーを効果的に伝えるには、確認は何を確認してもらうことが大切なのか、なんとなく眺めるというのを快適にするには、コンテンツが空の状態のときなど、UIデザインには欠かせないものです。

第5章は「画面と画面遷移の設計」
画像とテキストを配置するとき、画像を右と左のどちらに配置しますか？ これは画像の重要度によって異なります。日本語の場合、左から右に目線を動かすので、左におくと画像の重要度が上がります。また、画像がある場合とない場合があるときは、どうなるでしょう。なんとなく配置するのではなく、きちんと意図を持ってデザインすることでより大きな効果を得ることができます。

「もっと見る」をどうデザインしてどう配置するか、長くなりがちなコンテンツをどう見やすくするか、横配置メニューのアイテムがおおくなった場合どうするか、など具体的な事例をもとに深く考察されています。

第6章は「コミュニケーションとツール」
この章はこれまでとは少し違って、デザイナーとデベロッパーの協業についてです。実装に対する認識をどのようにすり合わせればよいのか、なかなか難しい問題ですよね。私はデベロッパー出身ですが、デザインをたくさん勉強しました。知らないと見えるはずのものが見えないということがあるからです。

最後の第7章は「考察、雑感」
といってもUIデザインに役立つ工夫やテクニックが詰まっています。たとえば、ボタンのラベル。「キャンセル」「登録」という2つのボタンがあり、「登録する」と動詞にすることで画面の印象を緩和できます。

また、最近ではスマホのUIデザインで「長押しボタン」がよく使用されています。TwitterやPinterestのスマホアプリに採用されており、ショートカットの機能が備わっています。普段とは違う操作やアイデアが何か考えられないか検証されているのも非常に興味深いです。

縁の下のUIデザインの目次

縁の下のUIデザインの目次

縁の下のUIデザインの目次

縁の下のUIデザインの目次

縁の下のUIデザインの目次

縁の下のUIデザインの目次

本書は、UIデザインの実践的なテクニックが満載です。読むときには付箋を用意して、気になったところをチェックしておくことをお勧めします。次にUIデザインに取り組むときに、これを取り入れたいというのがたくさんあると思います。

献本の御礼

最後に、献本いただいた技術評論社の担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス