ken1flanのブログ

自己紹介・最近やってることなどを書くつもりです。

UIデザインの教科書 を読んだメモ

www.shoeisha.co.jp

期待していること

  • 会社に専属のデザイナーがいないのですが、多少でも使いやすいサービスを目指したいので…。
  • 網羅的に眺めることで、使える手札を増やしたり、ときどきお願いするデザイナーさんにうまく伝えたりできるようにしたいと思ってます。
  • あと…心地よいスマホのUIも気になっています。
    • Flutterでアプリを作ろうと思っているので、特に…。

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

1-1:本書の範囲と対象

  • PC/スマホは期待していたけど、タブレットと…TV!
    • TVは…もしかして、Switchにゲーム出すときに参考になるかも……?ちょっと気になりますw

1-2:デザインの目的

  • 日本語における「デザイン」…確かにおかしいですよね…。
  • デザインは…成熟した世界では差別化のために重要…。
    • 寡占状態の場合は機能のほうが重要…。今、うちはこっちかなぁ…。
  • UXは…完全に忘れられないので一生続く…。たしかに…。

1-3:UIとUX

  • UIは直接触って操作するもの。
  • UXはサービスを通して受ける体験。
    • UXは基本的に外部に委託しきれないと思う…。
      • いいデザイナーさんはうまく引き出してくれるとは思いますが、甘えすぎるのもなーって思ってます…。
  • UIはUXの中で実際に使っている場面に強く関係しているから、UXの中核とも言えるのか…。
    • この本の位置がなんとなくわかってきました。

1-4:まとめ

  • この、ノートを取る必要もないくらいよくまとまってるのって、体験的にどうなんでしょうと思う気持ちもありますが…持てる時間の少ないのでありがたくもあります…。

2章 物理的な制約

2-1:デバイスのバリエーション

  • バイスのバリエーション、あらためて並べるといっぱいありますね…。
    • スマホもベゼルと画面が区別しにくいようにできてるから、そのつもりで考えたほうがよい見た目になりそう…。
  • テレビは…
    • リモコンのカーソルで操作するのかな…。(使ったことない…。)
    • 文字入力、キツそう…!
  • 一覧で書いてみるの、結構いいですね…。

2-2:入力手段の違い

  • PC以外でホバーが役に立たないことを忘れがちです…。
  • スマホは指で触るので、タッチ領域をある程度大きくしないと…やりにくいですね。
  • コラムの指の可動範囲…自分も気になってました。
  • テレビはカーソル移動であるがゆえに、連続して移動できることが重要…はなるほどです。
  • クリック、タッチ、フォーカス…たしかに感覚が全然変わりますね…。
  • テレビとスマホを連携させて、スマホで操作させるという技も。

2-3:画面の違い

  • バイスまでの距離で、字やボタンの大きさが全然変わりますね…。
  • 画面の向きも上手に使えるとおもしろいかも…とも思いますが、Webサービスで横にしろとか、なかなかないか…。

2-4:AndroidiPhone

  • 戻るとホームボタン、厄介ですね…。
    • アプリの場合はやっぱり差異が出ますね…。

2-5:まとめ

  • よくまとまっていすぎて、あとでみるとき、まとめをざっとみて、気になるところだけ読み直してもよさそうです。

3章 ソフトウェアの影響

3-1:Webとアプリ

  • OSが違っても、ハードウェアのタイプが同じなら、だいたい似たインターフェイスに…。これは確かにそうですね。
    • ただ、似てはいても、アプリだとデザインガイドラインとかAndroidの戻るボタンとか…確かに変わりますね…。

3-2:テキスト・画像・動画

  • 未だ、理論解像度がよくわかりません…。
    • OSやブラウザ上でのピクセルによる座標のこと?
    • 実際の表示の細かさはハードウェアにおまかせ、的な?
  • 国コードと言語コードで分ければいいですよね、たしかに…。
    • 送料とか税金とかそういう、居住地域依存のものを言語と一緒くたにしがちで…。
  • 今後、SVGデータ、めっちゃ出てくるかも…。
    • ピクセルからベクターへの変換をAIがそれっぽくやってくれるツールが結構出てるし…。
  • Unity…!そういえば、ゲームは作りかけたけど、アプリはやってなかったです。
    • Flutterはアプリもゲームも両方やりましたぞ!

