ホームページを更新しました

こんにちは、東京都板橋区のITカンパニー、鳥商日本株式会社です。
当社はMicrosoft Cloud Solutions Provider (CSP)として、Microsoft 365製品を法人さま向けに販売するほか、日本HP社販売代理店としてコンピュータの販売、相見積もりサイト比較ビズ上でチラシや名刺のデザイン業務などを営んでいます。

この度は、当社のコーポレートサイトを従前のHubSpot CMSで作成したサイトから、完全自社開発でNext.js フロントエンドフレームワークとVercel ホスティングサービスを活用して軽量なウェブサイトに移行しましたので、その一連の流れを皆さまにご紹介したいと思います。

1. 更新に至った背景

今までも当社では自社のコーポレートサイトを公開しておりましたが、従来はHubSpot CMSというCRMツールのHubSpot社が提供する無料のウェブページビルダを使用しておりました。
当社では下記のHubSpot CMSの利便性およびデメリットを比較衡量し、かつ社内の技量を引き上げる目的で、代表の私主導でコーポレートサイトを作り直すことにしました。

HubSpot CMSが優れていた点

CRM・SFA連携：フォームの入力内容や会議の予約がHubSpot内の営業管理ツールと自動で連携されて便利だった。
セキュリティ：WordPressのように自身でプラグインの更新をする手間やセキュリティリスクの心配がなく、運用が簡単だった。

HubSpot CMSで足りないと感じた点

ページ一覧の使いにくさ：「ウェブサイトページ」と「ランディングページ」に分かれていて、当社の運用では扱い方がよく分かりませんでした。
SEOの弱さ：SEOを売りにしている割には、コンテンツの質のせいもあってか、ページランクが上がるのにかなりの時間を要しました。

中小企業さま向けにITソリューションを提供する当社の立場としては、社内でITツールを運用できるリテラシーがある人材が所属している会社さまにはHubSpot CMSは非常に便利で、WordPressを自作するよりも優れた選択肢であると現在も実感しています。
他方で、ウェブサイトの制作および運用すべてのプロセスを外注する必要があったり、より高度な拡張性を必要とするお客さまには、やはりプロプライエタリのページビルダに依存しない開発手法に軍配が上がります。

2. CMSの選定

作り直しが決まったからには、移行先をどれにするか数多の選択肢から悩むわけですが、代表本人の苦い思い出からなんとしてもWordPressだけは避けたいという強い思いがありました(笑)。

中小企業にWordPressをお勧めしない理由

インターネット上最大の攻撃対象である

WordPress is the most popular software for building websites, powering over 43% of the internet.
(WordPressはウェブサイトを作成するうえで最も人気なソフトウェアであり、インターネットにおける43%以上のウェブサイトを支えています。)
引用：WordPress公式ブログ（翻訳：池田）

WordPressは世界的に市場シェアが大きいため、サイバー攻撃の主要な対象になっています。
実際に私が過去にホスティングしていたサイトでも、同じデータベース上に格納されていた複数のサイトがデータベース改ざんの被害に合ったことがありますし、WordFenceプラグインで監視する限り1日10件以上の不正アクセス試行を確認したこともあります。
拡張性があるようでない
WordPressはブラウザ上で閲覧されるウェブサイトのみにコンテンツを展開することを専ら前提としていますから、ウェブサイト以上のスケーラビリティはありません。また、WordPressとそのプラグインを組み合わせて様々なウェブサイトを開発することができるものの、フレームワークとしてはやはりWordPressベースなので、単純なブログサイトや企業サイトを作る以外の目的には最適化されていません。

ヘッドレスCMSを知る

WordPressの流行以後に話題になっているCMSについて調べを進めるうちに、StrapiやContentfulなどをはじめとする 「ヘッドレスCMS」 が企業で採用され始めたことを知りました。
※ヘッドレスCMSとは、WordPressのようにコンテンツ管理とフロントエンドが統合されたCMSではなく、バックエンドとフロントエンドが分離され、主にバックエンドのコンテンツ管理に集中したCMSのことで、分離されたフロントエンドからAPIを利用してコンテンツを呼び出すことでマルチデバイス環境におけるコンテンツ管理を容易にさせるシステムです。
中でもStrapiはNode.jsベースで、私自身Node.jsには過去のDiscordのBOT開発などで事前知識があったので、これは面白そうだということで検討を進めることにしました。
下記に私が感じた利点、欠点をまとめておきます。

