中華料理満楼苑

HTML/CSS JavaScript

老舗本格中華を味わえる中華料理店サイト。
PC、スマートフォン用のデザインを作成し、レスポンシブ対応のコーディングを行った作品です。

WEB SITE

POINT: ・アコーディオンメニューの実装
コーディングで苦労した点はトップページのアコーディオンメニューの開閉処理です。JavaScriptのみでレスポンシブ対応な開閉処理を実装出来ました。

・フォント選び
欧文フォントはRoc Groteskを使用。セクション見出しにはCherry Cream Sodaを使用、特徴的なフォントを使用することでセクションの区切りを分かりやすくしました。日本語フォントにZen Kaku Gothic Newを使用、癖がなく視認性の高さを重視しました。

・慣性スクロール
慣性スクロールを実現する為に初めてLuxy.jsを使用しました。
ページ数: 4 ページ
制作期間: デザイン：2.5日
コーディング：5日
使用技術: Swiper.js / Luxy.js / JavaScript / HTML/CSS
URL: https://manroen.mikanbako.jp/
Github: https://github.com/y-nagai0725/manroen
デザイン: Figmaページ（閲覧のみ可能です）

中華料理 満楼苑