サイトをリニューアルしました

会社を設立してから約4年間使っていたWebサイトをリニューアルしました。

旧サイトはポートフォリオ中心でシンプルなレイアウトでしたが、今回は各プロジェクトの内容や施策をより分かりやすく伝えられるデザインに仕上げました。

技術スタック

• FW: Nuxtjs → Nextjs
• JavaScript → TypeScript
• CMS: microCMS → Newt
• CSS: Tailwind
• Hosting: Vercel
• Form: SSGform → Newt

旧サイトではNuxt.jsとmicroCMSを使っていましたが、今回のリニューアルではフロントエンドをNext.jsに、CMSをNewtに移行しました。

当時Nuxt 3がリリースされたばかりで、Vueをメインで使用していたこともありNuxt.jsを採用していました。最近ではShopifyをヘッドレスコマースとして使う機会もありReact（Remix）を扱うことが多くなったので今回のリニューアルではNext.jsを選択しました。

Vueの双方向データバインディングは便利でしたがプロジェクトの規模が大きくなると少し扱いづらさを感じることがありました。また、Tailwind CSSを活用する機会が増えたことで、Vueの単一ファイルコンポーネントの良さを以前ほど実感しなくなったことも移行の理由のひとつです。

CMSをNewtに移行したのは新しい技術を試したかったからというのが正直なところです。Next.jsのデータフェッチはキャッシュ管理が自動でできて、REST APIでシンプルにデータ取得が可能になりました。さらに、Container/Presentationalパターンを取り入れることで開発効率もよくなりました。

自社のオウンドメディア2.5DGEEKではヘッドレスCMSにWordPressを使っていますが、今後のクライアントへ提案する場合はNewtが第一候補になりそうです。

デザイン

アニメーションは控えめにして、シンプルで使いやすいデザインを心がけました。特に大事にしたのは、運用のしやすさとユーザー体験のバランスです。

自社プロダクトのオウンドメディア「2.5DGEEK」を運営する中で、改めて管理しやすいサイトは運用コストも抑えることができ改善スピードに直結することを実感しました。Next.jsのエコシステムを活かすことでコンポーネントの共通化がしやすくなり開発体験がよくなりました。

有名なクリエイティブ企業のサイトでは印象的なアニメーションが多くてカッコいいですが、過度な演出はユーザーにとってストレスになることもあるかと思います。そこで、今回はサイトのレスポンスを最優先に考えストレスフリーなUXを意識しました。

旧サイトのデザイン