寄木雑貨工房 irodori のネットショップは、木そのものの色合いと木目を主役に置くという方針が、画面のすみずみまで一貫して守られたデザインです。背景の質感から文字色、写真の撮り方まで、商品の邪魔をしない方向へ丁寧にそろえられています。
この記事では、寄木のボールペンを中心に扱うこのショップの画面を、配色、レイアウト、写真のトーン、情報設計という観点から読み解きます。手仕事でつくられた小さな品をオンラインでどう見せるかという課題に、素直で分かりやすい答えを出している一例です。
ファーストビューで決まるトーンと画面の骨格
最初に目に入る範囲で、このショップの性格はほとんど説明されています。強い訴求文や動きの大きいスライドを置かず、ロゴと商品写真だけで世界観を伝える構成です。ここでは背景の質感と、画面を左右に分けた骨格について見ていきます。
和紙を思わせる質感の背景
背景には、淡いベージュの地に繊維が漂うような紙のテクスチャが全面に敷かれています。単色で塗りつぶす代わりにわずかな濃淡と繊維の粒を残しているため、画面が平坦になりすぎず、木や紙といった自然素材の手触りを最初に感じ取れます。
この地色は、商品写真に写る木材の茶色とも近い色相にあります。写真とページの背景がぶつからないので、カードの中の被写体だけが自然に浮かび上がって見えます。
左にナビゲーション、右に商品を置いた二列構成
画面は左の細い列と右の広い列に分かれています。左にはロゴとメニュー、共有のボタンやInstagramの案内がまとまり、右は商品一覧だけが縦に伸びていきます。
役割がはっきり分かれているため、読者が下へスクロールしていく間、視線は右側のグリッドだけを追えば済みます。左の列は商品が続く間ずっと背景の余白になりますが、その空きがかえって画面全体の落ち着きにつながっています。
三つの色に絞った配色と文字の扱い
色数を増やさずに整理された配色も、このサイトの見どころです。背景、カード、文字とボタンという三つの層に色の役割が割り振られ、残りの色みは商品写真が受け持っています。
ベージュと白と緑という組み立て
ベージュの背景に対して、商品カードは純白で抜かれています。この明るさの差だけでカードの輪郭が立ち上がるので、太い枠線や強い影に頼らずに一覧の区切りが伝わります。
文字とボタンには緑系の色が使われ、「ITEM LIST」の見出しやメニューの項目は深い緑、一覧の下に置かれた「もっと見る」のボタンは青みを帯びたやわらかな緑でまとめられています。彩度を抑えた自然の色でそろえているので、写真に写り込む葉の緑ともよく馴染みます。
ロゴマークと字間を広げた見出し
ロゴは、赤と黄と緑の輪が重なって樹冠のように見え、そこから茶色の幹と枝が伸びる形になっています。線の細い小文字の欧文ロゴタイプが横に添えられ、その下に「寄木雑貨工房」の文字が字間を広げて置かれています。
色の違う輪が重なり合う造形は、色や木目の異なる木材を組み合わせる寄木の仕事と重ねて読めます。見出しやメニューでも欧文は大文字で字間を広く取っており、余白そのものが上質さを支えるタイポグラフィになっています。
商品一覧のレイアウトとカードのUI
このショップの中心は、トップページを長く占める商品一覧です。カードの寸法、写真の比率、文字の行数といった細部がそろえられているため、数多く並んでも視線が乱れません。
三列のグリッドと高さのそろったカード
商品は三列のグリッドで並びます。カードは角を丸めない白い矩形として置かれ、写真は上端いっぱいまで使われています。写真の下に商品名、その下に短い情報という順序が、すべてのカードで共通です。
長い商品名は二行で切り詰められて末尾に省略の記号が付くため、どのカードも同じ高さに収まります。行がずれないので、横方向にも縦方向にも見比べやすい一覧になっています。
撮影のトーンをそろえた商品写真
掲載されている写真は、木の板の上にペンを斜めに置き、背景にアイビーの葉をあしらう構図でほぼ統一されています。光の向きや被写体との距離感も近いので、一覧に並べたときに一定のリズムが生まれます。
背景が共通していることには、比べやすさという実利もあります。木の種類ごとの色や木目の差が、撮影条件の違いに紛れずそのまま伝わるからです。替え芯のように性格の異なる品は白い背景で撮られており、写真の見た目だけで商品の種類が違うと分かるようになっています。
一覧の終わりに置かれた読み込みボタン
グリッドの下には、塗りつぶしの横長ボタンが中央に置かれています。ベージュの背景に対して面で色が入る要素はこのボタンとInstagramの案内くらいなので、スクロールし終えた視線が自然にここへ落ちます。
一覧を一度にすべて読み込ませず、続きを見たい人だけが押せばよい形にしている点も、縦に長いページの負担を抑える工夫として働いています。
カテゴリの構造と回遊のための導線
扱う品数が増えても迷わせないために、メニューの階層が視覚的に整理されています。ここではカテゴリの見せ方と、ショップの外へ広がる導線を確認します。
階層を字下げで示すカテゴリメニュー
左のメニューは、HOME、ABOUT、ALL ITEM、CATEGORY、CONTACT という五つの柱で構成されています。CATEGORY の下にはウッドペンが置かれ、さらに一段下げてボールペンとシャープペンが並び、同じ列に名刺ケース、ネクタイピン、ヘアクリップが続きます。
字下げの深さがそのまま階層の深さを表しているので、開閉の操作をしなくても品ぞろえの全体像がつかめます。カテゴリ名が商品の形そのものである点も、初めて訪れた人に伝わりやすい部分です。ページの最下部にも同じメニューが繰り返し置かれ、長い一覧を見終えた場所から戻れるようになっています。
共有と問い合わせへの入口
左の列には、保存やシェア、LINE、ポストといったラベルの小さなボタンが横一列に並びます。その下にはInstagramの案内が、マゼンタから紫へ流れるグラデーションの面として置かれ、白いボタンが中央に抜かれています。
画面の中で最も彩度の高い部分がここに集まっているため、SNSへ進む入口は探さなくても見つかります。画面の右上には白い正方形のボタンが二つ並び、そのうち右側はカートを表すアイコンです。背景がベージュなので、白い小さな面がそのまま目印として働いています。
商品ページに見る情報の整理
一覧から入った先の商品ページも、書式をそろえることで読みやすさを保っています。写真と説明文の並びだけでなく、書き出す項目とその順番まで決められている点が特徴です。
仕様を同じ並びで書ききる
商品名には、握る側と留め具側に使われた木の種類が併記されています。説明では、一本ずつ手づくりしていること、着色をせずに木の色を生かしていること、蜜ろうで仕上げていることが述べられ、続けて素材、金具の色、長さと太さ、芯の種類といった項目が同じ順序で並びます。
どの商品でも並びが変わらないため、複数の候補を行き来しながら見比べても、探している情報がどこにあるかを覚え直す必要がありません。名前を彫る名入れについては、購入の手続きに進む前に問い合わせから相談してほしいという案内が添えられています。
使い続ける場面まで見据えた替え芯の案内
替え芯そのものも商品として一覧に並び、対応する芯の種類や太さが書き分けられています。互換性が確認できた市販品の名称まで挙げられているので、手元に届いた後で迷いにくい構成です。
買う前の魅力だけでなく、使い続ける場面まで見据えて情報を置く姿勢は、長く使う道具を扱うショップの情報設計として参考になります。
寄木のボールペンを選ぶときに見ておきたい視点
ここからは、木を貼り合わせてつくられた筆記具を選ぶときに役立つ一般的な見方を整理します。写真から読み取れる要素と、仕様として書かれている要素の両方に目を向けると、判断がしやすくなります。
樹種の組み合わせと金具の色
寄木は、色や木目の異なる木材を貼り合わせて模様をつくる技法です。ペンのように手のひらに収まる道具では、木片一つひとつの幅が細くなるぶん、組み合わせの違いが表情の差として強く出ます。
このショップに並ぶ品でも、濃い色のウォールナットやシタンを使ったものから、明るいメープルやタモを合わせたものまで幅があり、金具にはシルバーやゴールド、ブラックが用意されています。木の色と金具の色をどう合わせるかによって、落ち着いた印象にも軽やかな印象にも振れます。
方式の違いと手になじむ太さ
芯を出す仕組みには、頭を押すノック式と、本体をひねるツイスト式があります。掲載されている仕様を見ると、ノック式は長さがおよそ140mmで握る部分が太めに、ツイスト式は長さがおよそ130mmでくびれのある細身にまとめられていて、手の大きさや持ち方の好みで選び分けられます。
芯の種類や太さも方式によって違うため、書き味を大切にしたいなら、この部分まで読んでから決めると迷いが少なくなります。木の見た目で候補を絞り、仕様で確かめるという二段階の選び方が、この一覧では素直に実行できます。
素材を主役にしたショップデザインの見本として
寄木雑貨工房 irodori のネットショップは、和紙のような背景、白いカード、緑の文字という最小限の要素で画面を組み立て、余った力をすべて商品写真に向けたデザインです。装飾を足して個性を出すのではなく、条件をそろえることで素材の個性を引き出すという考え方が、一覧から商品ページまで一本の筋として通っています。
寄木の技法で木工雑貨を製作し、対面のイベントで実際に手に取ってもらう機会も設けているという背景も、写真と文章の誠実な見せ方につながっているように感じられます。素材の質感を伝えたいネットショップを考えるときの手本として、実際の画面を眺めてみてください。
