Next.jsからAstroへ移行！自社サイトの改善を止めないコツ

CTO・エンジニアの佐藤あゆみです。 2026年10月、neccoは創業10周年を迎えます。この節目に、ここ数年ずっと水面下で続けてきた「自社サイトの作り直し」の話を書いてみようと思います。

…と書くと、「リニューアルしました！」という完成報告の記事に聞こえるかもしれません。でも、この記事はちょっと違います。移行して、公開して、そこから1年以上ずっと作り続けている話です。実は今も「制作中」です。

なぜそんなに時間がかかっているのか。なぜ続けられているのか。公開当日に起きた小さな事件も含めて、正直に振り返ります。
少し長い記事になりますが、何かひとつでも参考になれば嬉しいです。

移行前の課題

以前の自社サイトは、Next.js、Vercel、WordPressの組み合わせで作られていました。 WordPressをヘッドレスCMSとして利用し、Next.js（Vercel）からWordPressのデータを取得して構築する形式です。
WordPress側にはAdvanced Custom Fields PROやAtlas Content Modeler、WPGraphQLといったプラグインを組み合わせ、GraphQL経由でデータを取得する構成になっていました。

作った当時はモダンな構成でしたが、運用を続けるうちに、じわじわと問題が出てきました。

• ビルドに4分30秒〜5分かかる
  記事をひとつ直すだけでも、反映を待つ時間が積み重なっていきます。「ちょっと直したい」の心理的ハードルが、確実に上がっていきました。
• プラグイン同士の相性問題
  WordPressやプラグインをアップデートするたびに、データ取得が壊れることがありました。セキュリティのためにアップデートは欠かせないのに、アップデートするとサイトが壊れるかもしれないというジレンマを抱えていました。テスト環境で試すため、本番サイトへの影響はありませんでしたが、手間に感じていたことは事実です。
• 頼っていたプラグインの開発終了
  コンテンツの構造の一部を担っていたAtlas Content Modelerの開発が終了してしまいました。ある日「今後は更新されません」と宣言される心細さを実感しました。

ビルドが遅かったのには、構成上の理由がありました。この記事を書くにあたって当時のコードを見返してみたのですが、データ取得のキャッシュ機構がなく、ページを生成するたびに、そのページが必要とするデータをWordPressへ問い合わせる作りになっていました。
記事ページをひとつ作るにも、本文の取得で1回、関連記事の取得でもう1回。それが記事の数だけ繰り返されたうえ、一覧ページやカテゴリー別ページを作るときにも、同じ記事のデータをまた取りに行きます。ページ数が増えるほどWordPressへのアクセスは雪だるま式に増え、WordPress側も1リクエストごとにプログラムを動かしてデータベースを引くので、1回1回が決して速くありません。記事が増えるほどビルドが遅くなる。構造的に、そうなるようにできていました。

もうひとつ、更新まわりのもどかしさもありました。当時はISRという、公開後に一定時間ごとにページを裏側で作り直す仕組みを併用していました。訪問者には作り置きのページを返すので、表示は速いのですが、裏を返せば、更新した内容がすぐには反映されません。当時の設定を確かめると、記事ページはおよそ30秒で反映される一方、トップページや会社案内などは作り直しの間隔が1時間。表画面からは、どのページにどの設定が適用されているか分からないため、「直したはずなのに、まだ変わっていない」という時間が、ページによっては1時間ほど続くことがありました。

また、CMSをmicroCMSへ移行したい気持ちがずっとありました。SaaSであることから、CMSの自力での保守運用が不要であること、画像APIを使ってスムースに画像の最適化を行えることなど、拡張フィールドが使えることなど、色々と理由はありますが、最終的には好みの問題です。
ただし、10年間のうちに蓄積されたNote（ブログ）記事、制作実績、メンバー情報、沿革…それらすべてのコンテンツを一気に引っ越すのは現実的ではありませんでした。コンテンツの数も形式もバラバラで、それぞれに移行の設計が必要だからです。

そこで、下記の方針を決めました。

1. フレームワークをAstroに載せ替える
2. コンテンツはWordPressとmicroCMSを併用しながら、段階的にmicroCMSへ移す
3. デザインリニューアルは、いったん保留

Astroを選んだ理由はシンプルで、コーポレートサイトのような「コンテンツが主役のサイト」に向いた設計だからです。ページを事前にすべて静的に生成しておくので表示もビルドも速く、それでいて、動きが必要な箇所にだけReactコンポーネントを埋め込める。
「基本は静的、必要なところだけ動的」という割り切りが、コーポレートサイトの性質にぴったりでした。

