YT-TechDev logoYT-TechDevPortfolio & Blog
HomeAboutProjectsLabBlogContact
YT-TechDev logoYT Tech DevBlog Portfolio

A personal portfolio and engineering blog focused on frontend development, interactive UI, React Three Fiber, and practical product building.

Next.jsTypeScriptR3FSupabaseCloudFlarevercel

Site

  • Home
  • About
  • Projects
  • Blog

Explore

  • Lab
  • Portfolio
  • Contact

Focus

  • Frontend
  • React Three Fiber
  • Design Notes

© 2026 YT Tech Dev. All rights reserved.

Built withNext.js, Tailwind CSS, and Supabase.

ENOriginalJA日本語

Lab

実験と開発メモ

Lab は、まだ完全なプロダクトではない実験、プロトタイプ、ビジュアルシステム、開発メモをまとめる場所です。小さな検証を通して、より良いフロントエンドシステムを作るための知見を残しています。

アセット配信

運用中

Cloudflare R2 アセット配信

ブログ画像、3Dファイル、ビジュアル素材を Cloudflare R2 で管理し、ポートフォリオサイトから参照するためのアセット配信構成です。

Cloudflare R2AssetsCORSImage Delivery

モーションデザイン

構築済み

Framer Motion ホバーグロー

カード上をダークシアンの光が移動する、サイバー調のホバーエフェクトです。イージングとモーションによる視覚フィードバックを使っています。

Framer MotionTailwind CSSHoverEasing

ページ遷移

構築済み

ルート遷移オーバーレイ

ページ移動を滑らかに見せるためのローディング兼トランジションオーバーレイです。インタラクティブなトップページと通常の補助ページを自然につなぐ役割を持っています。

Next.jsTransitionOverlayUX

アーキテクチャ

構築済み

静的ページアーキテクチャ

About、Projects、Lab のように更新頻度が低いページに対して、静的データと Server Component を使う構成です。不要なDB管理や複雑な仕組みを避けるための設計です。

Next.jsServer ComponentStatic DataArchitecture

レイアウト設計

構築済み

ポートフォリオのヘッダー責務設計

トップページはヘッダーを持たないインタラクティブ体験として保ち、About、Projects、Lab、Blog では通常のナビゲーションを使うレイアウト責務分離です。

LayoutNavigationApp RouterUX

3Dシーン構想

構想

GLB デスクシーン構想

PC、机、椅子、キャラクターアセットを組み合わせ、React Three Fiber でWeb上に小さな夜の作業シーンとして表示する構想です。

BlenderGLBR3FScene Design

自動化 / AI

構想

LINEアシスタント置き換えLab

長期間稼働している LINE Messaging API と Google Apps Script のアプリを、AI時代向けにどのように再設計できるかを検討するLab項目です。

LINE Messaging APIGASAIAutomation

API自動化

既存

天気自動化プロトタイプ

外部APIから天気情報を取得し、定期メッセージや日次通知に組み込むための自動化機能です。

OpenWeatherAPIGASSchedulerAPI

軽量バックエンド

既存

スプレッドシート連携コンテンツ

Google Sheets を簡易データストアとして使い、記念日コンテンツ、会話ログ、設定値などを管理する軽量バックエンド的なアプローチです。

Google SheetsGASData StoreAutomation

移行メモ

構想

レガシー自動化移行メモ

既存のGASベース自動化を安定稼働させたまま、段階的に置き換えていくための移行メモです。

MigrationLegacyArchitecturePlanning

Page 2 / 2

← 前へ
12
次へ →

Direction

実験からプロジェクトへ

いくつかの実験は、ビジュアルアイデア、技術検証、小さなユーティリティ、アーキテクチャメモとして始まります。それらが一つの仕組みとして説明できるほど安定したら、Projects に移したり、詳しい Blog 記事として整理していきます。