← 制作実績の一覧へ

WORK / 02 実案件 · Webサイト

HAGU MIRA

玩具を届けるだけでなく、学びの価値を伝える。

担当・制作範囲
ヒアリング → 情報設計 → デザイン → WordPressオリジナルテーマ実装 → オンライン決済(クレジットカード・銀行振込)→ SEO / OGP → 公開後の保守・改修 + 紙のリーフレットまで一気通貫
使用ツール
WordPress / WooCommerce / Stripe / Tailwind CSS / Figma / Claude Code / Codex
制作区分
実案件
HAGU MIRA サービスサイトのPC表示
HAGU MIRA サービスサイトのPC表示拡大して見る ↗

01 / OVERVIEW

背景と、制作の考え方。

木製知育玩具を通して、子どもの成長と学びを支えるHAGU MIRA。幼稚園・小学校受験を見据えるご家庭などに向けて、玩具のレンタルにとどまらない、教育的な価値を持つプログラムとしての魅力を伝えることが制作の軸でした。落ち着き・信頼感・上質さを大切に、ブランドの想いが伝わるサイトを目指しました。

02 / DESIGN NOTES

余白と静けさで、玩具の質感を引き立てる。

ロゴの紺と生成りを基調に、広めの余白と明朝体の見出しを組み合わせました。にぎやかな装飾を抑え、木製玩具の色や素材感が自然と目に入る画面に。子ども向けの親しみやすさと、教具としての品格・信頼感が共存する表現を目指しています。

03 / DESIGN NOTES

ご家庭に合う学びを、選びやすく。

玩具を並べるだけでなく、発達段階や伸ばしたい力を手がかりに検討できる情報設計にしました。ロゴのブルーとオレンジはコース案内の道しるべとして使い分け、サービスの理解から選択、相談へと迷わず進めるように構成しています。

04 / DESIGN NOTES

申し込みまで、ブランドの体験をつなぐ。

WordPress・WooCommerce・Stripeを用いたオンライン決済を実装し、サービスを知るところから申し込みまでの導線を整えました。衛生管理や利用時の傷・汚れへの対応も伝え、保護者が気になることを確認したうえで検討できるよう、情報を整理しています。

05 / DESIGN NOTES

成長と未来を、やさしく抱きしめる。

子どもの健やかな成長と未来を、やさしく抱きしめたい。その想いを、写真・色・言葉・使いやすさへと落とし込みました。商品の販売機能だけでなく、HAGU MIRAが大切にする学びの価値と姿勢が伝わるサイトを目指しています。

06 / GALLERY

制作画面・制作物。

HAGU MIRAのデザインコンセプトシート
HAGU MIRAのデザインコンセプトシート拡大して見る ↗
HAGU MIRAのホームページ全体
HAGU MIRAのホームページ全体拡大して見る ↗
発達段階や伸ばしたい力から玩具を選べるHAGU MIRAのギャラリーページ
発達段階や伸ばしたい力から玩具を選べるHAGU MIRAのギャラリーページ拡大して見る ↗
HAGU MIRAの商品一覧とEC導線
HAGU MIRAの商品一覧とEC導線拡大して見る ↗
HAGU MIRAのカートとオンライン決済画面
HAGU MIRAのカートとオンライン決済画面拡大して見る ↗