京都に住むデザイナーのサイト。WEBサイトデザイン・オンラインショップ|グラフィックデザイン:DM・フライヤー・カード等。雑貨・アンティーク・かわいい雰囲気が得意です。

ぬいぐるみブランドのオンラインショップデザイン

2021.05.13

雑貨店やInstagramの赤ちゃんの投稿と一緒によく見かける、かわいいぬいぐるみやビブを手作りされている「atelier moppy」さんのオンラインショップを新規デザイン・構築しました。

私自身、結婚前から子供がいたら与えてみたいなと見ていたモッピーさんのサイトを手がけられてとても嬉しいです。

Instagramで募集されていた赤ちゃんモデルに私が次男で応募したご縁もあり、moppyをひとりで制作運営されているデザイナーの新家さんにお声掛けいただきました。


デスクトップ版 トップページ
支給いただいたロゴの骨太さから、背景に手作りのmoppyさんらしさを感じたメモ帳のようなグリッド線を敷き、太めのゴシック書体で右上にグローバルメニュー・左上にロゴとカテゴリー・右下に代表作のぬいぐるみイラストをページの上へ戻るボタンとして配置し全て位置を固定して、スクロールするとそれらのナビに囲まれたコンテンツが流れていく風になります。


一番下へスクロールしきると黒くまのぬいぐるみが仲間が待っているカゴに入ります。


メニュー
MENUクリックで全体がモーダルウィンドウとしてメニューが展開します。


商品詳細ページ
右側の商品名や購入関係のボタングループは固定しており、説明文を下へ読んでいっても見やすく買いやすくしました。


モバイル版 トップ・メニュー・おすすめ一覧
ターゲット世代が若いスマホ世代のためモバイルファーストでレイアウトを考えたので、こちらの方を基本に後ほどデスクトップ版を考えました。

ぬいぐるみは年に数回の受注生産のため普段はSold outですが、くつしたやビブ、大人も使えるバッグなど販売されているので覗いてみてください。

atelier moppy オンラインショップ

作業内容
サイトデザイン サイト全体のページデザイン
コーディング web上で見えるようにプログラムコードを設計
レスポンシブ化 スマホで見たときはレイアウトが見やすく変化