重要なお知らせが埋もれてユーザーに気づかれなかった
セール・配送情報・重要なお知らせを目立たせたい事業者向けに、画面上部を流れるアナウンスティッカーを開発しました。 ランキング、スライダー、在庫僅少表示、追従ボタンなど。ストアフロントの見せ方を変えて、購入までの迷いを減らす機能を開発しています。
CHALLENGES
抱えていた課題
着手前に整理した、解くべき課題です。ここが決まらないまま作り始めると、あとから作り直すことになります。
重要なお知らせが埋もれてユーザーに気づかれなかった
複数の告知を同時に見せる手段がなかった
告知内容の更新に開発者の対応が必要だった
WHAT WE BUILT
つくったもの
課題に対して実際に設計・実装した内容です。
横スクロールアニメーションの実装
CSSアニメーションでメッセージを横方向に流し続けるティッカーUIを実装しました。
複数メッセージの管理
管理画面から複数の告知文を登録し、順番に表示を切り替えられるようにしました。
表示条件の設定
ページ種別や掲載期間ごとに表示・非表示を切り替えられるようにしました。
SCOPE & TECHNOLOGY
対応範囲と技術
TECHShopify LiquidTheme App ExtensionCSSMetafields
PROCESS
進め方
この案件で実際にたどった流れです。
要件整理
「セール・配送情報などを目立たせたいEC事業者」の現場でどう使われるかを起点に、必要な機能範囲を洗い出します。
設計
Theme App Extension（Liquid + CSS Animation）として実装する構成に落とし込み、データ構造を設計します。
実装
横スクロールUI・複数メッセージ管理・表示条件設定を中心に、ストアフロントと管理画面の両方を実装します。
検証・リリース
実際の購入導線で動作検証を行い、問題がないことを確認してから反映します。
OUTCOME
できるようになったこと
実装後の状態を、事実ベースで整理しています。
重要なお知らせの視認性が上がった
告知内容の更新を事業者側で完結できるようになった
セール情報の見逃しを減らせた
CONTACT
つくりたいものを聞かせてください。
Shopifyでの新規構築、既存テーマへの機能追加、アプリ開発のご相談まで。まだ具体化していないアイデアも、整理するところから一緒に始めます。
メールで相談する