そして3つ目の「デザインリニューアルの保留」。これは議論を重ねて決めたというより、必然的にそうなりました。デザインは判断や構想を練る時間がどうしても必要です。一方、基盤の改善は判断が速く、創意工夫のポイントも絞られているぶん、手を動かし始めやすいです。
「進めやすいほうから着手する」、シンプルですが、自社サイトのように後回しになりがちなプロジェクトでは、これが一番大事だったと今は思います。

実は、2年のブランクがありました

ここで正直に白状すると、この移行プロジェクトのリポジトリ（コードの保管場所）が作られたのは2023年3月です。公開は2025年5月末。つまり、移行を始めてから公開まで2年3か月かかっています。

何にそんなに時間がかかったのか、この記事を書くにあたってコミット履歴（コードの変更記録）を数えてみたら、答えは意外なほどはっきりしていました。

最初の23か月で172コミット。最後の4か月で732コミット。全体の8割が、公開直前の4か月に集中していました。

2023年は、AstroとWordPressをつなぐ骨組みを作ったところで止まり、そのまま7か月間、1件のコミットもありません。

2024年は、手が空いたメンバーが、すきま時間に移植を進める1年でした。1月にフォント設定とNote一覧、3月に沿革とメンバーページ、夏にNote詳細・Lab・会社概要・サービス一覧…。担当もその時々で入れ替わりながらの、文字通りの匍匐前進です。履歴には「ビルドエラーのため、一旦コメントアウト」といった生々しいコミットも残っていて、当時の「進めたいけど時間がない」感がにじみます。そしてクライアントワークが重なる秋、プロジェクトはまた止まりました。

2025年2月に転機が訪れます。当時は外部パートナー、現在はnecco社員のサミさんが参画し、「3月末公開」という目標を立てたところから、プロジェクトは別物のように走り出します。

参画直後のサミさんに最初にお願いしたのは、新機能ではなくTailwind CSS（スタイリングの仕組み）のメジャーアップデートと、Node.jsの更新という土台整備でした。それが終わると、メンバーページのmicroCMS移行、Aboutページ、サービス詳細、お問い合わせ・採用応募フォーム…と、依頼していき、残っていたページを次々に形にしてもらいました。

このように振り返ると、止まっていた原因は技術的な壁ではなかったことがよくわかります。クライアントワークの合間にのみ進める自社サイトには、専任の推進力がありませんでした。動き出すのに必要だったのは「人」と「期限」でした。

公開日、切替19分でロールバック

サミさんの参画で一気に形になったサイトは、目標の3月末からスタイル調整で1か月ほど延びつつも、2025年5月末に公開できることになりました。

そして公開当日、事件が起きます。

iPhoneのSafariで「necco Lab」のページを開くと、ブラウザごとクラッシュしてしまうことが判明しました。
necco Labは、メンバーが制作したイラストや動画作品などをタイル状に並べたページで、実験的な作品も含めて自由に発信する場です。

そして、ブラウザがクラッシュする原因は、動画配信をBunny Streamという仕組みに移行した際、一覧ページで多数の動画を同時に自動再生していたことでした。PCでは動くのに、実機のiPhoneでは負荷に耐えられませんでした。しかも毎回クラッシュするわけではないので、「何個かモーダルを開いたり閉じたりした後、タグをクリックしたらクラッシュしました」といった報告になり、再現条件の特定だけでも一苦労でした。

チームで話し合い、「同時再生を頑張って直す」のではなく、仕様自体を変える決断をしました。一覧はサムネイル表示にして、タップするとモーダルで再生する形式へ。そもそもYouTubeも規約で複数同時の自動再生を認めていません。動画の自動再生によって、ブラウザや帯域に負荷をかけてしまっている現状から、サムネイル表示への変更は、ユーザーにも優しいと判断しました。

修正版ができた日の午後のSlackは、慌ただしいものでした。

• 昼、Lab担当の髙木さんから「クラッシュはしなくなったかと思います…！」の報告。ただ、別のメンバーの実機ではまだ再現する
• 「完璧を待つより、一回公開してもいいかもしれないですね」と判断
• 17:43、necco.incのドメインを新サイトに切替
• 8分後、阿部さんがスマホで「レイアウトシフトしちゃってるかもです！」と報告。原因はWebフォントの読み込みタイミングによるもので、切替前の環境では気づけないものでした
• 18:02、「仕方ないですね、ドメイン戻しましょう！」／切替からわずか19分でロールバック
• 18:30、修正方法を発見。「これ入れたら解消しそうです〜」
• 18:37、再公開。その勢いのまま、Aboutページの背景の不具合と、ミーティング中に見つけた404も直して、19時前にはすべて解決

