グルージェントフローの付箋機能がリリースされました！
- グルージェントフロー
こんにちは！ たきたてはなびです！
先日グルージェントフローの付箋機能がリリースされました！
紙の申請書を出すときや差し戻す時に「よろしくお願いします！」「ここをみてください」など次の担当者さんにコメントを付けたいときに付箋を貼ったりすることがありますよね。そんなコメントを残せる付箋機能がグルージェントフローにも実装されました！
私はそのUIまわりの開発をお手伝いさせていただいたので今回はUIを中心に付箋機能について紹介したいと思います！
付箋機能について
申請フォームの項目だけでは伝えにくい補足情報や、特に強調したいポイント、感謝の言葉などを、まるで紙の付箋のように画面に書き込めます。 この機能を使えば、微妙なニュアンスや記録に残すほどではないが知ってほしい情報の伝達が可能になり、承認者のより正確でスムーズな判断を助け、業務をより円滑に進められます。
付箋機能は、ボタン1つでどんな場所にでも付箋のようなテキストボックスを貼り付けることができ、移動や大きさの変更なども自由自在となっています。 そして申請時だけでなく、承認や決裁、確認時など全てのタイミングで貼ることができます。
付箋機能の詳細や活用例については こちらのページ をご覧ください。
付箋機能のUI作成
付箋機能のUI作成は私ともう1人の2人で携わりました。
まずは、ざっくりとしたイメージを作成します。デザインをフラットに評価するために2人でそれぞれ１案ずつ作成してどちらのどういうところがよいか悪いか、という話などをしつつ進めていきました。
最初に作成した2案はこちらになります。
そして、ドラッグのしやすさやコントラストなどの観点から右の案を中心に進めることになりました。
メニューのデザイン
次に付箋の作成や表示非表示の切り替えをするメニューや、付箋に対して色を変更したり文字サイズを変更したりするメニューのデザインをしました。
こういったツールの並び順って結構性格が出てて難しいイメージがあります…。
そして、特に議論したのが表示非表示のボタンでした。現在の「状態」をアイコンにするか、「機能（表示される・非表示になる）」をアイコンにするか、というのでものすごく悩みましたが他のボタンと統一するということで機能をアイコンにすることになりました。
実際に開発後の修正点や調整
その後は、開発の方に実装を進めていただき、できあがったものを見ながらレビューをしたり追加したい機能を検討したりしました。
以下のような点を修正したりしてよりよいUIにアップデートしています。
- ヘッダーの高さや余白を調整
- ×のアイコンをより押しやすいように大きく変更
- フォントサイズの変更のUIを検討(大きくするボタンと小さくするボタンを設置、テキストボックスで直接入力、プルダウンで選択など様々な案が出ました)
- 付箋サイズの拡大縮小のアイコンを検討、設置
- アイコンだけでは機能がわからない可能性があるため、ツールチップで意味を補完
- etc...
今後反映されるかもしれない機能についても議論したので、今後の展望も楽しみにしていてください！
終わりに
付箋機能は今後もさらなるアップデートを予定しています！
また、その際には実際に利用者様の声がとっても参考になりますので、ぜひお気軽に使用したご感想などお聞かせください！
とっても便利な機能なのでぜひたくさんご活用いただけましたら幸いです！
たきたてはなび
付箋機能の詳細は こちらのページ をご覧ください。
