株式会社セキュリティデザイン様アルコールチェッカーLPサイト

担当範囲 | コーディング 、デザイン(@murayaman12さん) |
---|---|
制作期間 | 1週間(コーディング&デザイン) |
使用ツール | HTML、CSS、jQuery、Sass、Gulp |
依頼者 | 株式会社セキュリティデザイン |
サイトURL | https://security-d.com/lp-alcohol-checker/ |
※デモサイトのユーザー名:lemomo、パスワード:lemomo
サイトのご紹介
クライアント様より新規LPサイトのコーディングおよびデザインをご依頼いただき、担当させていただきました。
デザイン範囲はデザイナーのやまん(@murayaman12)さんに入っていただいて、共同で制作を進めました。
デザイン部分はクライアント様のご要望を汲み取りながら伝わりやすい比較的シンプルめなデザインですが、配色には注意を引く黄色や赤色を使用し、注目させたいセクションで背景色に色を用いてメリハリをつけた印象になっています。
プラン紹介のセクションでは、複数のプランを設けたサービスを提供しているため、各プランで何ができて何ができないのかを可視化し、パッと見で理解してもらえるようテーブルを用いました。
実装機能のご紹介
★ローディングアニメーション
機械製品を扱っているサイトなため数値を使ったローディングアニメーションで雰囲気を出してみました。
★CVボタンのホバーアクション
CVボタンをより認識してもらうためにマウスを置いた際のアクションを背景色が斜めに流れるアクションにしました。