ECサイトリニューアル デザイン・静的実装

要点

  • 競合分析をもとにECサイト全体のデザイン方針を策定
  • ユーザーの現在地が分かりやすい導線・ナビゲーションを設計
  • デザインから実装、チームへの引き継ぎまで一貫して担当
担当領域
デザイン・UI設計
期間
2021年7月～11月

案件背景

ECサイトリニューアルプロジェクトにて、メインデザイナーとしてTOPページを中心としたデザイン刷新を担当。
競合・類似サイトのリサーチをもとに情報設計と導線設計を見直し、ユーザーが迷わず目的のページへ到達できる構成を設計した。デザイン制作からコーディング、後輩デザイナーへの引き継ぎまで一貫して対応。

課題

  • 旧サイトのデザインが古くブランドイメージと乖離していた
  • 情報量が多くユーザーが現在地を把握しづらかった
  • 使いやすさとデザイン刷新の両立が求められていた

やったこと

  • 競合・類似ECサイトの調査とUI分析
  • TOPページの情報設計・UIデザイン制作
  • ナビゲーション設計と視認性向上施策の実施
  • HTML/CSSによる静的コーディング対応
  • 後輩デザイナーへのデザインディレクション・引き継ぎ

実現したこと

  • ユーザー体験と情報整理を重視したデザインへ刷新
  • 現在地が把握しやすい導線設計を実現
  • デザインから実装まで一貫した品質管理を実行

設計のポイント

現在地が伝わるナビゲーション設計

パンくずやナビゲーションの視認性を高め、ユーザーが迷わず回遊できる構成を設計。

競合分析に基づく情報設計

競合・類似サイトのUIを調査し、ユーザーの視線誘導と導線設計を踏まえたレイアウトを構築。

ビジュアル

参考画面
参考画面

よくなったこと

競合・類似ECサイトの調査をもとに情報設計と導線設計を見直し、サイト全体のデザインを刷新。ユーザーの現在地が把握しやすいナビゲーション設計と情報整理により、使いやすさとデザイン性を両立したサイト構築に貢献。

補足

  • 競合分析をもとにデザイン方針を明文化
  • 情報構造を整理し、ユーザーが目的の情報へ到達しやすい構成を設計
  • デザイン意図を実装まで反映し、制作工程間の認識齟齬を削減
  • 下層ページ制作を後輩デザイナーへ円滑に引き継ぎ
  • サイト全体のデザイン品質維持に貢献

Category

デザイン・UI設計 実装・CMS構築

Mimu Fujiwara

フリーランスのテクニカルPM／Webディレクター。 Webサイトのリニューアルや改善の相談を受ける中で、「本当に解決したいこと」と「依頼内容」が少しずれている場面によく出会います。 依頼されたものをそのまま作る前に、目的や課題、運用状況を整理し、「何を作るべきか」から一緒に考える立場で関わっています。 WordPressやHubSpotなどのCMS案件を中心に、要件整理・情報設計・技術調整・運用改善までを横断して支援。公開して終わりではなく、その後も無理なく運用・改善できる状態をつくることを大切にしています。