AIを活用した効率良いサービスサイト改修。 コミュニケーションデザイナーやまきのインタビュー
こんにちは。カラーミーショップデザイナーのやまきです。今回は私が普段関わっているサービスサイト改修の業務についてお話しします。
自己紹介
ECサイト構築サービス「カラーミーショップ byGMOペパボ」デザイナーのやまきと申します。UXエンジニアリングと情報設計を専門とし、現在はコミュニケーションデザイン領域でマークアップを担当しています。
これまでのキャリアでは一貫して自社サービスに関わる業務を担当してきました。前職ではイベント企画やディレクションなど、デザイン以外の幅広い業務にも携わっていました。
サービスサイト改修のきっかけ
カラーミーショップのサービスサイトは、長年開発を重ねたことによりサイトの構造が複雑化しユーザーに適切な情報を伝えづらい状況にあっていました。そのため、データ構造の見直しを実施しし、開発効率の向上や更新スピードの改善を実現しました。
私は主にプロジェクト全体の進行管理と情報設計の構築、サービスサイト改修に必要なUI componentの作成とサイトのコーディングを担当しました。
まず、複雑化したサービスサイトをマーケティングファネルに基づいて、サイト構造を再設計しました。図解することによって訪問者に対するコミュニケーションの全体像を可視化することができました。
図解するにあたり、事前にワークショップを開催し、カラーミーショップのコンテンツ戦略(※)を定義することで目的が明瞭になりました。
（※）コンテンツ戦略とは
私たちが目指すコミュニケーションゴールへ顧客を導くための戦略です。
サービスサイトはサービスの顔であり、カラーミーショップがターゲットとする顧客にサービスの価値を届けることが役割です。
サービスサイトはコミュニケーションにおけるタッチポイントの1つです。私たちが届けたメッセージが顧客に認知されることで、顧客の意識や行動変化（申し込み）を起こすことが出来ます。そのため、私たちは状況に合わせたコミュニケーションゴールを設定し、戦略を立てています。
AIを活用した短期間での効率的な開発
今回のサービスサイト改修では、とにかく少ないリソースで成果を最大化する必要がありました。そこで、AIツールを積極的に活用しました。私が使ったのは、AIコーディングエディタの「Cursor」と、Vercelが提供するUI生成ツール「V0」です。それぞれに得意分野があり、それをうまく使い分けることで効率化を図りました。
V0の活用：気軽に動くUIを試作
V0は、自然言語のプロンプトからReactコンポーネントを自動生成するツールです。開発環境を用意しなくても、ブラウザ上で生成結果をすぐに確認できるのが大きな特徴です。
例えば、動きのあるUIやアニメーションを試したいときに、V0を使っていくつかの試作品を生成しました。その中からプロジェクトに合いそうなものを選び、さらに手を加えてブラッシュアップしていくという流れで活用しました。こうすることで、試行錯誤の時間を短縮しつつ、より良いアウトプットを目指すことができました。
Cursorの活用：汎用的なUIとプロジェクト固有のルールを考慮したUIを試作
一方で、Cursorは自然言語のプロンプトを使ってコードを生成するAIコーディングエディタです。特に、汎用的なUIコンポーネントや、既存のコードベースを考慮して書いてもらいたいときに役立ちました。
Cursorの便利なところは、チャット機能で外部のドキュメントを参照してもらえることです。新しいライブラリを導入するときには、調べる手間が大幅に省けました。プロジェクトのコードベースに合った提案をしてくれるので、全体の統一感も保ちやすかったです。
手数を増やして効率化を最大化
私が特に意識したのは、「手数（行動量）」を増やすことです。それぞれのツールをバックグラウンドで複数立ち上げて、AIにコードやUIを作ってもらっている間に、私はその出力結果を確認し、使えるものを判断。そして、必要に応じて調整を加えていく。このサイクルをひたすら繰り返しました。
ツールが得意とする部分をフル活用しながら、自分の手を動かす時間も最大限に活用することで、短期間でも効率的に作業を進めることができました。
今回の成果
こうした取り組みのおかげで、当初2ヶ月と見積もられていた改修作業を、約1ヶ月で完了することができました。V0での迅速なプロトタイプ作成や、Cursorによる汎用的なコード生成のおかげで、アウトプットの量と質の両方を高められたと思います。
もちろん、AIには限界もあります。特にアクセシビリティや最新のルールへの対応では、どうしても人間の目が必要になる部分がありました。でも、AIを「作業のパートナー」として活用することで、自分一人では到底できなかった量の作業をこなせたのは大きな成果だと感じています。
学びと刺激に満ち、成長できる環境
ペパボで働く魅力は、何といっても「いるだけで成長できる環境」です。Slackでのコミュニケーションや、DesignMTGと呼ばれる社内イベントを通じて、多くの刺激を受けています。
ペパボの環境「いるだけで成長できる環境」について興味のある方はこちらの記事も是非ご覧ください。
特に、新しい技術に興味を持つ仲間が多いので、日々の会話や共有がすごく勉強になります。AIや最新のツールを積極的に試している人が多くて、私自身もその姿に影響を受けながら、新しい知識やスキルを積極的に取り入れることができています。
実際、今回のサービスサイト改修で使ったAIツールも、仲間との会話や共有がきっかけで取り入れたものです。こうした「新しいことに挑戦してみよう」という空気があるのは、ペパボの魅力だと思っています。
これからもAIを活用しながら、より効率的でクリエイティブなサービスづくりを目指していきたいです。そして、同じように新しい技術を試しながら一緒に成長していける仲間と働ける日を楽しみにしています！
カラーミーショップでは一緒にデザインシステムやプロダクトデザインを推進していくパートナーを募集しています!
これからもカラーミーショップのデザインにご期待ください！