$ launch personal-web
フロント実装を軸にサービス設計まで。
React / Next.js / TypeScript と HTML / CSS を軸に、公開できる画面へ落とし込みます。 要件や導線が固まりきる前の整理から、実装、運用改善まで接続します。
FRONTENDReact/TSWebアプリ実装
PROOF公開URLデモとGitHubで確認可能
OPS5年+運用・保守・改善
STARTUP2社新規事業の導線整理
/ 01
自己紹介
サービスを整理し、
仕様と画面に落とし、
Webで届ける。
HTML / CSS / JavaScript を軸に、Web制作とフロントエンド実装を行います。見た目を整える前に、誰が何を達成するサービスか、運用でどこが詰まるかを整理してから画面へ落とし込みます。
ライブ E コマースと Vtuber マッチングプラットフォーム、2 社のスタートアップ新規事業に関わり、サービスの運用・保守・管理・改善を通算 5 年以上経験しました。
要件定義、仕様選定、ワイヤー、モック作成は 2 年ほど経験があります。UIの装飾よりも、ユーザー、事業、管理側の動線が無理なくつながる設計を大切にしています。
個人開発では、睡眠レビューSNS nemuri を Next.js / Supabase / Stripe / Capacitor で設計中です。センシティブな領域のUI、プライバシー、課金導線をまとめて扱っています。
Codex / Claude を使った制作フローに加え、ComfyUI で生成したビジュアルを Web に落とし込む流れを検証しています。AI を速さだけでなく、品質確認や表現の幅に接続するのが好きです。
Photoshop、インフラ、バックエンドは主戦場ではありません。必要な範囲を理解しながら、セキュリティ面を確認しつつ、専門領域と接続して進めるタイプです。
Tokyo, Japan
ABOUT.md
ACTIVEPID 8080
- USER
- 那須隆峻
- ROLE
- Frontend / Service Design / UI
- LOC
- Tokyo, Japan
- CORE
- Next.js
- LIBS
- Motion, UI, Web
- AI
- ComfyUI, Codex, Claude Code
MEM87%
02 / FIT GUIDEhiring_routes.json
採用側の見どころ
何ができます、だけでは判断しづらいので、職種ごとに見るべき作品と確認できる証拠を分けました。 応募先に合わせて、フロントエンド、Web制作、サービス設計のどこで評価できるかをすぐ確認できます。
WEB PRODUCTION
route 02
Web制作・LP改善で見る
静的LP、比較用Before/After、制作画像ギャラリーを通じて、構成、実装、見せ方の調整力を確認できます。
LP制作、既存サイト改善、HTML/CSS/JavaScript中心の制作現場で評価しやすい領域です。
確認できる証拠
- 4テーマの静的LP
- Before/After比較
- ビジュアル制作物の一覧化
SERVICE DESIGN
route 03
サービス設計で見る
ユーザー、事業、管理側の導線を分け、要件、ワイヤー、画面、運用改善へ落とし込む判断を見せます。
仕様整理、画面一覧、管理側の運用導線、プロダクト初期のUI整理を任せたい場合に合います。
確認できる証拠
- 意思決定UI
- 公開情報の集約・運用
- デザイントークン運用
03 / CAN DOservice_scope.ts
できること
見た目を作る前に、サービスの目的、ユーザーの行動、管理側の運用を整理します。 そのうえで、画面設計、フロント実装、AI制作フローまで接続します。
SERVICE
$ map service flow
サービス設計
誰が、何を達成し、運用側がどこで詰まるかを整理して、画面にする前の骨格をつくります。
要件整理ユーザー/管理側動線優先順位づけ
UI FLOW
$ draw user route
画面・導線設計
LP、管理画面、フォーム、一覧、詳細などを、目的と行動がつながる順番に分解します。
ワイヤー画面構成CTA設計
FRONTEND
$ ship interface
Web実装
HTML / CSS / JavaScript、React / Next.jsを使い、レスポンシブと公開後の運用を見据えて実装します。
Next.jsTailwind CSSアクセシビリティ
AI FLOW
$ connect assets
AI制作フロー
ComfyUIやCodexで作った素材を、Webで使えるアセット、ギャラリー、LP表現へ落とし込みます。
画像生成アセット整理Web反映
OPS
$ reduce friction
運用改善
公開して終わりにせず、更新しやすさ、問い合わせ導線、保守時の迷いを減らすところまで見ます。
保守設計改善提案導線調整
04 / PROCESSdesign_to_build.log
制作プロセス
画面を急いで増やすより、最初に目的と運用をほどきます。 その後、導線、UI、実装、改善へ進めるので、制作物がサービスの中で使われ続ける形になります。
service design firstREADY
- INPUT
- 課題 / 目的 / 制約
- OUTPUT
- 導線 / UI / 実装
- AFTER
- 運用 / 改善 / 保守
- 01WHY
目的と制約を整理
作りたい画面の前に、誰の課題か、事業上の目的は何か、運用で避けたい負荷は何かを確認します。
課題メモ / 優先順位次の判断へ - 02FLOW
ユーザーと管理側の動線を引く
ユーザー、事業、管理側の行動を分けて、入力、確認、通知、更新、問い合わせの流れをつなぎます。
導線図 / 画面リスト次の判断へ - 03UI
画面へ落とし込む
情報の優先度、CTA、状態表示、空・エラー・完了の見え方を決め、ワイヤーやモックにします。
ワイヤー / UI案次の判断へ - 04BUILD
実装して触れる形にする
既存の技術スタックや運用方法に合わせて、レスポンシブ、アクセシビリティ、公開後の変更しやすさを確認します。
実装 / デモURL次の判断へ - 05ITERATE
公開後の改善へ戻す
使われ方、迷い、問い合わせ、更新作業を見ながら、仕様と画面を少しずつ調整します。
改善案 / 運用メモ改善へ接続
05 / FEATURED WORK
代表作を、実画面と設計判断で見る。
NightRadar、nemuri、キッチン在庫リマインダー、Foundation Design Systemを、実画面、公開サービス、設計の根拠まで確認できる代表作としてまとめています。
CASE RUNCHECKPOINT 01 / 04
DESIGN DECISIONS ONLINE
LIVE SCREENCHECKPOINT 01OPEN DETAILMISSION 01 / DECISIONFEATURED 01
NightRadar
公開情報を、今夜の行き先を決めるためのレーダーへ
成人向けナイトスポットの公開BBS、店舗イベント、営業時間、料金などを集約し、「今日行くならどこか」「今日は見送るか」を短時間で判断できるサービスとして、企画、設計、実装、公開後の運用改善まで継続しています。
- ROLE
- 企画・設計・実装
- 公開後の運用と改善まで担当
- STACK
- Next.js
- Supabase, OpenAI, Stripe
- FOCUS
- Decision UI
- 断片情報を今夜の判断へ変換
設計と実装の要点
公開情報が散らばり、今夜の判断につながらない
複数の公開情報を、同じ時間軸と店舗単位へ整理。
順位ではなく「行く理由」を先に見せる
今日の結論、比較理由、詳細根拠の順に段階表示。
収集、分析、通知、課金を1つの運用へつなぐ
監視、更新、失敗時の代替処理まで含めて運用。
STAGE CLEAR 01 / 04
06 / STACK
技術スタック
~/html5
$ inspect html / 品質
構造化、SEO、アクセシビリティを制作物の土台として扱います。
LPテンプレート、ポートフォリオ、詳細ページの静的出力で確認できます。
- Semantic HTML
- SEO 設計
- Accessibility
- WCAG 考慮
- 校正・校閲
~/css5
$ inspect css / 運用
Tailwind / SCSS / Component CSS を、運用しやすい見た目の整理に使います。
不均一グリッド、レスポンシブ、カードUI、ギャラリーで確認できます。
- Tailwind CSS
- SCSS
- Component CSS
- CSS Optimization
- 運用・保守
~/javascript6
$ inspect javascript
React / Next.js / TypeScript を、画面状態、通知、外部連携の実装に使います。
在庫リマインダー、nemuri、モザイク処理ツールで確認できます。
- Next.js
- React
- Vanilla JS
- JS Libraries
- TypeScript
- Motion Libraries
~/design8
$ inspect service / ux
Figma、Design Tokens、ワイヤーを、実装へ渡せる仕様として扱います。
Foundation Design System、デザイン改修比較、制作プロセスで確認できます。
- Service Design
- Requirement Design
- Operation Flow
- Web Wireframe
- Design Tokens
- Figma Variables
- Figma Components
- Figma MCP
~/product7
$ inspect 事業 / ai 活用
要件、運用、AI制作フローを、画面を作る前後の判断に接続します。
Startup Web Product Support、ComfyUI × Codex、匿名デモで確認できます。
- 要件定義
- 仕様選定
- Service Operation
- Codex / Claude
- ComfyUI × Codex
- Security-aware Vibe Coding
- MCP / AI Research
$ git log --graph --oneline
07 / 経歴
- 26551711994-2018
美容とゲームQAを経て、Web制作の土台へ
1994年生まれ。国際文化理容美容専門学校渋谷校を卒業後、株式会社MINXへ入社。その後ゲーム業界へ転身し、リリース前タイトルのデバッグディレクターを担当しながら、HTML、CSS、JavaScriptを独学しました。
BeautyQA DirectionHTML / CSS / JavaScript - 66e88ad2019-2020
ライブEコマース事業で、Web制作の実務へ
SES会社へ入社後、株式会社Candyへ常駐。ライブEコマース関連業務に関わりながら、Webコーダー・Webデザイナーとして実務経験を積みました。
Live CommerceWeb CodingWeb Design - 8d90a1e2020-2024
個人事業主として、制作と運用を横断
独立後も常駐先業務を継続しつつ、博報堂系案件のコーディング、医療系メディアサイトのCMS運用・開発などを担当。公開後の保守や改善まで含めてサービスに関わりました。
FreelanceCMS OperationMaintenance - 6b177662024-
VTuber×企業のマッチング領域で、サービス設計とUI整理を担当
スタートアップ企業からの依頼で、VTuberと企業をつなぐマッチングプラットフォームに参画。ユーザー、企業、管理側の動線を整理し、仕様・ワイヤー・画面へ落とし込むデザイン業務を行っています。
StartupService DesignVTuber Platform - 94ef0162025-
AI活用と個人開発を、制作フローへ接続
AI領域のキャッチアップを進めながら、Vibe Codingを活用して睡眠向上アプリ「.nemuri」を開発。デザイン、実装、AI活用を横断し、ユーザーに届く個人開発にも取り組んでいます。
.nemuriVibe CodingAI Workflow
08WORKS
作品一覧
SELECTED 01—04
SERVICE → PRODUCT → SYSTEM → PLATFORM
WORK ARCHIVE05—11
2026Static LP Template Collection
添付のReact / TSX構成をもとに、4テーマのLPと登録ページをテンプレートとして整理したコレクションです。
- ROLE
- LP Template Design / Frontend
- WHEN
- template collection
- IMPACT
- 4テーマのLP + 登録導線をテンプレート化
ReactTypeScriptTemplate LP+3
5y+Startup Web Product Support
新規事業のWebプロダクトで、ユーザー体験、業務運用、管理画面、公開後改善までをつなぎ、サービスとして動く骨格を設計しました。
- ROLE
- サービス設計 / 要件定義 / Web実装
- WHEN
- startup experience
- IMPACT
- 体験と運用が破綻しない骨格設計
Service DesignRequirementsOperation Flow+2
2026デザイン改修比較：VTuber LP
同一サービスのデザイン導線を大幅に見直し、情報優先度と行動導線を整えた比較作品です。
- ROLE
- UIレビュー / デザイン刷新
- WHEN
- 2026 / design audit
- IMPACT
- 導線上部を改善し、CTA到達率を高める構成に変更
Before/AfterWeb UIInformation Architecture+1
