【学習ログ】ゼロからはじめるUIビジュアル_ToDoサービス｜BONO
1. はじめに
こんにちは。スキルの幅を広げたい／深めたいという思いで、2024年にUI/UXデザインを学べるコミュニティBONOに参加しました。
今回は現在参加しているBONO-ボノ-「ゼロからはじめるUIビジュアル」での学びと制作したアウトプットを共有したいと思います。
このシリーズは、作りながらUIデザインの基本原則を学んでいくというもので、解説を見ながら一緒にToDoサービスを制作していくというものになっています。
2. 概要_シンプルなToDoサービスを作ってみた
まず初めに今回の要件と制作したものをお見せします。
2-1. 要件：やることを書き出し、消化するタスク管理ツール
Usecase：1日のやることを書き出し消化するだけのタスク確認が欲しい
Feature：タスクの閲覧／追加／編集／検索、カテゴリ分け、期限設定
2-2. アウトプット：作ってみた
要件のみ作成
デザインを当てて動きをつけてみた
小さいのでここからどうぞ。
さて、ここからは学んだことや制作過程について、まとめていきたいと思います。
3. ここでの学びをまとめていくよ
3-1. ベーシックなフォントを使おう
基本的な考え方として、フォントはベーシックなものを使うこと。
OSごとに異なりますが、日本語のデフォルトフォントを使用することで読み込み速度を気にしなくてよかったり、ユーザ自身が慣れているフォントだったりで良いことづくめです。
例外もあるとは思いますが、デフォルトのフォントを使用するようにしましょう。
ちなみにデフォルトのフォントはこちら。
Mac ｜ 日本語：Hiragino sans、 英語：Helvetica
Win ｜ 日本語：Meiryo または YuGotihic、英語：Arial
3-2. UIを作る流れは「全体作成→微調整」
いきなりイケてるデザインのかっこいいものを作るのではなく、まずは要件を満たすUIを作っていきます。
まずは要件を満たすUIを制作し、そこからブラッシュアップしていくという流れです。
最初に作ったのは↑の画面ですが、ここからデザインを当てていきます。
参考になるUIをPinterestなどから見つけて、当ててみましょう。
さて、今回ですが、ブラッシュアップの内容というより、UIを制作するうえで大切な基本的な考え方について話を戻しましょう。
3-3. UIの3つの構成要素「Contents」「Action」「Navigation」
UIで考えるべき要素として、ユーザの目的を満たすコンテンツがベースにあり、「追加」「編集」「削除」などの基本的な操作場所（アクション）、また今何を表示しているのか／何を表示できるかを案内するナビゲーションがあります。
Contents「コンテンツ」：ユーザが目的にしているもの。ユーザが価値を感じているメインのもの。
今回でいうと、ToDo管理の部分。
Action「アクション」：ユーザに行ってもらう操作部分。
今回でいうと、タスクを追加したり編集したり削除する操作の部分。
Navigation「ナビゲーション」：今何を表示しているのか、何を表示することができるのかを案内するブロック
ページ全体やコンテンツを操作するものや、タイトルなどがNavigationに該当します
＊ヘッダー部分のナビゲーションはグローバルナビゲーションとか言ったりします
3-4. コンテンツを中心にユーザの体験をデザインする
ユーザはコンテンツを目的にサービスに訪れてくれるので、コンテンツを中心に体験をデザインしていくことが大切。
「ユーザが価値を感じる＝お金が生まれる」のであり、そのための条件を整理し、UIにつなげていきます。
ちなみに上記の3つの構成要素のうち、コンテンツの説明だけバクっとしていますが、実際はコンテンツもさらにこの3つの「Contents」「Action」「Navigation」に分けられるケースが多いです。
整列や余白などで分けられているブロックをよく見ると、この3つの要素で構成されています。
3-5. Actionを配置するときのポイント
Actionを配置するときは、以下の4点を意識します。
Navigation近くに配置
Actionする対象の近くに配置
基本は右側に配置（左は戻る操作が多い）
色を付与（目立たないと操作しづらい）
また、どのタイミングで表示するかというのもUIの大事なポイントです。
常時表示なのかホバー時に表示するか、悩んだときはどんなアクションをさせたいかを考えて選択しましょう。
常時表示：よく使う操作
Hover表示：編集系の操作
ToDoサービスで使ったリスト表示では、Hoverすると編集ボタンが表示されるUIが多いです。
また、削除はあえてアクションを多くするように配置しています。
誤って削除してしまうのを防ぐため、あえてクリックする操作を踏ませることが多いです。
3-6. モードという概念を理解しよう
モードとは、作業に集中してもらうソフトウェアの概念のこと。
たとえば、Amazonの画面。
通常の商品を選ぶ際はこんな感じの画面になっています。
商品を選択し、購入画面に進んでいくと、ガラッとテイストが変わります。
ヘッダー部分のナビゲーションや左のナビゲーションが消え、購入に関する重要な情報だけがシンプルに配置されています。
これは、ユーザに購入する作業に集中してもらうための画面ですね。
モードの概念を実際に使っています。
似たような言葉でモーダルというものがありますが、これはモードのためのUIテクニックのひとつです。
モーダルとか、ダイアログとかアラートとか読んだりします。
（厳密には、これらは違うものらしいですが）
よくある「確定しますか？」「削除しますか？」のような表示です。
こちらのGmailの新規メッセージの画面もメールの作成に集中させるためのモーダル表示だと思います。
3-7. クリック範囲は40Px以上
ちなみに、クリック範囲は40pxあると押しやすいといわれています。
40pxより小さいとクリックしにくいです。なので、今回制作したものは、検索バーなど40pxで制作しています。
また、UIを制作するときは、通常の画面だけでなく、いくつかのユースケースを想定してパターンを制作したほうが良いです。
例えば、検索であれば、「フォーカスがあたったとき」「文字を入力したとき」「ヒットしないときの画面」など。
最近は、フォーカスされると履歴が表示される画面も多いですよね。
実際に利用するシーンを想像して、UIを作ることが重要ですね。
4. さいごに
以上が、BONO-ボノ-「ゼロからはじめるUIビジュアル」でのアウトプットと学びでした。
いかがでしたでしょうか。
普段なんとなーくで作っていたUIですが、3つの構成要素など理解が深まりました。なぜ、ここに配置するのか？についてもきちんと理由があるんですよね。
どの要素か？どこのブロックか？を考えると、自ずと大きさや余白も決まってくる。非常にタメになるコンテンツでした。
引き続き、BONOのコンテンツをやっていきたいと思います。
以上、ご覧いただきありがとうございました。