分かるとWebデザインがもっと楽しくなる!考えてデザインする力が身につくオススメの書

何も考えずにPhotoshopやIllustratorを立ち上げ、デザイン作業に入ってしまうのは悪いクセ。
ユーザーをワクワクさせるデザインとはなにか? この情報を分かりやすく伝えるデザインとはなにか? クライアントの要望に応えるデザインとはなにか? 考えてデザインする力が身につくオススメの本を紹介します。

グリッドや角丸を使う時もなんとなくではなく、その目的や効果的な使い方などしっかり身につけておきたいですね。

本のキャプチャ

本書はコミュニケーションを軸に「人のことを考えたWebデザイン」ついて学び、Webデザインの思考のプロセスを身につけることができます。現役のデザイナーやディレクターの方には是非、手にとってほしい本です。

他のデザイン本とはかなり一線を画す内容となっています。

本のキャプチャ

Webデザイン・コミュニケーションの教科書
[Amazonでみる]
[楽天でみる]

著:
株式会社ツクロア、秋葉 秀樹、秋葉 ちひろ
出版社:
SBクリエイティブ
発売日:
2014/9/15

内容は大きく分けて、2つ。
1-3章はクライアントやチーム内でのコミュニケーション、4章からはユーザーとのコミュニケーションでデザイン的なテクニックも満載です。

コミュニケーションが必要なのはユーザーとだけではありません。
平気で無理を言ってくるクライアント、それを単に伝えるだけのディレクター、言われたものだけを作るデザイナー、「なんか違うんだよね」のひと言でループ。

Web制作を円滑に進めるためには、クライアントやチーム内のコミュニケーションも大切です。クライアントからムチャな要望を出されても、その意図を正しく引き出し、問題意識を共有して制作に入ることができます。そういったコミュニケーション術に関しても学べる一冊です。

本のキャプチャ

紙面のキャプチャで、中身を少しだけご紹介。

本のキャプチャ

リニューアルの打ち合わせ時
クライアント「デザインをかっこよくすれば、人の流れが変わるかな」
Webデザイナー「サービスの仕組みを見直してみましょう」

本書はデザインの本質から、Webデザインを通してどのようにクライアントとのコミュニケーション、ユーザーとのコミュニケーションをはかるか、著者の体験や制作現場のノウハウからデザインでの解決方法を学べます。

本のキャプチャ

1-3章はクライアントやチーム内でのコミュニケーションについて。
コミュニケーションにおいて一番大切なのは、相手に一歩歩み寄ること。相手の意図を理解しないまま作業を進めてしまうと、よい成果は期待できませんね。

本のキャプチャ

ユーザーとのコミュニケーションの第一歩は、まずそのWebページが理解しやすく作られているか。デザインは情報を整理し、情報を伝えることができます。

本のキャプチャ

デザインには必ず理由があります。
ボタンの配置にしても、その役割を考えることで適切な場所に配置しましょう。

本のキャプチャ

本書ではこの問題を解決するためのデザイン論が豊富な事例で紹介されています。さまざまなデザインテクニックがある中、その意味を理解せずに使うのはもったいないです。

本のキャプチャ

3章は人とのコミュニケーションが中心です。クライアントから「デザイン案、複数出してよ」と言われたことはありませんか? 僕の経験では基本的に一案しか出しませんでした。コンセプトやテイストが事前にはっきりしていれば、その一案に最大限の労力をかけることができます。

もし何回も作り直しの指示がくるようであれば、ディレクター、そしてクライアントとのコミュニケーションをしっかり取り、考えをすりあわせる必要があります。

本のキャプチャ

コミュニケーションではテクニックも必要です。「親しみのある感じにしてほしい」だけでは解決方法はたくさんあります。クライアントの要望の本質を引き出すことで、制作の軸がぶれなくなり、期待に応えられるデザインができるでしょう。

本のキャプチャ

4章からはユーザーとのコミュニケーション、ヴィジュアルとデザインの実践です。Webページでよく使うさまざまなエレメントの特徴と効果的な使い方を知っておきましょう。
キャプチャはナビゲーションの例。

本のキャプチャ

グラデーションやシャドウ、角丸などもなんとなく使うのではなく、メリットとデメリットを理解していれば、おのずと効果的に使えます。

本のキャプチャ

テキストリンクの考え方、アイコンの考え方、メインヴィジュアルの考え方、コピーテキストと画像の組み合わせ方など、よく使うデザインアイテムの効果的な使い方が身につきます。

本のキャプチャ

テキストだけで見ると差はそんなにないかもしれませんが、そこに絵が加わると大きく変わります。

本のキャプチャ

スマホの対応も重要です。デスクトップに比べ画面が狭いため、一度に見せる情報は限られています。タップできそう、タップするとどうなる、などが分かるヒントエレメントの存在はうまく使いたいものです。

本のキャプチャ

大きいスクリーンでは比較が分かる一覧はバーンと大きく見せることができますが、小さいスクリーンでは一度に表示できる量に限界があります。スマホならではのインタラクティブ性をうまく使い、デスクトップよりも使いやすい一覧にすることもできます。

Webデザイン・コミュニケーションの教科書の目次

  1. 本書について
    本書について
    対象となる読者
  2. デザイナーの役割
    Webサイトをつくる、はじめの一歩
    問題解決に参加しよう
  3. Webデザインをコミュニケーションと考える
    伝える
    ユーザーとコミュニケーションをとる
    コミュニケーションをデザインに落とし込む
  4. 人と人とのコミュニケーション
    発注者とのコミュニケーション
    チーム内でのコミュニケーション
  5. 視覚とデザインの実践
    ナビゲーションを考える
    文字を考える
    アイコンを考える
    視覚に訴える
  6. ユーザーが使いやすい実装を考える
    ユーザーが使いやすいフォームとは?
  7. スマートフォンのデザインを考える
    スマートフォンは本来は電話である
    横1列か横2列か
    設計で注意すること
    スマートフォンのことを考えた実装の例
  8. Webデザイナーこそ技術を幅広く理解しよう
    HTML5にデザイナーはどう向き合うか
    便利なデータ形式、JSONってなに?
    デザイナーも理解しておきたいAjaxのキホン
    現在地から探す
    ユーザーの好みを記憶する
    待ち時間に配慮するデザイン

デザインがうまくいかない、ダメだしばっかされる、指示されたことしかできない、そんな風に悩んでいる時は、この本をちょっと手にとってみてください!
明日からWebデザインに対しての考え方がきっと変わります。

本のキャプチャ

Webデザイン・コミュニケーションの教科書
[Amazonでみる]
[楽天でみる]

著:
株式会社ツクロア、秋葉 秀樹、秋葉 ちひろ
出版社:
SBクリエイティブ
発売日:
2014/9/15

献本の御礼

最後に、献本いただいたSBクリエイティブの担当者さまに御礼申し上げます。

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

top of page

©2018 coliss