国内対象者ごとに体験の入口を分ける
体験サービス / ミニマル
J-CAT
縦書きの言葉と小さな体験写真で日本文化への姿勢を示し、国内・海外・地域向けの事業へ分ける。
設計の見どころ
冒頭は日本の文化を未来へつなぐ姿勢を短い言葉で示し、本文では国内向けOtonami、訪日客向けWabunka、地域企業向けProduceを分けている。体験という共通軸を保ちながら、利用者と相談企業の目的を混同しない情報の順序が参考になる。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
海外
DESIGN NOTES
このサイトの設計を読み解く。
情報の順序
冒頭で機械の用途を短く述べ、次に作れる三種類の飲み物を紹介する。その後に本体・コーヒー・周辺品の分類、利用者コメント、カプセル一覧が続く。新しい機械の名称より、何が飲めるかを先に説明してから製品体系へ進む順序になっている。
視覚的な優先順位
動画の上に左寄せの白い大見出しと明るい購入ボタンを置き、文字を読む領域を左上へまとめている。ナビゲーションは細い行として上部に残る。動きのある背景と対照的に見出しの配置は安定しており、機械の用途と次の操作を同時に確認できる。
写真と商品の伝え方
初期画面の映像には機械と操作する手元が見え、物の外観だけでなく利用場面を伝える。DOM上では飲み物ごとの容量と特徴、カプセルごとの焙煎度や味の説明も分かれている。映像が興味を作り、選択に必要な比較情報は文字で担う役割分担だ。
行動への導線
本体購入への入口を冒頭と飲み物の説明の後に繰り返し、コーヒー側では焙煎度や単発・定期購入の選択肢を設けている。本体を検討する人と補充品を探す既存客の目的を分離する構成。試用条件などはサイトの表示を観察しただけで、適用可否を検証してはいない。
日本の事業に取り入れる条件
専用の消耗品を使う機器や家庭向け器具では、出来上がるもの、使い方、本体、補充品の順に整理する方法が使える。既存客が毎回長い説明を読む必要がないよう、補充品には直接進める入口を用意する。日本語では互換性や必要な設置条件も早めに示したい。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
機器の技術名称より、作れるものを先に見せる。新規客には本体の説明、既存客には補充品という二つの経路をナビゲーションで分けておく。
そのまま真似する前に
動画を主役にすると通信状況によって第一印象が変わる。静止画でも用途が分かる代替表示を用意し、抽出性能や試用保証は検証・条件確認を伴う説明にする。
次に見ておきたい参考
一覧へ →国内海外The Cupping Room
飲食 / ミニマル
小さなカップと余白で店名を覚えさせる
飲食 / ミニマル
The Cupping Room
カップの小さな印と広い余白から始め、茶色とクリーム色で街のカフェの親しみを伝える。
設計の見どころ
冒頭はクリーム色の広い余白に、湯気のあるカップの小さな印と店名だけを中央に置く。上部のナビと予約ボタンは控えめに配置され、店名の周辺を静かに保つ。大きな料理写真がなくても、喫茶の用途と落ち着いた調子を短い要素で示せる例になっている。
詳しい解説を読む →公式サイトを見る ↗海外Rafael Derolez
デザイン / ミニマル
細い自己紹介欄と大きな縦長画像を分ける
デザイン / ミニマル
Rafael Derolez
左に自己紹介と連絡先、右に縦長の写真や画面を置くデザインエンジニアの一画面。
設計の見どころ
確認した画面では左側の細い欄に自己紹介がまとまり、右側の広い領域に縦長の画像が並ぶ。長いページを読み進めなくても、人となりと視覚的な作例を同時に見られる。情報をたくさん積むより、一画面の中で文章と画像の役割を明確に分けている。
詳しい解説を読む →公式サイトを見る ↗