サービスサイトを畳んで、ハブに作り直した
これまで mt-tk.com はサービスサイト的なページでした。「Web 制作の実装パートナーです」というメッセージを置いて、お問い合わせフォームに繋げる形。
でも今年、フロントエンドエンジニア転向を決めたタイミングで、サイト構成を見直しました。サービスを売るためのページではなく、自分の活動の全体像が見えるページに作り変えたい。
構造
mt-tk.com（個人サイト・活動の入り口）
├── portfolio.mt-tk.com（制作実績）
├── mt-tk.com/life_builder（このブログ）
└── X / Zenn / GitHub への動線mt-tk.com を「玄関」に位置づけて、訪問者がそこから興味のある場所へ辿れる構造に。Bento Grid という 2023 年頃から続くトレンドデザインで、視覚的に整理しました。
設計で意識したこと
訪問者を迷わせない
リンクは厳選しました。SNS は X / Zenn / GitHub の3つだけ。ポートフォリオとブログを目立たせて、SNS は控えめに。
「あれもこれも」と並べたくなる気持ちを抑えて、本当に見せたいものだけにする。これが一番難しかった。
派手な機能は足さない
シンプルなサイトです。アニメーションも最小、JS も使っていません。代わりに、見えないところで気を利かせるようにしました。
- ダークテーマ対応（OS設定追従）
- アクセシビリティ（prefers-reduced-motion 対応）
- ブランドガイドライン準拠（X / Zenn / GitHub の公式アイコンカラー）
丁寧な実装で「分かる人には伝わる」サイトにしました。
名刺・SNS・メール署名の URL を統一
これまでは「ポートフォリオは portfolio.mt-tk.com、ブログは mt-tk.com/life_builder、X は @Matsutake_prgrm…」と、人に紹介するときに毎回複数の URL を伝えていました。
今後は「mt-tk.com」だけ伝えれば、そこから全部に辿れる。名刺もスッキリします。
なぜこの構造にしたか
採用担当者やエンジニア仲間が見たときに、活動の全体像が一目で把握できる状態を作りたかったからです。
ポートフォリオだけ送っても「他に何やってる人なんだろう」となるし、ブログだけ見ても「実績はあるんだろうか」となる。両方を「同じ人」として見せられる起点が必要でした。
おわりに
この記事を書いている時点で、ハブサイトは公開済み、固定ツイートも差し替え済み。次はブログ自体（このサイト）の整理に取りかかります。古い「制作実績」ページや「サービス一覧」を削除して、ナビゲーションをハブと整合させていく予定です。
シンプルな個人サイトでも、設計思想を持って作ると、後から見直しやすいし、人に説明しやすい。そんな当たり前のことを、改めて確認した数日間でした。