3-3:パフォーマンス

  • HTTP/2のResource Hints APIとか埋め込んでもよいかもしれません…。
  • AMP、検索の際の優遇をやめたんですね。普及したってことなのか、検索結果一覧で見せる他の方法が出てきたか……。どっちだろう……。

3-4:まとめ

  • この章、新しいサービスを始める前に読み直してもよさそうです。

4章 人間の認知特性

  • 人間は限りある脳のエネルギーを割り振って
    • あ…たしかに…。だからラクをしようとするのか…。
    • 今まで、エネルギーのことは考えてませんでした。

4-1:色・形・動き

  • ランダムな数字の表に色をつけたの、スゴくわかりやすいです…。
    • 最後の例、ひどすぎw
  • 形の違いも見つけやすいそうです。
  • 色と形の違いを組み合わせて、上手に違いをみせていく…なるほどです。
  • 「理解のための動き」…考えたことなかったですが、言われてみれば…。
  • こうしてみてると、人間も動物ですよねえ…。
    • 人の顔に注目してしまうのもソレですよね。
  • あ…でも、コストをコントロールすることで、

4-2:インタラクションコスト

  • エネルギーの話が出てきました!
  • コストコストいってるものは、頭のコストと身体のコストでできてるんですね。少し意識するようにします!
  • あ…でも、全部を最低になるようにするんじゃないんですね…。強弱のコントロールを活用して画面内に押し込んでいく作業のようです…。なるほど…。
  • あ…たしかにデバイスによって、操作の身体的コストは違いますね…。

4-3:一貫性

  • ノンデザイナーズ・デザインブックでもよく言われてました。
  • 予想ができるようになることで、インタラクションコストが減る…と。
  • マルチデバイス対応しているときに、ユーザが複数のデバイスを使うときに、学習コストが下がるという話は、なるほどでした。

4-4:シンプルさ

  • 「単純ではなくて明快にする」
    • むずかしい…!!!ページで一番表現したいことを常に考えるようにしてますが…なかなか…。
  • Appleの1ボタンマウスを思い出しました…。複雑なジェスチャー、慣れたら便利だったんですかね…。
  • たくさんボタンがあっても、ちゃんと整理されていれば使いやすい気もしますし…。

4-5:共通概念

  • うまく使うと、文字無しで伝えられたりもしていいですよね。
    • 失敗すると、テプラ…。
  • ○と✗といえば、PSのコントローラ。
  • 電話の受話器マークとか、フロッピーディスクマークとか、今後どうなるんでしょうね…。

4-6:まとめ

  • 誰のためのデザインやノンデザイナーズ・デザインブックを思い出しました。

5章 階層と構造

  • 「個々のページがリンクで繋がり合っているのが最大の特徴」
    • アプリもそうやっていわれたら、そうかもしれません。
      • flutterもrouterがありましたし。

5-1:縦、横、前後

  • 各ページが有機的につながっていなければ、全体として完成したとは言えない…
    • 耳が痛いですw
    • 上手にやったらうまくリンクを設置できそうなところがワンサカあるのに、時間がなくて出来てません…。
  • パンくず…。
  • スマホアプリなどのスライド表現もページの階層構造を表してたんですね。自然すぎてわかりませんでした…。
    • こうしてみていると、視覚表現も階層構造をあらわしていたりして、重要なんですね。

5-2:階層の深さと広さ

  • 広く浅く…!
  • ハンバーガーメニューやタブで上手にかたづけて、脳に負担なく多くの機能を1ページに配置する…。このあたり、気をつけてみます。

5-3:現在地と差別化表現

