国内室内干しを緑の風景に溶け込ませる
生活雑貨 / ミニマル
TOOLOOS
室内干しを暮らしの風景として見せ、三つの製品へ進める生活用品のブランドサイト。
設計の見どころ
冒頭は淡い緑の空間にバーと衣服を置き、室内干し用品を生活の一部として見せる。白い短文と大きなブランド名だけを重ね、機能説明を詰め込まない。生活感を消し去るのでなく、使ったままの姿が部屋になじむことを写真の主題にしている。
詳しい解説を読む →公式サイトを見る ↗← サイト事例に戻る
01 02 03 04 05 国内 
海外
国内
DESIGN NOTES
このサイトの設計を読み解く。
三つのグラスで仕掛けを実演する
冒頭の写真は同じ形のグラスに異なる飲み物を注ぎ、文字の見え方が変わる様子を並べる。単品の美しい写真だけでなく、製品が持つ仕掛けを一枚の比較として見せている。機能が小さな変化にある生活雑貨では、使う前後や条件違いを撮る方法が参考になる。
罫線を使って情報の役割を分ける
画面全体を細い黒の罫線で区切り、ロゴ、ナビ、写真、ブランドの説明をそれぞれの区画に置く。商品写真が大きくても情報の境界が見えるため、編集された展示のように読める。グリッドを装飾としてではなく、説明の単位を揃えるために使っている。
一商品につき一つの驚きを言う
公開本文の各商品には、最後の一本まで取りやすい皿、飲み物で文字が変わるグラスなど短い機能説明がある。新しい名前を覚える前に、その製品が何を変えるかを理解できる。シリーズの世界観を語りつつ、商品ごとにひとつの具体的な利点を置く作りだ。
詳細と商品への入口を並べる
商品紹介の左側には名前、短文、評価表示とボタンがあり、右側を大きな写真が占める。VIEW DETAILSとSEE OBJECTの入口を並べて、説明を読みたい人と商品を見たい人の行動を受け止める。リンク先の使い分けは自社で応用する際に日本語でも明確にしたい。
価格一覧で買う判断へ戻す
下部にはObjects Listとして商品名と価格の一覧がある。大きな写真と考え方を読む体験の後に、具体的な購入候補を比較できる面へ戻している。デザイン性の高い商品でも価格を探し回らせず、一覧で予算と好みを照らし合わせられる構成が参考になる。
APPLY TO YOUR PROJECT
自分の制作に取り入れるなら
商品の小さな仕掛けは、条件を変えた比較写真で実演する。ブランドの説明と一商品一機能の短文を分け、最後には価格を含む一覧で購入の判断へ戻す。
そのまま真似する前に
細かい罫線と小さな文字は画面が狭いと密度が高くなる。PCの区画をそのまま縮めず、商品写真・機能・価格・購入入口の優先順位を小画面で組み直したい。
次に見ておきたい参考
一覧へ →国内海外Tori by TalkJS
IT / グリッド
導入手順と人への引き継ぎを示す
IT / グリッド
Tori by TalkJS
青い設計図のような区画で、問い合わせ対応AIの導入手順と人への引き継ぎを説明する。
設計の見どころ
冒頭で問い合わせに答えるAIという用途を示し、何をする製品か、どの基盤で動くか、導入の手順へ進む。URLを接続し、内容を学ばせ、設置するという三段階を見せることで、抽象的なAIの能力よりも利用開始までの道筋を先に理解させている。
詳しい解説を読む →公式サイトを見る ↗国内一杯の器をブランドの象徴にする
飲食 / タイポグラフィ
MENSHO
器の立体表現から世界各地の店舗と一杯のメニューへつなぐ、ラーメンブランドのサイト。
設計の見どころ
PC冒頭では黒い背景に白い線で描かれた大きな器が現れ、MENSHOの文字と共にブランドを印象づける。料理写真を並べる前に器そのものを象徴として扱う構成で、一般的な飲食店のメニュー一覧とは異なる始まり方になっている。
詳しい解説を読む →公式サイトを見る ↗