🦔

UIデザインの教科書を読んでみた

1 min read

仕事でWFを書く中で、UIデザインへの知識が乏しく悩んでしまうことが多いのと、画面をデザインしていく作業も面白いなと思えてきたため、手始めにUIデザインの教科書を読んで見ることにしました。

ちなみに、この本の取り扱う範囲はPC・スマートフォン・タブレット・TVのデバイスを対象としたインターフェースのデザイン方法、対象は主にWebサイトやアプリの制作・開発に直接関わる初心者から中級者の人となっているそうです。

では1章から読み進めて、個人的な要点を書き出していきたいと思います。

第1章 デザインの目的とUI/UX

  • デザインは日本語に訳すと「設計」
  • デザインの目的は見た目の話だけでなく、その機能や働きによって何らかの課題を解決することであり、新しい価値を創造すること
  • 一般的な機能にとって、インターフェースや使い勝手は差別化要因として重要なファクターになるためデザインは必要
  • UIとは「ユーザー」と「システムやサービス」との接点を指す
    • 何らかの目的や欲求を叶えるためにユーザーはシステムやサービスを使う
    • UIをデザインするとは、システムやサービスに付随するインターフェースをより使いやすく設計するということを意味する
  • UXとは広義な意味では「知った瞬間からすべての体験」、つまりそのサービスを知ることになった契機から、実際にサービスを利用し、さらに使わなくなったその後の長い期間も含めて、ユーザーがサービスによって受けるすべての体験が含まれる
  • UIは客観的、UXは主観的
  • UIはUXに影響するが、UIが適切なアプローチでない限り根本的なUXの改善にはつながらない
  • UXは知ってから忘れるまで、UIは「使う」という領域を担っている

第2章 物理的な制約

  • PCは横スクロールが使いづらい
  • SPはホバーが使えないため、目視だけで対象の選択可否を判別できることが大事
  • インターフェースをデザインするうえで、画面の大きさについて考慮するポイントは「可変性」「アスペクト比」「サイズ」の3つ
  • SPは向きによって機能やインターフェースを変えることができる
  • AndroidとiPhoneのUIの違いは「戻るボタン」の有無に起因している
  • デバイスはそれぞれ固有の画面と入力手段を備えているため、入力手段が変わればそれに適したデザインも変わる
  • インターフェースがデザインする対象はソフトウェアであるが、起点はいつでもハードウェアにある

第3章 ソフトウェアの影響

  • アプリは専用ツールであるために、そのサービス専用にインターフェースが使いやすく設計されている
  • アプリは基本的にネイティブで実装されているために、操作が軽快なだけでなく、豊富なインタラクションが実現可能
  • Webサイトは汎用ツールであり、同時に複数立ち上げることもできる
  • Webサイトでは「Webブラウザ」がハードウェアごとの差異を吸収して、環境によらない同一性を担保してくれているのに対し、アプリではハードウェアの差異が、直接インターフェースのデザインに影響する
  • Webサイトとアプリどちらを用いるのがふさわしいかは、ユーザーがそれを使うことで何ができるのか、どういった体験ができるのかというサービスの目的によって判断することになる
  • インターフェースとして両者の実現可能性(できる/できない)は異なるため、「Webサイト」と「アプリ」の違いは、実装の最初の段階から明確に意識しなくてはならない
  • svgの実体はテキストであるため、解像度の影響を受けずに(テキストデータのように)OSとブラウザによって最適な表示が担保される
  • Googleは、特にスマートフォンのWebサイトにおいて表示速度を重要だと見なしており、今後は表示が早いサイトほど検索結果の順位が上位になる可能性が高い
  • AMP(アンプ)はGoogleとTwitterが共同で策定したモバイルページの高速化プロジェクト
    • 処理を重くさせるJavaScriptの使用を制限し、画像や動画などが即座に表示されるようにしている
    • 二度目のアクセスからキャッシュされることでさらに高速に表示される

Discussion

ログインするとコメントできます