ゼロからはじめるUIビジュアル　#BONO_UI

ToDoサービスのブラッシュアップ編

意味でUIのスタイル引き出しを増やす

• コンテンツ✖︎パーツ（＝UIコンポーネント）

• 色とシェイプ

• 盗む目線

ビジュアルの要素は、土台と装飾で構成されてる
UIの見た目は、見た時のユーザー気持ちや印象がどう与えるか/どうゆうテイストのサービスにしたいかで決めている

同じ要素のものが要素ごとでまとまって見えるように余白の幅を決める
　ex）タイトルとカードの間が20pxの余白の場合、カードごとの余白も20px以内に収めてる

検索バーの背景色を決める時は他サービスなどを見て普通の色が何かを検索して調べる

ブラッシュアップする時に意識すること

自分が作ったものを見比べて違和感がある点を見つけて他パターンで検証するのが大事
　┗変更する前と後で比較し、メリットとデメリットを洗い出す
 　┗どうゆうユーザーがどういうシーンで使うのかに合わせてUIのテイストを決めていくと良い＝ユーザーファーストでテイストを決める
　┗装飾を真似する際は参考をいくつか持ってきて真似してその中からパターンを検討
　┗参考に近いイメージを集める。全く違うよりも類似したものを集める

ブラッシュアップ1回目

• タスク名のテキストのウェイトを上げる

• カテゴリの位置をタイトルの近くに置く＆色をつけて何のタスクか種別する

• 日付削除。今回は”今日のタスク”が表示されるのが目的なので日付不要

• タスク単位の余白を広くする

• ヘッダーに背景色をつける＆縦の余白を作り、圧迫感をなくす

ブラッシュアップ2回目

1回目のものが簡素で洗練されたイメージ（書類っぽくて冷たい印象）なのでカジュアルなテイストに変更

• タスクをカード化する

• 全体の背景色を白から変更。ヘッダーと検索バーの背景色も合わせて区別しやすいように変更

• タスクのチェックボタン内に色を入れて押しやすい見た目にする

• タスク追加ボタンをボタンのデザインにする