24新卒デザイナーが入社3ヶ月で経験した「はじめてのWebサイト改修」
こんにちは。RAKSULデザイナーの武田萌花です。
4月1日に入社してから、あっという間に3ヶ月が過ぎました👀!!
さて、今回は私がRAKSULに入社して最初に担当したプロジェクトでの学びを振り返りたいと思います✍️
プロジェクトの概要
入社してすぐ、RAKSULの従業員名簿を閲覧したり、業務に関わる社内申請や承認を行うことができる社内ツールのデザイン改修プロジェクトにアサインされました👩🔧✨
機能が増えるにつれてユーザー・管理者共に使いにくい部分が出てきたためデザインで解決しよう！というプロジェクトです。プロセスを順にお話すると少し長くなってしまうため、先に今回どのようなデザイン改修を行ったのかお話したいと思います。
改修コンセプト：メンバーの相互理解を深め、偶発的な出会いを促進する。
アサイン時、事前に開発チームから下記の課題を共有されていました📩
TOPページで対応すべきチケットがあることを認知させたい。
メニューが増えてきて現在の上部メニューのスペースに限界がきているので拡張性を持たせたい。
チケット種別が多くなったので、起票をしやすくしたい。
上記の課題を解決する＋α ユーザーにとってより良い体験をつくるデザインを提案するため、UXリサーチ〜UIデザインまで一通りのプロセスを経験しました。ワイヤーフレーム作成〜デザイン納品まで複数のデザインパターンを検討していく中で数々の失敗と気づきを繰り返して、納品まで辿り着きました。まずは失敗談とその学びをいくつか紹介します🔥
失敗談01：「色に頼らない。色を扱う時は慎重に。」
デザイナーとしての経験が浅いため、ワイヤーフレームの段階から現行デザインカラーに引っ張られてしまい、表面的に取り入れてしまっていました。しかし本来、情報設計をする上でカラーなどの表象的なあしらいは必要ありません。
そのためのワイヤーフレームなのであり、情報設計についてすり合わせをし決めていかなければ、そもそもデザインに進めないのです。
また、色を使う時はその色が持つ意味について考えなければならない、ということも今回身を持って痛感した学びでした。例えば、私は当初から無意識的に現行のサイトにある色でデザインをしていました。
ボタンやヘッダーの背景色など、そのまま活用しているような感覚でいたのです。しかし現行のデザインの中には同じ緑色でも「押せるボタン」「押せないボタン」が混在しており、情報設計としてきちんと考え直すのならば、色の条件を統一してユーザーにとって混乱を招かない状態を作ることが重要だったのです。
恥ずかしながら私は、デザインレビューで「この色の意味は？」と聞かれるまで色が1つの情報であるということを自覚できていませんでした😨
次にプロダクトのデザインをする時は、情報設計のフェーズでは設計やUXライティングの検討に徹底する姿勢を忘れずに(自戒)
失敗談02：「常にユーザー目線を忘れない。」
デザインを納品した後、開発チームと意見交換をしたり、「実装できる/できない」という実現性についてすり合わせを重ねて最終的に実装を進めていきます。そこでのコミュニケーションにおいて、開発にかかる工数やロジックへの理解が浅いことから、要望・意見に対してデザイナーとしてどう答えるべきか、判断が難しい場面がありました。
例えば…
「開発チームからはAという意見が出ている」
「しかし自分はBが良いと思っている」という状況があるとします。
Aの意見も一理あると思う一方で、自分はまだ新人だしBを推し進める判断がまだ難しいな…という思考に陥り、つい受け身で検討を進めてしまいそうになっていました。
しかし最も重要なのは
「デザイナーとして常にユーザー目線を忘れない」ことです。
Aという意見が出ていたとしても、Bがユーザーの課題を解決できるのであればその根拠を提示しBを提案するべきなのです。
もちろん開発工数などの関係で、今回Bが実現できないという状況もあるでしょう。そういう場合でもまずはデザイナーとして、そのサービスの「あるべき姿」をデザインで示し、ユーザーの目線で伝えていくことが大切です🌱
デザイナーとしての目線、を自覚できた後から開発チームとのMTGにおいても自分で判断をしていけるようになりました。
失敗談03：「デザイナーはメインケースを重要視するべきである。」
これは失敗談02とも重なる部分があるのですが、デザインの納品後〜修正のタイミングと同時期に受講していた新卒デザイナー向け「UI基礎研修」での学びです。
開発の事情やサービスへの理解が深まるほど、デザインにおいても色々な可能性が見えてきてしまいます。すると開発者目線に寄りすぎてしまい、サービスの導線やデザインを複雑に考えてしまうことも。
開発チームからの意見はマイナーなユーザーを想定されている場合もあり、そういう目線があったか！と気づきが多い一方で、どこフォーカスを合わせ修正をするべきなのか迷走しそうになっているところ、「UI基礎研修」でドンピシャな事例が紹介されたのです👀！
可能性と確率を区別する
滅多にない事を考慮しすぎて通常の利用を面倒にしてはいけない。プログラマーはエッジケースを重視するがデザイナーはメインケースを重視すべき。メインケース用の機能とエッジケース用の機能を並列に扱うと、インターフェースは複雑になり、普通の使い方が阻害されてしまう。
エンジニアはあらゆる可能性やユーザーの行動を予想してサービスを構築していく必要があるため、エッジケースも重要視するのだと思います。しかしデザイナーは基本的に一般的なユーザー体験を快適にする且つ、オプションとしてエッジケースにも対応できるデザインを目指すというスタンスで良いのだと、この研修が背中を押してくれるようでした。
もちろんこれはサービスの内容やターゲットによって異なるため、その時々で可能性と確率を分析し、方針を考えていく必要があります🔍
※ソシオメディア社による「UI基礎講座」での学びについては、今後別の記事で公開予定です！お楽しみに📕
このように数々の失敗と学びを経験した「はじめてのWebサイト改修」
次の章ではそのプロセスを1つずつ振り返っていきます。
デザインプロセスを振り返る
Webサイトの改修は初挑戦！右も左もわからない状態からリードデザイナーと一緒に、デザイン納品までのプロセスを検討しました。
改修するサイトの現状を知る (2days)
サイトマップの作成
ヒューリスティック評価
調査：ユーザーインタビュー・アンケート (1week)
調査設計
アンケートの作成と公開
ユーザーインタビューのリクルーティング
ユーザーインタビューの実施
調査結果の分析 (1week)
分析ワークショップ
プロブレムマッピング
ペルソナ作成
カスタマージャニーマップ
アンケート回答分析・レポート化
issueリストの作成
改修コンセプトの検討・ワイヤーフレーム作成 (2week)
調査結果から改修要件を定義をする
改修コンセプトを複数パターン検討
2に沿ったワイヤーフレームの作成とチームへの提案、合意形成
デザイン作成〜納品(1week)
デザインの作成＋レビューを複数回設定
使用するカラーや機能の再定義
検索などのロジック検討、言語化
プロトタイプの作成
開発側へのリクエストを整理
このようにリストアップすると、短期間でUI/UXデザインにおける重要なプロセスを一通り実践していたことがわかります。実際はかなり駆け足で進めていたので、各項目ごとに改めて要点を振り返っていきます♻️
Step1 改修するサイトの現状を知る
例えば、あなたの家をリフォームすることになったとします🏠🔨
漠然と「もっと住みやすい家にしたい」と思っているだけでは先に進みません。まずは現在の家にどんな不満(課題)があるのか、ということからリストアップするのではないでしょうか？自分の家、というと構造や使い方が生活を通して理解できているため、課題は見つけやすいと思います。
Webサイトの改修も同じでユーザーの課題を解決するために、サイトの構造や現状の困りごとに対する理解が重要です。
そのため、最初にサイトマップを作成しました🗺️
担当した社内ツールでは特に「チケット起票」という機能に対する情報が膨大で複雑だったので、各機能にどれだけの要素が割り振られているのか理解することができました。
併せてヒューリスティック評価も行い、サイトの現状を把握しました。
Step2 調査：ユーザーインタビュー・アンケート
今回社内ツールの改修ということもあり、ユーザーインタビュー・アンケート2つの方法でユーザーの課題を調査することにしました。
ちなみに、ここでのユーザーインタビューは6月12日のデザナレ展でRAKSULが公開した「ユーザーインタビューの型」に基づいて行われました🎉✨
#デザナレ展 『分からないを解消するUXリサーチ実践入門』をテーマに、@satomium1 さん登壇中です!🎤#今日のRAKSUL pic.twitter.com/NMk2yC5WH4
— RAKSUL DESIGN (@DesigningRAKSUL) June 12, 2024
Step2-1 インタビューのリクルーティング
この社内ツールでは主に「申請する人」「承認する人」2パターンのユーザーが存在するため、開発チームから利用率を集計したデータをいただき、それぞれの立場で利用率の高いユーザーを5名ずつピックアップしました。
社内インタビューということで、依頼者の都合の良い日程をGoogleカレンダーで仮押さえし、下記のような依頼文を送りました📩
Step2-2 ユーザーインタビューの実施
インタビューは1人30分で設定しましたが、実際には20分程度でスムーズに行うことができました。インタビューは下記のように設計しました☟
インタビュー概要の説明(1min)
事前インタビュー(3min)
インタビュー対象者の役割や、現在の利用状況についてヒアリング
ユーザーテスト(5min)
インタビュー対象者が使用しているPC環境で、実際に操作していただく。申請者であればチケットを1枚申請、承認者であればチケットを1枚承認するフローを観察＋画面収録。
この時普段操作している時に感じること、例えば「ここ使いにくいんだよな〜」というように独り言のように口に出して伝えていただきました🗣️
事後インタビュー(15min) 下記4項目についてインタビュー
入社して1-2週間での連続したユーザーインタビューは最初とても緊張したのですが、実際にインタビューで他部署の方と話す機会が出来たことで顔と名前が一致するスピードが圧倒的に早かったと思います👀
あたたかくインタビューを受けてくださった皆様に感謝です。
Step2-3 ユーザーアンケートの作成と配布
社内とはいえ全てのユーザーの声を直接聞くことは難しいため、Googleアンケートの配布も並行して行いました。
アンケートでは、ツールの総合的な満足度に加えて「組織表」や「チケット起票」など各機能の満足度を4段階で答えていただき、2以下の方に任意で理由を答えていただく形式にしました。
回答者に多くの負荷をかけず、効果的に意見を回収するための質問や順番の検討は、リードデザイナーのレビューを受けながら丁寧に行いました🧐
回答期限1週間で、計81件の回答をいただき課題発見に十分な意見を集めることができました📮
Step3 調査結果の分析
インタビューやアンケートよりも更に重要なプロセスが、調査結果の分析です。インタビューやアンケートから発見された課題やユーザーのリアルな声を整理・優先順位付けし、最終的にはissueリスト化しステークホルダーが確認できる状態を目指します。
Step3-1 分析ワークショップ
今回「ユーザーインタビューの型」を作成してくれた先輩デザイナーさんが分析ワークショップを実施してくれました。ワークショップでは複数のプロセスで調査結果を分析し、課題を言語化するところまで体系的に行いました🔍ワークショップで実践内容は下記の4点です。
プロブレムマッピング
ペルソナの作成
カスタマージャーニーマップ
上記3点を踏まえた改修コンセプトの言語化
特にプロブレムマッピングでは、インタビューの画面収録を見ながら改めて振り返りまとめることで、ユーザーの課題を自分ごととして捉え直すことができました。画面の遷移に併せてコメントを残し可視化することで、課題がどのフェーズで発生するのか＝どこを改修したら効果的なのか、焦点を絞りやすくなったと思います👀
Step3-2 アンケートの分析
アンケートの回答を咀嚼するため、且つチームにわかりやすく共有するために結果を分析しレポート化。
回答はスプレッドシートで一覧表示できますが、そのままでは情報を整理しにくいため課題別に色でグルーピングし、特に参考になる意見をサマリ化することで、誰が見てもアンケート結果の概要がわかる状態を目指しました。
Step3-3 issueリストの作成
分析ワークショップ、アンケートの結果分析から発見された課題をissueリスト化していきます。issueリストとして残すことで、今回解決が難しい場合でも長期的に改善策を検討していくことができます。RAKSULでは提供している様々なサービスにおいて、デザイナーがissueリストを作成し日々プロダクトの課題解決に取り組んでいます💪
issueリスト＝課題管理表のこと。
課題ごとにリスト化しチームで共有し、開発工数などをすり合わせしたり、優先順位づけすることでプロジェクトの課題を明確にします。
Step4 改修コンセプトの検討・ワイヤーフレーム作成
さて！いよいよデザインを作り始めるところまで来ました！🙌
実はこの結果分析〜ワイヤーフレーム作成の間に別の案件を担当していた為当時はあまり感じなかったのですが、デザインにたどり着くまでが長い！
本プロジェクトを担当するにあたって読んだ本、『Webサイト・リニューアル 「見た目だけ変えた」にしない成功の手引き』書いてある通り、入念な課題分析がないと「改修しなければ良かった」状態になりかねないのです。
成功のカギは「準備8割」「実施2割」
Step4-1 改修コンセプトの検討
デザイン改修にあたり、事前に開発側から優先施策資料という解決したい課題や改修のイメージを共有していただいていました。ただ、今回丁寧にユーザーリサーチを行ったため、優先順位資料＋αの提案をすることがデザイナーとしてやるべきことでした。
優先施策資料に記載されていた改修点は下記3点です。
TOPページで対応すべきチケットがあることを認知させたい。
メニューが増えてきて現在の上部メニューのスペースに限界がきているので拡張性を持たせたい。
チケット種別が多くなったので、起票をしやすくしたい。
1と3のチケット機能に関しては多くのユーザーからの意見が挙がっていた点であり、自分も新入社員としてつまずくポイントだった為、今回特に解決したい課題として考えていました。
そのため、チケット機能にフォーカスしたデザイン含めてワイヤーフレームは初稿で4案検討しました。
※イメージは冒頭のカラフルなワイヤーフレーム参照
Plan1:サイドメニューの内容ををチケット機能に特化させる
Plan2:サイドメニューに現在ヘッダーにあるメイン項目を入れる
Plan3:「人を探す機能(従業員一覧・組織表)」をヘッダーに集約する
Plan4:ツール本来のアイデンティティである「人を探す機能」へのフォーカスを一定残すデザイン
そしてこの内容を踏まえて開発チームと改修方針のすり合わせMTGを行いました。初回のアサイン後MTGから1ヶ月以上期間が空いてしまっていたためここではデザインの提案だけでなく、開発チームの持つ課題感をヒアリングしたり、今後長期的な開発も踏まえた改修ポイントについて(やる/やらない)のすり合わせを行いました。
Step4-2 改修コンセプトの検討からPRDヘ
より情報設計を明確するため、翌週のデザイン提案に向けてPRDを作成しました。入社してすぐBiz新卒と一緒にPdM研修でPRDについて学んだため、ここぞとばかりに活用してみました🗒️
PRD＝プロダクト要求仕様書のこと。
プロジェクトにおいてステークホルダーとの共通認識を持つための資料。
結果、PRDに落とし込むことでデザイン提案時に情報ブレなく伝えることができたと思います。
Step4-3 ワイヤーフレームの作成
4案のワイヤーフレームを提案してすり合わせを行った1週間後、さらに
ブラッシュアップし3案に統合しました。
Plan1:サイドメニューの内容ををチケット機能に特化させる＋現行のカラーを残しつつ洗練された印象に
Plan2:従業員検索バーをタブ切り替え＋現行のカラーを活かしつつニュートラルに寄せたデザイン
Plan3:「人を探す機能」にフォーカスしたヘッダー＋ツール上での出会いを促進するデザイン
Step5 デザイン作成〜納品
チームにデザインを提案して合意形成が取れたワイヤーフレーム[Plan3]をブラッシュアップしていきます。
ここで難しかったポイントは主に2点ありました。
・新しく追加する機能のロジックを検討する
例えば今回、もともと機能としてあった「スキル・興味タグ」をTOPページやプロフィールに表示されることで従業員同士の相互理解を深め、偶発的な出会いを生むというコンセプトのもと改修を行ったため、新たにどういう条件でタグを表示させるのか定義する必要がありました。
人気のあるタグから表示させるのか、新着順で表示させるのかによってユーザーの体験は大きく変わってきます。
またタグは自由生成できるため、最大文字で表示された時でも崩れない表示数も並行して検討し、開発チームに伝わるように言語化✍️
特に検索結果の下に表示するサジェスト部分の設定は、少し思い切って「唯一無二のスキル・興味」と定義し登録者の少ない希少なタグにフォーカスするというコンセプトを立てました。
この追加機能やコンセプトがどのように作用するのか、今から楽しみでありヒヤヒヤもしています🥶
・1pxの違和感に気が付くこと
RAKSULでは基本的にFigmaを使ってデザインワークを行います。
美しいWebデザインはオートレイアウトにより作られている気がする、という根拠のあまりない仮説のもと、自分も積極的にオートレイアウト機能を使っていたのですが、レビュー時に「これ1pxくらいずれてない？」とフィードバックいただくことが何度かありました。
確かに自分でも少し違和感を感じつつ、オートレイアウトだからズレているわけなかろう、と疑っていなかったのです😨
このような微細なズレを確認してみて、いくつか原因のパターンがあるとわかりました。
デザインデータが正しくない場合
テキストボックスのサイズがFitしていないなど
日本語/英語など文字の種類によって同じフォントサイズでも見え方が異なる
違うサイズのフォントやデザインが混在する場合の位置揃え
テキストの実寸に合わせて中央揃えする、下部揃えにするなど適切に判断する。
1についてはデザイン作成時に適切なデータで作っていくことで一定解決されますが、2と3はデザイナーとして1pxの差に気が付く眼を持っていないとなかなか気づくことがない上、手動で調整していくことが必要です。
今回の経験を踏まえて、次回からはツールを過信しすぎず自分で1pxの違和感に気がつけるデザイン制作を心がけたいです👁️✨
こうした数々のプロセスやレビューを経て、納品まで無事に作り切ることができました🎉
終わりに
常に仮説を立てて考えること、デザインで課題を解決するプロセスの複雑性、難しさ。そして1pxの差を見抜く審美眼。デザイナーとしての基礎がこのプロジェクトを通して身につけられたと思います。
デザインを作って終わり！ではなく、リリースされた後のフィードバックも適切に効果測定をして、より良い体験を創っていけるデザイナーになれるようこれからも邁進していきます📈
新卒デザイナーの方や、新生活を迎えられた方、
怒涛の3ヶ月間お互いお疲れ様でした！
それでは、また👋
RAKSUL DESIGNについて
✔︎ RAKSUL DESIGN MAGAZINE（note）
✔︎ X (Twitter)
✔︎ RAKSUL DESIGNの紹介
