URL：https://portfolio.web-manato.com/demo/lp1/

GitHub：https://github.com/web-manato/demo_lp2

担当

デザイン・コーディング：まなと

制作詳細

制作期間：8時間

ページ数：1ページ

概要

WebPへの対応等画像の最適化でよりサイトの軽量化を図り、HTMLのセマンティック面も考慮し制作いたしました。

LPなので、キービジュアルにはGSAPのTimeline機能を活用し、複数要素の連続アニメーションでストーリー性のある演出を実現しました。

制作のポイント

レスポンシブ対応

モバイルファーストで制作いたしました

画像の最適化

ピクセル幅によっての画像の出し分けと、ブラウザが対応していればWebPを表示するという形を取っています。

HTML上で行っているため、環境による違いなどは限りなく少なくなっています。

Gitによるバージョン管理

これからも運用をしていく設定で、このポートフォリオサイトで公開するにあたっての修正をGitで管理しています。

OGP設定

SNSでのシェア時に魅力的に表示されるよう、OGP設定を実装済みです。

技術・ツール

言語：HTML、SCSS、JavaScript
外部ライブラリ：GSAP https://gsap.com/

制作を終えて

一枚完結型のLPとして制作しましたが、企業サイトの下層ページやWordPressの投稿ページへの応用も想定した設計にしています。

8時間という短時間での制作でありながら、アニメーション実装とパフォーマンス最適化を両立できました。

GSAPのTimeline機能により、ユーザーの視線誘導を意識したアニメーション設計を行い、LP特有の『離脱防止』と『コンバージョン誘導』を両立しました