念のために書き添えると、お客さまのサイトを公開するときは、こんな進め方はしません。検証環境での実機チェックを何重にも重ね、公開手順や切り戻しの段取りを整えたうえで、慎重に当日を迎えます。でも自社サイトでは、その慎重さよりも、スピードと「やってみよう」を優先しています。 失敗しても困るのは自分たちだけで、直せるメンバーがその場に揃っている。 この日の行き当たりばったりは、自社サイトだからこそ許される身軽さでもありました。

かっこいい公開日ではなかったけれど、すぐに気づくし、気づいてから直すまでが速いチームなのだと、ログを読み返すたびに思います。

公開後の1年こそが本番だった

一般的には、サイトリニューアルの話はここで終わるかと思います。 でもneccoの場合、ここからが本番となります。

公開後のコミット数を月別に並べてみます。

公開から1年あまりで、あわせて1,200件を超える変更です。しかもこの数字には、記事の追加や文言の修正といったコンテンツの更新は含まれていません。コンテンツはCMS側で管理しているので、ここで数えているのは、見た目・機能・コードの構造に手を入れた変更だけ。つまり1,200件は、まるごと「サイトそのものの改良」の回数です。ここからいくつか、印象的だったものを紹介します。

公開直後のプチ改善（2025年6月〜7月）

公開して終わり、にならなかったのは、公開直後から「気になるところ」が次々に見つかったからです。

Labにローディング表示を追加したい、記事内のリンクをカード形式で見せる機能を作りたい、フォーム周りのセキュリティを強化したい、キャプションの文字色のコントラストを強めたい、といった要望が次々と湧き、その中で地道な改善を続けました。
大きな機能追加ではありません。でも、この「走りながら磨く」リズムがここで生まれました。

おばけちゃんと箱猫ちゃんが3Dになった（2025年8月〜10月）

サイトの一番下のフッターには、neccoのキャラクター「おばけちゃん」と「箱猫ちゃん」の3Dモデルがひそんでいます。

2025年8月末ごろ、CEOの阿部さんがフッターのデザインを起こして「おばけちゃんと箱猫ちゃんはWebGLで実装します」と宣言します。その後、デザイナーの長野さんがBlenderから3Dデータを書き出します。いつもながら、「ポリゴン多すぎると重くなりそうなので少なめのも用意しました」というような実装的な気配りもいただきつつ（メンバー間の垣根を越えた気配りにはいつも感謝しています）、サミさんがWebGLで組み込みました。

同じ時期には、お問い合わせへ誘うCTAセクションにも、カードごとに異なるマスクがかかる、WebGLインタラクションを実装しました。実装途中のコミットログには「スマホで触る場合にキャラクターが壊れたバグを修正」「ページ遷移の時のコンソールエラーを修正」といった記録がずらりと並んでいて、Webで3Dを扱うことの一筋縄ではいかない難しさを物語っています。

公開後もフィードバックの往復は続きました。「ロゴの先や根っこが枠の外に出る感じにすると、もっと3D空間の広がりを表現できるかも」という空間デザインの視点が入ったり、10月にはスクロールに合わせたパララックスが加わったりと、キャラクターが少しずつ「そこにいる」感じになっていきました。

一方で、割り切った判断もあります。ウィンドウをリサイズするとキャラクターの位置が入れ替わってしまう現象は、「画面を縮めながら見る人は少ない」とコストを考えて、あえて対応していません。 3DやWebGLのような表現は、こだわるほど処理が増えて、サイトの表示が重くなっていきます。表現の豊かさと表示の軽さは、どうしてもトレードオフの関係になりがちな一面を持っています。
だからneccoでは、どこまでこだわり、どこで割り切るかを、職種の垣根を越えて、メンバー同士で話し合って決めています。

フッター全面刷新と、創業ストーリー（2025年12月）

12月は、フッターを全面的に作り直しました。 これまでは最低限の情報のみを表示していましたが、月173コミットの間で、タブ切り替えでコンテンツを行き来できるようにして、情報量を多くして、目的のコンテンツにすぐに辿り着けるような網羅的なフッターにしました。 同じ月には、neccoの成り立ちを綴った「創業ストーリー」ページも新設しています。

