架空のピザ専門店「Pizza Amore」のTOPページと下層ページのデザインとコーディングです。
URL
https://antonio-portfolio.com/pizzaamore/index.html
担当
デザイン / コーディング
使用ソフト
Figma / Photoshop / Visual Studio Code
サイトの目的
ネット予約への誘導 / サービス内容の認知
制作期間
デザイン：1カ月（Topページ＆下層ページ合わせて2ページ）
コーディング：6週間
ターゲット
東京都（渋谷区）在住の20代～50代の男女（ランチタイムに来るオフィスワーカーが中心でファミリー層も）
デザインについて
・サイト全体の配色は、ピザのトマトとチーズをイメージした赤系と黄色系の配色にしました。
背景はセクションごとに分けて基本はテクスチャを敷いた薄いオレンジ、アバウトセクションはピザの背景、メニューセクションはピザのイラスト、予約と問い合わせセクションはピザ皿のイメージに合うウッド調の背景を採用しています。背景を分けることでセクションごとにコントラストがつき、ユーザー側を退屈させずに情報を見てもらう狙いがあります。
・各セクションの区分けを斜めにしています。視覚的なアクセントを出しつつ斜めの方向に視線を下へ誘導する効果を狙っています。斜めの方向はすべて同じにすることで統一感を出しています。
・TOPページにはヘッダー横とメインビジュアル下、問い合わせセクションにCTAボタンを設置しています。画面を開くと同時に予約を意識づけさせるが意図としてあります。ページ下部にも設置することで、ページを見切った後に再度予約を促し来店に繋げることを狙っています。
・メニューセクションは左右の視線を意識して、写真やテキストを配置しています。フェードインと合わせる事でより視線を誘導する狙いがあります。
・メニューページのワインのレイアウトを縦並びにしています。ページ内にアクセントを出すことが目的と、ワインボトルが縦の形状なので一体感のある組み合わせになると思いデザインしました。
・定番メニューにはサムネイルを設置し、スライダーでコンパクトにページを見せつつもどんなメニューがあるかをユーザーに認識してもらう狙いがあります。
実装について
・フェードインを実装していますが下からだけでなく、横からのフェードインも採用しています。
フェードに種類をつけることで単調になることを避けています。
・メニューページの定番メニューにスライダーを実装し、ページが冗長になることを防ぎつつ直感的な操作を行えるようにしました。またレスポンシブのみでTOPページのニュース、メニューページのワイン部分にも同じ狙いでスライダーを実装しています。
・メニューページのメインビジュアル下に各セクションへ遷移できるアンカーリンクを設置しています。またドリンク＆アラカルトセクションには定番メニューへ遷移するリンクを設置しています。ユーザーが料理を見る中で、ピザとその他のメニューを見比べて商品を選別することをストレスなくできるようにしています。
・ドリンク＆アラカルトセクションではレスポンシブ時にアコーディオンメニューを実装している部分があり、ページ全体をコンパクトにまとめる意図があります。