Vercel × Next.js × TailwindCSS × 私の未完成な設計図
はじめに：「私は何者か？」をコードで可視化したくて
ブログや発信をしていると、必ずぶつかる問いがある。
それは、「自分とは何者かを、どう伝えるか？」ということ。
この問いに真正面から向き合いたくて、私はプロフィールページを一から自作することにした。
WordPressで運営しているメインサイトから独立したサブドメインを使い、React/Next.jsとTailwind CSSを使って、まるで自分の“輪郭のなさ”をなぞるように設計図を描くような感覚で制作を始めた。
技術スタックと準備
今回のプロフィールページ制作に使用した主なツール・技術
- Next.js（App Router構成）
- TypeScript
- Tailwind CSS（初挑戦）
- Vercelでホスティング＋サブドメイン設定
- Canvaで作成したFavicon
- GitHubによるバージョン管理
特にTailwind CSSの導入は、スタイルの設計を感覚的に行える点が新鮮で、自分の直感をそのままデザインに落とし込める感覚があった。
制作のプロセス｜コードを書くという内省
🔧ディレクトリ構成・ファイル設計
最初に作成したリポジトリ名はmy-about-blog-page。
リポジトリ構成は以下のように整理した：
TERMINAL — bash
my-about-blog-page/ ├── app/ ├── components/ ├── styles/
トップページはAboutHero.tsxとAboutSection.tsxの2つのコンポーネントに分け、レイアウトとテキスト構成を切り分けることでメンテナンス性も意識した。
🎨CSSとフォント、アニメーションの微調整
- globals.cssに定義したフォントが反映されず、Tailwindのpreflightに悩まされた
- Tailwindのアニメーションクラスで、opacityやz-indexの挙動が思うようにいかず、微調整に時間がかかった
- Canvaで作成したロゴを.ico形式に変換し、Faviconとして設定
こうした細かい作業をひとつずつ積み上げる中で、コードが自分の思考や感情を代弁してくれるような感覚を覚えた。
成功とつまずきの記録
💠 うまくいったこと
- Tailwind CSSのクラス設計により、構造とスタイルの責任範囲が自然と分離され、整理しやすかった
- コンポーネント単位で管理できることで、開発と同時に ”思考の構造化” も進んだ
❌ つまずいたこと
- VercelとGitHubの連携設定で、リポジトリが表示されず「Only selected repositories」設定に気付くまで時間を要した
- 複雑なスタイルが重なり、想定外のアニメーション不具合に悩まされた（主にopacityとtransitionの競合）
今後の展望｜このページはまだ ”完成していない”
このプロフィールページは、まだ発展途上だ。
だが、私はあえてこの未完成な状態でも公開することに意味を感じている。
今後は以下のような展開を予定：
- Vercel上でサブドメインとして正式公開
- 自作のデスクトップアプリとの連携を意識したツール紹介コンテンツとの統合
- このページを、「思想の入り口」「ポートフォリオ導線」として位置付ける設計へ展開
「私とは何者か」を探すプロセスそのものが、このページを通じて少しずつ輪郭を持ちはじめている。
あとがき：コードと感情のあいだで
✨ 感情とコードの狭間で
コードを書くということは、
”感情に**輪郭**を与える作業” だったのかもしれない。
コードを書くということは、
”感情に**輪郭**を与える作業” だったのかもしれない。
ページを作るたびに、私は自分の考えをコードに託し、試行錯誤を重ねた。
構文エラー、スタイル崩れ、思い通りにいかないアニメーション……
けれどそのすべてが、「私という存在を形にする試み」だったのだと思う。
プロフィールページは、ただの自己紹介ではない。
それは、私が自分を設計し直し、世界に向けて再定義する場でもある。
コメント