Kindle版:UXと理論でつくる Webデザイン

Kindle版 デザイナーでなくてもわかる UXと理論でつくる Webデザイン

電子書籍と紙面の書籍との違い

デザイナーでなくてもわかる”UXと理論で作るWeb デザイン”を電子書籍としてAmazon Kindleストアで発売しました。

紙の書籍(ノンデザイナーでもわかるUXと理論で作るWebデザイン)の電子書籍として発売していますが、紙の書籍は全9章ですが、電子書籍で全12章と長くなっています

本書は、Webサイトを制作・デザインするときに必要な考え方や法則を解説しています。デザインする際にツールを思い通りに使いこなせることも重要ですが、デザインするための原則や法則を学ぶことはさらに重要です。

なぜこのレイアウトなのか、なぜこのUIなのか、なぜこの色なのか……。このような問いに対して、ユーザー視点に立って根拠にもとづくデザインができるようになるための法則が、本書に簡潔にまとめられています。

書籍の概要はこちらのブログでも紹介しております。

電子版で多くなっている章のご紹介

電子版では、「第10章 実例から学ぶ本質のWebデザイン, 第11章 ガイドラインの必要性,第12章 制作の現場 〜ワークフローとよくある課題〜」が多くなっています。

  • 第10章 実例から学ぶ本質のWebデザイン
  • 第11章 ガイドラインの必要性
  • 第12章 制作の現場 〜ワークフローとよくある課題〜

デザインガイドラインとは?

その中から「第11章 ガイドラインの必要性」についてご紹介します。

よくある企業のWebサイト問題として、サービスやプラットフォームごとにレイアウトやデザインが異なっている場合があります。別部署の別々の関係者が関わることで一貫性のないデザインになってしまいがちなのですが、ユーザーにとっては企業体制は関係ありません。

Webサイトの使い勝手に一貫性をもたらすことは、ユーザーの利便性を高めます。一貫性のないWebサイトは、デザインが変わるごとにユーザーは学習し直さなくてはならないので、利便性を損ないます。

例えば、ページごとにテキストリンクのデザインが異なるようであれば、ユーザーはリンクに気づきません。ユーザーはウェブサイトを操作をしながらサイトのルールを学習するため、ルール付けがバラバラなサイトは混乱を招いてしまいます。

ボタンカラーが統一されていない例。

ボタンの形状は一緒で色が異なるため、ユーザーはボタンは「緑色」なのか「青色」なのか学習できません。ユーザーによってはボタンの意味が異なるのかも?と考えさせてしまうかも知れません。

ガイドライン作成が目的になってはいけない

ガイドラインを作成することは重要ですが、ガイドラインを作ることが目的になってはいけません。

運用中にチームで保守管理し、ユーザーの利便性に貢献していない場合は日々見直すします。Webサイトは、改善を繰り返すことで最適なデザインに近づきます。

ユーザーのために、場合によってはWebサイト全体で大胆にデザインを変更しなければならないことがあります。その際に、デザインガイドラインがあることで、一貫性を維持しながら大きな変更ができます。ガイドラインはWebサイトの改善サイクルを加速させることができます。

ガイドラインの作成方法と実践

本書ではガイドラインの作成方法についても記載しています。参考にするガイドラインとして、AppleやGoogleのガイドラインを解説しています。

ガイドラインの作成ポイントや参考になる点を考慮し、ガイドラインを作成しましょう。ガイドラインは最初から完全なものを作成しようとする必要はありません。最初は基本的なガイドラインにとどめておくことを勧めます。細かく設定することによって僅かな修正が大幅に修正する必要がでてきたり、コンテンツに合致しない場合もあります。運用しながら少しずつ作ることが大切です。

本書でのガイドライン作成はタイポグラフィから始めることをオススメしています。

私達の周りをみてみると、SNS、ブログ記事、新聞記事、雑誌、本、ウィキ、メールなど、あらゆるものがテキストで成り立っています。そのため、テキストの読みやすさ(可読性)がユーザー体験(UX)にも大きな影響をあたえます。

2006年にiAのオリバー・ライフェンシュタインが「ウェブデザインの95%はタイポグラフィ」という記事を執筆しましたが、95%という数字はあながち嘘ではありません。また可読性は、UXに大きな影響をあたえることがわかっています。

タイポグラフィから考えよう

2005年に「The Aesthetics of Reading」(読むことの理念)はという論文で、良いタイポグラフィが読者の実際の読む速度に影響はなかったが、読者が早く読めると予測する傾向があるということと、読者はストレスを感じないことを科学的に証明しました。

なお、日本でタイポグラフィーというとフォントの種類を考えてしまう方がいますが、ここでのタイポグラフィーはフォントの種類だけの話ではありません。書籍では、より詳しく書体・フォントフェイスとカラーの指定方法を解説しています。


出典:「Web Typography」 Richard Rutter(リチャード・ルター)読みやすさ(Readability)はUXであり、「適切な単位(Measure)」と「フォントサイズ(Text size)」と「行間(Line spacing)」を整えることから始まります。

ガイドライン作成の詳しい内容は、電子書籍でも記載しております。宜しければご覧ください。

書籍詳細

最後に書籍の詳細です。

本書では「UX」とは何かを解説する章から始まり、UX設計の方法からUIデザイン実装と展開していきます。 WebサイトのUI設計への話から、具体的なデザイン手法の解説を行っていきます。

Kindle版 デザイナーでなくてもわかる UXと理論でつくる Webデザイン

【学べる内容】

  • 理論に基づいたデザインが実装可能になる
  • 人間心理をベースに、デザインの良し悪しを判断することができる
  • UX設計からUIデザインにする方法が学べる
  • Webでのデザイン思考が身につく

【目次】

  1. 第1章 デザイン思考とWebデザイン
  2. 第2章 WebデザインとUX
  3. 第3章 ビジネスモデルのデザイン
  4. 第4章 サイト構成のデザイン
  5. 第5章 情報のデザイン
  6. 第6章 ユーザー導線のデザイン
  7. 第7章 画面設計のデザイン
  8. 第8章 ユーザー操作とモバイル
  9. 第9章 ユーザーの感性に訴えるデザイン
  10. 第10章 実例から学ぶ本質のWebデザイン
  11. 第11章 ガイドラインの必要性
  12. 第12章 制作の現場 〜ワークフローとよくある課題〜
色の説明などもありますので、カラー端末で閲覧してください。epub形式で、フォントサイズも調整できるようになっていますが、デバイスによって読みにくいレイアウトになってしまう場合がございます。予めご了承ください。

この記事を書いた人:山田 和広

株式会社PR TIMES エンジニア。
2000年慶應義塾大学環境情報学部卒業。新卒でWEB制作会社に入社。その後、映画宣伝会社でハリウッド映画等の公式サイト作成・オンライン宣伝企画を担当。2014年4月PR TIMESへフロントエンド・エンジニアとして入社し、サービスの企画・開発を行っています。