SAMPLE / RESTAURANT
蕎麦店向けデザインテンプレート「水澄」
縦組みの明朝と余白で、静かな和の店構えを画面の上に作りました。使う色は紙白・墨・藍鉄の3つだけ。お品書きと日本酒の並べ方に、店の考え方が出るように組んでいます。
PREVIEW
そのまま動く状態でご覧いただけます
「蕎麦処 水澄」は実在しません。店名・住所・電話番号・営業時間・価格・日本酒の銘柄・お知らせの内容は、デザインをご覧いただくためにUniMindが用意した架空のものです。写真33点はすべてAIで生成したもので、実在する料理・人物・店舗ではありません。予約フォームは操作をお試しいただけますが、送信した内容はどこにも記録されず、メールも送信されません。
CONCEPT
この見本で考えたこと
縦組みを、飾りではなく骨格に使う
見出しを縦に組むと、横書きの本文との間に自然な余白が生まれます。水澄では店名・キャッチ・セクション見出し・フッターのナビまで縦に組み、紙面のような静けさを画面の上に作りました。ただし1000pxより狭い画面では横組みに戻します。縦のままだと高さがあふれて、読むために横スクロールが要るからです。
有彩色を1色に絞る
使っている色は紙白・墨・藍鉄の3つだけです。差し色を足さないと決めると、写真の色が濁りません。料理と器の色が主役になり、サイト側の色がそれを邪魔しなくなります。角丸もすべて0にしてあります。
写真の上の文字は、明るさを測ってから置く
写真の上に文字を置くときの濃淡を、写真1枚ごとに明るさを測って7種類に分けています。全部を同じ濃さにすると、明るい写真では読めず、暗い写真では必要以上に沈みます。雰囲気のための暗さと、読むための暗さは別物として扱いました。
予約フォームは、置く／置かないを選べる
もとのデザインはフォームを1つも持たず、予約を電話と外部の予約サイトに逃がす作りでした。サーバーもメール送信の設定も要らないので、公開までが早く、運用も軽くなります。小さな店ではこの形が合うことも多いものです。
この見本では、動きを確かめていただけるよう予約フォームを足してあります。日付・時間帯・人数・お席の希望まで選べます。ただし送信先を持たないので、入力しても記録もメール送信もされません。実際に予約を受け付ける形にするには、サーバー側の受け口とメール送信、それに伴う個人情報の取り扱いの取り決めが必要です。どちらの形にするかは一緒に決めましょう。
PAGES
全8ページ
下は主要7ページです。このほかに、お知らせの記事の雛形が1ページ入っています。
-
トップ
夜の店構えの写真いっぱいに、縦組みの店名とキャッチを重ねています。下端にはお知らせの帯を1件だけ。
-
水澄について
水へのこだわり、蕎麦へのこだわり、素材と製法、店名の由来、店主の思想。読み物として通して読める順に並べました。
-
お品書き
冷たい蕎麦・温かい蕎麦・季節の蕎麦・蕎麦前・甘味。品名と説明と価格を、桁の揃う等幅の数字で組んでいます。
-
水と酒
日本酒を銘柄の五十音ではなく仕込み水の硬度で並べました。何と合わせるかまで書いてあります。
-
店内のご案内
カウンター、テーブル席、半個室。席ごとの過ごし方と、席数・設備の一覧。
-
お知らせ
カテゴリで絞り込める一覧。臨時休業や季節の献立を、店で書き換えて出せる形です。
-
店舗案内
住所・営業時間・定休日と、電車・バス・車それぞれの行き方。予約の方法もここにまとめています。
MOBILE
スマートフォンでの見え方
620pxより狭い画面では、画面の下に電話・地図・WEB予約の3つを固定します。縦組みの見出しはこの幅で横組みに戻し、高さがあふれないようにしています。
FULL PAGE
トップページの全体
NEXT