アウトプット

インハウスのデザイナーとして約1年間、本サービスの開発を担当しました。

担当箇所

• ・UI/UXデザイン、コーディング
• ・ブラウザ対応（IE / Internet Explore等）
• ・モバイル対応
• ・ローンチ後の機能改善
• ・スタイルガイドの作成
• ・新サービスリリース準備

TOP（企業情報一覧）

DETAIL（企業情報詳細）

MOBILE

ケーススタディー

以下３点をケーススタディーとして紹介します。

• 1. 検索条件の保存機能追加
• 2. 都道府県選択のUX改善
• 3. モバイル対応

1. 検索条件の保存機能追加

ユーザーのヒアリングより、「検索条件の保存機能」の要望が多かったため、新規機能の追加に伴い、一部デザインを変更しました。

Before

元々は、左のサイドバーから検索条件を指定すると、ヘッダー下の領域に「該当者数」が瞬時に反映される仕様です（画像左：Before）。

After

新規機能の「保存した検索条件の選択 / 編集」はヘッダー下に配置し、「該当社数」はもう一つ下の階層に下げました（画像右：After）。

結果的に、第1階層では「条件の指定」、その下の第2階層では、「検索結果の表示」機能に分け、階層に意味を持たせたデザインにできました。

（階層に意味を持たせたデザイン）

2. 都道府県選択のUX改善

企業情報を探す際の検索軸の一つ、「都道府県選択」のUX改善を行いました。

Before

本サービスでは、直感的な操作性を重視し、画面遷移が少ない仕様になっています。検索条件の指定はサイドバーで全て完結し、条件を指定すると検索結果がリロードなく瞬時に反映されます。しかし、このサイドバーにおいては、2点の課題がありました。

課題

• 1. サイドバーが長くなりすぎて、どんな検索項目があるか一目でわかりづらい
• 2. サイドバーはPC画面の高さに依存し、47都道府県の地域指定は画面に全て収まらないため探しづらい

（Before:サイドバーから地域を絞り込む仕様）

After

「都道府県選択のしづらさ」はユーザーからも改善要望が多かったため、モーダル表示させることで改善にアプローチしました。都道府県の地図を表示し、選択した都道府県の地域をさらに絞っていく仕様です。

（改善後の「都道府県選択」操作画面）

デザインプロセス

このUIの実現プロセスとして、ワイヤーの段階では２案を提示しました。

• 案1：入力フォームのように、都道府県選択を行ってから、次に特定の地域を選択するように段階的に表示する
• 案2：都道府県選択と、特定の地域選択を横並びにする

案1のUIでは、表示領域が広いため一覧性においては優れています。しかし、都道府県を複数選択した場合、選択した分だけ縦にスクロールしなくてはいけないため、直感的な操作性を損なうと判断し、案2を採用しました。

（項目数が多くなり、直感的な操作性を損なうと判断されNG）

アウトプットデザイン

採用された案2は一覧性に欠けるのがデメリットですが、デバイス画面幅にレスポンシブに対応させ、表示領域を広くしました。

（レスポンシブデザインに対応させ、一覧性を欠かないように）

3. モバイル対応

Baseconnect LISTは当初PC環境のみの提供でした。アプリ化の案も出ていましたが、デザイナーが対応できる範囲でモバイル対応を行いました。 ワイヤーからデザイン、コーディングまで1人で対応し、最終段階ではエンジニアと共働して開発を行いました。

ワイヤーフレーム

デザイン

アウトプット

PC版のデザインは、モバイルの表示を踏まえていなかったものの、1画面 / 1機能に絞り、モバイルの表示に対応できました。