![見出し画像](https://assets.st-note.com/production/uploads/images/125479539/rectangle_large_type_2_f1e3520dce4ce582eb36cc7a33fe06e3.jpeg?width=1200)
りっぷらぼのホームページが完成しました!
みなさんこんにちは!HQ監事の井上です!
世の中はクリスマスですね!
私は家でずっとサイト作成やSNS用のコンテンツを作っていました泣
。。。しかし、クリスマスを犠牲に完成しました、りっぷらぼのホームページが!
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
ハートレスQのホームページも過去に私が作成しました。
当時、ホームページ作成ツール「STUDIO」の使い方を理解しないまま勢いで作成をはじめ、苦労しながらなんとか作り上げました。
今回はSTUDIOの使い方にも慣れ、より良いものが作れました!(ハートレスQのホームページも追々改修します!
本サイトでは、外部機能を複数使用しています。
具体的には以下の3つの外部ツールを使用しました!
1.キャラクターアニメーションの実装にLottieを使用
2.3DモデルをHP上で動かせるようにsplineを使用
3.インスタグラムでの投稿をHP上に反映させるためにsnapwidgetを使用
1.キャラクターアニメーションの実装にLottieを使用
長らくSTUDIOで作成するサイトでは画像のアニメーションを付けることができませんでしたが、最近のアップデートでLottieというアニメーション機能との連携が出来るようになったため活用しています!(ハートレスQのロゴが雪のように降っているアニメーションやレコードのアニメーションに使用しています。
2.3DモデルをHP上で動かせるようにsplineを使用
splineはBlenderやsplineで作成した3DCGをiframe形式で出力する機能があり、それを用いてサイト上で3DCGを触れるようにしています!3Dモデリングが出来る必要があるため実装しているサイトは少ない印象です。
3.インスタグラムでの投稿をHP上に反映させるためにsnapwidgetを使用
インスタグラムの投稿をリアルタイムでHP上に反映させたかったため、snapwidgetというツールを使用しました。
instagram → snapwidget → studio
と、インスタとSTUDIOを連携してくれるツールになります!
その他、STUDIOの絶対位置機能を使ってヘッダーを固定化したり、レスポンシブ対応を行い完成しました!
自分のポートフォリオサイトが欲しい!自社や自団体のホームページが欲しいといった場合はハートレスQに相談してみてくださいね!
ご覧いただきありがとうございました!