5-4:トップ・一覧・詳細

  • だんだんできてくる、という感覚は自分もあります。
    • 新しいページを作ろうというとき、indexが考慮されない場合が結構ありますし…考慮した結果今はいらないってなることもあります。
  • 並び替え・絞り込み・切り替え…。
    • 切り替えはやったことなかったですが…WindowsエクスプローラmacのFinderはありますね。このアプリも一覧で、3つの機能がちゃんと実装されています。
  • スマホは狭い分、押し込み方が大変そう…。

5-5:関連する情報

  • ひとまず見たい情報が見れた状態のユーザに提供してよろこばれるものは…?
  • 関連は付随するもの、同種のものがあるそうです。
    • academistのプロジェクトの情報であれば…
      • 付随するものは、チャレンジャーの情報とか?
      • 同種のものは、同時期に行われているプロジェクトの情報とか?
        • 確かにamazon、エゲツないですねw
      • うちは…同種のものをそんなにたくさん提示できないような…。
        • 月額支援型でもいいものかな?

5-6:わからないとは何か

  • 「わからない」に書いてあること、めっちゃ耳が痛いです…。まずは…。
    • まずは目的地に付きやすくすること。
    • その後に考えられるアクションについて、やりやすくすること。

5-7:まとめ

  • うーん…一回読み終わった状態で、全章のまとめの項目を並べておいてもよさそう。
    • 一度は読まないとイメージが膨らまない気はします。
  • 今まで、マーケティングの視点の「我々が見せたい」を中心に考えていましたが、「ユーザが見たい」ものを中心に考えるのがよさそうな気がしました。

6章 ナビゲーションとインタラクション

  • あ…なるほど…前の章に思ったことを実現するためのことが書いてありそう。

6-1:ナビゲーション

  • コンテンツから移動したくなったら…これが重要かも。
    • コンテンツ中の広告とか…アレですね……。
    • うちはなくてよかった…。
  • 目立ちすぎるとダメそう…。
  • バイスによって、ホントに置き場所が変わりますね。
  • 入力手段に、マウス/タッチ/リモコン…。これも大きくI/Fを変えたほうがよさそう…。
  • ワイヤー大事かも。
  • もうちょっとFigmaを上手に使いたい気持ち。

6-2:インタラクション

  • 動きや変化を伴ったフィードバックのこと。
    • 理解、演出の2目的があるそう。
  • 理解の例
    • スライドして出てくる
      • 階層構造を意識させてそう。
    • ゲームのI/Fはめっちゃ参考になりそう。
  • 演出
    • イマイチ好きになれなそうなものが…。
    • かっこいいけど。
  • マイクロインタラクション
    • バリデーション
      • 便利だけど実装がめっちゃ大変なんですよね…。
    • 確かに作り込まれていると品質が高そうに見えます。
      • ちゃんと作り込まれていった上でなら、アリ…。
      • 上っ面だけだとツライ…。

6-3:ヘッダ

  • メガドロップダウン
    • デカすぎて色々隠しちゃってあんまり好きではないけれども…一望できる、というメリットはあるのかも。
      • amazonはうまく使っているかもしれません。インタラクションもうまく使えば、たしかに。
  • スクロールするとヘッダが小さくなる…。これも上手に使えばありかも。

6-4:フッタ

  • サイト内にコンテンツが多いとデカくなりがちですが…画面下だし、邪魔にはならないかも。
    • 本文との境目は大事かもしれないです。

6-5:パンくずリスト

  • パンくずは管理が結構大変です…。
    • スマホは表示の仕方も工夫がほしいし…。
    • でもサンプルはスマホでも便利そうに出していますね…。
  • 複数経路があり得るとき、どうやって出すの?
    • 実装が簡単なのは優先型かなあ…。

6-6:カラムと左右ナビゲーション

  • うちは2カラムで右が補助になっているところが多いかも。
    • 字を読ませるコンテンツが多いから、横長すぎると読みにくいからかも。
    • でも、ナビゲーションは右側にありませんね…。
      • 情報の階層構造をあらわしている場合は右だと不便だけど、ニュースサイトなどの構造が不要な場合はナビゲーションというか、ただのリンク集のように使われたりしてるよう。
  • スライド
    • スマホなどの幅が狭いものにもマルチカラムとして使える。なるほど、そういう手もあったんですね…。
    • 深い階層構造は多層式スライド
      • たしかに横幅を節約できますね。

