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. CSSフレームワーク

    サイト制作が早くなる!Bootstrapの特徴

    サイト制作のスピードを上げたい、そんな方に。6、7年くらい前にこのB…

  2. Web Design

    作るごとに成長しよう!キュレーションメディアを作るときに気をつけること。

    みなさんこんにちは、mayukouです。仕事でキュレーション風ニュー…

  3. Web Design

    意外と知らなかった…google map をホームページに貼付ける方法

    みなさま、こんにちは。mayukouです。今回は、仕事で必要に…

  4. ブログ

    [書評]サラリーマンだけが知らない好きなことだけ食っていくための29の方法

    こんにちは。mayukouです。何度か著者である立花さんのブログ記…

  5. CSS

    デバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。

    こんにちは、mayukouです。本日は、最近よく目にするヒーローヘッダ…

  6. Web Design

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

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

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

  1. Tutorial

    ワイヤーフレームがプロ仕様に!素敵なグラフィックスタイル「WireMagic」
  2. Illustrator

    スキャンした画像をIllustratorでベクターにする方法2 (追記)
  3. デザイン

    【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
  4. お仕事紹介

    【お仕事紹介】学生向けアンケートパンフレット作りました
  5. Mac

    気に入った画像を切り抜いて保存できる!スクラップアプリ、Pixaveの使い方
PAGE TOP