200コミットのフルスクリーンメニューと、「2回タップしないと押せない」問題（2026年1月〜6月）

2026年1月は、この1年でいちばんコミットが多い月でした。その大半が、GSAPというアニメーションライブラリを使ったフルスクリーンメニューのリニューアルに伴うものです。画面いっぱいに広がるメニューの中に、キャラクターのWebGL、サイト内検索、サービス一覧、SNSリンクまで詰め込んだ、サイトの顔になる機能でした。

このメニューは、当時の新メンバーに実装をお願いしていましたが、なかなか手強かったようです。 Safariでメニューを開いた直後にトップページの映像が固まる、アニメーションの実行中に開閉を連打すると状態が壊れるなどの問題がありました。
そして特に苦しんだのが、iOSのSafariで「2回タップしないとリンクが押せない」問題です。

タッチデバイスの判定を変えてみる、イベントの扱いを変えてみる、それで直ったと思ったら別の環境で再発する。先輩メンバーの助言を受けつつ、実機にデバッグ用の表示を仕込んで検証し、変更を取り消すコミット（Revert）を何度も重ねながら、原因を探り続けました。最終的にポインターイベントベースの判定に落ち着いて解決したのは、実装開始から4か月以上あとの2026年6月のことです。

4か月、と書くと長く感じるかもしれません。でも、これも自社サイトだからこそです。もしこれがお客さまからの依頼を受けたプロジェクトであれば、期限に応じて、経験のあるメンバーが途中で引き取っていたかもしれません。自社サイトなら、本人が自分の手で原因にたどり着くまで、じっくり任せて成長を待つことができます。この4か月の試行錯誤は、機能の実装記録であると同時に、メンバーの成長の記録でもあります。

正直に言うと、この間ずっと「今度こそ直った！」という手応えがあったわけではなく、むしろ「果たして本当にこれで改善するのかな」という気持ちのほうが強かったはずです。動きのもたつきは人によって感じ方が違うので、体感だけに頼らず、数値として計測できる形にするのがベストだった、というのが、この件の学びです。

記事のCMS移行と、育っていくnecco Lab（2026年3月〜6月）

長年の懸案だったNote記事のWordPress→microCMS移行は、2026年4月にようやく実現しました。この記事自体も、移行後の仕組みの上で公開されています。

単なる引っ越しにせず、記事で使える表現も一気に増やしました。動画（自動再生やキャプションにも対応）、Lottieアニメーション、リンクカード、余白の調整ブロック、HTML埋め込み。翌5月には、表・リスト・コード表記といった本文まわりのスタイルを細かく整備して、「書ける記事の幅」がぐっと広がりました。

公開日に私たちを慌てさせたnecco Labも、この1年で大きく育ちました。作品ごとの詳細ページができ、SNSへのシェア機能がつき、タグやクリエイターで絞り込んだ状態をURLで共有できるようになりました。

管理側にも、YouTubeやBunny Streamの動画を選んで登録できる専用の管理ツールを作り込んでいます。

あの日クラッシュしていたページが、いまではサイトでいちばん実験的で、手のかかった場所になっています。

見えない部分の大掃除（2026年5月〜7月）

派手な機能の裏で、見えない改善も積み重ねました。読み上げ順序やIDの重複解消といったアクセシビリティの修正。採用情報をGoogleしごと検索に対応させたり（まだ検索結果に反映はされていないようですが…）、メンバーページを人物情報として認識させたりする、検索エンジン向けの構造化データの拡充。AI時代への対応としては、AIクローラー向けの方針を明示したrobots.txtと、サイトの概要をAIに伝えるllms.txtも新設しました。

そして2026年7月には、1年分の「勢いで書いたコード」を一掃する大規模リファクタリングを実施。使っていないライブラリを削除し、重複した実装を共通化して、次の展開に備えました。

地味です。書いていて地味だなと思います。でも、この地味な部分こそ、次にやりたいことのための土台です。

なぜ1年も作り続けられたのか

「クライアントワークの合間に、よく自社サイトにそこまで時間をかけられますね」と聞かれることがあります。2年止まっていた頃の私たちに聞かせたい質問です。振り返ると、理由は3つありました。

1. 新メンバーの最初の仕事が「自社サイト」

neccoでは、新しく入社したメンバーを具体的な案件にアサインする前に、オンボーディングタスクとして、まず自社サイトの改善案を考えるタスクを受け持ってもらうようにしています。

