DAIFUKUは2022年8月1日にSUMUMAへと生まれ変わりました。
2019年1月にこんな記事を投稿しました。
https://qiita.com/uichi/items/5473e22a5faee86fd5e5
家計簿アプリのDAIFUKUを開発してリリースしたときに投稿した記事です。リリースから2年半以上経ち、登録者はちまちまと増えているもののアクティブユーザーは私ぐらいです。家計簿をつける人が少ないので、長く使ってもらうハードルが高いのは承知ですが、使ってみると意外と良かったという感想をもらいます。
UIの改善やもっと色んな人に使ってもらいたいということもあり、2年半越しに画面を刷新してみました。DAIFUKUが掲げるストレスフリーを第一前提に、ボタンのスタイルや全体的なレイアウトを一新しています。もともとSementi UIというCSSフレームワークを使用していたのですが、最近流行りのTailwind CSSを導入しました。機能面は以前と同じままです。
Semantic UI
https://semantic-ui.com/
Tailwind CSS
https://tailwindcss.com/
本記事ではDAIFUKUの以前のUI/UXの分析と変更後の改善を説明し、Sementi UIとTailwind CSSについてメリット・デメリットなど交え紹介します。
今回のDAIFUKUの変更
まずは操作性、見やすさを考えUIを変更しました。ボタンや文字の大きさ、収支のグラフ、スマホで見た時のUI/UXなど課題のあった部分を中心に改善しています。
以前のデザインは余白がところどころにあり、まとまりに欠けるほか、フラットなデザインで強弱がありませんでした。トップ画面を見てみると、スッキリとしているものの、収支追加のボタンもボタンっぽくないデザインとなっているのが分かります。
トップ画面
また、メニューの収支管理にカーソルを合わせるとさらにメニューが下に開くUIになっていたのですが、リンクが隠れているため使い慣れていないと目的の場所に到達しにくい導線になっていました。また、カーソルを合わせるだけでいいのか、もしくはクリックしないといけないのかが分からないため、人によってはストレスのあるUIになっていました。
変更後は収支ボタンを横いっぱいに広げることでボタンにカーソルを合わせやすくし、ボタンということが分かりやすいスタイルにしています。
余白は空けすぎないようにし、まとまりのあるUIになっています。グラフの縦サイズも工夫しており、パソコンサイズでは縦が広くなりすぎないように、スマホサイズでは縦が短くなりすぎないように調整しました。
メニューの収支管理ホバー時に出てくる導線は、ホバーするまで隠れていることがユーザーの行動を妨げることにもなるので、画面下に表示させるようにしました。これにより、ワンアクション減らして履歴の画面に遷移することができます。
変更後
モバイル版
テーブルは以前のUIだとテキストが長い場合に改行され、全体のバランスが悪くなることがあったのですが、スクロール式にすることでテキストが長くなっても改行されないようにしました。
カテゴリー追加をトップから削除したのですが、カテゴリーページで追加できるようにしました。カテゴリーは一度追加すると、ほとんど使わないと考えトップから外しました。そのためトップには必要最低限のものだけ表示させています。
Semantic UIとTailwind CSSの違い
Semantic UIもTailwind CSSも似たようなフレームワークです。違う点はデザイン調整の柔軟性や、用意されているコンポーネントの種類、ReactやVueとの親和性などがあります。
Tailwind CSSは最近話題のCSSフレームワークでもあり、QiitaやZennでもよく目にします。Semantic UIは個人的には期待をしていたのですが、あまりメジャーにはなりませんでした。一応、ドキュメントは一部日本語対応されているほか、サードパーティの開発もさかんに行われているので十分に使用できます。実際にNetflixやAmazonでも使われているようで、日本の企業でも使われているのをたまに見かけます。
デザインの柔軟性
Semantic UIのSemanticは意味の、語義の、意味論の、などの意味を持っています。Semantic UIはそれぞれのクラス名が人間にわかりやすい意味を持っており、直感的にスタイルを付けていくことができます。
例えば、プライマリーボタンを実装する場合このような実装になります。
<button class="ui primary button">
Button
</button>
これだけで、プライマリーボタンの実装ができ、ボタンをホバーした時のエフェクトまで表現してくれます。
では、Tailwind CSSではどうなるかというとこのようになります。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
Semantic UIと違って背景色やテキストの色指定、パディングの指定をしなければならず、実装が長くなっていることが分かります。
ただし、細かく指定しているということは細かくスタイルを調整することができるということになります。実際にボタンに影を付けたり角の丸みを柔軟に調整することができます。
また、Semantic UIやTailwind CSSはクラス自体にスタイルが定義されているので、BEM記法のように命名を考える必要がありません。スタイルを自分で定義した後に修正を入れると、別の場所でスタイルがずれてしまったという経験があると思います。Semantic UIやTailwind CSSはCSSがグローバルに定義されているため、他の場所への影響を考慮する必要が少なくなります。
用意されているコンポーネント
Tailwind CSSでは、基本的にボタンやテーブルなどをコンポーネント単位で提供していません。提供されているものは色やサイズ、フレックスボックスなどのもっと小さな単位でCSSが定義され提供されています。そのため、CSSでなくクラス名でスタイルを実装していくようなイメージになります。
一方Semantic UIは、ボタンやテーブルなどの単位でスタイルが定義されています。コンポーネントの数は豊富で足りないものはほとんどありません。アニメーションを付けることもできるので、動きのあるUIを作りたい時にも都合の良いフレームワークです。
JSフームワークとの親和性
Semantic UIもTailwind CSSもReactやVueに組み込んで実装することができますが、Tailwind CSSは公式でGatsbyやLaravel、Nuxtへの組み込みをサポートしているので安定性や自由度でいうとSemantic UIよりも優っている印象です。
Tailwind CSSインストールガイド
https://tailwindcss.com/docs/installation
デメリット
Semantic UIのデメリットは、Tailwind CSSにも共通しているのですがクラスを探す手間がかかることです。とくにTailwind CSSは小さな単位でスタイルが定義されているので余計に探す手間や覚える手間がかかってしまいます。
Semantic UIはTailwind CSSほど小さい単位で定義されていないのですが、ある程度完成されたスタイルがクラス指定で提供されるため細かな調整がしにくいなという印象です。こうなると、どうしてもSemantic UIっぽいUIになるので、想定するデザインに合わせて選定しなければなりません。
#最後に
まだまだUIで改善したい部分や追加したい機能があるので、継続的に開発を続けていこうと考えています。
うまくユーザーも集まれば、スマホアプリ化もできたらなと思っています。
最高の家計簿UIも温めているので、お楽しみにお待ちください！
厚かましいですが、よろしければDAIFUKU成長のため応援いただけると助かります！
DAIFUKUを成長させる