概要

1年生の時に作ったブログサイトを、使用する技術を変えて自主制作としてもう一度作りました。
今回はポートフォリオと同じようにnext.jsとmicroCMSを使用したのと、初めての挑戦でTailwind CSSを使用しました。Tailwind CSSは1年生のときから触ってみたかった技術で、デザインが元からあり勉強しやすいとものがいいと思ったので、ブログをもう一度作ることにしました。

制作の流れ

デザイン

今回は元からデザインがあったのでほとんど前と同じですが、全て同じで作り直してもつまらないと思ったので一部デザインを変更しています。
変更した部分は記事の表示部分で、前はシンプルなデザインだったのですが、今回はテープで貼った用紙のようなデザインにしてみました。そのほかの部分はほとんど変更は加えていません。

コーディング

サイト構築はnext.jsで行い、更新部分はmicroCMSを使用しています。
今回はTailwind CSSに挑戦したことが一番のポイントです。クラスは、自分で調べたりChatGPTを活用して勉強しました。クラスを書いていくだけでデザインができていくのがとても便利に感じ、作業効率が上がることを実感することができました。このような感覚は、実際に触ってみないとわからなかったことだと思うので、とてもいい経験になったと思います。

苦労した部分

初めてTailwind CSSを触ったため、クラス名を調べたりするのが大変でした。
書き方がある程度統一されているので一度使えば覚えやすかったですが、慣れないうちはその都度調べたりしていたので時間がかかってしまいました。全てをクラスで指定すると逆にコードが見にくくなってしまったので、複雑なアニメーションなどはCSSファイルに直接書いたりして使い分けたりしました。今後の制作でTailwind CSSを使用することがあれば、より迅速にコーディングができると思います。

制作を通して

今回の制作のメインはTailwind CSSに挑戦した部分ですが、next.jsの勉強にもなりました。ポートフォリオサイトでは使わなかった、記事の検索機能やカテゴリー分けなどを勉強することができたのでとても楽しかったです。ずっと勉強したかったTailwind CSSにも触れることができたので、今後も使用してどんどん慣れていきたいと思いました。学生のうちにたくさんの技術に触れておくことはとても大切だと思うので、これからも自主学習を頑張っていきたいと思います。