トップページリニューアルのために見直した4つのこと。

2021年12月22日 10:57

この記事はクラウドワークス Advent Calendar 2021 の22日目の記事です。

こんにちは、クラウドワークスでデザイナーをしているハラです。「クラウドテック」というエージェントマッチングサービスのデザイナーとして関わっています。

11月にクラウドテックのトップページをリニューアルしました。今回はトップページリニューアルのデザインプロセスにおいて、見直した4つのことをご紹介したいと思います。

1. 情報設計の段階でチームメンバーを巻き込む

まず、ユーザーがクラウドワークスに登録するまでの流れをストーリーボードにまとめました。すでにあるペルソナから、その人がどういう心境、状況でサイトに訪れ、登録を行うかを8段階に分けて描きました。

その後、作成したストーリーボードを開発メンバーに共有し、メンバー全員でサービスを考えるワークショップを設けました。
過去にトップページの改修を何度かしてきましたが、チームメンバーのエンジニアたちにはデザインができてから、「こうなったよ」を見せるだけでした。プロダクトメンバーとして、上流の工程から意見を出したりアイディアを出す場が必要だと感じ、ワークショップに参加してもらいました。
ストーリーボードの1コマに対して、チームメンバーにペルソナの気持ちになってもらい、ポジティブな感情とネガティブな感情を付箋で書き出してもらいました。
ネガティブな感情の付箋の中から、ユーザーが抱えている課題をカテゴライズし、どうすればその不安や課題を解消できるのかを考えました。
最終的には出てきたいくつかのソリューションの中から、クラウドテックの強みとも結びつくものをトップページの訴求要素にしました。

2. サイトのコンパクト化

今までトップページとは独立して、サービスの紹介ページ、ご利用ガイドページ、特集ページなど非ログインユーザーが閲覧できるコンテンツが多数ありました。
しかし、サービスが日々変わっていく中で、内容の差し替えが追いつかず差分が生まれていたり、差し替え箇所が多く管理コストもかかっていました。そこで、今回リニューアルするトップページに他ページのコンテンツをすべてまとめ、非ログインページのコンパクト化を行いました。
ページによってはCVにつながっている可能性もあるので、非ログインページをリスト化し、直近半年のオーガニックのセッションとCVを調査しました。検討の結果、ほとんどの非ログインページをクローズし、コンパクト化ができました。

3. カラーコントラスト比の見直し

デザインシステムの再構築を行っており、コンポーネントを全体的に見直していました。デザインシステムについては別の機会に詳しく書きたいと思いますが、大きく見直した点として、カラーパレットをアクセシビリティを考慮して作り直し、カラーコントラスト比が4.5:1以上になるように調整しました。そして、この新しいコンポーネントをトップページに初めて適用することになりました。

しかし、カラーコントラスト比を調整したのはいいですが、これで本当に見えやすいんだろうか？という疑問はありました。そんな時、偶然社内に色弱の方がいることを知りました。その方に相談したら「自分が力になれることは協力したい」と快諾してくれて、話を聞くことができました。
まずカラーコントラスト比を変えたコンポーネントや以前のトップページを見てもらい、見にくいところなどの意見をもらいました。

テキストリンクは「太字になっているだけではわからない」という意見をもらいました。テキストリンク単体には矢印をつけていましたが、文章中のテキストリンクに矢印をつけるのはデザイン的にちょっとおかしい。検討した結果、テキストリンクには一目見てわかるように、下線をつけることにしました。

これは自分の中では結構大きな決断で、なぜならずっと「テキストリンクに下線ついているとデザインが野暮ったくなる」と思っていたからです。今回アクセシビリティを優先することにより、それに合わせた野暮ったくないデザインをすることが自分の役割だと思いました。

また、ボタンはカラーを暗めの色に変更していましたが、それでも14pxのテキストが見にくいことがわかったため、テキストの太さをレギュラーからボールドに変更しました。

4. デザインの表現

クラウドテックのミッションが昨年の9月に策定されてから、トップページのFVのデザイン表現に変化があったことを以前記事にしました。

その後、新しいミッションに沿ったプロダクト方針がチーム内で設定されました。プロダクトがユーザーにどのような態度で接するべきかをまとめたものです。

このプロダクト方針をもとに、3年ほど前に作成したクリエイティブガイドラインを刷新し、よりミッションに沿ったデザインの指針ができました。

この1年間、営業やキャリアサポートなどクラウドテックの中で働く人たちと接点を持ったり、ユーザーインタビューを通してユーザーの話を聞いたりして、クラウドテックの価値を深く考えることができました。

エージェントマッチングサービスであるクラウドテックは「人」が介在し、サービスを運営しています。これはクラウドワークスのようなダイレクトマッチングサービスとの最も大きな違いです。
クラウドテックに登録するフリーランスの方たちは、もちろん仕事を探しにきているのですが、「人との縁」からつながる仕事を求めている側面が見えてきました。人と人のつながり、「人の縁」がこのサービスの価値でもあると考えました。
その価値を最大化するために、プロダクト方針とクリエイティブ方針を設定できたと思います。

そこでトップページのリニューアルにあたり「人の縁」を何かしらデザインで表現したいと思いました。

縁、えん、エン、円…「あ、円形を使ってみよう」

・・・そう、日本人は古来より駄洒落という言葉遊びが大好きなのです。（主語がでかい）

円形にぼかしをかけて、縁(円)が広がるイメージを表現しました。円形は一つでは使わず、2つ以上を重ね、縁が一人ではつながらないように、人のつながりで広がって変化することを表現しました。
この円形はサイトの背景装飾で使い、やわらかで広がりを感じるデザインになりました。