本文へスキップ

MOKU 生活道具店

手に取る前の質感を伝える、道具のオンラインストア

既定: 動
使われている技術 16 件 ↓

5,500円以上で送料無料

カート 0点

まだ何も入っていません。

    送料無料まであと 5,500円

    小計¥0
    レジへ進む

    MOKU の定番

    毎日の道具を、
    少しだけ良く。

    木・陶・布。作り手から直送する、手入れしながら長く使える生活道具。

    道具をえらぶ
    木のテーブルに、麻のナプキンと白い皿を並べた食卓

    秋の新作

    白磁の茶器、
    入荷しました。

    有田・青山窯の急須と湯のみ。薄くて軽い白磁は、煎茶の色がそのまま映ります。

    新作を見る
    木の盆にのせた白磁の茶器

    季節の道具便

    季節ごとに、
    道具がひとつ届く。

    年4回、その季節に使いたい道具を作り手の手紙と一緒に。いつでも休止できます。

    定期便を見る
    木の小鉢とゴブレットの詰め合わせ
    • 5,500円以上のご注文で送料無料
    • 30日到着後の返品・交換に対応
    • 12の工房作り手から直送します

    道具をえらぶ

    画像にカーソルを乗せる（スマホは押す）と、色違いや裏面が見られます。

    6点

    • 益子・森野窯

      白釉の飯碗

      ¥3,300〜

      詳しく見る

    • 飛騨・小谷木工

      楢のカッティングボード

      ¥6,600

      詳しく見る

    • 近江・野田織物

      麻のふきん 3枚組

      ¥1,980

      詳しく見る

    • 飛騨・小谷木工

      桜の木べら

      ¥1,650

      詳しく見る

    • 丹波・西田陶房

      飴釉の片口

      ¥2,750

      詳しく見る

    • 近江・野田織物

      リネンのナプキン 2枚組

      ¥8,800

      詳しく見る
    白釉の飯碗

    色見本を選ぶと、写真・名前・価格が釉薬ごとに切り替わる。

    益子・森野窯

    白釉の飯碗

    ¥3,300（税込）

    粉引に近い、やわらかな白。手に持ったときの軽さと、縁の薄さが自慢です。電子レンジ・食洗機に対応。

    釉薬 白釉

    サイズ 未選択

    数量

    1

    合計 ¥3,300

    • 5,500円以上で送料無料。このサイズなら2点で無料になります。
    • 手作りのため、色味と大きさに一点ずつ差があります。
    • 到着後30日以内、未使用なら返品・交換できます。

    この器のレビュー

    購入した方だけが書けます。バーを押すと、その評価の声だけを読めます。

    4.6★★★★★128件

    すべての評価を表示中

    • ★★★★★中サイズ・白釉

      思ったより軽くて、縁が薄いのでごはんが口当たりよく感じます。毎日使って半年、貫入も味になってきました。

      神奈川県・40代

    • ★★★★☆小サイズ・飴釉

      色がきれいで煮物がよく映えます。小は子ども用にちょうどよい。大人には少し小さいので中を追加で注文しました。

      京都府・30代

    • ★★★★★中サイズ・黒釉

      贈り物にしました。箱と作り手の手紙が入っていて、開けたときに喜ばれました。食洗機で洗えるのも助かります。

      東京都・50代

    • ★★★☆☆中サイズ・白釉

      器自体は良いのですが、写真より少し黄みが強く感じました。手作りの差と説明にあるとおりで、気になる方は色見本を確認したほうがよいです。

      愛知県・20代

    • ★★☆☆☆小サイズ・白釉

      到着時に高台に小さな欠けがありました。交換の対応は早く丁寧でしたが、梱包はもう少し厚くてもよいと思います。

      北海道・40代

    • ★☆☆☆☆大サイズ・飴釉

      注文後に品切れの連絡があり、待てずにキャンセルしました。在庫の表示をもっと早く更新してほしいです。

      福岡県・30代

    季節の道具便

    年に4回、その季節の道具がひとつ届く

    春は木のさじ、夏は麻のふきん、秋は器、冬は鍋敷き。作り手の手紙を添えて。

    1. 1

      申し込む

      好みの素材（木・陶・布）を選ぶだけ。届く道具は季節ごとに店が選びます。

    2. 2

      季節の初めに届く

      3・6・9・12月の第1週に発送。前月末にメールで中身を先にお知らせします。

    3. 3

      いつでも休止・解約

      マイページから1回だけ休むことも、やめることもできます。回数の縛りはありません。

    ¥4,400／回（税込・送料込）

    いつでも解約できます。初回は到着後30日以内なら全額返金。

    定期便をはじめるこれまでの内容を見る

    送料と返品、よくある質問

    全国一律660円（税込）。5,500円以上のご注文で無料になります。沖縄・離島も同じ料金です。発送は平日のみで、13時までのご注文は当日中に発送します。

    到着後30日以内・未使用であれば承ります。返送料はお客様負担ですが、破損・不良の場合は当店負担で交換します。手作り品の色味・大きさの差は不良に含みません。

    1点330円で、木箱または再生紙の箱に麻ひもをかけてお包みします。納品書は同梱せず、メッセージカードを無料で添えられます。

    使ったらすぐ水で洗い、立てて乾かします。月に1度、食用のくるみ油かオリーブ油を薄く塗ると、乾燥による割れを防げます。食洗機と長時間の浸け置きは避けてください。

    使われている技術 16

    番号は「解説を重ねる」で画面に出る番号と同じ。各カードの見本はそのまま触れます。

    1. ホバー1

      メガメニューMega Menu

      どこで ヘッダーのカテゴリナビ

      器・木・布の下層をホバー／タップで列ごとに一望させ、PCは120ms遅延で閉じて掴めないメニューにしない。

      図鑑で見る（仕様書・コード）→
    2. クリック2

      カートShopping Cart

      どこで ヘッダーの常設カート

      個数バッジ付きのカートを押すと明細と小計・送料無料までの残額が開き、ページを離れず数量を直せる。

      図鑑で見る（仕様書・コード）→
    3. クリック3

      トースト通知Toast Notification

      どこで カート投入後の通知

      追従ヘッダーの直下に「入れました」を数秒だけ出し、どこを見ていてもカートへ進めるようにする。

      図鑑で見る（仕様書・コード）→
    4. ドラッグ4

      カルーセルCarousel

      どこで ヒーローのスライダー

      定番・新作・定期便を1枚ずつ見せる。自動送りはせず、矢印・ドット・スワイプで利用者が切り替える。

      図鑑で見る（仕様書・コード）→
    5. 静的5

      事実で語る信頼帯Social Proof Band

      どこで ヒーロー直下の帯

      送料無料ライン・返品期限・直送工房数を数字で示し、買う前に確かめたい事実を先に置く。

      図鑑で見る（仕様書・コード）→
    6. 入力6

      即時フィルタLive Search Filter

      どこで 商品一覧の検索と絞り込み

      8点程度でも「器だけ見たい」は多い。入力とチップで即座に絞り、件数と0件時の案内を出す。

      図鑑で見る（仕様書・コード）→
    7. ホバー7

      カード反転Flip Card

      どこで 商品カードの画像

      写真1枚では分からない色違いや裏面を、PCはホバー、スマホはタップの反転で追加の画面なしに見せる。

      図鑑で見る（仕様書・コード）→
    8. スクロール8

      スタッガー出現Staggered Reveal

      どこで 商品カードの出現

      一覧に入ったとき6枚が少しずつ時間差で現れる。静モードでは全て即表示で内容は変わらない。

      図鑑で見る（仕様書・コード）→
    9. クリック9

      カラースウォッチColor Swatch Picker

      どこで 商品詳細の釉薬選択

      白釉・飴釉・黒釉の丸を押すと大きな器の色が変わる。名前も併記して色弱の人にも判別できるようにする。

      図鑑で見る（仕様書・コード）→
    10. クリック10

      サイズ選択Size Selector

      どこで 商品詳細のサイズ選択

      小・中・大で価格が変わる器はサイズを先に決めさせる。品切れは取り消し線、未選択で押すと案内を出す。

      図鑑で見る（仕様書・コード）→
    11. クリック11

      価格シミュレーターPrice Calculator

      どこで 商品詳細の数量と合計

      数量の±で合計がその場で更新される。レジまで行かないと合計が分からない不安をここで解く。

      図鑑で見る（仕様書・コード）→
    12. クリック12

      カート投入アニメFly-to-Cart Animation

      どこで 商品詳細の主ボタン

      サムネがカートへ飛び込んでバッジが増える。動きが「入った」ことを示し、静モードでは即時に増える。

      図鑑で見る（仕様書・コード）→
    13. クリック13

      レビュー評価分布バーReview Rating Distribution

      どこで レビューの評価分布

      平均だけでなく★1〜5の分布を見せ、バーを押してその評価の声だけ読めるようにして判断材料にする。

      図鑑で見る（仕様書・コード）→
    14. 静的14

      安心の一言つき CTA 帯CTA Band with Reassurance

      どこで 定期便の申し込み帯

      主ボタンは1つ、副導線は文字リンクに格下げし、脇に「いつでも解約できます」を添えて押す前の不安に答える。

      図鑑で見る（仕様書・コード）→
    15. クリック15

      FAQセクションFAQ Section

      どこで 送料と返品の案内

      送料・返品・包装・扱い方は買う直前に読まれる。質問を並べて必要な答えだけ開ける形にする。

      図鑑で見る（仕様書・コード）→
    16. 静的16

      サイトマップ型フッターSitemap Footer

      どこで フッター

      道具・ガイド・店について・お知らせの4列で全導線を再掲し、狭い幅では2列に畳んで法務リンクは横に流す。

      図鑑で見る（仕様書・コード）→

    画面の構成

    1. 01ヘッダー店名・メガメニュー・常設カート（個数バッジ）。追従して常にカートへ戻れる
    2. 02ヒーロー3枚のスライドで「定番・新作・定期便」を1枚1メッセージで見せ、主ボタンは各1つ
    3. 03安心の帯送料無料ライン・返品期限・直送工房数を、形容詞なしの数字で並べる
    4. 04商品一覧検索とカテゴリで即時に絞り込み、ホバー／タップで色違いや裏面に切り替わる
    5. 05商品詳細釉薬の色・サイズ・数量を選んで合計を確かめ、カートへ入れる購入導線の本体
    6. 06レビュー平均★と分布バー。バーを押すとその評価のレビューだけに絞り込める
    7. 07定期便季節の道具便を3ステップで説明し、解約自由の一言を添えて申し込みへ導く
    8. 08送料と返品買う前の不安（送料・返品・包装・扱い方）に、開閉式の短い答えで応じる
    9. 09フッター道具・ガイド・店について・ニュースレターの4列と、所在地・法務リンク

    コンセプト

    動きの度合い
    動（演出あり）
    空気感
    清潔・実直・手触り
    色
    #2b2b2b#faf8f3#c9a227#b98a5a
    文字
    見出しだけ明朝で店の落ち着きを出し、価格・ボタン・案内はゴシック 15px で読み違いを防ぐ
    主役と脇役
    主役は商品の面（器・木・布の質感）と、常に右上にあるカート。値引きバッジや動く装飾は退かせ、写真の代わりに色と形だけで道具を見せる。動きは出現・ホバー・カート投入の3つに絞った。

    参考にした実在のサイト

    見た目を真似た先ではなく、型の使われ方を観察した先。コード・写真・文章は転載していません。

    読みもの

    写真が使えない前提で、質感をどう出すか

    このサンプルは写真を一切使えないので、商品は inline SVG の記号（器・板・布・木べら）に釉薬と木の色を CSS 変数で流し込んで描いている。写真らしさを狙って細部を描き込むと、かえって素人の挿絵に見える。そこで形は最小限にして、光の向きを示す片側の陰と、布だけに細かい織りのパターンを重ねることで「素材が違う」ことだけを伝えるようにした。色違いの切り替え（釉薬の丸・カードの裏面）は同じ記号に別の変数を渡すだけなので、商品が増えても描き直しがいらない。

    動きは「入った」と「現れた」だけ

    既定は動モードだが、ECで動かしてよいのは意味のある3つに絞った。ひとつは商品がカートへ飛び込む演出で、これは「ページ右上のカートに入った」という場所の説明を兼ねる。もうひとつは一覧に入ったときのカードの時間差出現で、6枚が一斉に出るより目が順に走る。最後はホバーでの反転。ヒーローの自動送りは入れていない。調査した10サイトでもスライダーは利用者が送る型が多く、勝手に動く画面は価格やサイズを読む邪魔になる。静モードでは出現も反転も即時になり、内容は一文字も減らない。

    カートを離れず数量を直せること

    常設カートは個数バッジだけで終わらせず、押すと明細・小計・「送料無料まであと○円」が開くようにした。参考にした実在店舗はいずれもカートを右上に常設していたが、その先がカートページへの遷移だと、数量を1つ直すだけで一覧から離れてしまう。商品詳細で合計をその場で見せるのも同じ考えで、レジまで進まないと総額が分からない状態を作らない。送料無料ラインはヘッダー・安心の帯・カート明細の3箇所で同じ数字を出し、買い足す判断を利用者に任せている。

    写真の出典

    見本の写真は商用利用できるライセンス（CC0・パブリックドメイン・CC BY）の作品です。リサイズと WebP への変換を施しています。 店名・価格・文章は架空で、写真の作者とは関係ありません。