Facebook 【自主制作】洋風レストランのホームページ
Logo

【自主制作】洋風レストランのホームページ

クレジット
Avatar
Webコーダー
WEBデザイナー
【自主制作】洋風レストランのホームページ-1
シェア
制作ノート
ここがポイント!

・細い線や筆記体を使ってクラシカルな雰囲気を出しつつ、シェフの写真を窓シェイプに切り抜いたりして来店しやすいカジュアルな雰囲気を出しました。

・メインビジュアルのおいしそうな写真とコピーを強調したかったのでファーストビューにはロゴなどを入れていません。メッセージくらいまでスクロールするとロゴ、予約ボタン、ハンバーガーメニューが表示されます。これらは上部に固定され、いつでもユーザーがアクセスできるようにしています。

・メニューはサイトが縦に長くなるのを防ぐためにタブ切り替えのメニューにしました。メインをクリックすれば対応するメニューに切り替わり、タブの「メイン」には下線がつきます。

   ・スマホサイズでは、タブ部分が横スクロールできるようになっています。

   ・コースメニューは単体で表示させてユーザーに見逃させないようにして、このレストランの特徴の一つであるオーダーメイドのコースの案内も枠線で強調しました。お客様がその案内を見てすぐに問い合わせできるように電話番号も載せています。

アニメーションについて

メインビジュアル(計3枚)は縮小しながらフェードアウトしていき、次の写真に切り替わります。

ナビゲーションのリンクを押すと、スムーススクロールで該当の場所に飛びます。

それぞれのコンテンツはスクロールしていくと、ふわっと下から浮かび上がるように表示されます。

シェア