サイトのご紹介

デザインをご提供いただきコーディングを行いました。
下層ページ含め全ページ、スクロールするとTOP画像の上にコンテンツが重なる仕様になっていたり、スクロールに合わせてコンテンツが下からスライドするアニメーションを設定したりと細かいところまで作り込んだサイトに仕上げております。

WORKSページは各実績をクリックするとモーダルウィンドウで拡大表示、また別カットの写真がスライダーで見れる仕様にしております。

お問い合わせページはPHPをフォームに埋め込んで管理者及びお問い合わせした方へ自動でメールが送信されるよう設定しております。

スマホサイズの画面では各種スマホ画面サイズによってサイズの比率が変化しないようビューポート単位で各パーツや余白の設定をすることで、どんな画面幅のスマホで見た時も表示崩れを起こさないようレスポンシブ対応しております。

実装機能のご紹介

★スマホメニュー（ハンバーガーメニュー）
スマホサイズの場合は、画面右上のハンバーガーメニューをタップすることでメニューを開くことができます。

★モーダルウィンドウ（WORKSページ）
実績の画像をクリックすると画像が拡大表示されます。
別カットの写真が複数ある場合はモーダルが開いた際、スライダー形式で複数の写真を眺めることができます。
また、今回「WEB DESIGN」、「LOGO DESIGN」、「GRAPHIC DESIGN」、「BOOK DESIGN」、「MOVIE」、「PACKAGE DESIGN」というように複数のカテゴリーがあったので、別カットの写真も含めモーダルを表示したままスライダーで作品を流し見できる仕様となっております。

★スクロールアニメーション
下へスクロールしていくとページのコンテンツが下からフワッとスライドインするアニメーションを施しております。
スクロールアニメーションがあるだけでサイトにお洒落さやリッチさを出すことができます。

★お問い合わせフォーム
お問い合わせが入ると管理者へメールが届くように設定しております。
お問い合わせしたお客様にも自動返信メールが届く設定にもなっています。