ここから生まれた改善タスクの内容は、サイト内のセクションのコンテンツ改善案や、レイアウト余白調整といった細かいものまでさまざまです。そして、この改善タスクの実装は、同じくneccoに入社して日が浅いメンバーにアサインします。

これは教育のためだけの仕組みではありません。自社サイトなら、締切のプレッシャーが比較的少ない環境で、neccoの実装方法やレビューの観点をひととおり体験できます。失敗してもお客さまに迷惑をかけない。それでいて、成果は全世界に公開される本物のサイトです。
安心して試行錯誤できる練習場であり、neccoのデザインと開発の考え方を知る教材でもあります。
改善が止まらないのは、こうして新しい目が定期的に入ってくるからでもあるのです。

2. 改善点を持ち越さない

日々、自社サイトを触っていて見つけた気になる点は、できるだけ持ち越さず、小さなタスクとしてその場で消化するようにしています。公開日の夜、ミーティング中に見つけた404エラー（ファイルがサーバに見つからないエラー）をその場で直したのも、この習慣の延長でした。
悲しいことに、「あとでまとめて直そう」の「あとで」は、だいたい来ないのが世の常で、それは2年の停滞で痛いほど学びました。
大きなリニューアルを待つより、小さく直し続けるほうが、結局速いのです。

3. 職種の壁がない

「トップのnoteカード日付を2px左に調整」…実際のコミット履歴に残っている変更です。こういった「2px」に気づくのは、やはりデザイナーが多いです。そしてそれを、細かすぎると流すことなく、大事にして、直すのがneccoのエンジニアです。本質的には、2pxという数値をただ変更するのではなく、それによって生まれている違和感を解消するのが目的であり、時には、その他の部分もあわせて調整する必要があります。

同じ成果物を作るメンバーとして、職種の分け隔てなく会話する。3Dフッターの「枠の外にはみ出させたら空間が広がるかも」のようなフィードバックの往復が日常的にあることが、サイトの手触りを少しずつ良くしてきました。

2年間の停滞を破ったのが「人」と「期限」だったとすれば、この1年は、それを個人の頑張りに頼らない「仕組み」に変えられた1年だったのだと思います。

necco 10周年、次はデザインを磨きます🔥

Next.jsからAstroへの移行で目指した「速いビルド」と「柔軟なCMS構成」は達成できました。4分30秒〜5分かかっていたビルドは、現在はおよそ2分半〜3分です。
数字だけ見ると半分ほどですが、カテゴリー別の記事の一覧を作るなど、ページも機能も大幅に増やしながら、検索用の索引作りまでビルドに含めたうえでの半分です。

ちなみにサイト内検索は、旧サイトにはなかったAstro版からの新機能です。検索用の索引はビルドのたびに全ページ分を作り直していて、いまは798ページあまりを索引化するのに15秒ほど。そうした「当時はなかった仕事」も含めて、ビルドは当時の半分で収まっています。

速くなった種明かしは、データの取り方を根本から変えたことです。新しいサイトでは、ビルドの最初に必要なデータをまとめて取得し、メモリ上にキャッシュして全ページで使い回します。WordPressもmicroCMSも、100件ずつまとめて取得しながら全件をひと巡りするだけで、ページを作るたびに問い合わせ直すことはありません。記事が増えても、アクセス回数はほとんど増えません。「ページごとに毎回取りに行く」から「最初にひと巡りするだけ」へ仕組みを変えたことで、コンテンツやページが増えても、ビルド時間が膨らみにくいサイトになりました。コンテンツはWordPressとmicroCMSを併用しながら、段階的に移行を進め、残すところは実績（Projects）の移行のみとなりました。

この1年あまりでいちばんの収穫は、自社サイトを「作り続けられるチーム」になれたことだと思っています。
サイトは完成品ではなく、会社と一緒に育ち続けるもの。
10周年を迎えても「制作中」であることを、むしろ誇りに思うことにしました。

そして、冒頭で「デザインリニューアルは、いったん保留」と書いたのを覚えているでしょうか。
基盤を移行し、機能を作り込み、コードの大掃除まで済ませた今、ようやくその「保留」を解くときが来ました。

necco 10周年。次は、デザインを磨きます🔥
トップページをはじめとしたデザインリニューアルの様子は、また改めて記事にします。どうぞお楽しみに。

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせ からお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は 採用情報 をご覧ください。

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料 からダウンロード可能ですので、ぜひご活用ください。