概要

和食と日本料理を提供するお店のWEBサイトです。（架空となります）

ターゲット

・30代以降の男女（性別問わず幅広い層）
・日常生活での食事と違った、少しいいところでの食事を検討している方

目的

お店の認知拡大と、魅力を伝えたうえで予約（来店）していただくことが、目的となります。

課題

① ユーザーがためらわない程度の、程よい高級感と上品さを伝えること。
② 料理やお酒など、お店のメニューを魅力的に伝えること。
③ 気になった方がすぐ予約ができるよう、お問い合わせなどの情報をわかりやすく配置すること。

コンセプト

日常から離れた、「和」の贅沢な時間。

情報設計

まずファーストビューで、お店、料理、お酒の写真が、ゆったりと移り変わるようにしています。これによって、お店の雰囲気や料理を的確にユーザーに伝えるようにしました。

次に、お店のコンセプト、料理、お酒、予約、お店情報、とコンテンツを配置することで、お店についてや魅力を伝えつつ、魅力を感じたところで予約に移れるような、配置にしています。また、PC版では左側に固定の帯を設置し、情報を記載することで、2回目以降で予約目的でサイトを見た方も、情報を確認し、すぐに予約に移れることを意識しました。

デザインの特徴

① 左側の固定の帯

PC版でのデザインになりますが、左側に固定の帯を設置することで、着物などの帯を連想させ、和の雰囲気を出すようにしました。また、予約先やSNSアイコンも固定表示させることで、画面のどこにいてもお店情報を知れるようになっています。

SP版では画面下部に、地図や予約などの情報を固定表示させています。

② フォントや文字の見せ方

フォントは、「Shippori Mincho」を使用し、上品さや、日本料理特有の穏やかなや美しさを表現しました。また、ファーストビューや、お店に関してなど、随所に文字を縦書きで表記することで、こちらも日本特有の文化や空気感を表現しています。

③ 写真の見せ方

見ている方の飽きがこないよう、また、料理やお酒に関する期待感やワクワク感を与えるために、様々な見せ方をしています。具体的には、配置をあえて不規則にしたり、縦長の写真、横長の写真、料理だけの写真などです。また、JavaScriptを用いて、写真が浮かび上がるようにしたのも、ユーザーを飽きさせない工夫の一つとなります。

④ 背景

日本の伝統文様である、「麻の葉」の和柄を背景に扱うことで、こちらも「和の雰囲気」を表しています。また、ほどよく明るい黄色を使うことで、ユーザーが穏やかな気持ちになり、お店を理由したくなるような気分にさせる狙いがあります。

⑤ 余白感

各コンテンツ間や、写真や文字に、十分な余白をとることで、上品さを感じさせる狙いがあります。

制作範囲・期間

企画、ワイヤーフレーム：3日
デザイン：5日
コーディング：5日