Cocoda!DailyUI 挑戦記録③
久しく間が空いてしまいましたが、DailyUIの振り返りをやっていきたいと思います。今回はこちら。
アイデアだし・ラフスケッチ（案）
ニュースアプリということでアプリのイメージや配色はスマートニュースさんを参考にしました。
数年前からCMが流れていたこともあって今ではニュースアプリの中ではかなり有名なアプリですね。ここの色分けしているタブが個人的には分かりやすかったのと多彩な色を使っているいるけれどあまり煩くないというかチカチカしなくて全体的にすっきり見える点がいいなと思ったので今回配色の点で参考にさせて頂きました。
そしてラフスケッチで頭の中の案を形にしたのがこちら。
カテゴリ選択画面なので主役はカテゴリのボタンを大きく出してユーザーに気兼ねなく押してもらえるようなUIを目指しました。
ただ背景はこの時はアイコンか写真かで迷っていて、他の作成者さんの作品を見るとやはりアイコンか写真どちらかをバーンと使っているものが多くて、さてどうしようかと決めかねていました。
その時の迷いが注釈のコメントにも現れている気がします。
完成したもの
まず、ラフ時と比べてボタンが大きくなったので押しやすくなりました。
またラフの段階だと１ページに収めようとしていたものを２ページに分け、それぞれ大カテゴリ選択→小カテゴリ選択としました。
ボタンに関しても、選択すると色がつく（大カテゴリのボタンは色の部分と白い部分がおおよそ反転したような感じになる）ことで選択しているということをわかりやすくしました。
決めかねていたアイコンか写真かの問題は、結局両方やってみて、写真だと文字が見えづらくなってしまい、また写真もこれといったイメージに合うものが全てのジャンルで見つからなかったので（カルチャーとビジネスが意外にもかっちりくるものが見つからず…）アイコンにしてみたところこれがしっくりハマったのでこちらをとりました。
まとめ
カテゴリ選択画面というのはニュースアプリに限らず、いろいろな場面で遭遇するものだと思います。実際、今回制作するにあたりカテゴリ画面のデザイン構成ではその時たまたま入れていたAbemaTVのカテゴリ選択画面（最初にジャンルを選ぶ画面）がだいぶ参考になりました。
また掲載するボタンの内容（どのジャンルを割り振るか）に関しては、「どうやってグループわけしていくか」「どれを選んでどれを切り捨てるか」ということが楽しいけれど難しかったです。
今回はだいぶ日が空いてしまいましたが、できればこういうまとめも定期的にもっとたくさん作成していければなと感じました。（散々身に染みているのですが、こういう「自分の作ったものを自分の言葉でアウトプットする」という行為も大事だと思っている！ので！
この記事が気に入ったらサポートをしてみませんか？