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

トップ

-

【担当範囲】

ワイヤーフレーム作成、配色やフォントの選定、画像補正、デザインカンプ作成、レスポンシブ対応、AIエージェントを使用したコーディング

-

【使用言語、ツール】

 ・HTML/CSS

・JavaScript

・Photoshop

・Figma

・Google Antigravity

-

【概要】

駅近でカジュアルに立ち寄れるレストランの紹介をするための、1ページで完結する新規のサイト

・目的

　予約を獲得すること

・ターゲット

　近隣に住む30代の主婦

・配色

　クラシカルかつ温かい

-

【ポイント】

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

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

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

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

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

-

【アニメーションについて】

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

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

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