【リクナビNEXT】ユーザーの心を掴むUXデザイン戦略とは？「デザイン編」

ユーザーインターフェース（UI）は、ユーザーがデジタル製品や技術と対話するための接点です。UIデザインは、視覚的な要素とユーザビリティの原則を駆使して、製品の全体的な見た目や操作感を向上させ、ユーザーと製品の間に感情的なつながりを築くことを目指します。

UIデザイナーは、ボタンやアイコン、メニュー、ナビゲーションといったインタラクティブな要素を用いて、ユーザーとシステムが効率的にコミュニケーションできるようにデザインします。

UIデザインには、主に以下のような3つのタイプがあります。

• グラフィカルユーザーインターフェース（GUI）：画像やアイコンを基にしたシステムで、ユーザーが視覚的に操作するもの。デスクトップやスマートフォンの画面が典型的な例。
• 音声制御インターフェース（VUI）：ユーザーの声を使って操作するシステムで、SiriやAlexaなどが代表例。
• ジェスチャーベースのインターフェース：ARやVRの空間でユーザーの動きをコマンドに変換するシステム。

UIデザインは、ユーザーが直感的に操作できるようにするだけでなく、楽しくストレスのない体験を提供することも重要です。

ユーザーのニーズを予測し、パーソナライズされた体験を提供することで、ユーザーの満足度を高めることができます。また、UIはブランドの価値を伝え、ユーザーの信頼を強化する役割も担っています。

デザインガイドラインとは、デザイン作業における指針を示したもので、ユーザーのニーズを満たし優れたユーザー体験を提供するための設計原則や推奨事項のまとめたものを指します。

デザインガイドラインは、直感的で学習しやすく、効率的で一貫性のあるデザインを実現するために使用されます。

具体的な構成要素には、以下の5つが挙げられます。

• スタイルとレイアウト：カラー、フォント、スペースの使い方など、視覚的な一貫性を保つためのルール。
• UIコンポーネント：ボタン、アイコン、メニューなどのインターフェース要素の設計に関するガイドライン。
• テキストとタイポグラフィ：読みやすく理解しやすい文章を書くためのルール。
• アクセシビリティ：あらゆる状況で誰もが利用できるデザインを確保するための基準。
• デザインパターン：ユーザーの課題を誰でも再利用できるように一般化（パターン化）したもの。

デザインガイドラインは、デザインの一貫性を確保し、保守運用を充実させるだけでなく、ユーザー体験を向上させるための重要なツールです。これにより、デザイナーは一貫したデザインを提供し、ユーザーに最良の体験を提供することが可能になります。

デザインガイドラインを適用することで、全てのユーザーに対して使いやすく、魅力的なデザインを提供することができ、ブランドの信頼性とユーザー満足度を高めることができます。

以下は国内外の代表的なデザインシステムの例です。これらは外部へも公開されており、参考にできるでしょう。

UIデザインの作成

では今回の【かってにUXデザイン改善】リクナビNEXTのUX改善の過程ではどのようなUI設計が行われているのでしょうか？

UIを作成する際は、以下の手順で行います。

• コンセプトの決定
• スタイルガイド・コンポーネントの作成
• デザインの作成
• デザインガイドラインの作成

今回は「ワイヤーフレーム編」までで検討したコンセプトをもとにスタイルガイドの作成から順を追って確認していきましょう。

スタイルガイド

既存ブランドカラーを維持し、書体、テイスト、レイアウト、アクセシビリティ、など一貫性があるように設計します。

リクナビNEXTのブランドカラーである赤を基準に、白やグレーをベースに統一感を演出しました。

また、ターゲット層である若手の転職検討層が冷静かつポジティブな気持ちを醸成できる世界観を目指し、色数は抑えめに設定しつつ、転職活動に対する期待感を高められるようなスタイルを考えました。

コンポーネント

コンポーネントとは、WebサイトやアプリケーションのUIを構成するボタン、フォーム、リスト、ダイアログなどの要素を組み合わせて使用するシステムの構成要素です。これらの設計には、Atomic Designという方法論が役立ちます。

Atomic Designは、以下の5つの階層に分けて要素を設計します。

• 原子（Atom）： 基本的なデザイン要素（例：ボタン、アイコン）
• 分子（Molecule）： 原子を組み合わせたもの（例：フォームグループ）
• 有機体（Organism）： 原子と分子で構成される複雑なUIパターン（例：ナビゲーションバー）
• テンプレート（Templates）： 完全なレイアウトやワイヤーフレーム
• ページ（Pages）： 上記の項目を1つの画面にまとめたもの

特に、Atomはコンポーネントデザインに、MoleculeとOrganismはパターンデザインに分類されます。

これにより、デザインと開発の一貫性と効率性が向上します。Atomic Designの適用により、UIの構築とメンテナンスが体系的かつ効率的になります。

原子（Atom）の構造を基にコンポーネントを作成し、それぞれの状態（Enable、Hover、Disable）を統一して定義することで、ユーザーインターフェースの一貫性と使いやすさを向上させます。

先に作成したスタイルガイドやコンポーネントを基にデザインを作成します。

レイアウト

ユーザー目線のデザインを心がけ、ユーザーが求める情報や機能を簡単に見つけられるように、全体を通してカード式に表現に統一しました。

ダッシュボード内は、ユーザーの転職活動における進捗状況がすぐに得られるように、配置やデザインの強弱を心がけています。

ナビゲーション

ナビゲーションメニューは視覚的にわかりやすくし、多くのユーザーが簡単に見つけて使えるように配慮しています。

一貫したデザインスタイルやカラーパレット、アイコンイメージの統一を意識することにより、ユーザーがサービス内で迷うことなく目的の情報を取得することができます。

UIデザインの作成が完了したら、最後にデザインガイドラインを作成します。

一般的にはブランドアイデンティティなどのデザイン原則も含みますが、今回はトップページの改善ですので、デザインスタイル、アイコン、コンポーネントをまとめたものを作成します。

今回はリクナビNEXTのUX改善プロセスを、分析からデザインまでの各段階でユーザーの視点を重視しながら紹介してきました。UI/UXが改善されることで、ユーザーはより肯定的な体験を得ることができます。

その結果、ユーザーは満足感や信頼感を感じ、サービスに対する関心が高まります。Webサイトやアプリケーションの制作は、単に機能を提供するだけでなく、ユーザーの満足度と関心を高めるためのプロセスであり、ユーザー中心の設計が極めて重要です。

今回のUI/UX改善では、リクナビNEXTにおける転職活動の進捗確認やスケジュール管理の重要性を考慮し、進捗状況を確認できるダッシュボードの新設や、検索バーの改善、AIを活用したキャリアシート自動作成ツールの導入などの具体的な改善策を取り入れました。

これにより、ユーザーが必要な情報や機能に迅速にアクセスでき、より効率的でストレスの少ない転職活動が可能となります。

UXの改善は単なる機能の改善、デザインはUI改善にとどまらず、ユーザーの感情やニーズに応えることで、サービスの本質的な利点やメリットを最大限に引き出すことができます。

皆さんのプロジェクトやサービスにおいても、ユーザー中心の設計に注力し、より良い結果を生み出すための一歩を踏み出していただければ幸いです。