広告プラットフォーム Bizpa(ビズパ)正規版リリース
Bizpa(ビズパ)は全国の新聞・雑誌・看板・サイネージ・ウェブなどのオフライン広告情報をまとめた広告メディアの検索サービスです。社内で1人目のデザイナーとして入社し2020年8月に正規版のリリースに向け、UXリサーチ、プロトタイプの制作、画面のUIデザイン、コーディングを行いました。
プロダクトオーナー:
株式会社ビズパ
制作期間:
2020.02 - 2020.08
担当領域:
UI/UXデザイン
URL:
https://bizpa.net/

TASK

従来のオフライン広告媒体は、それぞれの発注に関する情報が散在していたり、価格相場が可視化されず適正価格が不明瞭なものが多く存在していました。このため、企業の経営者やプロモーション担当者は、自ら自社に適した広告媒体を見つけることは非常に困難でした。

この課題を解決するために、あらゆるオフライン広告の媒体の比較・検討から、見積もり・注文・掲載までをワンストップで管理できるサービス「Bizpa(ビズパ)」をリリースし、多くの広告主に本サービスを登録・利用してもらうことが私達のゴールでした。

STORY

UXリサーチ

はじめに、Bizpaのサービスを利用してもらうにあたりBizpa以外にも以外にも同じようなサービスは存在するかどうかの競合分析、ベータ版のアクセス解析を行い具体的なターゲットを設定し、UI・UXの観点からサービス全体の方向性を探りました。

カラーパターンの定義、要件定義

競合分析を踏まえ、Bizpaに持たせたいイメージや取り入れたい機能を整備し、サービスサイトの要件定義とカラーパターンの選定を行いました。社内エンジニアが作成した要件定義のもと、私はデザイン面での役割や機能を明確に定義しました。

カラーパターン提案資料
要件定義提案資料

プロトタイプの作成

また、画面の根幹であるホーム画面・検索画面・管理画面等の部分に関してはシステムが複雑なため、XDでプロトタイプを制作して社内でユーザーテストを行い、「実際に機能が使いやすいか」「広告主が迷わず操作できるか」等の検証を行いました。

プロトタイプ

ワイヤーフレームの作成

要件定義書とユーザーテストの検証結果をもとにサイトマップ・ワイヤーフレームを作成しました。

ワイヤーフレームに関してはシステム部分も考慮して作成する必要があったため、社内エンジニアが作成したものをもとに、社内の営業・経営部と議論を重ねて改良をしていきました。

ワイヤーフレーム提案資料

デザインカンプの作成

8月にリリースさせることが最優先だったため、より迅速かつ効率的に開発していくために、コンポーネントの流用が多い検索画面や管理画面を先行して作成していきました。

コーディング

画面のフロント部分は全面的に私が担当し、サーバーサイドに関わる部分は社内のエンジニアが行いました。

DESIGN

最終的に完成したデザインをご紹介します。

「広告業界が盛り上がっていく」という思いを込めて、全体的に暖色を使用してエネルギッシュで明るい印象にしました。

文字色やフッター等の一部にネイビーを入れ、洗練されたデザインに仕上げています。
ヘッダーやカード型UIにはトレンドの拡散型シャドウを入れ、奥行きを表現しました。

bizpa画面UI
bizpa画面UI
bizpa画面UI
bizpa画面UI
bizpa画面UI
bizpa画面UI
bizpa画面UI