CAFINEのオンラインストアは、白い余白と大きな写真の対比だけで世界観を伝える、装飾を削ぎ落としたデザインです。画面を開いた直後に商品の説明が並ぶ構成ではなく、風景や人物の写真と短い英文コピーが順番に現れる、静かな見せ方が選ばれています。
ここでは、オーガニックのフェイスオイルを扱うCAFINEのサイトを、Webデザインの見本として読み解きます。配色、ファーストビュー、写真の扱い、余白、タイポグラフィ、視線誘導、情報設計という観点から、画面がどのような意図で組み立てられているのかを順番に確認していきます。
写真に語らせるトップページの設計
CAFINEのトップページは、ブランドの空気感を写真で伝え、文字は最小限に絞る方針で組み立てられています。ページの背景は白のまま保たれ、色の情報はほぼすべて写真が担う形になっています。ここでは、最初に目に入るファーストビューと、その上に載るヘッダーの作りを順に見ていきます。
左右で性格を分けた2分割のファーストビュー
ファーストビューは画面を左右に二分し、それぞれ別の写真を敷いた構成です。左側は水辺で顔を上に向けた人物の写真、右側は枯れ草の広がる草原と雲の多い空の写真で、人と自然という2つのモチーフを並べています。
右側の写真には、白抜きの英文コピーが右寄せに重ねられています。文字は写真の明るい部分を避けた位置に置かれており、読みにくさを抑えながら、写真の主役を邪魔しない大きさに留められています。ボタンやバナーを重ねていない点も、この画面の静けさを保つ要素になっています。
ヘッダーとグローバルナビゲーションの作り
ページ最上部には薄いグレーの細い帯があり、来訪者へ向けた短い英文が中央に置かれています。その下の白いヘッダーには、字間を広く取ったアルファベットのロゴが左端に、検索・アカウント・カートを表す線画のアイコンが右端に配置されています。
ロゴの下の行にはグローバルナビゲーションが左揃えで並び、いま開いているページの項目にだけ下線が引かれています。アイコンもナビゲーションも黒に近い一色で統一されているため、写真の色が濁らず、操作できる場所だけが控えめに主張する形になっています。
配色とトーン＆マナーの考え方
CAFINEのサイトは、画面を構成する色と写真の色をはっきり役割分担させています。ここでは、UI側の色数をどこまで絞っているのか、そして写真の並べ方でどのように単調さを避けているのかを見ていきます。
無彩色のUIとアースカラーの写真
背景は白、見出しは黒に近いチャコール、補足の文章はやや薄いグレーという三段階で、UI側の色数は徹底して絞られています。一方で写真は砂や枯れ草、木肌を思わせる暖かみのある色が中心で、ブランドカラーの役割を写真そのものが担っています。
この割り切りによって、写真を差し替えてもサイト全体の印象が崩れにくい構造になっています。色をあしらいではなく写真に持たせる設計は、更新の手間を抑えたいオンラインストアにとって現実的な選択でもあります。
モノトーンの写真を挟んで流れに緩急をつける
縦に並ぶ大きな写真のうち、中央の一枚だけが灰色に寄ったモノトーンで、壁に落ちた植物の影が写っています。前後の写真が暖色寄りであるため、この一枚が挟まることでスクロール中の色の流れに緩急が生まれています。
いずれの写真も商品の使用場面ではなく、光と影、砂、草といった自然のモチーフでそろえられています。素材の考え方を言葉で説明する前に、視覚でブランドの立ち位置を伝えようとする意図が読み取れます。
タイポグラフィと二つの言語の使い分け
このサイトの文字まわりは、英語と日本語をどう並べるかという設計が中心になっています。書体や装飾で強弱をつけるのではなく、大きさと余白の差で読む順番を示している点が特徴です。
英語の見出しに日本語の短い一文を添える
スクロールしていくと、細身のサンセリフ体で組まれた英語の見出しが中央に現れ、その真下に一回り小さな日本語の一文が添えられる形が繰り返されます。英語で世界観を示し、日本語で意味を補うという役割分担が明確です。
日本語の行は文字サイズを抑え、色もグレー寄りにしてあるため、英語の見出しとの主従関係が視覚的に伝わります。同じ内容を同じ強さで二度見せない配慮が、画面の情報量を増やさずに済ませています。
文字の大きさと余白だけで階層をつくる
見出しには背景色や罫線をほとんど使わず、文字の大きさと前後の余白の差だけで階層を表しています。写真の下に置かれた説明文はかなり小さく、行間を広めに取ることで、視線が自然に次の見出しへ流れるようになっています。
装飾で強弱をつける代わりに余白で語る方法は、要素が増えると崩れやすい反面、掲載点数を絞ったサイトとは相性のよい手法です。扱う商品が限られているCAFINEのようなストアでは、有効な選択だといえます。
スクロールに沿った視線誘導とレイアウト
トップページは上から下へ読み進めることを前提に、要素の並びに一定のリズムを持たせています。ここでは、繰り返しのパターンと、その流れをあえて崩している商品セクションの扱いを取り上げます。
全幅の写真と中央寄せのテキストを交互に置く
トップページは、中央寄せの見出し、画面幅いっぱいに広がる写真、その下の小さなキャプションという組み合わせを繰り返す構成です。同じリズムが続くため、読者は次に何が来るかを予測しながらスクロールできます。
写真は左右に余白を取らず画面の端まで広げ、テキストの部分は逆に大きく余白を取っています。この幅の対比が視線の休憩点をつくり、縦に長いページでも疲れにくい流れになっています。
商品セクションだけ配置のきまりを変える
ページ下部の商品セクションでは、それまで中央に置かれていた見出しが左揃えに変わります。ロゴやナビゲーションと同じ左端の位置にそろえられているため、世界観を見せる区間から商品を選ぶ区間へ切り替わったことが、読まなくても伝わります。
商品は中央に大きな写真のカードとして置かれ、その下に商品名が小さく続きます。カードの中に説明文を詰め込まず写真の面積を優先しているため、一覧というより一点を展示するような見え方になっています。やわらかな光のなかで砂の上に置かれたスポイト付きのガラス瓶という写真も、トップページ全体の色調とそろえられています。
情報設計から読み取れる考え方
デザインの静けさを保ちながら必要な情報を届けるために、このサイトはページの分け方を工夫しています。ここでは、ナビゲーションの区切り方と、言語の並べ方、そしてページ末尾の締め方を確認します。
目的ごとにページを分ける構成
グローバルナビゲーションは、商品、ブランドの背景、成分、方針、よくある質問、問い合わせという単位でページが分かれています。一つのページに情報を積み上げるのではなく、目的別に入口を用意する考え方です。
- PRODUCTSは、商品そのものと使い方の手順を確認するページです。
- STORYは、開発のいきさつとブランドの考え方を伝えるページです。
- COMPONENTは、配合されている成分名と、その役割を対にして並べたページです。
- PROMISEは、原材料や製造にあたって守る方針を項目ごとに示したページです。
- FAQは、使い始めの注意点や香りの傾向、保管や使用期限といった疑問に答えるページです。
- CONTACTは、名前やメールアドレスなどを記入する問い合わせフォームを置いたページです。
ラベルはすべて英語ですが、各ページの先頭には日本語の見出しが添えられているため、開いた直後に内容を取り違えにくくなっています。英語表記でトーンを保ちながら、わかりやすさを日本語で補う作りです。
日本語と英語を一枚のページに収める二言語構成
下層ページは、日本語の説明を先に置き、区切り線を挟んで同じ内容の英語を続ける形で統一されています。言語切り替えの仕組みを設ける代わりに、一枚のページの中に両方を収める方法を採っています。
ページは縦に長くなりますが、翻訳の抜けが起きにくく、切り替えの操作で迷う心配もありません。取り扱う商品が限られ、更新の頻度も高くないサイトでは、運用しやすい割り切りだといえます。
フッターは二列に整理されている
フッターは、ブランドに関する案内の列と、取引条件や規約に関する案内の列という二列だけで構成されています。リンクの数を絞っているため、ページの末尾まで来た読者が迷いにくくなっています。
その下には決済手段を示すアイコンが中央にまとめられ、最下部に著作権の表記が置かれています。ここもグレー基調で、本文の邪魔をしない明るさに抑えられています。なお、このストアはShopifyを土台に構築されていることが、同じ場所の表記からわかります。
オーガニックのフェイスオイルを扱うサイトづくりで参考になる点
ここからは、CAFINEのサイトを離れて、同じような商材を扱うサイトを考えるときの一般的な視点を整理します。フェイスオイルは、読み手が何を手がかりに探すかが人によって大きく変わる商材です。
入口が分かれる商材だという前提に立つ
フェイスオイルは、オーガニックという素材の方針から選ぶ人もいれば、乾燥肌のように肌の状態を手がかりに探す人、美容オイルとしての使い勝手を比べたい人もいます。検索の入口が分かれる商材では、どの入口から来ても同じ理解にたどり着ける構成が求められます。
その点でCAFINEのサイトは、世界観を伝えるトップページと、成分や方針をじっくり確かめられる下層ページを切り分けることで、この違いに応えています。眺めたい人にも読み込みたい人にも、それぞれの深さで情報が用意されています。
読み手が気にする点に先回りして置き場所を決める
肌に直接使うものを選ぶとき、読み手は使い方の手順や保管の仕方、香りの傾向といった細かな点を気にします。産後のスキンケアをオールインワンで簡単に済ませたい人のように、暮らしの事情から選び方が決まることも少なくありません。
そうした疑問をよくある質問として一か所にまとめ、成分の一覧は別のページに分けておくと、読み手は必要な情報だけを取りに行けます。画面の静けさを保ったまま情報量を確保する方法として、参考になる置き方です。
まとめ｜CAFINEのサイトから学べるデザインの要点
CAFINEのオンラインストアは、白い余白と全幅の写真という二つの要素で構成を組み立て、色や装飾に頼らずにブランドの姿勢を伝えています。UIは無彩色に徹し、色は写真に任せるという役割分担が、サイト全体の統一感を支えています。
情報設計の面でも、世界観を見せる区間と、成分や方針を確かめる区間がはっきり分かれており、読み手は自分の関心に合わせて深さを選べます。商品数を絞って丁寧に見せたいブランドのサイトにとって、学べる点の多い作りだといえます。
このオンラインストアを運営しているのは株式会社Fronkで、東京都渋谷区に拠点を置いています。写真の質感や余白の取り方は実際の画面で見たほうが伝わりますので、妊娠中のスキンケアをオーガニックの観点から考えている方も、CAFINEの公式オンラインストアでデザインをご覧ください。
