素人がChatGPTと作るオリジナルサイト|第4話:終わったと思ったら・・・
「ワクワク」のガチャマシーン
2026.03.22
(※2026年の1月、Wixを使ってオリジナルサイトを作っていた頃の実録レポートです。)
皆さん、こんにちは!モルダモルキです。
長期プロジェクトの
第4
話です。
今度は
各ページの
中身を
完成し、「あ、もう
終わったかも?」と
思いながらホバーアニメーションに
取り
掛かるモルダモルキ。オリジナルウェブサイト
作りも
終盤に
差し
掛かったと
思いきや・・・。どうぞ、お
楽しみください♪
PC版のウェブサイトはほとんど完成し、終わった~‼と思ったのですが、スマホ版は表示崩れがたくさんあり、とてもお見せできる状態ではありませんでした。まだまだ完成まで時間がかかりそうです😭(笑)スマホ版はまた一からレイアウトを考えて、スマホ用に作ろうかと思います。
※ここからは、完全に初心者目線の制作メモです。
==================
今回WIXで行った操作はこうです。
●PC版のエディタでページ➡ページを管理➡ページを追加
●パーツを追加からストリップを新しい白紙ページに追加
●各ページ作り(テキストや背景を入れたり、アニメーションを追加したり)
●ボックスを追加し、右クリックからホバーアクション追加(マウスをかざすと拡大するアクションを選びました。その他にも通常時とホバー時で色を変えたりもしました。)
●GIFアニメーションをクリスタで作成し、トップページに配置
●パーツを追加➡動画・音楽➡透過動画を追加
●設定➡モバイル最適化➡スマホでどう見えるのか確認
●スマホ版では表示崩れ多発➡落ち込む(笑)😅
==================
マンガで触れましたが、ホバーアニメーションについてはPC版でしか有効になりません。
これからスマホ版のウェブサイトを作りますが、PC版とは設計やデザインを変えようと思いますので、もしよろしければPC版とスマホ版両方を楽しんでいただけたら嬉しいです。
今後もウェブサイト作りのリアルをお届けしたいと思います。
この挑戦が無事に完成するのか、それとも途中で挫折してしまうのか……。よければ、今後も一緒に見届けてください。