トップページのアップデート
こんにちは、だいちゃんです。
記事ページでは、2023年3月に、先立ってデザインアップデートを行っていました。
今回のNuxt3へのバージョンアップ のタイミングで、上記の際にほとんど手が付けられなかったTOPページと、タグごとの一覧ページのデザイン変更、内部のロジックの変更を実施しました。
デザインの変更
前回のアップデートの際に、記事ページでアイキャッチ画像のかわりにアイキャッチ絵文字を利用できるように変更したため、今回は記事一覧の各ページでも、アイキャッチ画像が用意されている記事では画像を、それ以外の記事では絵文字を表示するように変更しました。
基本的なデザインはこれまでのものを踏襲していますが、一部デバイスで表示が崩れたりする場合があったり、表示が大きすぎ・小さすぎることがあったので、CSSの書き方を変えて、なるべく多くのデバイスで正しく表示できるように改善しました。
また、これまでのトップページでは、すべての記事を対象に、新着順に16記事ずつが表示されるようになっていて、タグごとの記事一覧ページへの導線は、記事ページからのみに限られていたところ、リニューアルしたトップページでは、新着記事に加えて、以下の主要なタグがついた記事にも簡単にアクセスでき、主要なタグごとの一覧ページへの導線も確保しました。
- Shorts
- IT
- Car
- Life
- Gadget
- Book
- MU
タグの整理
今回のアップデートに伴って、タグの整理も実施していて、上記のうち「Shorts」「Gadget」「MU」に関しては、今回新たに追加したタグとなっています。まだ記事が少ないほぼないですが、今後はこのタグに該当する記事も増やしていければと思ってます。
記事一覧を表示するしくみの変更
前述の通り、Nuxt3のバージョンアップと同時に行った今回のアップデートでは、単にデザインの変更だけでなく、記事一覧を生成する内部でのロジックも進化しました。
具体的な変更点については、また別記事でまとめようと思いますが、内部のロジックが改善したことで、より柔軟なデザインを実現するハードルが下がり、TOPページにタグごとの最新記事を、簡単に表示させることができるようになりました。
デザインについては苦手意識がめちゃくちゃ強いですが、自分のアイデンティティを出しつつ、崩れず読みやすいページに少しでも近づけたのではないかなと思っています！
