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

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

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

香老舗 薫玉堂公式サイト

香老舗 薫玉堂

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

PC

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

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

Mobile

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

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

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

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

塚口 祐司 / Yuji Tsukaguchi

1987年生まれ。Webデザイナー/エンジニア。DTP、動画配信・リッチコンテンツ制作、Web制作会社共同創業を経て、フリーランスとして独立。デザインからフロントエンドの実装、WordPressやMovableTypeなどのCMS構築まで一貫した制作を行う。著書にMdN社から発売の「Webサイトこれからどうなるの? キーワードから探る未来像」や「現場のプロが教えるWeb制作の最新常識」など。