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

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

担当

デザイン：模写修行様 https://moshashugyo.com/
コーディング：まなと

制作詳細

制作期間：6時間

ページ数：1ページ

概要

模写修行様のデザインを基に、コーディングスキル向上のため制作。

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

お問い合わせフォームはphpで実装。メールの送信はされずに確認画面→サンクスページと遷移する形にしています。

GSAPを活用したスムーズなアニメーションで、ユーザーエンゲージメントを向上。

制作のポイント

レスポンシブ対応

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

画像の最適化

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

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

PHPでのお問い合わせフォーム実装

PHPでお問い合わせフォームを実装しました。確認画面からサンクスページへの遷移のみ実装し、メールは送信されないようになっています。

Gitによるバージョン管理

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

OGP設定

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

技術・ツール

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

制作を終えて

phpでのお問い合わせフォーム実装を行い、バックエンドについての知識を多少付けることができました。セキュリティ面についてはさらなる学習を深めていきたいと考えています。

アニメーションをつけることでサイトを魅力的に見せています。