Web Design

書評「だからそのデザインはダメなんだ」で適切なUIデザインを考える


みなさんこんにちは、mayukouです。
最近では、webデザイナーというくくりが、
「フロントエンドエンジニア」や、「UIデザイナー」などさまざまな表現に分かれてきているようです。
これまで私のスタンスは、「webデザイナー」だったのですが、
今回のデザインの本を読んだら、UIデザインを真剣に考えなければ!
と感じるようになりました。
それぞれのデザインやレイアウトには、ちゃんと理由がある必要があるのですが、
頭でわかっていても…感覚的にデザインを済ませてしまうことがあります。
でもwebサイトを見る人にとって、わかりやすく伝えることが
できるのが、UIデザイナーだと思いました。

今回は、そんなUIデザインを学べる本をご紹介します。

スポンサードリンク

そもそもUIデザインとは?

UIの略は、「User Interface(ユーザーインターフェース)」です。
Interfaceとは、「接点、接触面」という意味で、
ユーザーの目に触れる部分で使用する部分は全てUIと見なされます。

UIデザインとwebデザイン

UIデザインが見やすさや操作性を作るのに対し、
webデザインは、色味などの視覚的なデザインを作るようです。

今回購入した本のタイトルは、
「だから、そのデザインはダメなんだ」

ちょっと挑発的でネガティブなタイトルですが、
中身は、UIに関して真面目に学べることがたくさんあります。

53-dakara
この本が書店でふと目に止まりパラパラと開いてみたら、
図解でわかりやすく結構目からウロコな内容だったので、
買うことに決めました。
見開き2ページで、デザインの悪い例と、改善した良い例が紹介され、
なぜそのデザインに改善されたかの説明があります。
その説明が、説得力のある書き方で、
今後のモバイルやタブレットにも対応できるwebサイトデザインに活かせる内容になっています。

事例として、コーポレートサイトやメディアサイト、ECサイト向けのデザインが多い印象を受けますが、
どのwebデザインにも当てはめてデザインを活用することができそうです。

私の場合、会社の運営しているネットショップや
ブログのリニューアルに参考にできそうだと感じました。

とくに便利だと思った事例をご紹介します。

ブログをなどメディアサイトに最適な見やすいデザイン

54-dakara-blog

見出しを種類別に色分けして、どんな内容かがわかりやすくなりますね。

ネットショップ会員登録などのデザイン

55-form

登録のステップがわかることで、登録の先がどうなるかという不安がかき消されますね。

 

ファーストビューのデザイン

56-scroll

ファーストビューに、スクロールボタンがあることで、次にどういうステップをとったらいいかがわかりますね。

 

こんな感じで、事例がたくさん紹介されます。
レイアウトやコンテンツデザイン、ユーザビリティなど色々と考えさせられます。

最後に

いかがでしたか?UIデザインについて考えさせられる本でした。

これを読めば、より適切なUIを作れる気がします。

気になる方は、ぜひチェックしてみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順

    もっとあなたに作って欲しい!とどんどん注文がくるwebデザイナーになり…

  2. jQuery

    スマホに使える!3階層のアコーディオンメニューを作りました!

    仕事でスマホサイトを作っているのですが、その際にモックアップとして作…

  3. Web Design

    今流行りのロングシャドウの簡単な作り方

    フラットデザインとともに、相性が良いとしてデザインに取り入れられている…

  4. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利!

    みなさんこんにちは、mayukouです。「コーポレートサイト作るけど…

  5. illustration

    photoshopでモコモコの線を描くには?

    こんにちは。mayukouです。今回は、photoshopでモ…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Web Design

    デザインが成功するテンプレがここに。「なるほどデザイン」を読みました
  2. Sass

    使わない方が良い?WordPress 案件をsassでカスタマイズして思う3つの…
  3. illustration

    簡単!Illustratorでキラキラ星を作る方法
  4. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ
  5. Mac

    起きてしまった!MacOSのMarvericksの不具合
PAGE TOP