【自主制作】水素水サーバーLP「SUISOPOT」
制作内容
概要
デザインカンプからコーディングしました。
PC,SPカンプにおいてピクセルパーフェクトで実装。
サイズ：約20,000px
- クライアント
- 自主制作
- 担当範囲
- コーディング
- 制作時間
- 7日間
- 使用言語・ツール
- HTML, Sass, JavaScript(jQuery),Figma
制作のポイント
01
アクセシビリティへの配慮
キーボード操作だけで、サイト上の機能にアクセスすることができるよう配慮しました。
02
ホバー時にグラデーションのボーダーを表示
疑似要素でボタン全体にグラデーション背景を重ね、mask-composite: exclude; を用いて中央部分をマスク。 通常時は透明で、ホバー時に外枠（ボーダー）のみが浮かび上がるようなデザインを実装しました。
03
スクロールできることを伝えるアニメーション
JavaScriptライブラリ「ScrollHint」を活用し、スクロールできることを伝えるアニメーションを表示。 アニメーション内の画像（.scroll-hint-icon）はデザインカンプに合わせてpadding等を調整しています。
制作詳細
other works
他の実績
【実案件】オンラインスクールのコンテンツ販売用LP「iPlus」
【自主制作】ポートフォリオサイト「YUI TANIUCHI」
【自主制作】歯科クリニックサイト「みなみ歯科クリニック」
【自主制作】キャンペーンサイトLP「onomichi」
【自主制作】アクセサリーブランドサイト「sobolon」
【自主制作】仮想スイーツショップWebサイト「sweet-delight」
【自主制作】シングルページコーポレートサイト「The Company」
【自主制作】オンラインスクールサイト「30days-trial」
【実案件】相談支援事業所サイト
【実案件】福祉・美容健康サービス企業サイト
【実案件】中重度障がい者向けグループホームサイト
【実案件】精神・知的障がい者グループホームサイト
