実施した施策
概要・課題
創業明治42年。お祭り・子供会・イベントの景品用グッズを扱う株式会社よしみ様は、1万点を超える膨大な商品を、保育園や団体などのお客様へ届ける老舗のおもちゃ・文具・お菓子の卸・通販企業です。
リニューアル前は、かなり古いECシステムがベースで、膨大な商品の中からお客様が目的の品を探しにくく、買いにくい状態でした。スマートフォンサイトはあるものの操作性が悪く、マイページなどの会員機能も使いづらい。さらに会員登録をしないとカートが使えない仕様が、購入のハードルを大きく上げていました。
集客面でもSEO対策がほとんどされておらず、検索からの自然流入が乏しいことが課題でした。
そして最大の壁が、長年培われた独自の業務フロー。団体・法人向けの見積や納品、名入れ(印刷)加工、表彰用品のオーダーなど、一般的なECの型に収まらない運用が多く存在します。実際、以前に別の会社が Shopify での構築を進めたものの、この業務フローに合わせきれず断念という経緯がありました。
「現場の運用を変えずに、そのままシステムへ落とし込めるか」ーこれも本プロジェクトの重要なポイントの一つでした。
ターゲット
・保育園・幼稚園・アフタースクール
・お祭りなどのイベントを行う団体
・子供会・PTA など
「限られた予算で、大量の景品を、失敗なく手配したい」。幹事さんや先生といったまとめ買いをする担当者の目線を起点に設計しています。
デザインコンセプト
クライアント様のブランドロゴや世界観を軸にデザインを作成し、よしみさんの社風である「賑やかで楽しい雰囲気」を継承しつつ、使いやすさと視認性を追求しました。
情報量が多くなりがちなECサイトにおいて、賑やかさを前面に出しすぎると画面が雑多になり視認性が損なわれてしまいます。そのため、チープ感を与えず、かつ敷居が高くなりすぎない「ちょうど良いポップさ」を意識し、全体をデザインしています。
デザインのこだわりポイント
お子様向けの商品が多く並ぶことから、子ども心をくすぐるようなワクワク感を演出するため、圧迫感が出ない範囲で背景色やイラスト、効果的な装飾を取り入れました。
メインの日本語フォントには「M PLUS 1p」を採用。高い可読性を保ちながらも、丸みのある柔らかいフォルムがサイト全体のポップなトーンに馴染み、情報量の多いページでも親しみやすく読みやすいデザインに仕上げています。
英語フォントには2種類を使用。装飾として使用するフォントと、価格等で使用するフォントを使い分けることで、ポップな雰囲気を演出しながらも、価格などの重要な情報はひと目で読み取れるようにしています。
UI・UXでこだわったポイント
TOPページ
掲載するバナーや商品画像が多く、情報過多になりやすいTOPページのため、「引き算」を意識した視覚的な整理を行いました。バナーや商品一覧エリアは背景装飾をあえて排除し、コンテンツそのものが際立つノイズの少ないレイアウトに。一方で、画像がないセクションには適度な装飾を取り入れることで、ECサイトらしい賑やかさと洗練された視認性のバランスを最適化しています。
商品一覧:一目で状態が伝わるカラーコード設計
「予約商品」「お取り寄せ」「入荷待ち」など多岐にわたる商品種別(ステータス)を、ユーザーが直感的に識別できるよう色分けを行いました。一覧画面の段階で欲しい商品の状態がひと目で把握できます。
商品詳細ページ:視覚的メリハリと購買意欲を高める情報設計
注意事項や商品スペックなど情報量が多い詳細ページでは、テキストのサイズ差(ジャンプ率)、色の濃淡、十分な余白設計によって情報の優先順位をクリアに整えました。また、セール・割引商品においては通常価格と割引価格を並記し、アクセントカラー(赤)を効果的に使用することで「お得感」を視覚的に強調。直感的な購買アクションへと繋げる工夫を施しています。
システム仕様(EC-CUBE・WordPress)
ECには EC-CUBE、コンテンツ運用に WordPress を採用し、柔軟なカスタマイズ性と日々の更新のしやすさを両立させました。単なる「作り替え」ではなく、この会社の商売そのものをシステムに翻訳することを目指しています。
お客様が探しやすく、買いやすく
・カテゴリ・キャラクター・価格帯・季節催事など、多彩な切り口で探せる導線設計
・SEOを前提としたサイト構成(公開後、多くのキーワードで上位表示を獲得)
・保育・イベント現場の担当者が直感的に使えるデザイン
法人・団体ならではの買い方に対応
・見積書・領収書をサイト上で発行できる機能を独自開発
・FAX注文・品番注文・在庫確認など、現場の注文スタイルにも対応
・名入れ(印刷)・表彰用品などのオーダー品も、購入から管理まで一貫して対応
現場の運用を変えずに回せる管理画面
・既存の業務フローに合わせて管理画面をカスタマイズ(他社が断念した要件をクリア)
・都道府県ごとの配送日数・商品ごとの準備日数・営業日カレンダーを反映した納期表示
・お客様とのメールのやり取りを管理画面で一元管理し、対応漏れを防止
・バナーや特集はWordPressで、専門知識がなくても差し替え可能
・数万件の顧客データを旧サイトから移行
派手さよりも、「毎日、たくさんの受注を、現場が滞りなくさばける」という“地力”に徹底的にこだわりました。業務フローを一切変えていないため、リリース後に急増した受注にも、現場はスムーズに対応できています。
成果・プロジェクトの効果
今回のリニューアルによって、お客様の買いやすさと、社内の業務効率を大きく改善することができました。
商品検索やカテゴリ導線の見直しにより、1万点を超える商品の中から目的の商品を探しやすくなりました。また、新たに実装した見積書・領収書の発行機能やお気に入り機能なども実際に多くのお客様に利用され、利便性の向上につながっています。
SEOにおいても、公開後すぐに複数の重要キーワードで検索上位を獲得。従来の課題だった検索エンジンからの集客力が大きく改善し、新たなお客様との接点を増やすことができました。
一方、社内の業務については、長年培ってきた独自の業務フローを変えることなく、システム側を現場の運用に合わせて最適化しました。さらに、これまで手作業で行っていた業務のデジタル化(DX)や管理画面の操作性向上によって、従来以上の受注件数を効率よく処理できる体制を実現しています。
こうした購入体験の改善と業務効率化、SEOによる集客強化が相乗効果を生み、売上は前年比130%を達成しました。
単にECサイトを新しくするのではなく、お客様にとっての使いやすさと、現場にとっての働きやすさを両立させることで、事業の成長につながるリニューアルとなりました。
TOP ページ
表彰用品 ページ
特集 ページ
商品詳細 ページ
担当者からの一言
今回のECサイトは、商品点数の多さや複雑な業務フローなど、さまざまな要素を考慮する必要がある、非常にやりがいのあるプロジェクトでした。デザイン・仕様・マーケティングのそれぞれの視点を大切にしながら、使いやすさと運用のしやすさを両立したサイトを形にすることができたと感じています。
また、リリース後には売上も前年を大きく上回り、大きな成果につながったことを嬉しく思っています。お客様にとって「商品を探しやすく、購入しやすいサイト」であることはもちろん、運営される方々にとっても使いやすい管理画面を目指したことが、成果につながったのではないかと考えています。
私たちは、サイトを制作して終わりではなく、公開後も継続的に改善を重ねながら、お客様の事業成長を支えていきたいと考えています。これからも、よしみ様とともに、より良いサイトづくりに取り組んでまいります。
関わったスタッフ
Director
三輪 尚士
Main Designer
小木曽 文香

