この度、当サイトのリニューアルを行いましたので、ご報告させていただきます。
大きな変更点は以下の通りです。
デザイン面
- ベースはシンプルな白黒のモノトーンに、動きは最低限にとどめることにより、コンテンツを目立たせるとともに、ユーザーの操作性、使いやすさ(UI/UXに優れたサイト)を意識
- スマホのメニューはハンバーガー(三本線)ボタンを止め、画面の最下部にボタンを並べる形に変更(UI/UXの向上)
- タグメニューと高速な画面遷移により、ユーザーにストレスを与えない分かりやすい構成に
- お問い合わせボタンを常に右上に配置(お問い合わせフォームでは非表示)
- パソコン画面のページが長い場合は、スクロールすると画面左にメニューが、画面右下にページの最上部へ戻るボタンが表示される。最下部に到達するとメニューは消え、最上部へ戻るボタンは枠線が白くなる
機能面
- 楽曲、ブログ、Webサイト、お知らせ一覧ページにページネーションを実装(1ページ12個まで入り、その後はページが増えていく)
- 楽曲、ブログ、Webサイト、お知らせ個別ページの下部に前後のページへのリンクを実装
- 楽曲個別ページの再生ボタン表示前に「読み込み中…」を表示(読み込みが終わるまで再生ボタンは表示されない)
- 楽曲個別ページの再生バーの改善(バーの表示が正しくなり、以前より操作が可能な状態になった)
- ブログにタグ機能を実装
- ブログにサンプルコードを表示できるように設定
- お問い合わせフォームのバリデーションのアップデート(エラーが表示されても、正しく入力すれば消える仕様に)
他にも細かい点はたくさんありますが、大きな変更点はこのような感じです。
CMS(Notion)の導入
リニューアルしようと思った最大の理由は、コンテンツが増えてきたからです。
楽曲が12曲、お知らせは17ページと流石にデータベースなしはキツくなってきたので、CMS(コンテンツ・マネージメント・システム)の導入を決めました。
CMSについては以前ブログにまとめたので、もっと知りたいという方は以下のリンクからどうぞ。
(CMSとは? https://bbunta.com/blog/what-is-cms)
CMSとして選んだのは「Notion(公式サイト https://www.notion.so/ja-jp)」です。
Notionに関してはCMSのブログでも軽く触れていますが、簡単に説明すると、メモ、Todoリスト、ブックマーク、タスク、スケジュール管理などさまざまなことができるアプリです。
私個人としては毎日必ず開くと言っても過言ではないほどお世話になっているアプリで、以前はブログもNotionで書いてから本番環境に移すということをしていました。
というわけで、CMSはNotion一択でした。
今後は移行する手間はなくなり、Notionで書くだけで良くなりました。
もちろん今のこの記事もNotionで書いています。
ちなみに、お知らせだけでなく、他のページ(ABOUT、SONGS、BLOG、WEBSITE)もデータはほぼNotionに移行したので、多くのページのデータはNotionにあり、そこからデータを引っ張ってきてサイトに表示させているといった状態です。
Next.jsから再びAstroへ
Next.jsはフロントエンドで一番人気のあるフレームワークです。
Jamstackでよく使われており、デジタル庁のホームページも以前はNext.jsで作られていたので、話題になっていました。
CMS同様、Jamstackについても以前ブログで書いたので、興味のある方はこちらもどうぞ。
(Jamstackとは https://bbunta.com/blog/what-is-jamstack)
以前のサイトはAstroというフレームワークを使っていました。
Astroはパフォーマンスがかなり優れており、私も本業ではAstroを使うことが多いのですが、以前使っていたNext.jsがかなり進化していると聞いていたので、これを期に勉強してみようと思いました。
Next.jsを久しぶりに触ってみると、全く別物かと思うほど変わっていたので、思っていたよりも勉強に時間はかかりました。
また、NotionとのAPI連携でつまづくことも多く、結構大変でしたが、その分スキルアップできたので「よし」とします。
ただ、勉強してみて分かったのは、パフォーマンスに関してはやはりAstroの方が優れているということです。
その後3日間、Next.jsでサイト運用をしましたが、キャッシュの問題やパフォーマンスの問題から再びAstroに変更することにしました。
さらに時間はかかることになりましたが、Next.jsとAstroの違いや、Astroの最新技術も学べたので「よし」とします。
まとめ
Notionが書きやすかったので、ついつい書き過ぎてしまいました。
開発中にサイトマップを生成して分かったのですが、このサイトのページ数がこの記事でちょうど50ページになったようです。
ブログもしばらく書いていませんでしたが、書きたいことはどんどん溜まってきているので、時間ができた時に少しずつ進めて行こうと思います。
今後とも当サイト「BBUNTA」をよろしくお願いいたします。