UIデザイン　情報設計　基本の考え

UIデザインをするときの情報設計について、基本的な考え方をまとめました！
基本なので、これをベースにして、考えていくことにします。

基本的な流れ
・ゴール設定
・アイディア出し
・プロトタイピング
・UIグラフィック

それぞれの中で、やることをまとめました！

○ゴール設定

言わずもがな、これがないと迷宮入りしてしまうので、絶対必要事項です。

手順

1 ペルソナの設定

ペルソナは具体的かつ明確に！

2 課題の設定

ペルソナの価値観、思考から、既存の機能では解決しない課題を洗い出す
課題解決をする機能追加でどのように変わるか、をビフォーアフターで課題、提案、変化をストーリーにして書き出しておく

3 コアコンセプトの設定(★重要)

2の変化で「どのような位置付けのもの」になるか、「どんな価値を持つもの」になるかというところから、デザインのコアコンセプトを設定する。

まとめ

「ユーザー」は、「ニーズ」が、「困っている」という課題があるので、「コアコンセプト」で解決できる。
とまとめられれば、OK。

○アイディア出し

1 目的達成に必要な要素出し

目的を達成する体験のフロー化

●ポイント
課題解決、目的達成のストーリーを明確に考える！

2 現状の把握と解決アイディア出し

以下の①〜③を3行で書き出して考える
　①既存サービスでの体験をフローで整理
　②①のフロー中に行うアクションをまとめる
　③上記に対応したアイディアを出す
●ポイント
当たり前のことも言語化し、フローの中で可視化することで、新たな気付きやアイディアの可能性が見つかるかも！

3 解決のためのアイディアを選ぶ

2-③のアイディアからコアコンセプトに合致したものを選定する。
今回のアイディア→ コアコンセプト
を繋げるというイメージ。

コアコンセプトに合った、新たな位置付け・価値を与えられるアイディアはどれか？で選ぶと良い。

どのような機能になるのか、がここで絞られる。

4 アイディアを実現した際のフロー整理

3で選定したアイディアの機能でどのように目的を達成できるか、をフローで整理する。
アクションごと考えることで、詳細まで思考が巡る。

各要素ごとに問題や課題が浮き彫りになり、用語の定義や条件、どのように機能するか、配置場所…など、考える必要があるものがどんどんわかる！

5 UIアイディア出し

4のアイディアで必要と判断した要素に必要な情報と配置について考える。

何(必要な情報)をどこに配置するか。

・「何を」
「何を」はどのような情報を持っているか
つまり、画面で何がわかる必要があるか、を考える。
それらに優先順位をつけ、オブジェクトが持つ情報の選定をする。

・「どこに」
オブジェクトをどこに配置するか
既存のものの情報設計を整理
→どこが相応しいかを判断

●ポイント
持っている情報等で階層を意識すると配置の適性がわかりやすくなる。

6 UIリサーチ

参考になりそうなサービスをリサーチ！
スクショしておく
すでに完成して実装されているサービスのデザインから構成やデザインを学ぶ（盗む！）ことができる最高のお手本！

プロトタイピング

1 ラフスケッチ

ソフトは使わず、構成や必要要素を盛り込んだ際に、どんな形になるかを考えて書いてみる。

●ポイント
フォントや余白、テイストは既存のものと統一すること。
統一したうえで、変更を加えて行った方が良い。

2 UIパターン出し

ラフスケッチをデザインツールを使ってパターン出しを行う。
画面で見たときに、要素がわかるレベルでとにかくパターンを出す。

要素を配置する際は、グループごとに配置を考えていく。
グループ＝関連情報の集まり
なにに係る情報か、によって配置は変わる。
（全体に係る情報なのか、画像に係る情報なのか...等）

●ポイント
デザイン4原則必須（情報ごとの整理）
スクショは上手に使う（トレース＋画像の部分利用）
トレースはここで活きる！
→機能追加では既存のサービスのテイストがあるため、それを損なわないように。

○Figmaの便利な機能「Fix position」
画面スクロールをしても固定しておきたいオブジェクトでチェックをつける。

3 UIパターンを実機で確認

作ったパターンは必ず実機でプロトタイプの確認を行う。
各フレームはタップで遷移するように繋いでおくと確認が楽。

Figmaではフレームを縦に伸ばすことで、スマホでスクロールした先のデザインを確認することもできる。
→要素の動きや固定したい箇所、イメージとして確認したいところをリアルに確認することができる。

実際に操作する実機での確認により、よりリアルな印象を実感でき、コアコンセプトにあったものを選択しやすくなる。

UIグラフィック

1 フィードバックをもとに修正

実機での確認等で検証し、絞り込んだパターンの詳細を詰める。
実機確認で生じた課題や気付きを修正する。
必要に応じ、対象に近い人にヒアリングやユーザビリティテストを実施。
これをもとに修正。

●ポイント
作り手だけで完結させず、新たな視点でのフィードバックが必要。
ゴールは対象とする人が課題を解決することができるということ。

以上！
ひとまず大きな流れに沿って、要点を自分なりにまとめてみました。
ところどころ考え方の違いはあるかもしれませんが、自分の整理として、学んだことをアウトプットしています。

これからもBONOで学んだことをガンガンアウトプットしていきます！

おしまい！