色が近すぎる問題に向き合う：感情ボタンをバリアントで回す設計へ【静かな本棚】

こんにちは。ETEOTOです。 今回の内容は、「静かな本棚」のデザインの仮案と感情ラベル設計について話し合った内容の記録です。 本記事は、その過程について意思決定をまとめた開発ログになります。

前回の記事はこちら↓

「静かな本棚」開発進捗

ホーム画面のデザイン

まずは、前回決定したホーム画面のデザインを仮実装したのでその内容を共有しました。
1枚目が実装予定のデザインで、２枚目が現在の実装中の画面です。

まだ、仮実装なので実装予定のデザインとは大きく異なりますが、pintarest風のデザインが実現できたので一安心です。

ことば一覧画面のデザイン

次に、ことば一覧画面のデザインです。
こちらは前回の会議でiPhoneの標準メモアプリのような、シンプルで情報が並ぶリスト形式にするという方針に決定したため、以下のようなデザイン案が共有されました。

左から順に

• 左の縦線が長い

• 左の縦線が短い

• 左の縦線をアイコンに変更

• 左の縦線をアイコン、ブックマークボタンを灰色に変更

になります。
ここで、前回まで「お気に入り」または「ブックマーク」と呼んでいた言葉を少しでも設計意図が伝わりやすいようにチーム内で統一すべきということで、「ブックマーク」という言葉に統一しました。

ここでは、

• ブックマークボタンが左の縦線と同じ色の場合、中央のことばに目が行きにくい

• 各感情ごとそれぞれにアイコンがある方がわかりやすい

という理由から、一番右の左の縦線をアイコン、ブックマークボタンを灰色に変更したものに決定しました。

ことば登録画面

次にことば登録画面です。
こちらでは以下のようなデザイン案を共有しました。

このデザインに対しては、「現状の配色だと「美しい」と「ときめく」の色の違いがわかりにくい」という意見が出ました。

現状の配色は、下記サイトで説明されているPCCSトーンマップのsoft toneを利用しています。

「現状の配色だと「美しい」と「ときめく」の色の違いがわかりにくい」
に対しては、
soft tone以外のトーンを選ぶことで解決できないか？
という案が出ました。

そのため、次回に他のトーンを選択したデザインを用意することに決定しました。

デザインに関してはFigmaで設計していますが、「設計してみるとなんだかイメージと違う色だな」と思うことも多々あります。
そのため、Figmaのバリアント機能を使いながら会議中にスムーズに議論ができるようにFigmaの環境も整えていくことにしました。

※バリアントは、1つの部品（コンポーネント）に複数の状態や種類をまとめて持たせる仕組み。ボタンの「通常/押下/無効」などを切り替えて使えるようにする。

以下は、バリアント機能を利用した感情ボタンのデザインです。

今回の会議で、 「静かな本棚」の進捗とデザインの方針についてまとまりました。

引き続き、開発の過程を記録していきます。

なお、Eteotoではこれまでにも
「成長リスト」 というアプリを開発・リリースしています！

今回の「静かな本棚」は、その開発経験を踏まえつつ、
あらためて価値やスコープを見直しながら取り組むプロジェクトとなります！

もしよろしければ、

• 成長リストをご利用いただいたご感想

• 今回の企画内容についての率直なご意見

などをお寄せいただけましたら、今後の改善や検討の参考にさせていただきたいと考えております！