株式会社ネイチャーズウェイ様のECサイト・オウンドメディア内を横断して検索結果を表示するプロジェクトで、ビジネスサーチテクノロジ株式会社様の商品検索ツー「GENIEE SEARCH for EC」導入の、フロントデザイン・コーディング・ディレクションをGood Thingsが担当しました。
提供されたツールの特性を理解し、ツールベンダー様・他環境の開発ベンダー様と調整を行ってリリースまでフェーズを決めて、実装していきました。
担当範囲
・ツールの実装方法を理解し、方針策定・作業分担を検討
・開発のフェーズ分け、ディレクションを担当
・PC、SP版のUI/UX設計
・検索結果画面、検索レコメンドヘッダー、注目のキーワードのフロントデザイン作成
・フロント実装
デザインのポイント
・ECサイト商品一覧ページの商品画像の掲載の仕方や、商品ごとの余白を参考にレイアウトを組みました。統一感を出しながら、見やすいUI/UXを実装しました。
・商品一覧表示では1商品に対してカテゴリーのタグが最大4つ設定されているので、タグ内に表記する最大の文字数を考慮してフォントサイズを決定しました。
・ECサイトで使用されているライトブルーのカラーを基調に、検索結果ページ全体のキーカラーを決定しました。情報量が多いページのため、ユーザーが直感的に操作できるようレイアウトや細かい余白にもこだわってデザインしました。
・PCの場合、左に1列分のカテゴリーやブランドごとの絞り込みのメニューが入り、SPの場合はメニューを圧縮して表示させるため、デバイスごとの整合性と情報整理を検討しました。
・アイテムとコラムの検索結果を切り替えるタブをフラットデザインを意識してシンプルで抜け感のある使用しやすいトーンにデザインしました。
ノーコードツールで実装されたフロント画面に、提供されたjsを埋め込むことで実装しており、ノーコードでの編集のしやすさと拡張性を兼ね備えた機能実装を実現しました。
ご注意 2022年1月より、ビジネスサーチテクノロジ株式会社様のサービス名が変更となっております。詳細はこちらから
Project Manager：Erina Hosho
Designer：Ryoma Sato
Engineer：Yuichiro Himukai
Thank you for other many people…
