BWW New HP
  • HTML / CSS / JavaScript
  • BWW

高1~高3の間に所属していたFRCロボコンチームの新ホームページをHTML, CSS, JavaScriptを使用して1から制作しました。 https://bww8231.fuji3.info

技術面

ホスティングサービスには表示速度や維持費の観点から静的サイトであるGitHub Pagesを採用し、HTML, CSS, JavaScriptのみを直接使用して制作しました。

ページ速度改善のために、画像の遅延読み込みやWebP画像の切り替え処理実装といった対策を行いました。 画像の遅延読み込みには標準実装のObserver APIを使用し、独自実装によって外部との通信量を抑えました。

デザインはプロトタイピングツールのAdobe XDを使用して作成しました。

おまけ

ホームページで使われている2つの動画は自作したものになります。(小学生の時から趣味で動画編集をやってました) DJI Pocket 2で撮影した映像をPowerDirectorとFilmoraで編集しています。

リンク

使用技術

言語 ・・・ HTML, CSS, JavaScript フレームワーク、ライブラリ ・・・ Anime.js, Modernizr ツール ・・・ GitHub Pages, Adobe XD