稲垣商店は、イタリアの小さな造り手から直接買い付けたワインと食材を扱うインポーターが運営するオンラインショップです。トップページを開いてまず伝わるのは、商品を売り込む圧の強さではなく、白い余白の中に写真と産地の情報を静かに並べた落ち着いた佇まいです。
この記事では、稲垣商店のサイトを配色、ファーストビュー、レイアウト、商品カードのUIといった観点から読み解きます。扱う商材の性格と画面の作り方がどのように結び付いているのかを、実際の画面から確認できる範囲で整理していきます。
白を基調にした配色が生む落ち着いたトーン
稲垣商店のデザインを一言でいえば、背景を白に振り切り、色数を絞ることで商品写真を主役に据えた設計です。まずは全体の配色と、色を使う場所の決め方から見ていきます。
背景を白に統一して写真の色を引き立てる
背景はほぼ白一色で、要素の区切りには細いグレーの罫線だけが使われています。ワインのボトルは瓶の色もラベルの意匠も1本ごとに違うため、背景に色を足さないことで、並んだときに写真そのものが色の役割を担う形になっています。
文字色も黒に近いグレーでまとめられ、見出しと本文の差は色ではなく文字の大きさと太さで付けられています。装飾を足さない分、情報量の多い一覧でも視線が散りにくくなっています。
操作できる場所だけを緑で示す
画面の中でまとまった面積の色が使われているのは、商品カードの「カートに入れる」ボタンです。明るいミントグリーンの塗りは白い背景から素直に浮き上がり、カードのどこを押せばよいのかを迷わせません。
反対に、リンクや見出しには彩度の高い色をほとんど使っていません。色を持つ要素を操作の起点だけに限定することで、押せる場所と読む場所の区別が自然に付く構造になっています。
ファーストビューを構成する三つの層
ファーストビューは、ヘッダーと横長の写真、その直下に置かれた説明文という三つの層で組み立てられています。ここでは、それぞれの層が担っている役割を順に確認します。
明朝体のロゴと機能アイコンを左右に振ったヘッダー
ヘッダーは白地で、左端に明朝体で店名が置かれています。丸みのある書体ではなく、縦画と横画の太さに差がある明朝体を選んだことで、輸入食品を扱う商店らしい落ち着きが生まれています。
右側には新規会員登録、ログイン、お気に入り、マイページ、カートが、アイコンと小さな文字ラベルの組み合わせで並びます。アイコンだけに頼らず語を添えているため、通販サイトを使い慣れていない人でも役割を取り違えにくい作りです。
文字を重ねない横長写真で産地の空気を伝える
ヘッダーの下には、石壁の前に並んだ醸造用のタンクを写した横長の写真が置かれています。ラベルの接写でも人物写真でもなく造り手の現場を選び、そこにキャッチコピーの類を一切重ねていません。
文字を載せない判断によって、この写真は「何を売っているか」ではなく「どんな造り手と付き合っているか」を伝える役目に徹しています。左右にも上下にも白い余白を残しているため、写真が主張しすぎず、視線は続く本文へ自然に落ちていきます。
写真の直下に置いた説明文で立ち位置を示す
写真のすぐ下には、どのような商品をどう扱っているのかを説明する短い文章が置かれています。造り手から直接買い付けた正規の輸入品であること、温度と湿度を管理した輸送と保管を徹底していること、1本からでも届けられることが、飾らない言葉で並びます。
さらに、飲食店から相談を受け付ける旨と、契約している酒販店が発注に使う場合の案内が続きます。一般の買い物客と業務用の利用者が同じ入口を訪れる通販サイトであることを、ファーストビューの段階で明示している点は、情報設計として参考になります。
左サイドバー型レイアウトが支える情報設計
商品数の多い通販サイトでは、探し方をどこに置くかが使い勝手を大きく左右します。稲垣商店は画面左に固定幅のサイドバーを設け、検索と分類をまとめて引き受けさせる構成を採っています。
探す手段をページの最上部に集める
サイドバーの先頭には、キーワードの入力欄、カテゴリーを選ぶプルダウン、独自の商品コードから探す入力欄、そして検索を実行するボタンが、薄いグレーの箱にまとめられています。目当ての1本が決まっている利用者は、スクロールせずにそのまま検索へ進めます。
この検索ボタンは塗りではなく、白地に細い枠線を引いた形で作られています。カートのボタンと形も色も変えることで、同じ押せる要素でも役割が違うことが見た目で伝わるようになっています。
ワインと食材を区切り見出しで束ねる
サイドバーの下側は、ワイン、食材、初めての方へという中央寄せの区切り見出しによって三つの塊に分かれています。見出しの左右に短い罫線を添える処理が使われ、リンクが縦に長く続く中でも塊の切れ目が目に入ります。
ワインの塊には造り手の一覧、地域からの検索、色からの検索が並び、食材の塊には造り手の一覧とカテゴリーからの検索が並びます。項目の右端にはプラス記号が置かれ、その下に階層が続くことが示されています。同じ商材でも「造り手から探す」「産地から探す」「色から探す」と入口を分ける考え方は、品ぞろえの幅そのものを伝える役割も果たしています。
営業日カレンダーを常設して確認の手間を省く
サイドバーの最下部には、当月と翌月の2か月分のカレンダーが置かれています。日曜と土曜を色で分け、当日を塗りつぶして示す作りで、営業日を見ながら注文の段取りを考えられます。
商品ページの中ではなくサイドバーに常時置かれているため、どのページを見ていても同じ位置で同じ情報を確認できます。実店舗の営業案内をそのまま画面に持ち込んだような、通販サイトらしい実務的な配慮です。
商品カードのUIと一覧のリズム
中央のメイン領域は、見出しと商品カードのグリッドが交互に続く構成です。ここでは、カードに載る情報の並び順と、状態の見せ方を確認します。
見出しごとに横四列のグリッドで並べる
メイン領域は「新商品」「おすすめ商品」「スペシャル商品」「ランキング」といった見出しで区切られ、その下に商品カードが横四列で並びます。塊と塊の間には細い罫線が引かれ、どこまでが同じ括りなのかが一目で分かります。
カードの幅と写真の高さがそろっているため、縦に長い一覧でも視線が一定のリズムで進みます。ボトルの写真はいずれも背景を明るく整えた状態で撮られており、種類が違っても並べたときの印象がばらつきません。
造り手の名前を先頭に置く情報の並び順
1枚のカードは、産地名を角括弧で囲んだ造り手の名前から始まります。商品名よりも先に造り手を見せる並び順は、造り手ごとの個性を軸に選ぶ買い方を想定した設計だと読み取れます。
その下に商品名が太字で続き、さらに畑や仕立てに触れた短い説明文が添えられます。説明文は読み込まなくても目に入る長さに抑えられており、カードの高さをそろえることにも役立っています。
点線の区切りと二語のタグで仕様を読み取らせる
説明文の下には点線の区切りが入り、そこから先は仕様の領域に切り替わります。赤ワインや白ワイン、ロゼ、微発泡といったタイプの表記に続けて、二つの語を組み合わせた短いタグが添えられます。
「骨格」と「果実」、「繊細」と「軽快」のように対になる語を並べる表現は、長い説明文を読まなくても味わいの方向を掴ませる工夫です。その下には品種、容量と栓の種類が同じ順序で続くため、カードをまたいだ比較がしやすくなっています。
手に入らない商品の見せ方
扱いのある商品でも在庫が尽きたものは一覧から消さず、写真の右上にグレーのバッジを重ね、ボタンをグレーに変えて押せない状態で見せています。付き合いのある造り手の顔ぶれは伝えたまま、今買えるかどうかだけを切り分ける表現です。
色を変えるだけでなくボタンの文言も切り替えているため、色の差が分かりにくい環境でも状態が伝わります。状態の表示を写真とボタンの二か所で重ねる作りは、通販サイトの見本として参考になる部分です。
読み物と会社情報が担う信頼づくり
商品一覧の下には読み物の一覧が置かれ、フッターには会社情報への導線がまとめられています。ここでは、商品以外の情報がどのように扱われているかを見ていきます。
お知らせ一覧は日付と見出しと抜粋で組む
「ショップからのお知らせ」は、左に日付、右に見出しと二行ほどの抜粋を置いた横並びのレイアウトです。1件ごとに薄い罫線で区切られ、見出しには下線が引かれてリンクであることが示されています。右下には一覧へ進む導線も添えられています。
並んでいる内容は、品種や造り手をめぐる読み物に加えて、飲食店や酒販店が発注に使う場合の説明も含まれます。買い物の案内と読み物を同じ場所に置くことで、取引先も一般の利用者も同じ一覧を追えばよい形にまとまっています。
会社概要ページで運営の考え方を示す
フッターは薄いグレーの帯で、会社概要、特定商取引に関する表記、プライバシーポリシーが横並びに置かれ、右側に所在地と電話番号が小さく添えられています。装飾を抑えた扱いで、本文の余韻を壊しません。
会社概要のページには、その土地に根ざした栽培や醸造の積み重ねを大切にしたいという考え方が文章で語られ、その下に会社の基本情報が続きます。運営するのは神奈川県川崎市高津区に拠点を置く株式会社稲垣商店で、代表者は吉田 裕介様、事業の内容はイタリアワインと食材の輸入販売、設立は2024年です。理念を先に置き、事実の一覧を後ろに回す順序も、読み手への配慮として理にかなっています。
稲垣商店のサイトから学べること
ここまで見てきたように、稲垣商店のサイトは、白い余白と細い罫線で情報を整理し、色を操作の起点だけに使い、カードの中では造り手から順に情報を積み上げる作りでした。派手な演出はありませんが、商材の性格に合わせて要素を減らす判断が全体で一貫しています。
イタリアのワインを扱うインポーターの通販サイトでは、付き合う造り手の数だけ味わいの方向が枝分かれします。ナチュラルワインを含めて造り手ごとの個性を伝えたい場合、産地や色や造り手といった複数の入口を用意し、カードの上では短いタグで方向性を示すという組み立ては、そのまま設計の参考にできます。
デザインの見本としても、扱う商材の背景を写真と文章でどう伝えるかの実例としても学べる点が多いサイトです。バローロの造り手として知られるジュゼッペ・リナルディをはじめイタリアの造り手をそろえる稲垣商店の公式サイトで、ここで触れた画面設計を実際に確かめてみてください。
