Café ・ Web Design
このような、カフェのホームページを作りました。
題材は、東京・中野の路地にある淡色のパティスリー＆カフェ「mute（ミュート）」。架空のお店です。白とグレーの無機質、韓国風の淡い色、見に来る人のほとんどがスマホ。そういう世界観のお店が、開いた瞬間に空気まで伝わるように組みました。
同じお店を、方向の違う 4 つのサイトにしてあります。写真を主役にした案は、色と書体を 3 通りに切り替えられます。残りの 3 つは、明朝で静かに見せる案、文字組みだけで見せる案、Instagram へ送る 1 画面のハブ。どれも実際に動きます。
Samples
4 つの方向。同じお店を、別々の組み立てで。
メニュー・価格・写真は 4 つとも同じで、変わるのはページの組み立てと文字、写真の見せ方です。画面の絵を押すと、その場で動くサイトを見られます（パソコン幅とスマホ幅を切り替えられます）。「サイトを開く」なら新しいタブで開きます。
Design principles
このサイトで大事にしたこと。
4 つの方向が違っても、ここは変わりません。
スマホで見る人
小さな画面から組む。このお店を見に来る人のほとんどはスマホです。小さい画面でいちばんきれいに見えるところから組み、パソコンはその広げ方として作りました。
白・グレー・無機質
色を足さず、余白と罫線で見せる。彩度を抑えたグレージュにして、写真と菓子の輪郭だけが残るようにしています。
韓国風・淡色
細い書体と広い字間、静かな階層。今っぽさは飾りではなく、余白と文字の取り方で出しています。
写真と映像
写真を主役に、枠は静かに。写真のまわりは引いて、トップには店内の短い映像を流しました。背景に映像を流す案には、止めるボタンを付けています。
更新のしやすさ
誰が更新するかで作り方を選ぶ。このサンプルは素の HTML で軽く速く作りました。お店の方が自分で更新するなら、Studio や WordPress でも同じ見た目で組めます。