数年ぶりに TSUKA TECH! をリニューアルしました。目的は「あちこちに散らばっていた自分の活動を、1つのタイムラインに集約して見やすくすること」です。
なぜリニューアルしたのか
これまで技術記事は Zenn や Qiita、週報っぽいものは note、業務に関することは会社のテックブログ、登壇資料は SpeakerDeck……と、書いた場所がバラバラでした。それぞれのプラットフォームには読者がいるので発信先を分けること自体は悪くないのですが、「自分がこれまで何をやってきたか」を一覧で見せる手段がありませんでした。
そこで、このサイトを「自分の活動のハブ」として作り直すことにしました。記事の本文は各プラットフォームに置いたまま、タイトル・日付・媒体だけをこのサイトに集約し、クリックすると元記事に飛ぶ形です。
書くモチベーションの話
正直なところ、このサイトだけで完結する記事を書くモチベーションは、ここ数年なかなか上がりませんでした。「わざわざ自分のブログに書かなくても Zenn でいいのでは」という気持ちがどうしてもあって、結果として自分のサイトは放置気味になっていました。
今回、会社のテックブログや外部で書いたものも含めてタイムラインに並べてみたところ、印象がガラッと変わりました。並べてみると「意外と書いてきたな」と実感できるんですよね。これが思っていた以上に効きました。
サイトを更新する = 記事を書く、ではなくなったことで、「外で書いたものがここにも積み上がっていく」という感覚が生まれました。この積み上がりが見えること自体が、次を書くモチベーションになりそうです。
ロゴの「！」について
ロゴの TSUKA TECH! の「！」は竹をイメージしています。若竹のように青々と真っ直ぐ、みるみる成長していくように、という思いを込めています。
テーマカラーの若竹色は以前のサイトから引き継いだもので、今回のリニューアルでも変えずに残しました。デザインは大きく変わりましたが、この色だけは変えたくなかった部分です。
見やすくしたところ
- 活動タイムライン — すべての活動を1本の時系列に統合し、年ごとに区切って表示。媒体ごとのバッジ（Zenn / Qiita / note / 登壇 / 所属企業）で出典がひと目で分かるようにしました
- カテゴリの整理 — Tech / Diary / Books / Talk の4つに整理。以前は「ブログ」と「読書」が同じ並びにあって分類の軸が混ざっていたので、「活動の種類」という1つの軸に統一しました
- フィルタ — カテゴリタブに加えて、トピックタグ（#PHP、#Laravel、#セキュリティ など）でも絞り込めます
- Talks ページ — 登壇資料だけをまとめたページを新設。2020年から18件ありました
- About ページ — 経歴やスキル、発信チャネルをまとめたページを追加
- ダークモード — OS の設定に追従しつつ、ヘッダーのボタンで手動切り替えもできます
技術的な変更点
構成は SvelteKit のままですが、中身はかなり変わりました。
ヘッドレス CMS をやめて Markdown + Git 管理に
以前は Contentful で記事を管理していましたが、記事をすべて Markdown に移行しました。記事が Git の管理下に入ったので、履歴も追えるし、エディタで書いてそのまま push できます。CMS の管理画面を開く必要がなくなったのは思っていた以上に快適です。
全ページを静的生成（SSG）に
以前はリクエストのたびに CMS の API を叩いていましたが、すべてビルド時に静的な HTML を生成する形にしました。外部 API への依存がなくなったので、表示は速くなり、CMS 側の障害やレート制限の影響も受けなくなりました。環境変数も不要になっています。
外部記事はビルド時に自動取得
Zenn / Qiita / note の記事は、ビルド時に各プラットフォームの API から自動で取得しています。新しい記事を書いたら、デプロイするだけでタイムラインに並びます。取得に失敗してもビルドは落とさず、前回取得した内容をそのまま使うようにしてあります。
アイキャッチの自動生成
記事のアイキャッチは、タイトルとカテゴリから自動生成しています。画像を用意する手間がなくなり、見た目も揃いました。日本語の文字幅を考慮して折り返す処理を入れているので、長いタイトルでもレイアウトが崩れません。
その他
- RSS フィード（
/rss.xml）を配信。すべての活動が流れます - sitemap.xml、JSON-LD、OGP 画像などを整備
- 画像を最適化して、アイキャッチ全体で 4.6MB → 800KB に削減
おわりに
「書く場所を1つにまとめる」のではなく「書いた場所はそのままに、見る場所を1つにまとめる」という方針にしたのが、今回いちばんうまくいった判断だったと思います。
これから書くものも、登壇するものも、ここに積み上がっていきます。若竹のようにすくすくと伸びていけるよう、ぼちぼち更新していきます。