デザインとUIについての議論【静かな本棚】
こんにちは。ETEOTOです。
今回の内容は、アプリ開発の進捗の確認と広報活動についての方針を話し合いました。
本記事は、その過程を記録したものです!
前回の記事はこちら↓
「静かな本棚」開発進捗
デザイン案をFigmaにて作成済のため共有しました。
配色について
UI上で用いる色に有彩色を使うと、感情の色と被る(避けたとしても偏りが出る)
UI上の色は無彩色にして、感情の色は有彩色にすることで、重複を回避する
感情の表現について
各感情の色とテキストの組み合わせでコントラスト比を考え出すときつい
ラベルやタグのアイコンに各感情の色を使い、テキスト色は背景とのコントラスト比を考える


一覧画面では縦方向の表示領域を確保するため、ヘッダを表示しない。
同様の理由で、フィルタ機能も ドロワーにする。
ドロワー内について
できるだけドロワー右側に操作箇所を集める
クリアボタンについては誤タップ防止のため例外的に左に寄せる
デザインに関する意見
感情ごとに背景色を分けた方がいいのでは?
デザインをチームに共有したところ、「現状のデザインではどの感情なのかパッと見ではわかりずらい。感情ごとに色をガッツリ変えた方がいいのでは」という意見がでました。
そのため、実際に変更してみた案が以下です。

上記の案がでましたが、一番左は
背景色(感情)ごとに文字の視認性が変わるのは好ましくない
視認性が悪い
という理由で没に…
残った真ん中と右では、意見が分かれましたが、本アプリの発案者が「右が良いが少しデザインを修正したい」ということで次週に持ち越しになりました。
ETEOTOではアプリの発案者の意見を重要視していますので多数決などでは決定していないんですよね。
ホーム画面をPinterest風にできないか?
次にでた意見としては、現状はコレクション感が少ないこと。
今回のアプリの要件としては以下の三つを想定しています。
出会った言葉をコレクションしたい
出会った状況を思い出したい
当時の感情を反芻したい
これらは上から順に重要な要件として設定しているが、現状はデザインからの得られるコレクション感が少ないです。
そのため、Pinterestのようなデザインにするのはどうかという意見が出ました。
※ Pinterestとは
お気に入りの画像や動画を自分のボードに保存・整理できるビジュアル探索プラットフォームです。

実際にでたPinterest風のホーム画面のデザイン案が以下です。

チーム全員がコレクション感を出すならPinterest風デザインが良いと全員一致しましたが、以下の2点の問題もでました。
Pinterest風デザインは実装が期限内に難しそう
設定したホーム画面の仕様は「お気に入りした言葉から1つランダムに表示する」だった。Pinterest風の場合、複数表示することになってしまう
一個目の「Pinterest風デザインは実装が期限内に難しそう」に関しては、
現状は予定より早く開発が進んでいる
デザインを実装していないため、今の段階で試して無理な場合は実装しなければいい。実装しようとしてみる価値はある。
という理由から実装してみることになりました。
二個目の『設定したホーム画面の仕様は「お気に入りした言葉から1つランダムに表示する」だった。Pinterest風の場合、複数表示することになってしまう。』に関しては、
そもそもなぜ1つだけランダムに表示する予定だったのか?を再度議論しました。
これは、当時は要件に設定した
出会った状況を思い出したい
当時の感情を反芻したい
という二つの要件を満たすには、ホーム画面に表示するものは1つの方が
当時の感情を思い出す気になるのでは? という理由でした。
複数個の言葉が表示されると、思い出す言葉を選ぶ段階で迷いが生まれることで、そもそも思い出すきっかけを失っている可能性があるためです。
しかし、上記の二つの要件よりも
出会った言葉をコレクションしたい
というの方が上位の要件であるため、今回はホーム画面に複数個表示する(Pintarest風にする)ことに決定しました。
なお、Eteotoではこれまでにも
「成長リスト」 というアプリを開発・リリースしています!
今回の「静かな本棚」は、その開発経験を踏まえつつ、
あらためて価値やスコープを見直しながら取り組むプロジェクトとなります!
もしよろしければ、
成長リストをご利用いただいたご感想
今回の企画内容についての率直なご意見
などをお寄せいただけましたら、今後の改善や検討の参考にさせていただきたいと考えております!
