Purpose & feeling
商品を急いで売るより、選ぶ理由まで丁寧に届ける
雑貨店のWebサイトでは、一覧の数を増やすだけでは店らしさが埋もれます。素材、作り手、手入れ、使う場面まで知ることで、来店前や問い合わせ前に「自分の暮らしに合うか」を判断できます。
第一画面では道具の集合と店の基準を示し、その下で「台所」「書く」「整える」という暮らしの目的から探せるようにしました。売るための強い表示を重ねず、選ぶ時間そのものが店の価値になる設計を目指しています。
- 想定する店
- 作り手と商品背景を大切にする小規模な雑貨店
- 主な目的
- 商品探索、理解、店舗来訪・問い合わせへつなぐ
- 主要な人
- 長く使える生活道具を探している人
- 第一画面
- 店の選定基準と商品分類を同時に提示
- 制作上の思い
- 買う前に立ち止まって選べる余白を守る
Information architecture
商品、作り手、使い方の記事を、行き来できる情報にする
商品一覧は分類で絞り込み、詳細では素材、寸法、手入れ、作り手を確認できます。特集では制作背景、道具帖では使い方や経年変化を扱い、商品説明だけでは伝えきれない情報を別の読み方で届けます。
お知らせは展示や入荷、道具帖は長く残る情報として分けました。商品詳細から関連する特集と記事へ、記事から商品一覧へ戻れるため、読みものが販売ページから孤立しません。
- 全14ページ
- トップ、商品一覧・詳細、分類、特集一覧・詳細ほか
- 商品探索
- 用途別の分類と画面内の絞り込み
- お知らせ
- 展示・入荷情報の一覧・詳細
- 道具帖
- 手入れや使い方を伝える一覧・記事
- 回遊
- 商品、作り手、読みものを相互に接続
Visual direction
整った商品写真と、手仕事の痕跡が残る編集を重ねる
墨色、紙の白、くすんだ青、真鍮色を基調に、商品台帳と生活雑誌の間のような紙面をつくりました。番号、細い罫線、縦書きに近い大見出しを使い、カフェや教室とは異なる商品編集型の個性を出しています。
商品一覧は写真を均等に比較できるグリッド、作り手特集は手元の写真と長い文章、店舗案内は住所や営業時間を素早く確認できる配置です。ページの役割ごとに密度を変えています。
- 配色
- 墨色、紙白、くすみ青、真鍮色
- 写真
- 俯瞰、商品単体、作り手、店内の4系統
- 文字
- 編集的な大見出しと番号、端正な本文
- スマートフォン
- 商品を一列または二列で探せる密度に調整
- 差別化
- 商品探索と読みものを雑誌のようにつなぐ
Interaction & implementation
絞り込みとお気に入りで、再訪して選び直せる状態をつくる
商品一覧では分類を選ぶと対象の商品だけを表示します。気になる商品はお気に入りへ追加し、同じブラウザーで開き直しても残ります。保存内容は利用者の端末内だけに置き、一覧から一括削除できます。
問い合わせは入力、確認、完了を体験できますが、自主制作サンプルのため外部送信しません。メニューの開閉、キーボード操作、フォーカス表示、画像の説明、狭い画面での横スクロール防止も実装しました。
- 絞り込み
- 商品分類に合わせて画面内で即時切替
- お気に入り
- 同じブラウザー内に保存し、一括削除可能
- 問い合わせ
- 入力、エラー、確認、完了を再現。外部送信なし
- 更新想定
- 商品、お知らせ、特集、道具帖を追加可能
- 技術
- HTML、CSS、Vanilla JavaScript、localStorage
Actual screens
商品を探す場面と、背景を知る場面を分けて見せる
商品一覧の使いやすさに加え、作り手や素材の背景を伝える特集ページまで、異なる買い物行動に合わせて実装しています。
全14ページの構成
トップ ／ 商品一覧 ／ 真鍮の小皿詳細 ／ コレクション ／ 特集一覧 ／ 「職人の手から」 ／ 読みもの一覧 ／ 「傷も景色になる」 ／ お知らせ一覧 ／ 展示会のお知らせ ／ 店舗案内 ／ よくある質問 ／ お問い合わせ ／ プライバシー
Continue exploring
ほかのWebサイト作品も見る
店舗、教室、小売店それぞれに必要な判断材料と回遊方法を比べられます。