センスや感覚で判断するのではなく、使いやすさとクオリティに重視したロジカルなデザイン書 -ウェブデザインの思考法 第2版

※本ページは、アフィリエイト広告を利用しています。

Webサイトやスマホアプリの善し悪しや品質を感覚的に判断されてしまうことがあります。たとえば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういった経験はありませんか?

UIデザインの使いやすさや便利さ(機能性)とビジュアルのクオリティ(情緒性)を両立させたデザイン方法と方針策定のプロセスをロジカルに解説したデザイン書を紹介します。ノンデザイナーズ・デザインブックの内容をさらに掘り下げ、Webサイトやスマホアプリ用にアレンジされています。

ウェブデザインの思考法 第2版

本書はプロジェクトに携わるすべての人にお勧めします。デザイナーをはじめ、それを実装するデベロッパー、ディレクターなど、関係者間の認識の齟齬を防ぎ、円滑にコミュニケーションをおこなうことができるようになります。意味のない手戻りや修正作業も大幅に削減することに繋がります。もちろん、最終成果物に対する品質や満足度も上がり、プロジェクトの成功にも貢献できます。

ウェブデザインの思考法 第2版

ウェブデザインの思考法 第2版
ISBN 978-4-8399-8300-0
[Amazonでみる]
[楽天でみる]

著者: 金 成奎
出版社: マイナビ出版
発売日: 2025/2/27

Kindle版も発売されています。

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

紙面のキャプチャ

本書は現在のWebサイトやスマホアプリにおけるUIデザインを理論的に解説したものです。デザインに求められる役割と効果を2つに体系化し、1つは「使いやすい」「分かりやすい」「覚えやすい」といった機能性、もう1つは「かっこいい」「かわいい」「おしゃれ」といった感情に関わる情緒性です。この2つを軸に、UIデザインの各要素や見せ方について学びます。

紙面のキャプチャ

まずは、機能性。UIデザインにおける機能性とは、使いやすさと有用さです。そこに何が存在しているのかが分かり、その内容について理解することができ、さらに快適に操作できるように工夫されており、どんな環境でも問題なく利用できるになっていることが重要です。

紙面のキャプチャ

具体的にどういうUIデザインがいいのか、本書では機能性があるUI要素とそうではないUI要素の事例がたくさん掲載されています。たとえば、背景とテキストのコントラストは十分であるか、フォームの枠線のコントラストが十分であるか、フォームの必須を単一情報(色だけ)で伝えてないか、など約50ページに渡り解説されています。

紙面のキャプチャ

続いては、情緒性。これは「かっこいい」「かわいい」をはじめ、ディレクターやクライアントからもよく求められる、フレッシュな感じで、格調のある感じで、清潔感がある感じで、とプロジェクトの案件に応じてさまざまな感情や印象をビジターに引き起こす重要なデザインの役割です。

紙面のキャプチャ

この情緒性は、4つの感情に分類することができます。成熟度とはフレッシュや円熟、態度はカジュアルやフォーマル、温度感はクールやナチュラル、品性はアクティブやエレガント、などさまざまな感情があります。

紙面のキャプチャ

各項目をマトリックスにすると、分かりやすいかもしれません。左上は成熟度が高く温度感が低いデザイン、右上は成熟度が高く温度感が高いデザイン、比べてみるとまったく異なる印象を与えるデザインです。

紙面のキャプチャ

このマトリックスはデザインの方向性を決めるときにも役立ちます。競合他社のデザインがどのような方向性のデザインなのか、比較対象が明らかになるとデザインの合意もクライアントから得られやすくなります。

紙面のキャプチャ

実際にデザインの作業をするときに、この機能性と情緒性はどのように取り込めばよいのでしょうか。機能性を重視すれば情緒性を欠けてしまうことがあるかもしれません。そういった時はこのプロジェクトで優先されることは何なのかが重要なポイントになります。基本的には、優先度は機能性の方が高くなります。そもそも使えなければWebサイトとしてもスマホアプリとしても成立しません。

紙面のキャプチャ

機能性と情緒性からUIデザインの方針を導くメソッドの具体的な事例もくわしく解説されています。たとえば、採用サイトの場合、機能性の方針では具体的にどういう項目が挙げられるのか、情緒性で考慮すべきポイントはどこにあるのか、デザイン方針の優先順位はどうすればよいか、実際のデザインとともに解説されています。

紙面のキャプチャ

他にも、化粧品のブランドサイト、高級旅館のサイト、業務アプリ、健康アプリなど、それぞれについて詳しく解説されています。キャプチャ画像のデザインについているブルーは機能性のポイント、オレンジは情緒性のポイントです。

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

ウェブデザインの思考法 第2版の目次

これまで言語化されていなかったUIデザインの機能性や情緒性が、ロジカルに解説されています。センスに頼るのではなく、また感覚で判断するのではなく、論理的にUIデザインに取り組むきっかけとなる一冊だと思います。

ウェブデザインの思考法 第2版

ウェブデザインの思考法 第2版
ISBN 978-4-8399-8300-0
[Amazonでみる]
[楽天でみる]

著者: 金 成奎
出版社: マイナビ出版
発売日: 2025/2/27

献本の御礼

最後に、献本いただいたマイナビ出版の担当者さまに御礼申し上げます。

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

sponsors

top of page

©2025 coliss