Blog

最新情報をブログでお楽しみください

TOP BLOG

UI/UXデザインにチャレンジしてみた

2025.02.12

UI/UXデザインにチャレンジしてみた

AdobeStock_995120942

こんにちは、えとーです

今回は昨年から「UI/UXデザイン」にチャレンジしているので

取り掛かる前に意識してやったことを書こうと思います🌿

よかったらお付き合いください


「UI/UXデザイン」とは?

UI(ユーザーインターフェース)
サービスやプロダクトとユーザーの接点を表す言葉

UX(ユーザーエクスペリエンス)
製品やシステム、サービスなどの利用を通じてユーザーが得る体験を表す言葉


きっかけは 「 初めての人でも操作できるUIか見てほしい 」


AdobeStock_548296794

今年の4月から、SaaS開発の新規事業プロジェクトに、CS(カスタマーサポート)領域の担当としてジョインしました。

そのため、最初の2~3ヶ月くらいは社内の業務フローを整えたり、色々なツールのサービス資料を参考にサービス資料のベースを作ったりしてました🖊️

資料作成が落ち着いてきた時に、プロジェクトリーダーの松嶋さんから「 初めての人でも操作できるUIか見てほしい 」と言われました。


でもこの一言から「WEBデザイナー」に転身したような気がします(笑)



最初のつまづきポイント

AdobeStock_546332960

前職でワイヤーフレームを引いたり、デバック的なことをしたことはあったのですが、

デザインは初めてなので、とにかく何から取り組めばいいのか悩みました😔


性格的に「とりあえず作ってみる!!」というのもできないし、

とりあえず作っても自分で「違う」ってなりそうだなーと思い

取り組み方を決めてから行動しようと決めてスタートしました🚩



実際に取り組んだこと

( 1 )コンセプト・ペルソナ(ターゲット層)の確認

AdobeStock_548296710

今までツール開発に関わったことがなかったので松嶋さんにかなり細かく質問しました💬

  • なぜこのツールを作っているのか
  • 何のためのツールなのか
  • 何ができるツールなのか
  • 誰に使ってもらいたいツールなのか etc

明確化のための質問ってやつですね!



( 2 )ペルソナ(ターゲット層)の理解

AdobeStock_546333382
  • ターゲットは普段どういうツールを使うことが多いか
  • そういうツールはどんなUI/UXになっているか
  • ターゲットが好む色やデザインって何だろう? etc


社内ヒアリングしたり、自分が使っている各種ツールのUIを見比べて

視覚的に見やすいデザインや共通点を探したりしました🔍️


調べるの好きな人は無限にできちゃうのでご注意を🐤

私はこの時間が一番好きかもしれません



( 3 )ツールの各画面で起こしたいことの理解

AdobeStock_548296620
  • 初回ログイン時に何をしてほしいか
  • 何を入力して、どういう操作をしてほしいか
  • この結果を出すためにどういう情報が必要なのか etc

画面デザインをより良いものにするために

  • この機能はこの画面に集約しても問題ないのか
  • 逆にこの機能は別画面に移動した方が分かりやすいのではないか
  • そもそもこの画面にこの仕様を実装するための要素は足りているのか
  • 機能仕様を変えることでどのくらい開発の工数が発生するのか etc

プロジェクトメンバーとたくさん議論しました🔥


正直この部分の理解や議論に一番時間を費やしたと思います⌛️

でも見やすいだけのUIでは意味がないのでとても大事な時間でした!


( 4 )改修イメージを考案

AdobeStock_548296519

実際に考えたイメージ案をペルソナ(ターゲット層)に近いメンバーに意見もらったり、

  • こういうデザインにしたいけどこの仕様はできますか?
  • ここはUX視点で譲れないから実現できる方法ないですか? etc

開発側の意見も聞きつつ、わがままを言いながら(笑)

実現可能なUI/UXに近づけていきました🌿



開発中のため、考案したデザインちょっとだけご紹介


といった感じで取り組みました!


今も松嶋さん花野さんが考えた機能を説明していただいた後、

大田さんと2人であーだこーだ言いながらUI調整を行ってますので

感想・フィードバック・不具合報告などぜひご協力をお願いします🌿

SHARE

More Contents