壱 / Project outline
「売る」より先に、
背景を知ってもらう。
背景を知って
伝統工芸を扱うWebサイトでは、商品情報だけを並べても魅力が十分に届きません。一方で歴史や技法を先に語りすぎると、器を探している人の行動を止めてしまいます。
そこで、工芸の物語と具体的な行動を分離せず、「知る・訪れる・選ぶ」を行き来できる多ページ構成を設計しました。これは実在団体からの受託ではなく、情報設計と画面実装を検証するための自主制作です。
Project premise
小田原漆器の背景と器選びをつなぐコンセプトサイトを想定。ECの見た目を含みますが、カート・決済・実在する商品販売は実装していません。掲載写真と商品ビジュアルは本作専用に生成し、既存サイトから取得した画像は公開版に使用していません。
弐 / Information challenge
関心の深さが違う三者を、
同じ入口で迷わせない。
同じ入口で
旅先を探す人
工房見学や体験の内容、場所、訪れる理由へ短い距離で進める。
工芸を知りたい人
土地、技法、職人という順で、背景を自分の速度で深掘りできる。
器を選びたい人
用途と種類からコレクションへ移り、商品詳細まで迷わず到達できる。
参 / Experience architecture
読む順番を固定せず、
関心が動く余白をつくる。
関心が動く
トップから一方向に読ませるのではなく、各ページから関連する次の関心へ渡れるようにしました。工芸ページから見学へ、商品詳細から手入れ方法へ、といった横断リンクを想定しています。
ナビゲーションでは英語の短い章名を使いながら、本文と補足は日本語で丁寧に説明。視認性と世界観の両方を損なわない情報密度を探りました。
肆 / Visual direction
漆黒、木肌、朱。
器そのものをデザイン言語に。
黒は背景ではなく、艶の土台
均一な黒ではなく、温度のある墨色と細い金の罫線で、写真の光沢を受け止める画面にしました。
和らしさは装飾より「間」で
大きな余白、低い文字密度、明確な章区切りで、急がず読める図録のようなリズムをつくっています。
商品と物語の写真を混ぜない
選ぶための写真と、背景を理解する写真を役割別に配置し、情報の目的を曖昧にしないよう整理しました。
伍 / Build & reflection
静かな画面を、
素直な構造で支える。
多ページでも現在地を見失わない
共通のヘッダーとフッター、意味のある見出し階層、ページ固有の主題を揃え、入口が変わっても理解できる構成にしました。
可変グリッドと画像比率
コレクションや関連情報はCSS Gridで整理。モバイルでは縦書きに依存せず、自然な横組みに切り替えています。
雰囲気より先に読めること
本文のコントラスト、フォーカス表示、代替テキスト、44px以上の操作領域を基準にしています。
「和」を足すより、情報を引く
色や文様を重ねるほど品格が出るわけではない。写真と文章の間を整えることが世界観につながると学びました。
陸 / Validation note
公開後に見るべきことを、
先に言葉にしておく。
先に言葉に
本作品には実案件の成果データがありません。次の項目は実績値ではなく、本番化した場合に設計意図を確かめるための観察ポイントです。
- 商品詳細への到達
- 特集や一覧から、関心のある器へ無理なく進めるか。
- 目的別の回遊
- 工芸・体験・商品という異なる入口の間で迷いが起きていないか。
- 問い合わせの内容
- 購入方法、体験、手入れなど、次に必要な情報を特定できるか。
※ 自主制作による架空案件です。実在団体の成果実績・販売サイトではなく、カートと決済は未実装です。