本文へスキップ

プロダクト公開中

このウェブサイト

Squarespaceから移行し、同じドメイン上でNext.jsアプリとして作り直した個人サイトです。4つの言語に対応しています。

Next.js · TypeScript · Payload CMS · Postgres · next-intl · Tailwind CSS · Vercel

ソースコード

以前のSquarespaceホームページ:黒い名前パネル、角括弧で囲まれたタグライン、4つの紫色のボタン
現在のホームページ:黒と赤の名前が入った漫画のコマ風のヒーロー画像。その横に「Projects」と「Art」のパネルがあります

課題

Squarespaceのサイトでは、プロジェクトが2階層も奥に埋もれていました。作品の説明も、何も伝えない定型句ばかりでした。しかも、4言語に同時対応していると正直に言える仕組みがありませんでした。どのページも、存在しない翻訳があるように見せていたのです。

解決策

PayloadをCMS、Postgresをデータベースとして使うNext.jsアプリをVercelにデプロイしています。文章はそれぞれ、4言語すべてを収めた1つのドキュメントになっていて、まだ翻訳されていないものはサイトが壊れないよう英語にフォールバックします。ページはあらかじめレンダリングし、公開時に更新するので、サードパーティ製のスクリプトなしでもサイトは高速です。

担当
デザイン、構築、コンテンツアーキテクチャです。
背景
Squarespaceから作り直した個人サイトです。
期間
2026

成果

  • 4

    ひとつのコンテンツモデルから提供する4言語。正直なhreflang

  • 0

    公開サイト上のサードパーティ製スクリプト

以前のサイトはSquarespaceのテンプレートでした。すぐに始められる一方で、拡張するのは大変でした。プロジェクトは2クリック先にあり、すべてが1つの言語だけで、変更のたびに誰かのエディターの中で作業していました。

新しいサイトはTypeScriptとNext.js、React Server Componentsで書き、Tailwind CSSでスタイリングしています。投稿、アート、写真、動画、プロジェクトはPostgres上のPayload CMSに入っているので、どれもスマートフォンから編集できます。next-intlによって、すべてのページを英語、日本語、トルコ語、韓国語で提供しています。

Vercel上で動いていて、アドレスはmuratodesu.comのままです。そのため、古いページへのリンクもどこかにはたどり着きます。動きのほとんどはCSSで、端末で動きを少なくする設定を選んでいる人には静止したまま表示されます。