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

Post on:2025年3月14日

sponsors

生成 AI と著作権？5分で分かるAdobe Fireflyの安全な商用利用のための設計 | アドビ公式

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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