見栄えリニューアルについて
現状の見栄え
1枚目は現在のデスクトップサイトです。真ん中に隙間があるのとフォントやレイアウトもまだまです。
画像は貼ってないけど、モバイルだとなんちゃってレスポンシブで広告は下にでるようにはなっています
2枚目の写真はブログページ。シンプルで悪くはないと思っているけど無骨すぎます。
サイトのスピードテスト
googleのテストで計測しました。下にリンクを貼っておきます。
PageSpeed Insights1枚目がモバイルのテスト。想定はしていたがパフォーマンスが良くないね😭
ただ、いくつかのサイトの情報をみると、モバイルはデスクトップよりもパフォーマンスが出にくいらしい。
コンピュータのパワーやネットワークスピードをモバイルように下げて計算しているとか。
2枚目はデスクトップ。思ったより良かった！
リニューアル後の見栄え
というわけでChatGpt o1-miniに見た目の改善を依頼。出した依頼は現状のhtmlを見せて見栄えの改善を依頼したただけ！一瞬で回答が返ってきました!すごい。
そして提案された通りbootstrapを導入。実装したところほぼエラーもなく見栄えはかなり改善されました🎉
レスポンシブになったので、モバイルでの見た目も改善されています！
それでもまだ少しチグハグなところや、Xのアイコン画像配置などまだいまいちなところはありますが...
1枚目はトップページ。画像がカード型になっていてアップロードボタンなども全般的に良くなっています。
2枚目はブログページ。こちらも記事タイトルがカード型となってみやすくなっています。
リニューアル後のスピードテスト
1枚目がモバイルですが、スピードがかなり改善しました。bootstrapをCDNから持ってきているので、staticにおけばきっと改善されるのかな。
そしてユーザ補助はレスポンシブにしたからかかなり改善されました。
2枚目はデスクトップ。スピードがなぜか下がってしまいましたがこれもCDNの件が影響しているかな？
というわけで、今後はこのスコア部分を少しずつ修正していこうと思いますので、直したところで記事にしたいと思います!
xserverなどを使っていてwordpressを使っているとかだと、このあたりのテストは簡単に合格点が出るのかな？
でも、仕組みもわかるので1回は自分でやってみるというのは良い勉強になります。それではまた次回！