BONO｜Todoリスト Webサービス
はじめに
今回は、BONOのビジュアル基本原則のレクチャー動画に基づいて作成したTodoリストのWebサービス制作過程で自身がポイントになったと思うものをまとめていきます📝
🌱制作の要件
誰がいつ使う？｜1日のやることを書き出して消化するだけのタスク管理をしたい…
必要な機能｜タスクの閲覧・追加・編集とカテゴリ分け
BONO ビジュアル基本原則 Todoサービス
その１｜ヘッダーUI〜メインコンテンツ
ヘッダーUIの作成とTodoブロックのデザイン
まずは参考となるサービスのUIを集める。そのUIをとにかく真似ること。
基本的にコンテンツを中心にUIを設計していくこと。
作成するブロックの機能を確認する→ブロックの中でも、ナビゲーション・コンテンツ・アクションを当てはめることができる。
オブジェクトコンテンツのタイトルを一番目立つ大きさにする。サブコンテンツ（日付）などの他のコンテンツとのヒエラルキーを考えて大きさなどを決める。
アクションエリアのデザイン
アクションはナビゲーションの近くに配置することが多い。
Todoサービスのアクション「編集する」「削除する」のボタンは、ホバーすると出てくるよう設定する。常に出しておくボタンというのは、ユーザーの使用頻度が多いもの。（例えばXのいいねボタンなど。）今回のサービスでは、「編集する」「削除する」は常に必須ではない。
アクションには色をつけること。UIにおいての「色」はまずアクションに付与すること。アクションが目立たなければ操作がしにくい。
その２｜全体のテイスト変更
ビジュアルのテイストを変更するレッスン。→ビジュアル表現は、大きく土台と装飾で分けられ、今回は装飾を盗みながら別のテイストに変更する。
余白を決めていくときのポイント。→余白の大きさによっては、ユーザーに対して、１つのまとまり（グループ）を誤って認識させてしまう恐れがある。例えば、【それぞれのTodoリストの余白】＞【タイトルとTodoリストの余白】としてしまうと、Todoリストで１つのまとまりという認識しづらい。
その３｜タスク作成機能と選択メニューUI
アクションには、色（プライマリーカラー）を入れること。コントラストができ、操作がしやすくなる。
アクションの色は、サービスで統一すること。
モード という概念があり、モード＝状態を表す。
モーダルは、UIの表現テクニックのこと。表示されているものの上に出して、操作や選択をさせるもの。アラートやダイアログがその例。
その４｜フィルターUI
UIアイデアはラフでよいので案を書き出すこと。
フィルターの位置について。導線を考えると、案１）ヘッダーナビゲーションに配置するのはメインコンテンツと離れすぎているので却下。案２）一番下に配置するのは、すでに「タスクを追加」というアクションが配置されているので分かりづらい。違う役割のアクションは位置を分けた方が分かりやすい。
フィルターを置く位置、見栄えをよくするという理由だけで配置していて、グループを意識していなかった→グループごとで近接するように余白の幅を考えること。例えば、Todoリストの上下余白は16あるので、別グループであるフィルターを配置する時は、リストの上下幅16と同じか、もしくはそれ以上に余白があったほうがよい。
その５｜検索UI
参考UIをチェック後→追加するアクションの流れ・挙動を言語化して整理してからとりかかること
検索ワードがヒットした状態
検索ワードがない 状態
アウトプット｜figmaのデータ
まとめ
１からWebサービスのUIを作成してみて、ざっくり言うと「全てに意味があり、論理がある」というのを感じました。アイコンの色、文字の大きさ、配置など、全てに何らかの意味や論理がありました。今後のレクチャーでも、「なぜ、このようにするのか」を問いかけながら、UIデザインの知識を深めていきたいです。
また、こういったアウトプットも、回を重ねていく中で「伝わりやすさ」をもっと意識できるように頑張ります…！おそらく、プロトタイプのfigmaファイル共有など、よりよい方法がある気がするので…🐤
拙い記事になりましたが、最後まで読んでいただきありがとうございました✨