普段の仕事ではWordPressを使うことが多いのですが、今回、自分のポートフォリオサイトをNext.jsで作ってみました。
以前から興味があって、少しずつ勉強していたNext.js。
実際にひとつのサイトを完成させてみると、勉強しているだけではわからなかったことがたくさんありました。
WordPressではなく、Next.jsを選んだ理由
WordPressには長年慣れ親しんできました。
テーマを作って、カスタム投稿タイプを追加して、必要に応じてプラグインを導入する。サイトの規模や要件によって違いはありますが、ある程度は完成までの道筋を想像できます。
でも今回は、せっかく自分のサイトを作るのだから、普段の仕事とは違う技術を使ってみたいと思いました。
選んだのは、Next.jsとTypeScript、SCSS Modules。そしてコンテンツ管理にはmicroCMSを使う構成です。
AIと一緒に作るということ
今回の制作では、CodexなどのAIツールを積極的に使いました。
自分でコードを一行ずつ書くというよりも、作りたいものを考え、AIに実装を依頼し、出来上がったものを確認して修正していく進め方です。
これが思っていた以上に面白い。
ただし、AIがコードを書いてくれるからといって、何も考えなくていいわけではありません。
アニメーションのタイミング、余白の取り方、スマートフォンでの見え方。実際にブラウザで確認すると、気になるところが次々と出てきます。
思い通りにならない部分を調べたり、原因を確認したり。AIを使っていても、これまでのWeb制作の経験が役立つ場面はたくさんありました。
microCMSを使ってみて
JOURNALの記事や制作実績は、microCMSで管理しています。
WordPressでは管理画面もテンプレートもひとつの仕組みの中にありますが、microCMSはコンテンツをAPIで取得して表示するヘッドレスCMSです。
最初はデータの構造を考えるところから始まりました。
記事のタイトル、本文、カテゴリー、タグ、サムネイル。WordPressなら見慣れた項目も、自分で設計していくと少し違った感覚があります。
そして実際に記事を公開してみると、すぐにサイトに反映されることが新鮮でした。
もちろんWordPressでも普通にできることなのですが、自分で作った仕組みが動いていると思うと、ちょっと嬉しくなります。
見た目が完成しても、まだ終わらない
今回、特に印象に残ったのは、画面のデザインが完成してからの作業です。
お問い合わせフォームの入力チェックや迷惑メール対策、Cookieの同意管理、Google Analyticsの設定、SEOのためのメタ情報や構造化データ。
見た目にはほとんど変化がないのに、考えなければならないことがたくさんありました。
普段WordPressで制作していると、プラグインなどに任せている部分もあります。
それらを別の構成で実装しようとすると、裏側で何が必要なのかを改めて考える機会になりました。
作ってみて思ったこと
今回の制作で、Next.jsをすっかり理解できたとは思っていません。
むしろ、まだ知らないことがたくさんあると感じています。
それでも、ひとつのサイトを最初から公開まで作ってみたことで、以前よりもずっと身近な技術になりました。
Web制作を始めた頃は、FlashやCSSのレイアウトに夢中になっていました。
その後、jQueryやWordPress、レスポンシブデザインなど、制作の方法は少しずつ変わってきました。
そして今は、AIと一緒にサイトを作っています。
こんな時代が来るとは思っていませんでした。
でも、新しい技術を覚えて、実際に何かを作ってみる楽しさは、昔とあまり変わらない気がします。
これからも、仕事や自主制作の中で試したこと、気づいたことを、このJOURNALに少しずつ残していこうと思います。