自分の会社のコーポレートサイトをNext.jsでリニューアルした話
こんにちは、大平です。
今回、8年間運営（という名の放置）してきた自社のコーポレートサイト(https://www.codeknights.co.jp/) をNext.jsで書き直してみたので、その知見をシェアします。
なぜWordPressじゃなくてNext.js？
- このように技術記事が書ける
- 管理画面をInternet Facingにしたくない（WordPressでも設定次第でアクセス制限自体はできるけど）
- 記事コンテンツはgitにmarkdownで置いてSSRするような形にしたかったため
- v0でのUI生成の試験運用とNext.jsの個人的な復習
構成
Before
- bootstrap静的ページ
- https://startbootstrap.com/themes から良さげなものをとってきて文言だけ変える
- Netlifyに静的ホスティングでデプロイ
- gulpでbrowserSyncを動かして開発。「開発環境ではコードを変更したらすぐ反映される」仕組みにはなっていた
- とりあえず「作らなきゃ」2時間程度で作ってデプロイした
- 会社ロゴとか必要性を感じなかったので作ってない
- サーバーサイドでの処理は一切なく、問い合わせはGoogle Formとした
記載した内容としては以下の通り。
- アイキャッチ
- 企業理念
- 事業内容
- 会社情報
- プライバシーポリシー
- 特定商取引法に関する表記
- 問い合わせ
会社設立当初のコーポレートサイト設立の動機としては、「各種金融機関の提出に必要」というのが大きく、会社情報やプラポリ、問い合わせ導線などの体裁を整備しておく必要があったのでスタンダードな構成にしました。
After
- Vite + Next.js + TypeScript + Server Actions
- 問い合わせフォームから問い合わせがあると自社のSlackに通知するような小さなServer Actionsを書いている
- 「Next.jsでローカルではビルド成功するのに、Vercelで"Type error: Cannot find module"が発生」する問題にハマったが、以下の記事を見て解決 https://qiita.com/h5810yyabe/items/c0bb3308f1d75786b5ea
- Vercel
- 無料プランでは商用利用ができないのでProプランを利用
- mainに修正をプッシュすると勝手にB/Gデプロイしてくれる
- bulma
- 案件のプロダクト開発などで何回か使ったことがあったので利用した
- Pure CSSフレームワークでJavaScriptへの依存がなく取り回ししやすいのが特徴
- 今だったらshadcn/uiでもいいかもしれない
- v0
- ページの雛形を作ってもらった
- デフォルトではshadcn/uiを利用するが、「bulmaを利用してページを作成して」のようにプロンプトで指定するといい感じにやってくれた
実働としては1.5日くらい。制作にかけた費用は0円（自分の工数単価とドメイン費用とサーバー費用は除く）
サイトの構成的なものは細かい修正はあれどほとんど変更なし。あとロゴ流石に必要かなと思ったのでCanvaで作成。
コーポレートサイトはなぜ作る？現代のコーポレートサイトの正しい期待値とは
会社設立直後はさまざまな審査のためにコーポレートサイト必須なところが多い
「構成」の項目でも少し触れましたが、法人口座の解説や 様々な法人アカウントの 作成などコーポレートサイトの入力が必須なことが多いです。
そしてこの時審査で見られるのは、デザインが綺麗かどうかではなく、最低限の基本的な会社の情報が載っているかどうかです。
具体的には
- 事業内容
- 会社情報
- プライバシーポリシー
- （必要であれば）特定商取引法に関する表記
- 問い合わせ
は必須と考えています。問い合わせフォームはGoogle Formでも良いですが、気にする方は問い合わせフォームを自作しても良いかもしれません。
ちなみにサイト制作含め、フリーランス→法人成りしたときにやるべきことをまとめたnote記事がこちらです。
読んですぐ実践できる！個人事業主のための超速習"法人成り"入門【令和は一家に一社会社を持つ時代です】
キレイなコーポレートサイトをポンと置くだけで集客できるようなうまい話はない
20年前ならともかく、現代ではコーポレートサイトをお金をかけてキレイに作ってもそれだけではほとんど集客できないです。
なぜわざわざこんな話をするかと言うと、問い合わせの中には、ウェブサイトへの期待値が高すぎる、それこそ数百万使って作って放置すれば勝手にCVが増えるって思ってる人が少なくないなと思ったからです。（なのでHP制作業者の営業トークには気をつけましょう）
Webサイトへの流入を増やすには広告を打つかSNS頑張るかオウンドメディアに記事を入れていくかという「継続的な工数投下」が必要になってきます。トップ画面にキレイなアニメーションつけても問い合わせは来ません。
むしろ、広告、SNS、オウンドさえちゃんと作っておけばそこから直に問い合わせに入れたりするので、集客を目的とした場合は優先順位は 「サイトより日々の継続的な発信」 です。（ちなみにco.jpドメインはSEO上強いのでサブディレクトリに記事を入れてSEOを伸ばすという手法があります。）
ただ、置いておくだけでもドメインは育ちますし審査には利用できるのでそこらへんは自分は割り切ってやっています。
まとめ
今回は、コーポレートサイトをNext.jsでリニューアルしたときの裏側の話と、一般論としてのコーポレートサイトの位置付け・正しい期待値について解説しました。
株式会社CodeKnightsは
「生成AI時代の、変化の激しい環境を勝ち残るためのWebサービス開発」
を専門として活動しています。
お仕事のお問い合わせはこちらから↓
参考リンク
- Bulma https://bulma.io/
- Vercel https://vercel.com/docs/accounts/plans
- v0 https://v0.dev/
その他の人気記事
Discussion