ガジェットショットのデザインを2025年バージョンにリニューアルしました。
目次
リニューアルの背景
このブログ「ガジェットショット」は2010年の開設以来、筆者の趣味として様々なデザインを試す実験台として数年おきに自作のWordPressテーマのリニューアルを繰り返してきました。今回のリニューアルも例に漏れず試してみたい技術があったのが制作のきっかけで、結果としては実際に動く物を完成させる事ができて非常に満足しています。
前回のリニューアルが2021年の5月なので、今回ちょうど4年ぶりのフルリニューアルになりました。
画面遷移のView Transitionsに対応
今回のリニューアルで一番試してみたかったのが、View Transitionsという技術。ページからページへの画面遷移の際、滑らかに別ページの要素同士を繋いでアニメーションを作る事ができるというもので、まるでアプリのように画面間が繋がった体験を作る事ができる技術です。
ここ数年で各ブラウザの対応も進み、ChromeとSafari（iPhone版を含む）で利用できるようになったので、導入に踏み切ってみました。今回は記事一覧、および前後の記事へのリンクのアイキャッチが遷移先の記事に繋がるように実装しています。
また、PCから閲覧した際の画面左右下の角に前後記事へのリンクを設置しているので、気持ち良いアニメーションで次々と記事を読む事ができるようにしています。
商品を軸に情報収集ができるような構造に
ガジェットショットでは多くの商品をブログ記事の中で紹介していますが、紹介した商品を軸に他の情報を探すのが普通のブログ形式だと難しいなと感じる事がありました。そこで、今回WordPressのカスタマイズをする事で、「記事」単位だけでなく「商品」単位でもブラウジングができる構造にアップデートしてみました。
商品一覧のページからはセレクトショップのようにガジェットショット内で紹介している商品を探す事ができ、商品を軸に関連記事や購入先などの情報をまとめて探す事が可能になりました。手動登録なのでまだ登録点数が少ない状態ですが、今後少しずつデータを登録して充実させていく予定です。
実装は連休中にCursor Proを活用
今回のリニューアルはゴールデンウィークの11連休中に取り組みましたが、View Transitionsの導入や商品別のカスタム投稿の設計など、普段は実装の仕事をしていない一般人の素人が連休だけで取り組むにはボリュームのかなり大きなプロジェクトで、連休中に終わらせる難易度は高いと感じていました。
そこで今回はCursorというAI補助機能の付いた開発環境の有料プランを初めて導入し、AIの力で開発を一気に加速させる試みに取り組んでみました。
Cursorは大きく分けて2つの機能があり、1つ目はAIによる補完機能。既にあるコードベースを参照しながら次にユーザーが入力する内容を予想してサジェストしてくれるのですが、これがかなり快適。頭の中で考えている次のコードをAIが予想してサジェストしてくれるので、ユーザーはTabキーを押すだけでかなりの入力文字数を省力化する事ができ、実装が圧倒的に楽になりました。
また2つ目のAIエージェントにチャット形式で相談できる機能も強力で、精度こそは完璧ではないものの多くの機能をAIの補助で素早く実装する事ができ、今回の限られた時間内にフルリニューアルを完了させるという目的には非常に心強いパートナーになりました。
全体のスケジュール感としては前半6日間でFigma上でデザインを起こし、残り5日間でWordPressテーマとして実装を行うといった具合だったのですが、見てのとおり本当に5日間で無事実装が完了できてAIの圧倒的なパワーを感じる事ができました。
今後もしっかり進化させていきたい
最初に趣味サイトを作り始めた小学生の頃から気付けば20年以上が経過しましたが、今でも趣味サイト作りというのは相変わらず飽きないものです。ガジェットショットも2010年の開設から今年で15年になるので、多くの読者に支えられながら長く続けられていてありがたい限りです。
上記で紹介した部分以外にも多くのアップデートを盛り込んでおり今回のリニューアルには非常に満足していますが、やはりコンテンツを投稿してこそのブログなので今回作ったデザインを活かせるよう今後もコツコツと記事を書いていきたいと思います。
今後とも、ガジェットショットをよろしくお願いします。
