スクリーンショット_2019-08-15_午後4

【読書メモ】はじめてのUIデザイン

数々の読書、折角なら自分の中に留めずにシェアしようと思い、メモをnoteに書き残していきます。続けるために本当にミニマムでスタート。

今回はこちら。
【タイトル】はじめてのUIデザイン
【著者】
吉竹遼さん @ryo_pan
坪田朋さん @tsubotax
池田拓司さん @tikeda
上ノ郷谷太一さん @tchkmngy
元山和之さん @kudakurage
宇野雄さん @saladdays


読もうと思った理由

・自身はビジネスサイドのキャリアだけれどもプロダクト開発への理解をより深めたいと思ったため
・プロダクトデザインの思考プロセスを自身も持てるようになりたい
・仕事柄、特にアプリのデザインフローについて知りたかった

全体の所感

・実務的なデザインだけでなくその前後についても網羅的に整理がされている良書
・特に実際のUIに落とし込むまでの思考プロセスは、ビジネスサイドも深く理解すべき箇所で、非常に参考になった
・ビジネスサイドとしても、プロダクトデザインへの理解をより深めることで、プロダクト側とコミュニケーションがより円滑にできるはず

さて、ここからは自身が特に心の残った点を書き残しておきます。

UIデザイナーは何をする人なのか

LV.1 画面の中のUIデザインを考えて、組み立てられる人

LV.2 画面を越えたUIデザインを考えて、組み立てられる人

LV.3 UIデザインを中心に、複数のスキルを組み合わせられる人

情報設計とは

・ひとことでいうと「わかりやすさを設計すること
・あらゆるプロダクトの骨格を作るもの
・情報設計は作るものの要件とUIデザインをつなぐ架け橋となる存在
・視覚的要素が「単語」だとすれば、要素を組み合わせて1つの画面にしたものが「文」、複数の画面で構成されるプロダクト全体が1つの「物語」である

情報設計の流れ

1. 行動、操作のシナリオの作成
ユーザーが目的達成するまでの理想的な状態の仮説を立てる
2. コンテンツの分類軸の設計
シナリオからユーザーの性質を理解し、それに合わせたコンテンツの分類を行う
3. UIモデルの設計
コンテンツの見え方ごとにユーザーが何を見てどうするのかを整理して、フロー図を作成する
4. レイアウトとインタラクションの設計
ペーパープロトタイプでレイアウトとインタラクションを設計する

シナリオの構造と書き方

ペルソナの価値シナリオ→行動シナリオ→操作シナリオを書き表してみる

価値シナリオ:ペルソナがやりたいことと関連するシーン
行動シナリオ:目的達成までのストーリーとアプリ上のタスク
操作シナリオ:タスクを実行するための操作

必要な要素の整理

コンテンツの探し方の設計
1.行動シナリオを元に考える
(音楽系アプリを例に)
曲名/アーティスト名/アルバム名/歌詞に含まれるフレーズ/発売時期、使われていたシーンなどの特徴 etc.
2.コンテンツが持っている属性を元に考える
(1と同例)
作曲者/曲番/発売年月日/ジャンル etc.
分類軸の設計
ユーザーがコンテンツをどう探していくのかをシナリオ、コンテンツ視点それぞれで考える
(音楽系アプリを例に)
マイライブラリから→アーティスト/アルバム/曲
検索から→曲名/アルバム名/アーティスト名/歌詞のフレーズ

フロー図の作成

・ユーザーがアプリ上で「何を」を「どうする」と目的を達成できるのかを線で繋ぐ
・フロー図≒画面遷移図。画面遷移図はUIデザインが進んだ状態で全体像を把握するため、もしくは既存プロダクト改善にて利用

・UI Flowsという、ビュー単位でユーザーが「見るもの」と「おこなうこと」に分解して、プロダクトの構造を抽象化し、全体を把握するための方法がある。それを拡張してフロー図を作る

今回は以上です。お読みいただきありがとうございました。

この記事が参加している募集

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

スタートアップ/ビジネス開発といった自身の仕事について整理し書いていこうと思っています!ときどき、年間休日の約100日を使い全力投球している子どもとの遊びネタも。

Thanks!
5
スタートアップでビジネス開発・推進をしてます。事業フェーズの1→10が主な守備範囲。現在はトレタで新規事業のプロダクトマーケティングを担当中です。趣味はアウトドアと子育てとローカル活動。Twitter→https://twitter.com/shumpeei
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。