Background / 背景・課題

チームの規模が大きく多職種が関わる中で、デザインのコンセプトや方針の認識がメンバー間で揃っておらず、施策ごとに表現のばらつきが生じていました。

また、バナーなどのクリエイティブ制作においては判断が経験や感覚に依存しやすく、検証や改善のプロセスが仕組みとして整っていない状況でした。

さらに、他部署からの依頼内容にもばらつきがあり、要件整理に時間がかかることや認識のズレによる手戻りが発生していました。

Approach / 方針

施策単位で最適化するのではなく、接点ごとの役割に応じて表現を調整しながら、ブランドとしての印象が崩れないよう設計することを軸に進めました。

また、商品の平均価格帯や利用ユーザー層を踏まえたECサイト全体の方向性をベースに、LPやバナーなど各接点の役割に合わせて表現の強さを調整しながら展開していきました。

あわせて、施策ごとの検証や制作を行いやすい状態を整え、継続的に改善へつなげられるようにしています。

ECサイトの基盤となるデザイン（※他デザイナーによる制作）

Solution / 取り組み

デザインと運用の基盤整備

複数の施策や関係者が関わる中で、デザインのばらつきや進行上の認識ズレが発生していたため、デザインと運用の両面から基盤の整備を行いました。

・デザインシステムの再構築

ボタンや余白などのUIパーツを整理し、ページが増えてもトーンが崩れない構造を設計。Atomic Designの考え方を取り入れ、複数の施策に横断して適用できる形にしました。また、命名規則や仕様をエンジニアとすり合わせ、意図したデザインが再現される状態を整えました。

・依頼フォーマットの設計

他部署からの依頼内容にばらつきがあり、要件整理に時間がかかる状況に対し、目的や必要情報を整理した依頼フォーマットを設計し、認識を揃えた状態で進行できるようにしました。

・ABテストの仕組み化

バナー制作の判断が属人的になっていた状況に対し、ABテストの設計・検証フォーマットを整備。目的・検証軸・結果の記録方法を整理し、チーム内で再現可能な形にしました。

施策への展開

バナーやLP、SNS、LINEなど複数の接点において、それぞれの役割に応じた表現を行いながら、ブランドの印象が崩れないよう設計しました。

UI改善・新機能への適用

配送ステータスページのリニューアルでは、複数店舗からの発送状況を一画面で把握できる構成に整理。アニメーションを用いて、状況確認を単なる情報表示ではなく「届くまでのワクワク感」として体験できるよう設計しました。

また、サブスクリプション機能の導入においては、既存の導線を崩さずスムーズに利用開始できるUIを検討しました。

Outcome / 成果

施策ごとに分断されていた表現や判断基準を整理することで、LP・バナー・UIなど複数の接点においてブランドの一貫性を保ちながら運用できる状態を構築しました。また、ABテストの仕組みを整備したことで、改善の知見が蓄積され、継続的に施策を更新していける基盤をつくることができました。