薫玉堂の公式サイトをリニューアルしました。

薫玉堂の公式サイトをリニューアルしました。

文禄3年創業、京都・西本願寺前の「薫玉堂」のウェブサイトをリニューアルしました。フロントエンド、CMS実装を担当しています。

香老舗 薫玉堂公式サイト

香老舗 薫玉堂

今回のサイトはとにかく写真が圧倒的にクオリティが高く、またデザインもその写真を活かしつつも文禄3年創業の歴史と伝統が感じられるサイトになっています。

PC

右側にメニューが固定配置されるデザインのため、ブラウザ可変した際にきちんと最小幅を保ち横スクロールを出すこと、写真などページの途中で100%表示になる箇所があるため、横幅固定とフルリキッド両方に対応できるように構築しています。

また、CMSとしてWordPressで実装するために、メニューなどはなるべく同一HTMLにし、CMSで無駄に分岐処理を行わないようにしています。

Mobile

モバイルはレスポンシブで作成しており、PCのデザインとはまた違った写真の魅力をダイレクトに伝える構成になっています。

スマートフォンサイトのメニュー表示の実装としては当たり前になりつつありますが、オーバーレイでメニューを表示する際にFixedで固定化していると、メニュー内の内容が多い場合縦にスクロールできなくなります。

今回はそれを回避しつつ、閉じた際もきちんと開いた場面からスタートするように実装しています。

site name 薫玉堂
url https://www.kungyokudo.co.jp/
design & direction SCNR inc.