WordPressからNotion + Next.jsへ 研究所ブログを全面リニューアル
こんにちは、小田（@linyows）です。さくらインターネットは、リモートワーク中心の勤務スタイルなので、日々、自宅の自室で作業しています。できるだけ快適に働けるよう、仕事部屋の環境にはこだわっています。最近は、好みのフレグランスとして「檜オイル」にすっかりハマっていて、香りの力に助けられています。
さて、今回は私たちさくらインターネット研究所が取り組んだブログサイトの全面リニューアルについてご紹介します。2024年3月12日に公開した新サイトの裏側では、課題整理からブランド設計、データ移行、実装まで、さまざまなチャレンジがありました。この記事では、なぜリニューアルしたのか、どう実現したのか、どんな工夫をしたのかを余すところなくお伝えします。
なぜリニューアルが必要だったのか？
研究所では、これまでWordPressを使ってブログを運用していましたが、以下のような課題が浮かび上がっていました。
- 情報の優先順位が分かりにくく、必要な情報に辿り着きづらい
- 読者に「読まれる」ための設計や工夫が足りない
- 成果発信が更新しづらく、社内外への情報共有に課題がある
そのような中、私自身が研究員でありながら「このままではもったいない」と感じ、社内向けにサイトリニューアルの提案をしました。ただし、本業とは少し異なる領域だったこともあり、具体的な着手までには時間がかかってしまいました。
しかし、日常業務の中で研究所の活動がうまく伝わっていない状況にたびたび直面し、「やはり情報発信の基盤を整えることが重要だ」と再認識。1年越しで、ようやくプロジェクトが動き出しました。
情報管理の基盤をNotionに統一
さくらインターネット研究所は、ドキュメントのプラットフォームにNotionを使っています。研究に関する情報から、タスク、プロジェクト、議事録、日誌、イベントスケジュール、人事評価とあらゆる情報をNotionで記録しています。そのため、そこから画像やらテキストをDuplicateしてすぐに記事にできます。また、記事に対するレビューコメントができるので、Notionでブログ記事が書けるとだいぶ便利が良いのです。
そこで、ブログ執筆もNotion上で完結できるような構成を検討しました。
- 記事作成： Notionで原稿を作成
- 公開： Next.jsで静的サイトを生成し、GitHub Actionsでビルド＆デプロイ
- ホスティング： さくらのクラウドVMで配信
この構成により、Notionで書いた記事が、そのままブログとして公開できるワークフローが完成しました。図にすると以下のようなシステムです。
データの移行：WordPressからNotionへ
既存ブログには約400本の投稿があり、これらをNotionに移行する必要がありました。
Markdownのエクスポートとインポート
まずはwordpress-export-to-markdownを使い、WordPressからMarkdownファイルを出力しました。
$ npx wordpress-export-to-markdown --input=export.xml --output=markdown
Starting wizard...
? Create year folders? No
? Create month folders? No
? Create a folder for each post? No
? Prefix post folders/files with date? No
? Save images attached to posts? No
? Save images scraped from post body content? Yes
? Include custom post types and pages? Yes
Parsing...
18 "page" posts found.
396 "post" posts found.
32 "taxopress_logs" posts found.
1 "wp_global_styles" posts found.
657 images scraped from post body content.
Saving 447 posts (0 already exist)...
[OK] page - about
[OK] post - hello-world
...
$ cat index.md
---
title: "AWS Greengrassを動かしてみた"
date: "2017-06-26"
categories:
- "edge-computing"
- "internet-of-things"
- "webサービス"
- "network"
- "misc"
---
こんにちは、さくらインターネット研究所の菊地です。研究所ブログに登場するのは初めてになります。以後よろしくお願いいたします。
...出力されたファイルには、タイトルや日付、カテゴリなどのメタ情報も含まれており、変換精度は良好でした。しかし、NotionにMarkdownファイルをインポートすると、メタ情報がすべて消えてしまうという問題が発覚。さすがに全ブログポストのメタ情報手入力は面倒すぎる…ということで別の方法を考えます。
CSVのエクスポートとインポートでメタ情報を保持
代替手段として、Export any WordPress data to XML/CSV プラグインを使用して、記事情報をCSV形式でエクスポート。NotionのDatabase機能を使えば、CSVから直接インポートでき、カテゴリや著者などの情報を正しく保持できます。
この手法により、全記事の基本情報をNotion上のデータベースとして再構成することができました。記事表示の乱れや埋め込みコンテンツ（Speakerdeck、Slideshareなど）は、メンバーで地道に確認・修正していきました。
ブランドの再定義
今回のリニューアルでは、単なるUI刷新にとどまらず、「研究所としてのブランドをどう見せるか」も重要なテーマでした。
ミッションのブラッシュアップ
もともと研究所にはミッションがありましたが、社内向けに閉じた内容だったため、外部の人にも伝わる形にリライトしました。
私たちは、インターネット技術に関する最先端の研究を行い、その成果を広く発信・活用することで、社会と会社の発展に貢献します。中長期的な視点を持ち、3〜5年後に実用化が期待される技術を探求しながら、メンバー一人ひとりが「面白い」と感じるテーマに挑戦し、創造的なイノベーションを生み出します。
ブランドビジョンは、ミッションと同一に設定。「ありのままの研究所」を見せる方針にしました。
ターゲット定義
私たちが発信している情報の種類やステークホルダーから、サイトを閲覧するターゲットを大まかに以下のように定義しました。
- 情報学系の研究者
- ソフトウェアエンジニア
- さくらインターネット関係者（社員・顧客・株主など）
研究する領域定義
私たちは、今、どんな研究をやってどんなことに取り組もうとしているかを @yuuk1 中心に整理し言語化を行いました。これにより、研究所の全体像が社内外から認知できるようになったと思います。詳しくは 研究領域ページ をご覧ください。
コンセプトビジュアルの制作
研究所についての言語化が進んだので、セマンティック・ディファレンシャル（SD）分析を用いて、ざっくりと研究所を形容するワードを明示し、ビジュアルの方向性をつくります。研究は、事実の積み上げによって無から有を生み出す、あるいは発見するという行為であるとし、そのためのあくなき探究心、誠実な姿勢、フラットな考察、が必要であると考えました。結果、それらを形容するワードは次のようになりました。今回、SDで一般的に行うランクづけではなく、単純化してどちら側という表現にしました。
- 情熱的より知的
- 伝統的よりモダン
- カジュアルよりフォーマル
- 華やかより素朴
- 緻密よりシンプル
- 完全より成長
なんか、アジャイルソフトウェア開発宣言っぽくなっていますが、これらをもとに、ブランドらしさを視覚的に表現します。
モチーフ案
続いて、研究領域から連想されるモチーフ例を挙げていきます。
- ノードとパス（ネットワーク構造）
- バイナリ表現
- クラウド、グリッド
コンセプト
ブランドを表す形容詞とモチーフが揃ったので、この状態からコンセプトビジュアルを作ります。素朴で知的、だけどモダンでフォーマル、そして成長しているようなビジュアルをモチーフ例から考えると以下となります。
- ノードとパスの変化と繰り返し
- 色はなく、モノトーン
ノードとパスは、コンピューティングやネットワークそしてAIに関係します。また、パスが変化し異なるノードとの接続を繰り返すことによって成長を表します。また、モノトーンにすることで素朴さと知的さを演出します。最終的に以下のコンセプトビジュアルができました。
ちなみに、Webサイトの背景はこのビジュアルが使われています。よく観察するとパスが変化するようになっており、記事の可読性を邪魔しないよう徐々にコントラストを低くする工夫がされています。
フォント
続いてフォントです。ビジュアル化したコンセプトはフォーマルさが足りません。そのため、フォントはSerif体を使用します。その中でも古風な Zen Old Mincho (SIL Open Font License)を使うことで誠実さを合わせて演出します。
ロゴ
最後にロゴです。さくらインターネット研究所は、さくらインターネットの一部署です。また、独立したロゴを作らなければならないほど、組織に対する認知が会社と異なる存在ではないため、さくらインターネットのブランド資産を拡張するのが望ましいだろうと考えました。具体的には、シンプルにコーポレートロゴにテキストを追加します。
Design System
ここまでくると、Design Principles やDesign Tokenなど、Design Systemとしてアレコレ作れそうですが、そこまでのコストを今の段階で払うべきか悩みました。プロジェクトがチームとして動いていれば本当はちゃんとやるべきですが、今回は有志でやっています。そのため、時間はあまりかけれません（研究所にデザイナーがいればお任せしたい><）。最低限で進めリニューアルというアウトプットを優先します。
実装：Next.js + Rotion + Bun
冒頭に書いた通り、サイトはNextjsを使って作るので、Reactコンポーネントをガリガリ書いていきます。しかし、Notion APIを使って、Notionで見えているUIをReactコンポーネントで再現するのはとても骨が折れます。これは、手前味噌ではありますが、私の開発する Rotionというソフトウェアを使って楽することができます。
Rotionを使うと、Notion APIから得られる画像のパスから画像をローカルにダウンロードし、パスを上書きしてくれます。そして、APIから得られたデータをNotionのページを再現するReactコンポーネントに引数で渡すだけになります。
具体的には、Nextjsは次のようなコードになります。これは色々と簡略化していますが、Notionのページをそのまま出力する例です。とても簡単ですね！見た目を変更する場合は、Pure CSSでオーバライドすることが出来ます。
import 'rotion/style.css'
import type { GetStaticProps, NextPage } from 'next'
import { FetchBlocks, type ListBlockChildrenResponseEx } from 'rotion'
import { Page } from 'rotion/ui'
type Props = {
blocks: ListBlockChildrenResponseEx
}
export const getStaticProps: GetStaticProps = async () => {
return {
props: {
blocks: await FetchBlocks({ block_id: process.env.NOTION_PAGEID }),
}
}
}
const MyPage: NextPage<Props> = ({ blocks }) => {
return <Page blocks={blocks} />
}
export default MyPageNOTION_PAGEID を環境変数で設定し bun next build するとNotionのページがReactコンポーネントとして出力されます。ブログ記事は400を超え、Rotionが叩くNotion APIの回数も結構な数です。それによりキャッシュがない初期ビルドは10分ほどかかりますが、キャッシュが効いている状態だと5分以内でビルドは終わるようです。Rotionは記事の更新時間を見て差分キャッシュするようになっているため、記事更新時に手動でキャッシュファイルを削除することは不要です。詳しくは をご覧ください。
なお、今回のプロジェクトでは、実験的にJavaScriptツールチェーンにBunを使っています。NpmやYarnに比べて、パッケージのインストールやビルドが速い気がします。
リニューアル Before / After
研究所のいろんな人に協力を得ながらも着手して1ヶ月ほど弱でリリースできました。以下はサイトのBefore／Afterです。以前はブログサイトでしたが、ブランド設計に基づいたモダンなWebサイトとしてリニューアルされています。情報設計によりコンテンツに優先度が設定され、より多くの人に情報が届くことを期待しています。
Before
After
運用：Notionで完結するデプロイ体制
最後に、ウェブサイトの運用についても触れておきます。htmlやjsやimageなどのサイトの資産は、Github Actionsでビルドしています。ビルドを実行するには、Github WorkflowをGUIで実行するだけではあります。
一方で、普段Githubにログインしていないメンバーもいます。そのため、ビルドとデプロイもNotionで完結できるのが一番スマートだということで、Notionに２つの設定をしました。
記事のStatusを Draftから In review あるいは Published に変更すると 自動でGithubのAPIが叩かれるオートメーションの設定と、Notion上に用意したGithub APIが叩かれるボタンの設定です。Notionには外部Webhookを実行する機能がありますが、Github APIを叩くとなると 指定するpayloadが必要となります。つまり、直接はAPIを叩けないので htmlのサーバで動作するPHPでGithub APIを叩く簡易Webhookを書き、最終的にシステム全体は次のような構成になりました。
おわりに
今回のWebサイトリニューアルで実現したかったのは次の3つのことでした。
- 認知のための活動が資産となり複利効果となる
- 情報設計やUIデザインに基づき情報到達性を高める
- 研究所の取り組みや成果が更新されやすい環境にする
この実現のために、研究所で暗黙的だったことを言語化し、分類し整理しました。Webサイトのリニューアルという社外向けの取り組みではありましたが、結果的に研究所メンバーの方向性や意識も揃えることができたのではないかと思います。また、その実現としてブランディングやビジュアルデザインやエンジニアリングを行いました。
今後は、効果測定や評価をどのように行うかを検討しながら引き続きやっていきたいと思います！
著者
2023年11月入社。UIデザイナ、フロントエンドからバックエンド、サーバ構築、システム設計からエンジニアリングマネージメントなどの多様な経験を生かして、研究開発に携わる。また、分散システムでのメールの研究を行っている。クラウドやホスティングにおける不正利用対策に興味がある。福岡でGoやTypeScriptのコミュニティを主催している。