各画面の目的に対するデザインと感情ラベルについての議論【静かな本棚】

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

前回の記事はこちら↓

「静かな本棚」開発進捗

仮デザイン案を複数作成し、Figmaで共有しました。

この日の目標は、「ホーム画面のデザインを確定する」ことです。 Pinterest風のカードUI、ランダム表示やシャッフル機能も実現できそう、という見通しが立っており、 デザイン案を元に方向性を決めるための議論を行いました。

実際に作成したデザインは以下です。

左から順に

• 大理石のような背景

• 真っ白な背景

• 各カード全体を色付け

• 各カードに影付け

になります。

デザイン確定に向けた議論

大理石のような質感の背景案が好評で、 「雰囲気が良い」「ことばをコレクションしている感がある」という意見が出ました。

そもそも今回のアプリでは、 言葉をコレクションし、それを鑑賞する体験を 「美術館の展示」や「絵画の説明書き」に近いものとして捉えています。 その文脈から、 "美術館っぽさ" を感じられる要素として大理石の背景を用意したい、という発想がありました。

また、背景が完全な白だけだと、文字が少し浮いて見えてしまう、という前提もあり、 まずは大理石背景を採用する案が出ました。

一方で、

• 背景に情報量があるとうるさく感じる

• あくまで言葉が主役なので、できるだけ邪魔しない方が良い

といった懸念も挙がりました。
そのため、大理石背景の透明度を20％程度にして薄くする案も検討されました。

しかし最終的には、

• まずは一番シンプルで体験が安定する形から作る

• デザイン実装の工数を最小限に抑える

ことを優先することになりました。大理石などの背景表現については、余裕があれば選択式のテーマとして今後追加することを検討し、初期リリースでは白背景で実装を進める方針に落ち着きました。

ことば一覧画面のUI方針

次に、これまでに登録した言葉をすべてを見返すための画面であることば一覧画面について議論しました。

この画面の目的は「コレクション感を楽しむこと」ではなく、 今まで登録した言葉を一覧でパッと見て、素早く振り返ることにあります。

そのため、上記のようなホーム画面で採用するカード形式は、

• 一覧性が悪くなる

• 情報密度が下がり、探しにくくなる

という理由からことば一覧画面には不向きだと判断しました。

結果として、 iPhoneの標準メモアプリのような、シンプルで情報が並ぶリスト形式が最も目的に合っているという結論になり、 ことば一覧画面ではカード形式は採用しない方針に決定しました。

感情ラベル設計

次に、各ことばに対して登録する感情ラベルについて議論しました。

感情ラベルを決めるにあたり、 「今気に入っている言葉・出典・それに対する感情」をメンバーであげてみました。

実際に出し合ったものの例は以下です。

こうした実例をもとに、 感情の役割が被らないよう整理し、最終的なラベル構成を決めていきました。

最終決定した感情ラベル（1つだけ選択）

感情ラベルは、デザイン実装の観点からも数を絞ることにしました。

色が増えると似た色が増えるので

• UI上で判別しづらくなる(他の色との相対的な区別がしづらくなる)

• 意味がわからなくなる(色単体で見た時に想起される内容と、実際の感情ラベルとに乖離が生まれる可能性が上がる)

これらを踏まえ、7つに決定しました。

• 燃える（赤）

• 泣ける・切ない（青）

• 落ち着く（緑）

• 楽しい・面白い（黄）

• 美しい（紫）

• ときめく・愛（ピンク）

• 未分類（グレー）

複数感情の同時選択も検討しましたが、 実装工数と体験のシンプルさを優先しする仕様にしました。

今回の会議で、 「静かな本棚」の体験の軸となるデザインと感情表現が固まりました。

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

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

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

もしよろしければ、

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

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

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