Webデザインをセンスに頼らず、感覚で判断せず、ロジカルに取り組むためのデザイン書 -ウェブデザインの思考法

ウェブデザインの善し悪しや品質は、感覚的に語られ決定されてしまうことがあります。例えば、デザイナーのセンスだったり、クライアントのフィーリングだったり、そういう経験はありませんか？

ウェブデザインの要素や見せ方における機能性・情緒性をロジカルに解説したお勧めのデザイン書を紹介します。ノンデザイナーズ・デザインブックの内容をさらに掘り下げ、ウェブデザイン用にアレンジされています。

本書は本日、5/31発売！
ウェブデザインに携わるすべての人、ウェブデザインを構築するデザイナー、そしてそれを評価するディレクターやクライアントが同じベースで円滑にプロジェクトを進められるようになる一冊です。

Kindle版も本日、同時発売です！

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

そんな紙面をキャプチャで少しだけ紹介します。

本書は現在のウェブデザインの体系化した理論を解説するもので、デザインのテクニックや実装方法といったものには触れられていません。デザインのコンセプトに取り組むための解説書です。

本書は5章構成、1章ではウェブデザインの定義について。2章ではウェブデザインの役割の一つとして、デザインの機能性について解説されています。
ノンデザイナーズ・デザインブックの4つの原則をさらに掘り下げ、ウェブデザイン用にアレンジされています。

機能性とは、ウェブサイトやアプリにおける使いやすさ・読みやすさ・分かりやすさのことです。例えば、情報を構造化することで、ビジターは情報を正しく認知し、理解することができます。構造化のいろいろな手法、それぞれの利点、間違った使い方などが分かります。

最近ではデスクトップだけでなく、スマホなどのタッチデバイスでの操作も重要です。これが使いやすさです。また、間違えにくい、やり直ししやすいといったことを採用することで、ビジターの利用満足度もアップしますね。

機能的になるだけではデザインとして不十分です。3章ではデザインの情緒性として、ビジターに与える感情や印象を加えます。コンテンツにあった情緒性を加えることもデザインの重要な役割です。

デザインの情緒性とは、シンプル、クール、やさしいなど。デザインの印象やトーンは感情的になりやすいですが、より理論的に、そして建設的に進めていくべきです。

本書ではこの情緒性を装飾性・成熟度・態度・愛嬌・品性・温度差の6つの軸に分け、それぞれの強さと量を調整することで定義しています。

4章ではウェブサイトやアプリに使用するデザイン要素の分類です。文字や色や形などから8つに分類し、それぞれの要素の属性にどのような変化を与えると機能性と情緒性にどのように影響を与えるかについて解説されています。

デザイン要素の中でも特に重要なのが、文字です。文字がないウェブサイトやアプリはないでしょう。フォントのサイズや行間、最近ではWebフォントやカーニングも調整できます。

形も重要です、ボタンやエリアやフォームなどさまざまなコンポーネントで利用されています。情報のグルーピング、ボタンを大きくして目立たせる、ロゴを配置するなどの機能性、角丸やボーダーを太くするなどの情緒性があります。

最後の5章ではこれまでの機能性、情緒性をデザインコンセプトにどのように取り入れるのかです。戦略・要件定義フェーズにおけるデザイン作業とコンセプトの立案方法が詳しく解説されています。

プロセスは4つあり、調査・分析、基本方針の立案、詳細方針の立案、可視化。これまでの機能性、情緒性、そしてデザイン要素を軸にウェブデザインを体系化します。

体系化された理論はプロジェクトに使用できるものでなければ、意味がありません。これにより、デザインの方向性が決まり、設計・開発フェーズでの作業をスムーズに進めることができます。

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

1. ウェブデザインの定義

   ウェブデザインとユーザインターフェース

   ユーザインターフェースとコンテンツ

   コンテンツとマテリアルとコンテナ

   デザインすることにより引き起こされる変化・反応

2. デザインの機能性

   デザインの機能性とは

   誘目性・視認性の向上

   情報理解の促進

   操作性の実現・向上

   習熟度の向上

   アイデンティティの体現

   一般常識・社会的習慣への準拠

   可変性の維持

3. デザインの情緒性

   デザインの情緒性とは

   装飾性

   成熟度

   態度

   愛嬌

   品性

   温度感

4. デザイン要素の分類

   コンテナとデザイン要素

   8つのデザイン要素

   配色

   タイポグラフィ

   イメージ（写真・イラスト）

   アイコン

   シェイプ

   デコレーション

   インタラクション・アニメーション

   レイアウト

5. 戦略・要件定義フェーズにおけるデザイン作業とデザインコンセプトの立案方法

   4つのプロセス

   調査・分析

   デザイン基本方針立案

   デザイン詳細方針立案

   可視化

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

書店にも並んでいると思うので、見かけたら手に取って見てみてください！

献本の御礼

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

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

• お問い合わせ｜コリス