ビジュアルと使いやすさを両立したUI：シンプルなToDoサービスの作成を通して
こんにちは！
UIデザイナーになるために、BONOというコミュニティで日々学習中の須ノ内ににです。
今回はBONO内のゼロからはじめるUIビジュアルというシリーズを通してTodoサービスを作成することで、ビジュアルと使いやすさを両立するデザインのテクニックを学びました。
このシリーズで紹介されているプロセスを真似して、目的に沿ったデザインをしていきます。
実際に作成したもの
最終的にこちらを作成しました。
制作期間：5日
使用ツール：Figma
今回の要件
要件までは学習している動画に沿ったものになります。
対象
1日のやることを書き出して消化するだけ、気持ちがいいタスク管理サービスがほしい…。
必要な機能/できること
タスクの
閲覧
追加
編集
検索
期限の設定
カテゴリ分け
（要件に期限の設定があり、途中まで無理やり解釈して作っていました。
間違いだったようで、以降は要件から無視しています。）
プロセス
適宜調整しつつ、以下の工程で制作しました。
1 | トレースして土台を作る
1-1 | 参考サービス
まずはTodoistというサービスを参考にしました。
これを基本の構造としていきます。
1-2 | 分析してみる
このUIは左にナビゲーション、右にコンテンツという2つの大きなブロックで構成されています。
その中から、要件に沿っているものを洗い出してみました。
これらのみを真似していきます。
1-3 | 要件に合わせてトレース
先ほどまとめた必要な要素をトレースし、調整してみました。
主な調整点
タスク内の階層構造が不明瞭
余白を調整して強弱をつける
タスクリスト内のボーダー上の余白が不十分
余白を調整（タイトルの上下余白よりやや狭めに設定）
右上の表示アクションが過度に目立つ
黒からグレーに色を薄める
フォントウェイトを軽くする
2 | タスク追加/編集/削除アクション
2-1 | タスク追加アクション
タスク一覧の下部にアクションを追加し、「タスクを追加」ボタンをオーソドックスな青色で強調しました。
2-2 | 編集/削除アクション
Todoistでは、タスクにマウスを合わせると三点リーダーが表示され、クリックすることで編集や削除ができます。
この方式を採用し、タスクにマウスを合わせると三点リーダーを表示し、クリックすると編集・削除メニューを開けるようにしました。
3 | ブラッシュアップ
プレビューで客観的に確認し、新たな参考デザインを参照しながら、改善点や新しいアイデアをリストアップしました。
そして、それらに基づいてデザインをブラッシュアップしていきました。
3-1 | 参考デザイン集め
TickTickとThings 3というアプリを新たな参考として、デザインの細部のクオリティを向上させました。
3-2 | 要件を見直す
以下のかっこ内の考察は後の工程で削除する部分なので、省略しても構いません！
（要件の「1日のやることを書き出して消化するだけ」と「期限の設定」は一見相反するように見えますが、実際には両立可能だと解釈しました。
基本的には1日のタスクを書き出し、その日のうちに消化することが主な使い方になるかと思います。
しかし、レポートやプレゼン資料の作成など、締め切りが決まっていて1日では終わらないタスクもあります。
そういったケースでは、開始日にタスクを作成し、締め切りや近い日を期限に設定することで、適切なペースで進められます。
この考えに基づき、その日に全く取り掛からないタスクの設定（近日予定）は不要としました。
代わりに、今日のタスク内で近日締め切り/進行中や期限切れを分けて表示することで、緊急度を意識できるようにしています。）
3-3 | 調整してみる
様々な改善点を洗い出し、繰り返しブラッシュアップを行ってこのデザインに至りました。
削除したもの
インボックス
カテゴリが未設定の場合でも、日付は必ず設定されるため、代替機能は不要と判断しました。
近日予定ボタン
要件と合致しないため削除しました。
メインコンテンツ内タスク数
要件との整合性が低く、必要性も不明確だったため、比較検討の末に削除しました。
タスクの詳細コメント
サービスの目的が1日のタスクを書き出して消化することであり、詳細な記入は不要と判断し、削除しました。
追加したもの
サイドバー内カテゴリ一覧
カテゴリを色付けし、丸いアイコンとグレーの文字で横並びにしました。色の使用を控えめにし、シンプルで見やすいデザインを目指しました。
変更したもの
タスクブロック
ブロック内を1行に削減し、カテゴリと期限は右ブロックに配置しました。
余白の調整（全体的に）
追加したカテゴリ一覧に余白を合わせました。
タスクブロックの幅
タスクブロックの幅を2/3ほど狭め、左右に長すぎて視線移動に時間がかかる問題を解消しました。
チェックボックス
チェックボックスを四角形で縁が丸みを帯びたデザインに変更し、より直感的で認識しやすいものにしました。
4 | ビジュアルのテーマ変更
TickTickの習慣トラッカータブを参考に、タスクをカード型UIに変更しました。
カード型になったタスクを強調するため、背景色も調整しました。
背景色は、サイドバー、ヘッダー、メインコンテンツの順に徐々に暗くなるようにし、視覚的に階層を表現しました。
また、この段階で期限の表示を削除しました。
5 | タスク作成機能をデザイン
次に、「タスクを追加」ボタンをクリックした後の動作をデザインしました。Todoistを参考にしつつ、要件に合致する要素のみを採用しました。
5-1 | モーダルを作成
まず、「タスクを追加」ボタンをクリックした後に表示されるモーダルをデザインしました。
5-2 | カテゴリ選択メニューを作成
カテゴリ選択ボタンの▼をクリック後の動作を示すため、カテゴリ選択メニューを作成しました。
5-3 | フォーム入力時のプロトタイプを作成
カテゴリを入力したとき、該当するものがない場合、以下の2点を明示できるようにしました。
該当するカテゴリがない旨を表示
「該当するカテゴリが見つかりません」というテキストを、入力前のメニュー内のカテゴリ名と同じサイズで表示
入力した名称でカテゴリをすぐに作成できる選択肢を提供
「"xxx"を作成する」というボタンを表示し、入力中にリアルタイムで更新される様子を表現
6 | フィルターを作成
ここでフィルター機能を作成しました。
6-1 | フィルターを作成
今回は、フィルター型のタグの要素として、Stripeのデザインを参考にしました。
シンプルさと使いやすさを重視し、ワンクリックでフィルタリングできる機能を実装しました。
ヘッダーに配置していた表示ボタンでフィルタリングと並び替えができる予定でしたが、機能が重複するため、ヘッダーを削除しました。
6-2 | 選択時のプロトタイプを作成
選択時のボタンとプロトタイプを作成しました。
フィルターのアイコンをカテゴリ名の右側に配置しました。
これは、ユーザーがカテゴリ名を確認してからフィルタリングを選択するという自然な流れを考慮したためです。
デザインの参考元として、Notion（データベースのフィルター機能）とmobbinを採用しました。
Notionからは選択後の状態を、mobbinからはデフォルトの状態（「全て」ボタン）を参考にしています。
また、ユーザビリティを向上させるため、全てのカテゴリ選択が解除された場合、自動的に「全て」ボタンが選択される仕組みを実装しました。
7 | 検索時のプロトタイプを作成
最後に、検索ボタンをクリックした際のプロトタイプを作成し、その動作を示しました。
その後、微調整を重ねて完成しました！
反省点
設定した数値の統一感が不足している、あるいは数値を十分に把握できていないと感じました。
また、集中しすぎるとデザインプロセスの記録を忘れてしまう傾向がありました。
Notionにデザインの記録を残しながら作業を進めていましたが、後半は熱中しすぎて記録を取ることを忘れてしまいました。
おわりに
楽しく学びながら取り組むことができました。
熱中できた理由はいくつか考えられます。
現在の環境がUI学習に適している
自分自身が熱中モードに入っている
課題のTodoアプリが好きである
UIビジュアルに対して興味や適性がある
この勢いを維持して、UI/UXに熱中しながら楽しく取り組んでいきたいです。