6-7:オーバーレイ、インレイ

  • オーバーレイ
    • ダイアログボックスみたい。モーダルとモードレスっぽいもの、両方あるみたい。
    • ツールチップはダイアログボックスもちっさいのとも言えるかも。
    • 画面遷移せずにあれこれ操作できるので、気軽っぽい。
  • インレイ

6-8:スクロール、ページング

  • 無限スクロール、要注意…。
    • メモリを圧迫、フッタが使えない、戻るボタンが使えない…。
    • 連続的に見るのには便利。

6-9:スクロールの方向

  • テキストが多いと、下に読み進めるので、スクロールも縦が馴染むみたい。なんとなくわかるきがします…。
  • 画面の縦横比で長い方にスクロールするほうが自然。
    • スマホは当然縦、テレビは左右がたしかに多い気がします。
  • 要素の形、スキマ、見切れ
    • たしかに気持ちよくスクロールしたくなる方向がありますね…。

6-10:まとめ

  • まとまり過ぎてて言うことはなく…また見返したい感じです。

7章 デザインを形にする

7-1:ミニマルデザイン

  • そういえば、最近現実にあるものを想起させるデザインから離れつつあるのは感じます。利用者が慣れたんですね。
    • 逆に慣れが遅い人向けには実物のメタファーを取り入れ直してもいいのかも…?
  • フラットデザインはコンテンツに集中させるデザイン…なるほど。
    • マテリアルデザインは物質的で意味のある動きをする…。
      • あんまり意識していなかったですが、ちょっと気をつけてもいいかも。
  • ミニマルデザインは認知負荷を下げるようにするもの。
    • たしかにスマホから導入されましたね。
  • ミニマルは余計な装飾の排除、シンプルは余計な解釈を生まないこと。ちょっと判断指標が違うのかも。

7-2:デザインガイドライン

  • AppleGoogleマイクロソフトとも出してるので、見ておくとよさそう。
  • 自社で作ってもよいが、結構更新が大変そう…。

7-3:プロトタイプ

  • ワイヤーフレーム、実際に近いサイズで作ってみると、得られる情報があったりしますね。
  • 実際に手に持って…みたいなことをしたいですが…Figmaでできたはず…!実際に触ってみるのはとても大事だと思いました。
  • 気をつけないといけないのは、がんばりすぎないこと!

7-4:マルチデバイスデザイン

  • マルチデバイスですべてに「本質的には同じ機能を提供する」ってスゴいことでは…。
    • これも、ホント、プロの仕事だと思います…。
  • そうか、最近は別のデバイスで「機能を継続」がありますね。
  • 同じ場所で多人数が同時に見るデバイス、テレビ!
    • かなり特徴的ですね。考えたことなかったです。

7-5:まとめ

  • この章、デバイスの説明が多かったです。
  • 全く思いもつかなかった見方が多くて、勉強になりました。

読み終わって

  • 「教科書」というだけあって、本当に広く浅く書いてありました。
  • サブタイトルに「マルチデバイス時代の…」と書かれた通りで、「マルチデバイスなんて画面サイズが違うだけだろ…」と思ってた自分にはかなり衝撃でした。
  • デザイン門外漢である自分ですが、この本読みやすかったし、よかったと思います。

ペース

年月日 到達ページ メモ
2023/05/04 16 はじめた!
2023/05/05 40 一日一章にしとこ
2023/05/06
2023/05/07
2023/05/08
2023/05/09 60 しばらくあいちゃったけど、GWだったし。
2023/05/10 86 結構長かったです…。
2023/05/11 98 この章も長い…。
2023/05/12 116 耳が痛いことばっかり。がんばろ。
2023/05/13 129 RubyKaigi終
2023/05/14
2023/05/15
2023/05/16 172 一日一日でうまく来れず、まとめて書いてしまいました…。
2023/05/17
2023/05/18
2023/05/19
2023/05/20 204 読了…!