こんにちは！ちょこです！
今回は「ユージェネ」から、家具一覧画面のフィルタ機能の紹介をしたいと思います。
キャラクターやアイテムをフィルタすることは多いかと思うのですが、家具のフィルタについてはなかなか最適なものがデザインされていないように感じます。
「ユージェネ」の場合はテーマや色ごとに表示する機能が実装されていました。
これにより、比較的簡単にインテリアのテーマや統一感のある部屋が作れるようになります。
部屋をデコレーションする機能を実装する際の参考になれば幸いです。
では、早速画面の紹介をしていきます！該当の画面はこちらです！
目的に合わせた並び替えの機能
早速機能を紹介します。
フィルタ機能は大まかに以下の２つの機能に分けられます。
- 並び替え機能
- 抽出機能
並び替えについては更に以下の３つに分類できます。
- コイン
- サイズ
- テーマ
それぞれの目的についてですが
「コイン」は予算面を優先してコーディネートする時。
「サイズ」は部屋の広さを優先してコーディネートする時。
「テーマ」はもっともやりこみ要素が高く、選択する家具の種類が豊富になってきた後で使う機能でしょうか。
このように、それぞれの機能の目的によって項目が分けられています。
テーマは全部で29種類！
テーマはかなり細かく分かれています。
これを利用して、統一感のある部屋作りが可能になります。
- シンプル
- ナチュラル
- モダン
- レトロ
- キッズ
- メルヘン
- アンティーク
- 和風
- 中華風
- 娯楽・遊戯
- 科学・SF
- スチームパンク
- スポーツ
- ミリタリー
- アウトドア
- DIY
- ガレージ
- ウェスタン
- キッチン
- 学校
- オフィス
- カジノ
- ダイナー
- ゲームセンター
- 銭湯
- スポーツジム
- ストア
- 家電
- ホラー
細かく分類できることによって、ユーザーの意図したインテリアを作りやすくなります。
ちなみに「和風」でチェックを入れると、昭和レトロなアイテムのみが抽出されます。
アニメーションで見るとこんな感じです。
テーマカラーは８種類！
家具のイメージカラーでも抽出することができます。
選べるカラーは以下の８種類です。
- 赤
- 青
- 緑
- ピンク
- 黄色
- 茶色
- 黒
- 白
ただ、色のみの情報なので、色覚多様性対応の視点で見るとどうなんだろう…？と思わなくは無いです。
「赤」「青」「緑」…といったラベルがあるとより良さそう。
試しに「黒」にチェックを入れると、黒い家具のみが表示されます。
アニメーションで見るとこんな感じです。
黒一色のアイテムではなく、黒を基調にしたアイテムが表示される、といった挙動でしょうか。
あとは
- つくれるものだけ表示
- NEWだけ表示
といった機能も用意されています。
こういった補助的な機能があるのも便利に感じます。
他のゲームのデザイン事例も紹介！
参考までに、部屋のコーディネートをする代表的なゲームとして「どうぶつの森 ポケットキャンプ」のデザインも見てみます。
「どうぶつの森 ポケットキャンプ」のフィルタ機能は以下のようなデザインでした。
恐らく「ユージェネ」よりもアイテムの数が多いため、プリセットの抽出機能だけでは対応できなくなってきたのでしょうか。検索機能があるのが特徴的です。
あとは「ユージェネ」でも採用されていた通り、カラーとテーマごとの抽出機能は「どうぶつの森 ポケットキャンプ」でも実装されていました。優先度が高そうですね。
テーマごとのチェックボックスですが、テーマ別に色が変わっていたり、それぞれのピクトグラムが表示されているので賑やかな印象を受けます。
この辺りのビジュアルデザインは好みや世界観によって取捨選択しても良さそうです。
以上です。
家具一覧画面のように多くのアイテムを管理する画面のデザインをする場合、フィルタ機能によって利便性が変わってきます。
家具を管理する画面をデザインする際はフィルタ機能もあわせてデザインする必要があります。
最近は部屋をカスタマイズする機能の優先度が高くなってきたのか、リリース時から用意されているゲームも少なくありません。
家具を管理する画面をデザインする際の参考になれば幸いです。
