こんにちは、カルテット開発部のデザイナーの鈴木です。
弊社デザイナーは以前紹介のあった通りさまざまな改善を日々行っています
弊社で開発してる「Lisket」は2021年2月に大型リニューアルをして約１年間、細かな改善を重ねてきました。
メールアドレスだけで14日間誰でも無料で利用できるのですが、そもそも広告運用者向けのツールなので運用しているWEB広告がなければ実際触って使ってみるということができません。
そこで今回は、「Lisket」というプロダクトを紹介しながらデザインについて触れていきたいと思います！
- Lisket（リスケット）/ リスティング広告のレポート自動作成とリアルタイム予算管理が月額１万円から！ - https://lisket.jp/
そもそもLisketって？
以前紹介した通り・・・と言いたいところですが、実はLisketはリニューアルの際にペルソナもコンセプトも全てが大きく変わりました。
以前はWEB広告運用者向けの道具箱のような雑多なプロダクトだったのですが、今はより簡潔で広告運用の初心者でふわ〜〜〜っとした理解がなくとも仕事で簡単に使っていただけるプロダクトになりました。
大きく分けて機能は２つです
- WEB広告の配信実績を自動でExcel形式のレポートにするツール
- 広告の配信状況を確認したり1日あたりの細かい予算をまとめて計算してくれるツール
Google広告やYahoo!広告、SNS広告など複数の媒体で広告を配信していると、各サービスにログインするだけで膨大な時間を消費してしまいますよね。それをまとめて管理して解決するのがLisketというわけです。
広告の運用実績をExcel形式のレポートにする
WEB広告にはブログの途中とかに挟まりがちなアレ、Googleなどで検索すると上の方に表示されるアレに始まりTwitterのタイムラインの途中に挟み込まれるアレやYouTubeで見たい動画の前に流れてくるアレ、Instagramのストーリー眺めてると出てくるアレなど本当にいろいろな種類があります。
広告運用担当者はそれぞれ配信している広告ごとに実績などをまとめて会社や取引先に報告する必要があったりするのですが、種類が増えれば増えるほどまとめるコストが肥大化していきます。
Lisketではそういった広告運用の担当者のためにGoogleやYahoo!やSNSなどから自動でデータを呼び出して、レポートとしてExcel形式で書き出すことができます。
ここの画面で作りたいレポートに表示する内容を色々設定します。また直近で生成したレポートはここからダウンロードもできます。
作成したレポートの一覧です。最近、直近の生成日時が「2000/01/31 00:00:00」という表示から「1日前」という相対的な表示に変更しました。
レポートとして書き出したい広告の種類や項目を設定を作成すれば「レポート生成」ボタンを押すだけでLisketが各広告媒体に配信データを取りにいってレポートにまとめます。
これがLisketの主力機能となっており、出力されるレポートにサービスのロゴが入いるといった制約がないなど色々推しポイントはあるのですが、今回はデザイナーの仕事紹介も含まれているのでレポート設定画面の改善例としてビフォーの画面をお見せします。
Figmaにかろうじて残っていたデータです
見てわかる通り要素が横並びになっていてノートPCのユーザーはかなり見辛いレイアウトになっていました。更にこれに加えて開閉式のグローバルメニューが左側にあり、とにかく小さいディスプレイで仕事をしている人には向いていませんでした。
もはや全てが変わったと言っても過言ではありませんが、レポートの設定を管理＆生成するページというページ内のコンセプトを絞って表示する内容を精査しました。
重要度の低い機能は追加した右のメニューボタンに格納して画面幅の狭いノートPCなどでも必要な情報が見切れないように調整しました。
以前は最新のレポートをダウンロードするボタンにプライマリーカラーを適用していました。
「生成」→「ダウンロード」という動作がスムーズにできるのであればダウンロードボタンを目立たせる必要があったのですが、生成する時間に10分以上かかってしまったり、自動生成機能で生成ボタンを押さずともレポートを定期的に書き出すことができることからページごとに役割をはっきりと分けることにしました。
出来上がったレポートは「レポート一覧」ページでまとめて確認、この「レポート設定」ページでは「レポート生成」が重要な動作となるため生成ボタンにプライマリーカラーを適用しました。
結果として画面を初めて見たユーザーが何をするページかわかりやすくなったかと思います！
ずいぶん手を加えましたが、検索や一括操作のUIがまだわかりにくいのでもっと直感的に操作できるようにしたいと思っています。
広告の予算の消化状況を管理する
広告運用者の苦悩の根幹にあるのは全く異なるWEBサービスの広告をそれぞれ管理するところにあることは既にわかっていただけたと思います。
Lisketの予算管理機能では、連携した広告の配信状況を確認することができる機能です。
１画面でGoogle広告やYahoo!広告、SNS広告などもあわせて確認することができるので、わざわざ別サービスにログインして一つずつ確認する手間を省きます。
予算管理のトップページでは登録中の全ての配信状況を確認することができ、詳細画面ではコンバージョンや1日単位での予算の消費状況を細かく確認できます。
偽りの配信状況の詳細画面です
例えば１ヶ月でGoogle広告で20万円分広告配信して消化したい！と思った時に20日経った時点で16万円消化していたら残り10日は1日あたり何円分配信すればいい感じに着地できるのか、というのをパッと計算してくれます。
１つだけなら簡単に計算できますが、それを配信している広告全部・・・となると大変ですよね。
なのでその辺りをざっくり管理することが目的です。
実は一年前のリニューアル当初はこの詳細画面だけでした。
現在は上層に一覧画面があるのですが、制作することが決まった時とりあえず見たい項目が出てればOKがスタートでした。
項目を書き出して、なんとか見やすくしようと例にも漏れず迷走している様子です
弊社の広告運用者から表示したい内容をヒアリングしてページのコンセプトを精査し、パッと見ただけでわかるというところをポイントにビジュアライズしました。
「予算をどれだけ使っているか？」というのをより直感的に理解できるようにプログレスバーを採用しました。迷走しすぎて（Googleアナリティクスのダッシュボード画面みたいにしてみるか・・）と考えたりもしましたが思いとどまれてよかったです。
以前は広告運用に関してかなり詳しい人でないとわかりづらい画面でしたがより大味で広告運用している人向けの画面も作ることで結果的によりペルソナにあった内容になったと思います。
偽りの広告配信状況です
とはいえ予算管理機能はレポート生成機能と比べまだ使ったことがないユーザーもたくさんいます。
必要のないユーザーに対してアプローチする気はありませんが、本当に必要としているユーザーには届くようにデザイナーとして色々考えていきたいと思っています。
リニューアルから１年経って
Lisketはリニューアル１年経った今もモリモリUIの改善を行っています。
広告運用という専門性の高い内容をサードパーティのWebアプリケーションに落とし込むのは非常に難しいです。
リニューアルによって色んなことが見直され、良いものづくりができる土台ができた今だからこそ、Lisketに新しい価値を生み出すことができると思っています。
Lisketは少人数で開発しているためガッツリ新しいことをするにはまだまだ人が足りていません・・！一緒に広告運用者の未来について考えてくれる仲間をいつでも募集しています！
📣一緒にLisketを最強に使いやすくする仲間を探しています
今回はLisketというサービスについて書きましたが、まだまだ紹介できていないサービスがたくさんあります！
少しでも興味を持っていただいた方がいればslackでカジュアルに話せる場を設けているので採用サイトや開発部のTwitterのDMでもお気軽にご連絡ください！