カルテットコミュニケーションズ開発部に所属しているWebデザイナーの粟屋です。プロフェッショナルなベテランエンジニア集団であるカルテット開発部にジョインしてから早くも1年以上経ちました。
当記事では、私がWebデザイナーとしてどんな役割を担っていて、これから何に力を入れていきたいと考えているのか、仕事紹介を兼ねつつご紹介します。
そもそもLisketとは？
弊社の主要事業はリスティング広告運用代行業です。この業界では、広告運用やお客様への報告といった日々の業務の中で膨大な単純作業があります。それを圧倒的に削減し、より多くの時間を知的生産活動に割くべく、自社で「Lisket」を開発し活用しています。
それにより、弊社の広告取扱高は例年大きく伸びつつ、残業のほとんどない働きやすい環境も実現しています。
Lisketは、様々な機能(ツール)の集合体です。
中でも強みは、Google広告・Yahoo!広告といった様々な広告媒体のAPIから、実際の広告配信成果や予算消化状況を取得し活用する機能です。取得したデータを案件ごとにまとめて１画面でチェックしたり、Excelレポートとして自動で書き出したり、さらにはお客様へメール送信し直接ご確認いただくこともできます。
広告媒体のAPIは種類が膨大で仕様変更も激しく、さらに一部のAPIは正規の広告代理店しかアクセスできないなど、かなりチャレンジングな領域です。そこへ真正面から立ち向かい、チーム一丸となって、運用者にとって本当に価値のあるツールを日々追求しています。
デザイナーとしての仕事と役割
このように、Lisketは正しく活用すれば大幅な業務効率化が図れるツールであり、実際多くのお客様にもご活用いただいています。
しかしながら、初めて利用される社外のお客様に自力でご活用いただくには少々ハードルがあり、特にUIに多くの改善余地がある状態です。
- 機能によって操作感にばらつきがある
- 初見ではわかりにくい操作手順やUIパーツがある
- カスタマーサポートの助けを借りずに適切に設定完了するのが難しいツールがある
こうした課題への解決案を提示し、チームの同意を得ながら実装を進めるのが主な仕事です。
また、開発をより円滑に進める役割も担っています。
私(初のデザイナー)が入社する前までは、コンサル部要望を開発部でまず実装し、使ってもらってフィードバックを得てまた直す…という開発フローでした。それを、まずデザイナーが迅速にプロトタイプをつくり、それをベースにコンサル部・開発部一緒に正しいあり方を議論し、認識を揃えてから実装に移る…というフローへの転換も図ってきました。
さてここからは、実際に行った業務例をいくつか簡単に紹介します。
Lisketのわかりにくい文言やレイアウトを改善
一般的にわかりにくい・使いにくいと思われる箇所、かつ実装も容易なUIを中心に改善してきました。細部の調整がほとんどでしたが、次の２ツールに関しては全体のUIを刷新しています。
※改善の意図やプロセスは今回省略します。また、改善前のキャプチャ画像を用意できなかったので、改善後の画面だけ掲載しています。
手動レポート作成ツール。
Googleアナリティクスレポート作成ツールと、そのランディングページ。
LisketのUIガイドライン策定の検討
Bootstrapの採用により、見た目はある程度の統一感が保たれています。
しかしながら、文言やボタンの位置といった細かいUIルールにバラツキがあり、「混乱する」「使いにくい」といったフィードバックもありました。それを解消するために、UIガイドラインの策定と導入を試みていた時期があります。
そこで、esaにまとめたり、自前でnpm scriptsを活用した静的サイトリポジトリを用意したりといろいろ試していました。Storybookの活用なども検討しましたが内部的な事情で進んでおらず、まだまだ試行錯誤中です。
Lisket ランディングページなど関連サイトのリニューアル
ランディングページや、サポートサイトの一部ページのデザイン/コーディングも担当しました。詳しくはこちらの記事にまとめています。
Adobe XDを活用して自社開発サービスのLPをスピーディにリニューアルした | QUARTETCOM TECH BLOG
社内業務や制作業務の補助
自社の採用活動や、他部署のクライアント案件で必要となるバナーやサイト制作を任されることもあります。
自社用バナーの一例。
制作系の業務は、弊社では基本的に外部パートナー様にご協力をお願いしています。しかしどうしても急ぎで成果物が必要な状況のとき、稀に、社内（私）で迅速に対応して提出・納品することがあります。
本来の業務ではないのですが、そこで活躍した結果、開発部外のメンバーにもデザイナーとしての存在を認めていただく絶好の機会となり、Lisketに関する相談や提案のしやすい信頼関係の一助ともなっています。
感じた課題と目指していること
この１年を通じて、表層的なUIの改修だけでは本当の「使いやすさ」を実現できないことを痛感してきました。
まず、提案のために欠かせない知識があります。リスティング広告運用の全般知識、開発に必要な最低限の知識、そしてLisket独自の概念です。これらに乏しい状態でUIを考え提案しても、運用者にとって実際には使いづらいものだったり、実装が困難で実現しなかったりすることが往々にありました。
時間がかかりましたが、コンサル部や開発部のみなさんの協力もいただきながら、そうした知識がようやく身についてきた段階です。
Lisketは、今まで「社外ユーザーにもカルテット流の広告運用で業務の効率化をしてもらおう！」というニュアンスが強く、自社の運用者にとって便利なものを追求してきました。しかし社外ユーザーは目的も知識量も運用規模も異なっていて、そうした前提のズレがUIの問題点として表面化してきた側面があると考えています。
そこで、進行中の新しい構想や機能開発などでは、まず最初にターゲットの定義から考え決めるよう開発フローの転換にも取り組んでいます。
そうした活動の中心となりながら、より踏み込んだUIやUX改善の提案を続け、Lisketを社外のユーザーにとっても本当に価値のあるツールにすることがデザイナーとしてのミッションです。
こんな方を募集中です！
デザイナーが私一人しかいないこともあり、ある程度デザイン・コーディングスキルを既にお持ちの方しか受け入れられません…。
いちデザイナーのエゴではなく、実際に使う運用者にとって本当に良いものをつくる。そのための方法を模索し、チームに提案し、一緒に実践していけるようなデザイナーを求めています。
開発部内においては、git/GitHub、Slack、esaと言ったツールを使いながらエンジニアと密にコミュニケーションし、どんな機能・画面を実装していくのかリードして決めていくポジションとなります。
また、今はフロントエンドエンジニアだけど、その知識・技術を活かしながらデザイナーとしてサービス価値の最大化に取り組みたい！活躍したい！…という方にも絶好の環境かもしれません。
自社サービス開発のデザインに携わりたい、かつサイト制作もできちゃう、みたいな方も大変心強いです。
弊社では、Slackにゲストアカウントでご参加いただき、直接開発部メンバーに質問できる場を設けています。応募で迷われている方がいらっしゃれば、ぜひこちらからご相談ください！
👉 Slackゲスト招待の申し込みはこちら