EC site

子供服サイト

■ 担当範囲
・コーディング(HTML・CSS・jQuery)
・WordPress構築(オリジナルテーマ)
・カラーミー取得 / 設定 / 商品登録
・ドメイン取得 / DNS設定(ネームサーバー設定) / 公開対応
■ 概要
ベビーギフトブランド「Lien de famille」の公式ECサイトをリニューアル。
従来は既存のECプラットフォームを利用していたため、デザインの自由度が低く、ブランドの世界観やカラーを十分に表現できていない課題がありました。
本リニューアルでは、ブランドカラーやビジュアルを全面に打ち出したデザインへ刷新し、ブランド認知の向上を図りました。
あわせて、属人化していた商品管理や発注業務を見直し、カート機能・決済・在庫管理・発注までを一元化できるカラーミーショップを導入。
サイト側からスムーズに購入フローへ遷移できる設計とすることで、ユーザー体験を向上させるとともに、運用効率の改善も実現しています。
■ 使用技術
HTML・CSS・jQuery・WordPress・カラーミー
■ 実装内容
・HTML / CSS / jQueryによるコーディング
・レスポンシブ対応(PC / スマートフォン)
・各セクションのレイアウト実装
・アニメーションや視覚効果の実装
・スライダー(Swiper)、アコーディオンパネル実装
・シェアボタン実装(X、LINE、Facebook、リンク)
・初回サイト訪問時のポップアップ画面の実装
・商品情報を掲載するためのカスタム投稿の実装(ACF)
・商品情報の検索欄の実装
・営業カレンダーの実装(XO Event Calender)
・お問合せフォーム(Contact Form 7)

■実装意図
既存サイトではデザインの制約によりブランドの世界観を十分に表現できていなかったため、フロント側は自由度の高い実装とし、ブランドカラーやビジュアルを最大限反映できる構成とした。これにより、ユーザーに対してブランドイメージを直感的に伝えることを目的としている。
また、商品管理や発注業務が属人化していた課題に対し、カラーミーショップを導入し、カート・決済・在庫管理を一元化。フロントサイトとEC機能を分離することで、デザイン性と運用効率の両立を図った。
さらに、ユーザーがストレスなく購入まで遷移できるよう、サイトからカートへの導線を明確に設計し、離脱を防ぐUI/UXを意識して実装している。結果として、ブランド訴求と業務効率化の両面を実現する構成とした。

■ 実装の工夫
・セクションごとにクラスを整理し、再利用しやすい構造で実装
・テキストと画像のバランスを考慮し、視認性の高いレイアウトに調整
・スマートフォンでも読みやすいよう余白や行間を最適化

■ UI/UX設計
ユーザーが迷わずサービス内容を理解できるよう、
情報の優先順位を整理し、シンプルな導線設計を行いました。

また、必要な情報にスムーズにアクセスできる構成を意識しています。

■ パフォーマンス
・画像の最適化により表示速度を改善
・不要な処理を削減し、軽量な実装を意識

■ マークアップ
・セマンティックなHTML構造を意識
・情報構造が分かりやすいマークアップを実装

■ 今後の改善
・より保守性を高めるため、設計手法(BEMなど)の導入を検討

DATA

概要
ベビーギフトブランド「Lien de famille」の公式ECサイトをリニューアル。
従来は既存のECプラットフォームを利用していたため、デザインの自由度が低く、ブランドの世界観やカラーを十分に表現できていない課題がありました。
本リニューアルでは、ブランドカラーやビジュアルを全面に打ち出したデザインへ刷新し、ブランド認知の向上を図りました。
あわせて、属人化していた商品管理や発注業務を見直し、カート機能・決済・在庫管理・発注までを一元化できるカラーミーショップを導入。
サイト側からスムーズに購入フローへ遷移できる設計とすることで、ユーザー体験を向上させるとともに、運用効率の改善も実現しています。
想定ユーザー
・ショッピングサイト等でブランドをみたユーザー
・子ども服の購入検討しているユーザー
使用技術
HTML・CSS・jQuery・WordPress・カラーミー
実装期間
1ヶ月(デザインカンプ支給)
Back