Ryusou.dev

ちょうど、UIデザインに興味が出ていたときに以下のブックリストを目にしました。
https://note.com/akio_yoshihashi/n/n70602ddc58c6

そこにあった「はじめてのUIデザイン」に興味を持ってツイートしたところ、

はじめてのUIデザイン読んでみようかな
UIデザインのためのブックリスト（2020）｜yoshi_design @akyoshi #note https://t.co/xx6Hh6yS2t

— りゅーそう (@ryusou_mtkh) November 7, 2020

もやし丸さん(@mys_x101)も積んでるとのことなので、期限を決めて感想を言い合うことに。

僕も積んでます。よかったら一緒に読みませんか？

— もやし丸 (@mys_x101) November 7, 2020

感想

もやし丸さんの実務や趣味で運営されているサイト(Flexbox Cheet Site)の話と絡めて本の話をしていただいたのでとてもありがたかったし、ためになった。
(ていうか、実務でサービス開発に携わっていない自分とやってくださるなんて神では。)

(うまく話せた自信はないが）本の感想や気になったことなどを抜粋して話すという活動を通して、本の内容をアウトプットできた。深い理解につながったと思う。
またわからないことや実務がイメージできないことは、質問することで理解を深めることができた。

一人で読んでいる時も、ここを話そうかなとか考えながら読むので理解が深まった（前に読んだところは忘れてしまっていたのでメモをとっておくと良かったかもしれない。あとKindleより本の方が良いなあ）

一章ずつ丁寧に読み直したので、とてもボリューミーだった。有意義な時間だったが、一度にやったので(2時間以上）疲れた。
（少しずつやるとか、抜粋してやるとかの工夫が必要かもしれない。）

ダイジェスト

本の内容を一部ダイジェスト。

サービスのテーマカラー云々のビジュアル要素の話

シンプルに２色をベースに表現している。Material designなどを参考に色の濃淡を使い分ける。カラーは情報の重要度を表す。
テーマカラーはサービスの性格を表す。ユーザーにどんな影響を与えるかは以下のほんに詳しい。
配色デザイン良質見本帳 イメージで探せて、すぐに使えるアイデア集
脱線もしつつ、お互いの参考図書の紹介もしつつ進んでいく。

情報設計の話

もやし丸さんと共通して、この本の最も参考になった部分。
ペルソナをサービスによって何パターンか作り、1日の行動パターン、どんな時にそのサービスを使用するのか？サービス使用に至るまでのバックグラウンドを克明に設定していく。

この作業はデザイナーの仕事だったのかという感想。ペルソナを動かすシナリオの構造を組み立てていく。
シナリオには大きく分けて、

• 価値シナリオ
• 行動シナリオ
• 操作シナリオ

があるらしい。趣味プロジェクトだとなかなか操作シナリオしか意識できないよね。という二人の感想。
価値シナリオから結び付けて、画面に持っていく。
それをどれだけ言語化できるのかが重要。言語化できれば、UIに落とし込むことができる。

UIモデルの話

名詞で表せるものが「オブジェクト」、動詞に表せるものが「アクション」。これらをフロー図で表していく。
画面遷移図やAdobeXDなどのツールでしたプロトタイピングはみたことがあったけど、フロー図で言語化された「オブジェクト」と「アクション」の流れがおえるのは新鮮だったし、これを知った上で実装するのは楽しそう。

とまあ、UIデザインとは目に見える部分が注目されがちだけど、目に見えないデザインを学ぶのはとても楽しい。

「モード」と「モードレス」の話も面白かった。ダイアログなどの選択画面（ユーザーはその画面が開いている間は他の操作ができない。)を「モード」というらしい。モードに入っている時はユーザーがモードから抜けやすいデザインをするのが大切。

それにまつわるアクセシビリティの話も面白かった。キーボードでのTab操作で「モード」に入っている時はShiftキーで「モード」から抜ける状態を作って上げられるとアクセシビリティに配慮されていて良い（普通のキーボード操作だとShiftだと一つ前のTabに戻る)。アクセシビリティの深い話。

とまあこんな話を2時間ほどしました。

まとめ

もやし丸さんありがとう。
他にもたくさん積読あるので、ぜひ同じ積読あるという人はTwitterで一声お願いします。
https://tsundoku.site/stack/WbEx19KPNZdIS0QB1BxqujZ6vIl2/