ヘッドレスCMSの利点

拡張性が高い：例えば一つのCMSから、ウェブサイトとスマホアプリの両方にコンテンツを展開するといったことが可能です。
バックエンド分離でセキュリティリスクを軽減できる：フロントエンドとバックエンドが分離されているので、万が一サーバーに不正なアクセスがあったときの被害を最小化できます。

ヘッドレスCMSの欠点

開発工数が増える：フロントエンドとバックエンドを個別に開発する必要があるため、当然に開発工数が増えます。
コンテントモデリングが複雑：CMS上で設計するコンテントモデリングが将来の拡張性を左右するので、慎重な設計が必要です。

詳細は割愛しますが、フロントエンドはStrapi公式サイトでも紹介ページがあるくらいなので、Next.jsが相性が良さそうだ、ということになりました。

3. フロントエンドのみの開発

方向性も大まかに決まったところで、当社で契約しているエンジニアに「StrapiとNext.jsを使って自社サイトをリニューアルしたい」という相談を投げかけたところ・・・

「静的ページだけならバックエンドいらないじゃん」

の一言と、~~単に仕事が増えるのが面倒~~などの理由でフロントエンドのみの開発を強く推奨され、加えて下記の考慮すべき点もあったのでフロントエンドのみでサイトを完成させるという方針に切り替えました。

サイト上でユーザー管理をしない
ブログは当面代表本人がマークダウンファイルで更新するのでCMS上で編集できなくてもよい
データベースを一切使わない

4. デザイナー・エンジニアとの連携

プロジェクトは今年の8月下旬に私一人で企画をはじめ、9月上旬から下記のメンバーで開発を開始しました。

PM: 代表本人
デザイナー: 外注、インドネシア在住
フルスタックエンジニア: 外注、マレーシア在住

突然二名も国外の外注スタッフが登場しますが、もともと代表の個人的な繋がりで関係性があり、デザイナーには以前から名刺やフライヤーのデザインを依頼していたのと、エンジニアは私とデザイナーの共通の知り合いでちょうど参画可能だったので依頼することにしました。

開発の流れを順序だてて落とし込むとおおよそ下記の通りです。

作成するページを決定（ホーム・サービス・プライバシー・特商法・問い合わせ、の5ページ）
コンテンツを下書き（Notionを使用）
デザイン化（Notionの下書きをFigmaで成形）
デザインのコード化（FigmaのデザインをもとにCSSとTSファイルを作成）
GitHubで更新管理
GitHubレポジトリをVercelと連携し、インターネット上で公開（本番環境と開発環境で分けています）

この流れにおいて特筆すべき点があるとすれば、下記のようなことが挙げられるのではないでしょうか。

外注スタッフは日本語が分からない： 運よく英語はビジネスレベルで理解のある人材なので、英訳をコメントアウト併記してパワープレイで解決しました。
問い合わせフォームにはSendGridを活用： 初期段階ではフォーム送信自体をバックエンドで管理しないことにしたので、Next.jsに直接落とし込みました。

5. 初期公開と開発工数

9月10日に着手開始し、10月16日に当社のドメインとVercelを接続する形で初期公開が完了。約1カ月と1週間をかけてのんびり取り組み、かつメンバー全員が各々の好きな時間に1日2-3時間程度で作業する形だったので、のびのびと勉強しながら開発できました。

所要工数

~~PM: 自分のことなので計算を忘れました。~~
デザイナー: 計3人日
エンジニア: 計8人日

・・・ということで、当社のウェブサイト程度のものであれば長くても15人日程度見積もっておけば作れる、というわけです。
お客さまへの請求単価に変換して計算すると、税別総額60万円前後から制作が可能になります。
※バックエンドも併せて開発する場合はやはりその分の開発工数が増えるので上記に追加となります。

こんなお客さまは、当社への見積もご検討ください

会社のホームページをモダンなデザインでリニューアルしたい
予算は100万円以内でコンパクトな設計にしたい
WordPressに依存しない開発に取り組みたい

ホームページ制作のお問い合わせはこちら