Share
Embed

Slide 1

Slide 1 text

LP案件を回すための デザインガイドライン 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN企画開発部 企画フロントエンド1ブロック 片岡 優斗 Copyright © ZOZO, Inc. 1

Slide 2

Slide 2 text

© ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発本部 ZOZOTOWN企画開発部 企画フロントエン ド1ブロック 片岡 優斗(ゆうとぴ) ● 企画LPの実装、運用を担当 ● KARTE、AEM、Figmaもよく触ってます 服、釣り、総合格闘技、野球が好きです 2

Slide 3

Slide 3 text

© ZOZO, Inc. https://zozo.jp/ 3 ● ファッションEC ● 1,700以上のショップ、11,000以上のブランドの取り扱い ● 常時107万点以上の商品アイテム数と毎日平均2,700点以上の新 着商品を掲載（2025年12月末時点） ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、シューズ専門ゾーン 「ZOZOSHOES」、ラグジュアリー＆デザイナーズゾーン 「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など

Slide 4

Slide 4 text

© ZOZO, Inc. 4 ZOZOTOWNではセールや新作アイテム、著名人コ ラボなどの企画イベントを毎日打ち出しています。 企画の集客、回遊の起点となるランディングページを 企画LPと呼んでいます。 企画LPとは？

Slide 5

Slide 5 text

© ZOZO, Inc. 5 ● ZOZOTOWNには企画LPの専任デザイナー・エンジニアチームとLP専用の開発環境が あります。 ● これから話す「デザインガイドライン」は企画LPに限定したスコープでの取り組みです。 前提

Slide 6

Slide 6 text

© ZOZO, Inc. 6 1. デザインガイドライン作成の背景 2. デザインガイドライン作成までの課題 3. デザインガイドラインの構成 4. 成果と今後展望 概要

Slide 7

Slide 7 text

© ZOZO, Inc. 7 企画LPデザインガイドライン作成の背景

Slide 8

Slide 8 text

© ZOZO, Inc. 8 ● 月10〜20本の高頻度でリリース ● 施策毎にトーン / 世界観 が大きく変わる 企画LPはスピード・品質・世界観の作り込みが必要 企画LPデザインガイドライン作成の背景

Slide 9

Slide 9 text

© ZOZO, Inc. 9 ● LP開発組織が拡大する中でナレッジ共有が追いつかず運用が属人化 ● 実装側のコンポーネントと各デザイナーのUI部品で差分が発生 世界観の作り込みに時間が割けなくなってきた 企画LPデザインガイドライン作成の背景 → 差分の調整・修正対応が増えてLP制作コストが膨らむようになった

Slide 10

Slide 10 text

© ZOZO, Inc. 10 ● 当初はデザインルール作成のみが目標 ● リモート勤務で職種間コミュニケーションが減り課題共有が難しい状況 ○ 週1の定例MTG（現在は隔週） ○ 専用Slack チャンネル ○ 各デザイナーチームから担当者を1人選出 企画LPデザインガイドライン作成の背景 デザインガイドラインPJの発足

Slide 11

Slide 11 text

© ZOZO, Inc. 11 企画LPデザインガイドライン作成時の課題

Slide 12

Slide 12 text

© ZOZO, Inc. 12 ● エンジニア ○ LPでよく利用しているコンポーネントをリスト化して共有 ● デザイナー ○ リストを元にガイドラインを作成 企画LPデザインガイドライン作成時の課題 当初はデザイナーがガイドラインを作成

Slide 13

Slide 13 text

© ZOZO, Inc. 13 ● LP制作と並行しての作業になり優先度が上がりにくい ● ガイドラインを０から作成する作業は負荷が高い ● 特定デザイナーへの負荷の偏り 進行の停滞 企画LPデザインガイドライン作成時の課題

Slide 14

Slide 14 text

© ZOZO, Inc. 14 ● エンジニア：ガイドラインの叩き台作成 ○ 仕様・ユースケースはコードベースで確認できる ● デザイナー：叩き台レビュー・調整 ○ 叩き台があることで検討範囲が絞れる =>各々の役割を見直すことでPJがうまく進むようになった 進行方法の改善 企画LPデザインガイドライン作成時の課題

Slide 15

Slide 15 text

© ZOZO, Inc. 15 ● エンジニアの方が概念を理解しやすいFigma機能の活用も進んだ ○ コンポーネント ○ バリアブル ○ アノテーション ○ Ready for dev ○ Code Connect デザインシステムへ近い形に変化 企画LPデザインガイドライン作成時の課題

Slide 16

Slide 16 text

© ZOZO, Inc. 16 ZOZOTOWN企画LPデザインガイドラインの構成

Slide 17

Slide 17 text

© ZOZO, Inc. 17 ● コンポーネント単位でページ作成 ● ページ名：「デザイン名 / 実装名」 ファイル構成 ZOZOTOWN企画LPデザインガイドラインの構成

Slide 18

Slide 18 text

© ZOZO, Inc. 18 ● コンポーネント名 ● 基本構造 ● デザイン変更可能な要素 ● スタイル ● デザインパターン ガイドライン構成 ZOZOTOWN企画LPデザインガイドラインの構成

Slide 19

Slide 19 text

© ZOZO, Inc. 19 ● 企画LPは施策毎にトーン / 世界観 が大きく変わるため「変えて良い範 囲」の明確化が必要 ● コンポーネントの各要素と変更可能 な要素を明記 変更可能な要素 ZOZOTOWN企画LPデザインガイドラインの構成

Slide 20

Slide 20 text

© ZOZO, Inc. 20 呼び出し側でも変更可能な箇所を確認できるようにプラグインを作成 ZOZOTOWN企画LPデザインガイドラインの構成

Slide 21

Slide 21 text

© ZOZO, Inc. 21 コンポーネント ZOZO企画LPデザインガイドラインの構成 ● Component Propertiesはコード側の propsと一致する形で作成 ● PC/SPなどのレイアウト差分もバリエーショ ンとして管理

Slide 22

Slide 22 text

© ZOZO, Inc. 22 コンポーネント利用数は右肩上がりで推移 ZOZO企画LPデザインガイドラインの構成

Slide 23

Slide 23 text

© ZOZO, Inc. 23 成果と今後の課題

Slide 24

Slide 24 text

© ZOZO, Inc. 24 成果と今後の課題 企画LP実装の効率化 ● 実装とデザインの差分がなくなり出戻りが少なくなった ● 各施策でFigma機能の活用が進んだ ○ Ready for Dev ○ アノテーション ○ ブランチ ● Code Connect連携によりAI実装の精度が向上

Slide 25

Slide 25 text

© ZOZO, Inc. 25 成果と今後の課題 デザインルールを整えることで協業整備にも繋がった ● 進行が停滞したときは、設計ではなく役割を見直すことが突破口になる場合 もある ● ガイドライン整備はルール決めではなく、暗黙知を言語化し組織で活用でき る知識に変える作業でもあった

Slide 26

Slide 26 text

© ZOZO, Inc. 26 今後の課題 ● デザインガイドライン、Figma機能活用の浸透 ● 継続的な「デザインガイドライン」改善の仕組み作り ● Figma AIなどへの活用拡張 成果と今後の課題

Slide 27

Slide 27 text

No content