リキッドレイアウトを採用し、どのデバイス幅でもデザイン通りに再現をしています。
下層ページのヘッダーは高さがあるため、スクロールに応じて別のヘッダーを上からふわっと表示させるように実装いたしました。
また、透かしのレイヤーが重なっている繊細なデザインのため、z-indexの調整も細かく行い、PCとSPでのレイアウトの違いにより「gird-area」での調整や、SPのみ「もっと見る」ボタンを追加し、文字数の量によって「もっと見る」のボタンで開閉できるようにしています。
ページ数や、ページごとのコンテンツボリュームがある制作でしたので、PHPにて各パーツコンポーネント化しincludeすることで保守性・拡張性を考えて制作いたしました。
TOPページだけではなく、インプラント、小児矯正等の下層ページもディレクター様、デザイナー様と共にこだわって制作したサイトとなりますので、ぜひ実際のサイトをご覧いただけますと幸いです。