CSS記述のサポートツール「Workspace」のデザイン（受賞作品）

10/21/2024

このプロダクトの目的

このプロダクトはCSSのコードをGUIで簡単に生成でき、保存、そして共有できるサイトです。特徴としてTailwind CSSのコードも出力でき、より広範なユーザを見込んでいます。機能としては開発途中のため限定的で、シャドー、ウェーブ、グラデーションのみです。今後は継続開発を行い機能の拡充に務める見方もあります。

意識したところ

今回のプロダクトの想定されるペルソナは開発者でしたが、開発を始めたての初心者にも使いやすく煩わしくないようにクリアなデザインになるように努めました。

間違えても大丈夫なUI設計

ユーザーは常に誤った選択と隣合わせで、UIの操作を行っています。そこで、ユーザーが誤った選択を行っても直ちに取り消せるような設計を行いました。具体的には、公開や削除の前にポップアップを設け、一度ユーザーに確認を行いました。また、間違えたボタンを押してしまい、別のページに遷移してしまっても、その先に存在している「戻る」や「キャンセル」のボタンを操作することで直前の操作に復帰できるようにしました。

操作の結果が明確

ユーザーはサービスを利用する際、常にその判断がどういった結果を招くことになるのかを想定しながら選択を行っていかなければなりません。

そうしたユーザーの負担を少しでも減らすために、大事な決定の際に表示されるポップアップの中には、どういった情報が利用されるかが明示されるような設計にしました。

ユーザーのプライバシーは、常に保護されるべきであり、また、ユーザーはどのような情報が利用されるかを知る権利が存在していると考えています。この機能はユーザーに適切に情報提供を行ってもらうためのもので、ユーザーも安心してこのプロダクトを利用できるようになります。

操作の完了がわかる

ユーザーは操作が完了したことを知らされないと何度も同様の操作を行ってしまったり、不快感に苛まれたりすることがあります。こうした不快感を取り除くために、トーストの作成を行いました。

この機能はユーザーに適切に操作の終了を伝えるとともに、プロダクトの世界観やユーザーの作業状況を損ねることはないデザインになるように配慮しました。

今後の展望

今後は、機能の増強が見込まれるため、現在のデザインを継承しつつ豊富なデザインで対応したいと考えています。

関連画像

※これらのデータは開発途中のもののため実際のプロダクトとは異なる場合があります。

関連リンク

• Topa'z (Workspace)
  https://topaz.dev/projects/ac3c682bb55442262681