tea comfy の公式サイトは、紅茶という商材が持つ静かな高級感を写真と余白で伝えながら、オンラインショップとして必要な導線をきちんと積み上げたデザインになっています。装飾を足すのではなく、黒と白とグレーで画面を整理し、色の情報を写真だけに集めた設計が特徴です。
この記事では、東京都渋谷区に拠点を置く紅茶ブランドのオンラインショップである tea comfy を、Webデザインの見本という視点から読み解きます。ファーストビューの組み立て方、セクションの並び順、商品カードの作り、画面に固定されたUIまで、キャプチャで実際に確認できる範囲を順番に見ていきます。
tea comfy の第一印象とサイトの位置づけ
画面を開いて最初に伝わるのは、紅茶そのものを主役にした落ち着いた印象です。tea comfy はセイロンティーを扱うティーブランドのオンラインショップで、運営は有限会社マコーインクが担っています。所在地は東京都渋谷区神宮前で、フッターから辿れるページに記載があります。
サイト内では、1931年に農園を継承して以来、家族経営という形で紅茶づくりを続けてきたことが説明されています。栽培から手摘み、製造、加工までを自社で一貫して行う体制を敷いていること、専任のチームが品質を管理していることにも触れられています。さらに、カフェやレストラン、ホテル、小売店といった事業者に向けた卸売の案内ページも用意されています。ここからは、こうした背景を画面へどう落とし込んでいるかを見ていきます。
ファーストビューの組み立て
ページ最上部は黒帯のヘッダーで、左に白い小文字のロゴタイプ、右にメニューを開くハンバーガーアイコンが置かれています。その直下には淡いグレーの帯が続き、商品カテゴリーへのリンクが横一列に並びます。ギフト、茶葉、ティーバッグ、オーガニック、季節の商品といった入口が、スクロールを始める前から見えている状態です。
ヒーローエリアには、ガラスのカップを手にした人物の写真が大きく敷かれ、白い文字のコピーが重なります。文字は字間を広く取った細めの書体で組まれ、写真の柔らかい光となじむように調整されています。右側にはティーポットから紅茶を注ぐカップの写真が別のパネルとして重ねられ、左右で高さも幅もそろわない非対称の構成になっています。
このパネルの下には前後に送る矢印ボタンがあり、右下には01・02・03という番号のインジケーターが横罫とともに置かれています。3枚のビジュアルが切り替わることが、番号の濃淡から読み取れます。画面左下にはInstagramへ誘導するパネルが重なっており、右上の×印で閉じられる作りです。
色とフォントのトーン＆マナー
配色はモノトーンが基調です。ヘッダーとフッターは黒、本文まわりは白と淡いグレーで構成され、彩度のある色は紅茶の琥珀色、茶葉の深い緑、贈り物の写真に写る赤い箱など、写真の中だけに現れます。文字色も黒に近いグレーでそろえられているため、写真の色が自然に際立ちます。
書体の使い分けも一貫しています。CATEGORY、PICK UP、RANKING、ABOUT US、BLOG というセクション見出しは、線の強弱がはっきりしたセリフ体の英字大文字で組まれ、その右に小さな日本語表記が添えられます。和文は線の細いゴシック体でそろえられ、英字が装飾を、和文が可読性を受け持つ役割分担になっています。VIEW MORE のリンクも同じセリフ体で組まれ、細い罫線や記号を添えた控えめな見せ方でそろえられています。
ABOUT US のセクションだけは背景が淡いブルーグレーに変わり、白い画面が続くページの中で区切りとして働きます。色数を増やさずに、面の明度差だけでセクションの切り替わりを伝える手法です。
縦スクロールで完結する情報設計
トップページは、上から順に読み進めるだけで買い物とブランド理解の両方に届く並びになっています。左右に分岐させず、1本の縦軸へ情報を積む設計です。ここではセクションの順番と、それぞれの見せ方を確認します。
セクションの並び順が示す優先順位
ファーストビューの次に置かれているのはカテゴリーの一覧で、続いて特集アイテム、ランキング、ブランド紹介、ブログという順に展開します。商品の入口を先に出し、ブランドの物語を後半へ配置する並びです。目的が決まっている読者はすぐカテゴリーへ進めますし、初めて訪れた読者は下へ読み進むうちにブランドの背景を知る形になります。
セクション同士の間隔は広く取られ、見出しと最初のコンテンツの間にも余白があります。要素を詰め込まないことで、写真1枚あたりの印象が強く残ります。
カテゴリーと特集アイテムの見せ方
カテゴリーの一覧は3カラムの写真グリッドです。リボンを掛けた贈り物の箱、木のスプーンにのせた茶葉、カップに入ったティーバッグと、名称を読む前に中身が想像できる写真が選ばれています。写真の下にカテゴリー名を小さく置き、中央下部には VIEW MORE とプラス記号を組み合わせたリンクを配置して、一覧へ広げられるようにしています。
特集アイテムの区画は左右2分割です。左に商品ビジュアルを大きく置き、右に商品名、短い見出し、説明文を縦に並べます。説明文の末尾は省略記号で切られ、続きは右下の VIEW MORE から辿る流れです。こちらにも01・02・03のインジケーターと前後の矢印があり、特集が複数用意されていることが分かります。左の写真を大きく取っているぶん、右のテキスト列との間に生まれる余白が読みやすさを支えています。
ランキング一覧のレイアウト
ランキングの区画は、左に細いサイドカラム、右に商品グリッドという2カラムです。サイドカラムには商品カテゴリーへのリンクが縦に並び、その下にInstagramへの誘導をはじめとする縦長のバナーが続きます。右側は4カラムのカードが3段に積まれ、上位から順に読める並びです。
各カードのサムネイルは淡いグレーの背景でそろえられ、黒い円筒形のパッケージが並んでも輪郭が沈まないように配慮されています。サムネイルの右上には黒い正方形のバッジが重なり、白抜きの数字で順位を示します。四角い面をそのまま重ねる置き方が、写真だけでは平坦になりがちなグリッドに視線の起点をつくっています。
画面から読み取れるUIとUXの作り込み
見た目の統一だけでなく、操作に関わる部分にも共通のルールが敷かれています。ここでは画面の端に置かれたUI、カード内の情報の並べ方、ブランド紹介の組み方という3点を取り上げます。
画面の右端に並ぶアイコン列
画面の右端には黒い縦長のバーが置かれ、ログインを示す矢印、吹き出し、虫めがね、ハート、カートのアイコンが等間隔で並びます。線だけで描かれた白いアイコンなので、黒地の上に置かれていても主張しすぎません。
そのバーのすぐ下には、薄いグレーの四角に上向きの山形を入れたボタンが続きます。縦に長いトップページを読み進めても、先頭へ戻る操作が視界の端に控えている形です。ヘッダーのハンバーガーアイコンと合わせて、本文を読む流れを妨げない位置に操作系がまとめられています。
商品カードの情報の粒度
ランキングのカードは、サムネイル、商品名、商品情報、操作ボタンという順で上から積まれています。商品名の右にはハートのアイコンが添えられ、名称が2行に折り返してもアイコンの位置が動かないよう右端でそろえられています。
カードの下部には、カートへ加えるためのボタンがカードの横幅いっぱいに置かれています。淡いグレーの面に濃いグレーの文字という控えめな配色なので、10枚のカードが並んでもボタンだけが浮き上がりません。写真とテキストの間隔もカードごとに同じで、視線が横方向へまっすぐ流れます。
ブランドを語る区画の構成
ブランド紹介の区画は、左に大きな写真、右にテキストという左右分割です。花柄のカップへ紅茶が注がれる瞬間を捉えた写真が画面の左端まで伸び、背景の淡いブルーグレーと合わさって、他のセクションとは違う空気をつくっています。
右側は、英字の見出しと日本語の補足、その下に1行の見出しと3つの段落という構成です。受け継がれてきた歴史、自社で一貫して行う生産体制、届けたい体験という順に話題が移り、段落ごとに1行分の空きが入ります。読み終えた先には VIEW MORE のリンクがあり、詳しい紹介ページへ続きます。ブログの区画も同じ書式の見出しと VIEW MORE で組まれており、セクション同士の作法がそろっています。
フッターは黒地に切り替わり、ロゴタイプの右にプライバシーポリシーや特定商取引法に基づく表記、ショッピングガイド、お問い合わせ、卸売・法人のお客様へという各ページへのリンクが並びます。右端には著作権表示が置かれ、事務的な情報を最後にまとめる構成です。
紅茶のオンラインショップづくりに応用できる視点
ここまで見てきた作り方には、紅茶専門店のオンラインショップ全般に通じる部分があります。ここからは、無農薬やオーガニックの茶葉を通販で探す読者、贈り物を探す読者の行動を踏まえて、デザイン面で押さえておきたい考え方を一般的な観点から整理します。
写真が味の情報を肩代わりする
紅茶は、香りや味を画面越しに伝えられない商材です。だからこそ、茶葉の粒立ちや水色、注ぐ動きまで分かる写真の質が、そのまま説得力になります。tea comfy のトップページでも、茶葉そのもの、抽出したカップ、注ぐ瞬間という3種類の見せ方が使い分けられており、同じ紅茶でも異なる魅力が伝わるようになっています。
写真を主役にするなら、周囲の要素を減らすことが前提になります。文字数を抑え、罫線や囲みを増やさず、余白で写真を囲むと、1枚あたりの印象が強くなります。
贈り物の需要と専門店らしさを両立させる
オーガニックの紅茶をギフトとして探す読者は、自分用に選ぶ読者とは見たい情報が違います。贈り物なら見た目や包装、贈る相手に合うかどうかが判断材料になりますし、自分用なら茶葉の種類や淹れ方が気になります。カテゴリーの入口を用途と形状の両面から用意しておくと、どちらの読者も迷わずに進めます。
高級感を打ち出したい場合は、要素を足すよりも引くほうが効果を持ちます。モノトーンの画面、セリフ体の英字見出し、広い余白という組み合わせは、紅茶のギフトを上質な贈り物として見せたいサイトが参考にしやすい方法です。
作り手の情報は後半に置く
産地や生産体制の説明は、読み手の関心が高まったあとのほうが届きます。商品を先に見せ、ブランドの背景を後半へ配置する並びは、通販サイトで信頼を積み上げるうえで理にかなっています。事業者向けの案内を別ページへ切り出しておく方法も、一般の買い物客の導線を邪魔しない工夫として参考になります。
tea comfy のサイトから学べること
tea comfy のサイトは、写真と余白でブランドの世界観を伝えながら、カテゴリー、特集、ランキングという3種類の入口を用意し、最後にブランドの背景で締めるという流れが最後まで崩れません。モノトーンで整えた画面に写真の色だけを乗せるという方針が、ヘッダーからフッターまで一貫しています。
画面端のアイコン列や先頭へ戻るボタン、カード内の要素の並べ方など、操作に関わる部分にも同じ丁寧さが行き届いています。落ち着いた雰囲気を保ちながら買い物のしやすさも確保したいサイトにとって、参考にしやすい作りです。
実際の動きや写真の質感は、画面を開いて確かめるほうが早く伝わります。東京で紅茶の卸にも対応する tea comfy の公式サイトで、セクションの流れや商品の並べ方をご覧ください。
