「AKEBONO」は、自然を大切にする生産者の食品を紹介する通販サイトです。画面を開いてまず目に入るのは、商品の写真ではなく、白い余白の中に静かに置かれた短い文章です。売り込みよりも考え方を先に伝える構成になっていて、Webデザインの見本として学べる点が多くあります。
この記事では、AKEBONOのファーストビュー、写真の使い方、配色、情報設計を、実際の画面をもとに読み解きます。クラフトコーラのような嗜好品を扱うサイトで、商品そのものより背景にある物語を伝えたい場合に、参考になる作りです。
言葉から始まるファーストビューが世界観を決めています
結論から述べると、このサイトのファーストビューは、写真で驚かせるのではなく言葉で立ち止まらせる方向に振り切っています。大きなスライドや帯状のバナーを置かず、白い画面に見出しと本文だけを配置しているためです。ここでは、その導入部を二つの角度から見ていきます。
画像を置かずに見出しと本文だけで始めています
ヘッダーのすぐ下には広い余白が取られ、その中央に「AKEBONOとは」という見出しが置かれています。続く文章では、どのような考えを持つ生産者から商品を集めているのかが説明されています。土づくりの状態や作物の栄養、まわりの生きものへの目配りを事前に確かめているという内容です。
商品の写真は少しスクロールしてから現れるため、訪れた人に最初に届くのは店の考え方になります。ECサイトでは商品を先に見せる作りが一般的ですので、価値観を先に置く構成は、共感を入り口にしたいブランドならではの判断だと言えます。
中央揃えと改行が読みのリズムをつくっています
本文は中央揃えで、意味の切れ目ごとに改行が入れられています。一行あたりの文字数は画面の幅に対してかなり抑えられていて、左右には広い余白が残ります。
段落の間にも空きが取られ、文章は四つのまとまりに分かれています。詩の一節のような見え方になり、説明が続いても圧迫感が出ません。行頭が揃わない中央揃えをあえて選んでいる点に、細かな読みやすさよりも雰囲気を優先した意図が表れています。
商品セクションは写真のトーンで語っています
導入の文章を過ぎると「注目商品」の並びが現れます。ここでは写真の選び方とカードの組み立て方に、それぞれ別の役割が与えられています。順番に見ていきます。
二種類の商品写真がそれぞれの役割を担っています
前半のカードには、ボトルから琥珀色の液体をグラスへ注ぐ場面が使われています。氷の入ったグラス、木のテーブル、やわらかいベージュの壁が写り込み、口にする直前の一場面が切り取られています。
後半のカードは、手に持ったボトルを深い緑のぼけた背景で捉えた写真です。同じ商品でも、こちらは原料の背景にある森を思わせる色調にまとまっています。飲む場面と素材の世界という二つの見せ方を並べることで、一つの商品を多面的に伝えています。
枠線を使わないカードが写真に視線を集めています
それぞれのカードは、写真の下に商品名を置くだけの簡潔な作りです。枠線も影も付けず、白い背景に写真とテキストが直接並ぶため、視線は自然に写真へ集まります。
前半の三点と後半の三点では写真の縦横比が異なり、後半のほうが高さを大きく取っています。そのため文字の始まる位置に段差が生まれ、同じ列の中でも後半の商品が目に留まりやすくなっています。
「こだわりから探す」は価値観から商品へ導いています
このサイトの情報設計でもっとも特徴的なのが、商品の種類ではなく価値観から入り口を分けている点です。横一列に四枚のカードが並び、それぞれに写真とラベルが与えられています。ラベルの右には矢印が添えられ、その先にページが続くことが記号だけで示されています。
抽象的な言葉を写真が翻訳しています
並んでいるのは「環境再生型農業」「動物福祉」「文化の保全」「循環型プロダクト」の四つです。どれも文字だけでは像を結びにくい言葉ですが、一枚ずつ写真が添えられることで輪郭を持ちます。
草が勢いよく茂る畑、牧草地でこちらを向く羊、野を焼く炎とそれを見守る人たち、青く編まれたかごが、それぞれのラベルに割り当てられています。四枚は色みも被写体も大きく異なるため、横に並べたときにリズムが生まれ、単調な一覧になっていません。
画像の上に文字を重ねない設計になっています
ラベルは画像の中ではなく、画像の下に置かれています。写真の明るさに左右されずに文字が読めるうえ、表示の幅が変わって写真の見え方が変わっても、文字が隠れる心配がありません。
四枚の画像は高さが揃えられているため、ラベルの位置も一直線に並びます。写真の比率が揃っていなかった商品カードと比べると、こちらは整列を優先した作りになっています。
白を主役にした配色が写真の色を引き立てています
配色の考え方は徹底しています。背景は白、文字は黒に近いグレーで、装飾のための色面はほとんど使われていません。彩度の高い色は、写真とフッターにある一つのボタンに限られています。
ページの色は写真の中の色で決まっています
色数を絞った結果、写真に写っている色がそのままページの印象を決めます。琥珀色の飲みもの、深い緑の背景、羊の白、炎の橙、かごの青が、白い紙の上に置かれたように見えます。
ブランドの色を決めて画面に塗り重ねるのではなく、扱う商品と生産の現場が持つ色をそのまま見せる考え方です。素材や産地を強みにするサイトであれば、まねしやすい方針だと思います。
画面いっぱいの風景写真が場面を切り替えています
商品と入り口の紹介が終わったあと、左右の余白を取り払った横長の風景写真が現れます。それまで整然と並んでいたグリッドが一度途切れ、ページの空気が入れ替わります。
写っているのは、地平の近くにある太陽と、逆光で輪郭だけになった林や草原です。空はオレンジから緑がかった色へと移り変わり、サイト名の響きと重なる情景になっています。文字を載せずに写真だけで見せている点が、読み終えたあとの余韻を残します。
ヘッダーとフッターが回遊のしやすさを支えています
ページ全体は、考え方、商品、価値観の入り口、風景写真、機能という順番で構成されています。読み進めるほど具体的な情報から離れていく流れになっていて、最後まで見た人がブランドの印象を持ち帰れる並びです。ここでは上下の帯に置かれた要素を確認します。
ヘッダーは現在地が分かるように整理されています
ヘッダーは白い背景で、左にロゴ、その右にホーム、商品一覧、販売者紹介、私たちについて、お問い合わせが並びます。開いているページの項目には下線が引かれ、いま自分がどこにいるのかがひと目で分かります。
右端には検索、アカウント、カートのアイコンが細い線画で置かれています。文字を使わず記号だけで機能を示すことで、ヘッダーの情報量が抑えられています。ナビゲーションに「販売者紹介」が並んでいる点にも、つくり手を主役に置く方針が表れています。
フッターに機能と表記が集約されています
フッターは細い罫線で二段に分かれています。上段の左にはメールで案内を受け取るための入力欄と送信の矢印が置かれ、右端にはショップをフォローするための紫色のボタンが配置されています。画面の中で彩度の高い色が使われている数少ない場所です。
下段には決済ブランドのアイコンが中央に一列で並び、その下に運営の表記とポリシー類へのリンクが小さく添えられています。派手さはありませんが、購入の前に確かめたい情報が同じ場所にまとまっています。
森のコーラの背景とつくり手の見せ方を確認します
デザインの静かさを支えているのは、扱う商品そのものが持つ背景です。サイトで紹介されているのは「森のコーラ」というスパイスシロップで、商品ページにはその成り立ちが丁寧に書かれています。
原料の背景にある物語が語られています
森を守りたいという思いからインドネシアへ渡り、同じ志で活動する現地のNGOと出会って生まれた商品だと説明されています。森をつくる農法と呼ばれるアグロフォレストリーで育った香辛料を輸入し、原料に使っているとのことです。
ほかの原料には、姫路市の山あいで採れた有機の柚子果汁と、同じ市内で手づくりされている甘酒が使われています。カルダモンやシナモン、クローブ、こしょうといったスパイスに、きび砂糖の甘みを合わせた構成です。
商品ページには基本の情報が並んでいます
商品ページには、内容量、原材料、賞味期限、保存の方法、飲み方が続けて記されています。炭酸で割ればクラフトコーラとして、豆乳や牛乳で割ればチャイのような味わいとして楽しめると案内されています。
無添加、白砂糖不使用、ノンカフェインという表記も添えられています。五倍から六倍に薄めて味わう目安まで書かれているため、初めて手に取る人でも迷いにくい構成です。ボトルには大小二つのサイズがあり、まとまった本数のセットも用意されています。
販売者紹介がつくり手への入り口になっています
ナビゲーションの「販売者紹介」からは、出品している生産者の一覧が見られます。にこにこ農園や阿蘇さとう農園といった名前が並び、森のコーラにはelfという販売者名が添えられています。
商品からだけでなく、つくり手からもたどれる入り口を持たせている点は、生産者を主役にするという方針と重なります。サイトを運営しているのはNEO-Commons株式会社で、東京都世田谷区に所在地を置いています。
AKEBONOのデザインから持ち帰れる要点をまとめます
AKEBONOのサイトは、白い余白、中央揃えの文章、写真のトーンという三つで世界観を組み立てています。装飾を足すのではなく要素を減らし、写真と言葉を際立たせる考え方は、素材や背景を伝えたいブランドのサイトづくりにそのまま応用できます。
商品を並べる前に考え方を語り、その考え方から商品への入り口を作っています。この順番によって、読み手には「なぜこの商品なのか」が先に届きます。ECサイトのデザインを検討するときは、情報の並び順そのものが体験を左右する例として参考になります。
余白の取り方や写真の色みは、実際の画面で見るのがいちばん伝わります。クラフトコーラをギフトに選ぶなら、AKEBONOの公式サイトをご覧ください。
