Kitty Kio — ロゴ / 表示用
セクション見出し
ナビゲーションと見出し
本文は Sulphur Point。読みやすく、控えめで、人らしい。
コードと技術的な注記には Sometype Mono。
フレームワーク
Next.js 14 App Router と React 18 を採用。サーバーレンダリング、ルート単位のメタデータ、API ルート、必要に応じた静的生成を、クライアントとサーバーの明確な境界で実現します。
このポートフォリオの裏側
このアプリについて
これは見た目だけを変えたテンプレートではありません。kittykio.com は、ケーススタディ、技術記事、実験、そして相談の入口をひとつにまとめた小さなフルスタック・ポートフォリオプロダクトです。
Next.js + TypeScriptMDX + MongoDBクリエイティブに、でも軽く
01
アーキテクチャとスタック
言語とスタイリング
TypeScript でコンテンツと機能の契約を明確にし、Tailwind CSS と Sass 変数でレスポンシブなレイアウトと共通パレットを構成しています。基調色はチャコール、暖かなグレー、フレームレッド、レモンです。
モーションと3D
Framer Motion がレイアウトとインタラクションの動きを担当。React Three Fiber、Drei、Three.js、GSAP、Leva、tsParticles が Now/lab のインタラクティブな実験を支えます。
文章
MDX ファイルを next-mdx-remote でコンパイル。Remark と Rehype のプラグインにより、GFM、見出し、目次、シンタックスハイライト付きコードブロックを追加しています。
データとリクエスト
MongoDB と Mongoose が「いいね」、依頼、ファーストパーティ分析イベントを保存します。Resend を有効にすると、送信された依頼をメールでも通知できます。
ホスティングと可観測性
Vercel へのデプロイ、Vercel Analytics、任意の Google Analytics、そして非公開のファーストパーティ分析ダッシュボードに対応しています。
02
ページごとの体験
/
ホーム
アート主導のランディング体験を、クリエイティブデベロッパー向けに再構成した導入ページです。
- →文字ごとの歓迎モーションと、ホバー時の遊び心ある散らばり表現
- →作品、経験、興味、連絡先へつながるアニメーション付きセクション
- →デスクトップ専用にせず、個性を保ったレスポンシブレイアウト
/projects
プロジェクト
開発作品をケースファイルのように見せる、選び抜いたギャラリーです。
- →タグはコンテンツから生成され、URL に保存されるため絞り込み結果を共有可能
- →浮遊・チルトするカード、ページネーション、いいね、並べ替え、保存、共有
- →カードのケースファイル表示に加え、構造化された詳細ページも用意
/blog
ブログ
CMS ではなく MDX を中心に構築した技術記事ライブラリです。
- →複数タグの絞り込み、安定したカード配置、デスクトップ3列、ページネーション、いいね、保存、並べ替え
- →推定読了時間、読了トラッキング、シリーズ提案、前後の記事ナビゲーション
- →MDX コンポーネント、コードハイライト、目次、画像、英語・日本語の記事版
/now
Now
以前の lab を、現在取り組んでいる実験とサイトの状態を見せるページに再構成しました。
- →操作できる3D空と雲、編集可能なパレット、モーションの再生/停止、実験カルーセル
- →テーマ、画像・モーション方針、パフォーマンスモード、モーション軽減状態を表示する Built light パネル
- →実験を「今探索していること」として誠実に伝えるコンテキスト文章
/contact
お問い合わせ・依頼
一般的な問い合わせフォームではなく、相談のための意図的な入口です。
- →プロジェクト、記事、問い合わせの各依頼で、範囲・時期・予算・希望連絡方法を入力可能
- →MongoDB への依頼保存と、任意の Resend によるメール通知
- →Ask Kiki は、AI 利用を有効にするまで親しみやすい準備中表示
/saved
保存済み
訪問者のブラウザだけに存在する、小さな読書・作品ライブラリです。
- →プロジェクトと記事を、特徴的なライブラリーUIで別々に整理
- →localStorage を利用。アカウント、追跡プロフィール、サーバー側の個人ライブラリは不要
- →ヘッダー、フッター、コマンドパレットからアクセス可能
/resume
履歴書
印刷に適した、1ページの職務概要です。
- →経験、スキル、連絡先を分かりやすく要約
- →PDF として保存できる印刷アクションと連絡先への導線
- →英語版と並んで日本語ルートも用意
03
ビジュアルシステム
色、書体、形、余白、モーションは個別の装飾ではなく、ひとつのシステムとして扱っています。レモンとフレームレッドがこのサイトの二つの主役で、目線とアクションを導きます。読みやすさの土台にはニュートラルなグレーを置き、虹色は Now の実験だけに限定しています。
メインアクセント
Lemon
#e8ff38
メインアクセント：選択状態、ブックマーク、前向きなコントラスト
メインアクセント
Flame 500
#cb4625
メインアクション：CTA、リンク、共通ホバー状態
Flame 300
#eb7858
やわらかな強調のための明るいフレーム色
Flame 700
#8c280d
押下状態と深いアクセントコントラスト
Flame 900
#591806
奥行きのための最も濃いフレーム色
White
#ffffff
ライトモードのキャンバスと高コントラストなカード面
Gray 100
#e6e6e6
ライトカード、静かな面、区切り
Gray 300
#bababa
控えめなボーダーとソフトな補助面
Gray 500
#8b8b8b
補助テキストとサポートUI
Gray 700
#505050
強い補助テキストとダークな区切り
Charcoal
#292929
ダークモードのキャンバスと濃い本文色
Black
#000000
アイコンとコード詳細の最大コントラスト
Cocoa 700
#2d2926
Dark-mode raised surface
Cocoa 900
#2c2522
Dark-mode canvas
Lab sky
#87ceeb
Now ページの空のベース
Rainbow red
#ff6b6b
実験用の雲ハイライト
Rainbow orange
#ffad69
実験用の雲ハイライト
Rainbow yellow
#ffe66d
実験用の雲ハイライト
Rainbow green
#7bd389
実験用の雲ハイライト
Rainbow blue
#70c1ff
実験用の雲ハイライト
Rainbow violet
#b388eb
実験用の雲ハイライト
書体の役割
主なスタイル原則
- 01 — 大きく丸いカードと、境界線より面で区切る階層。
- 02 — ライトは白と暖かなグレー、ダークはチャコール。両方で十分なコントラスト。
- 03 — フレームレッドのホバー状態を共通化し、操作できる要素を一貫して示す。
- 04 — モーションは意味を補助するもの。減らす設定でも体験の構造は保つ。
04
コンテンツ・データ・インタラクション
コンテンツから生まれるタグ
タグはプロジェクトと記事を結ぶ共通言語です。コンテンツから読み取り、フィルター用に重複を除き、別の管理画面で管理せず共有可能なURLにも反映します。
生成されるID
記事とプロジェクトには、コンテンツから安定したIDを生成します。新しい JSON プロジェクトや MDX 記事も、手動でいいねIDを指定せず参加できます。
適度な上限のいいね
いいねは専用の MongoDB コレクションに保存され、各項目で表現豊かなリアクションを最大10個までに制限。遊び心を残しつつ、ノイジーなランキングにはしません。
多言語の土台
/ja のルート、ロケール対応ナビゲーション、翻訳済みのUIテキスト、独立した日本語MDXソースに対応。対応するページがあれば、言語切替時にも現在のルートを保ちます。
05
SEO・ソーシャルプレビュー・配信
ルートごとのメタデータ
ルートレイアウトが基本のタイトル、説明、アイコン、キーワード、Open Graph、Twitter メタデータを提供します。記事とプロジェクトは固有の canonical URL、タイトル、説明、必要に応じた記事日付とソーシャル画像を追加します。
生成されるブランドOGカード
ソーシャルプレビューは Next の ImageResponse で /api/og にてオンデマンド生成されます。共通パレット、オリジナルの猫ロゴ、ルート種別、タイトル、説明を使い、関係のないカバー画像への依存を避けます。
検索エンジンの基盤
metadataBase は NEXT_PUBLIC_SITE_URL から設定されます。動的な sitemap.xml と robots.txt も同じURLを使い、主要ルート、記事、プロジェクトのページを含めます。
共有の仕組み
記事とプロジェクトでは、対応デバイスのネイティブ共有と、どの環境でも使えるリンクコピーの代替手段を提供。どちらも分析イベントとして記録できます。
06
OG画像の仕組みと確認方法
生成方法
OGカードは public フォルダの固定画像ではありません。Next.js の ImageResponse が /api/og でオンデマンド生成し、共通パレットとオリジナルの猫ロゴを使います。
ページごとの内容
ホーム、各プロジェクト、各記事は、それぞれのタイトル、説明、種類をOGルートへ渡します。投稿とプロジェクトを共有すると、内容に合ったブランドカードが表示されます。
公開後の確認
まず /api/og?type=site を開きます。次に記事またはプロジェクトURLを LinkedIn や Discord のデバッガーで再取得してください。古いプレビューはSNS側のキャッシュなので、再スクレイプが必要な場合があります。
07
パフォーマンス・プライバシー・アクセシビリティ
レスポンシブ設計
コンパクトなスマートフォンからタブレット、デスクトップまで対応。ナビゲーションは折りたたまれ、グリッドは列数を減らし、コントロールは折り返され、文字と余白は固定キャンバスではなくブレークポイントに合わせます。
モーション設定
見える場所にあるモーション設定は、OS の prefers-reduced-motion と連動します。装飾的な動きと3Dの動きを抑えながら、コンテンツ自体は隠しません。
必要な場所を軽く
Next の画像処理、LazyMotion、記事パスの静的生成、レスポンシブなカード、控えめな視覚効果によって、アート主導のUIが重く感じないようにしています。
プライバシーを意識した保存
保存した項目は訪問者の端末の localStorage に残ります。ログインは不要で、保存ライブラリを MongoDB に送信することもありません。
08
運用と設定
本番環境で必要な設定
NEXT_PUBLIC_SITE_URL は https://kittykio.com に設定され、canonical link、sitemap、robots.txt、OG URL が一貫して本番ドメインを指すようになっています。
データとメールの設定
MONGODB_URI は、いいね、依頼、分析を portfolio-project データベースに接続します。RESEND_API_KEY と認証済みの送信元/ドメインで依頼メール通知を有効にできます。
任意のサービス
NEXT_PUBLIC_GA_ID で Google Analytics を有効化。ANALYTICS_DASHBOARD_TOKEN は /insights を保護します。OpenAI キーは利用クレジットを用意した後に Ask Kiki を有効にするためのものです。依頼モードはこれに依存しません。
非公開のインサイト
/insights は意図的にトークンで保護されています。コンテンツ閲覧、開封、絞り込み、保存、共有、リンクコピー、読了、問い合わせ、コマンドパレット検索などのファーストパーティイベントを、各機能の有効化に応じて集計できます。
09
分析とインサイトの設定
何を計測するか
プロジェクトを開く、タグ絞り込み、記事閲覧と読了、保存、共有、リンクコピー、問い合わせ、コマンドパレット検索など、サイトの改善に役立つ操作だけをファーストパーティイベントとして保存します。
有効化の手順
Vercel と .env.local に MONGODB_URI と ANALYTICS_DASHBOARD_TOKEN を追加し、デプロイ後に /insights?token=YOUR_TOKEN を開きます。トークンは公開URLやコードに書かず、パスワードマネージャーに保管します。
補足サービス
Vercel Analytics は追加のキーなしで利用できます。Google Analytics を使う場合だけ NEXT_PUBLIC_GA_ID を追加します。詳細な手順と公開前チェックは、リポジトリ内の DEPLOYMENT_CHECKLIST.md にまとめています。
10
どのように作られているか
このアプリは、アートポートフォリオの表現豊かなUIと言葉の見せ方を土台に、dev portfolioの軽さと実務的な導線を選んで組み合わせました。作品、文章、技術の証拠、連絡先をすばやく見つけられる構造と、作者らしさを感じられる表現の両方を大切にしています。
