スキルシート｜工藤大雅

スキル	レベル	備考
HTML / CSS	実務レベル	レスポンシブ・アクセシビリティ・印刷CSS対応
Astro	実務レベル	Cloudflare Pages 前提の高速HP・LP制作のメイン
WordPress（SWELL）	実務レベル	更新運用しやすい構成でセットアップ・カスタマイズ
TypeScript / JavaScript	実務レベル	フォーム・アニメーション・API連携・LP計測
Tailwind CSS / GSAP	実務レベル	スクロールアニメ・ヒーロー動画・cinematic演出
React / Next.js	実務レベル	動的LP・会員系ページ・管理画面
Adobe Illustrator / Photoshop	対応可	バナー・ヒーロー画像・ロゴ調整
Figma	実務レベル	デザインカンプ作成・クライアント共有
Google Apps Script	実務レベル	問合せフォーム連携・スプレッドシート集計

03インフラ・ツールSTACK

分類	技術
ホスティング	Cloudflare Pages / Workers / Vercel / エックスサーバー / ロリポップ
CMS	WordPress（SWELL）
フロントエンド	Astro / React / Next.js / Tailwind CSS / GSAP
デザイン	Figma / Illustrator / Photoshop / Canva
解析・広告	Google Analytics 4 / Search Console / Meta広告 / Google広告基礎
SNS連携	Instagram Graph API / LINE Messaging API / X API
フォーム・自動化	Google Apps Script / Formspree / Make

04制作実績（守秘のため案件名は伏せています）CASE STUDIES

古着イベント公式HP クラウドソーシング応募120名超 → 最終5名通過案件

HP制作

Astro + Tailwind + GSAPのマルチページ構成。世界観2案（黒×ネオン／コンクリ×スプレー）をindex.html / index-b.html として同一リポジトリに並列実装
ステッカーボム・スプレー痕は SVG + backdrop-filter + mix-blend-mode で表現。ヒーローの文字散らしは GSAP SplitText + ScrollTrigger で pin+scrub
Cloudflare Pages の Wrangler CLI で main ブランチにpush → 自動デプロイ。プレビュー環境も同時発行
提案書は Markdown → Pandoc → LaTeX テンプレート → A4 8章PDF。ページ番号フッター・目次を自動生成

stash-funtech.pages.dev

Astro Tailwind GSAP Cloudflare Pages PDF提案書

音楽 × 酒場コンセプトHP 飲食・食品飲料バー系のダーク系テンプレ

HP制作

Astro（SSG）+ Tailwind v4のワンページ構成。ビルド後は静的HTMLのみで配信
Hero：GSAP SplitText で文字を1字ずつ span 化→stagger: 0.04 で順次フェードイン
Concept：ScrollTrigger の pin + scrub で4パネル固定スクロール。timeline.to() でクロスフェード（ブランド名→空間→酒→音楽）
Drink 3列カードは CSS Grid auto-fit + minmax、Access は Leaflet でカスタムマーカー地図
ダーク配色は CSS変数（--bg / --accent）で管理し全業態に転用可能

サンプル

Astro GSAP Tailwind v4

医療クリニック HP（4診療科）内科 / 歯科 / 皮膚科 / 眼科 — 診療科ごとに世界観を作り分け

HP制作

Astro のレイアウトスロット化：共通コンポーネント（診療時間表・アクセス・院長紹介・予約CTA）を src/layouts/ClinicBase.astro に集約し、4院で再利用
色・フォント・院名は各院の site.config.ts だけを差し替える構造。Tailwind の theme.extend で診療科カラートークンを注入
アクセシビリティ：prefers-reduced-motion 対応、WCAG AA コントラスト値をビルド時に axe-core でチェック
地図は Leaflet + OpenStreetMap（Google Maps API 料金回避）。診療時間表は <table> セマンティクスで検索エンジン最適化
各院を独立の Cloudflare Pages プロジェクトに Wrangler でデプロイ

内科歯科皮膚科眼科

Astro Tailwind アクセシビリティ医療HP標準構成

国際学会「PhotoIUPAC 2028」開催案内Webサイトクラウドソーシングトライアル案件・3案提出＋ワイヤーフレーム納品

LP制作

前回大会サイト（photoiupac2026）を Playwright でクロール → メニュー12項目・情報階層をJSONに構造化し、案間で情報漏れゼロを担保
デザイン3案は Figma オートレイアウトで PC 2560px / SP 750px を1ファイル内で並列制作。カラー・タイポは Figma Variables でトークン化
書き出しは Python スクリプト make_submit.py：Figma REST API から画像取得 → Pillow で長辺4096px 以内にリサイズ → コラージュ生成
ワイヤーフレームは Figma プラグイン Whimsical 併用でPC+SP構成図を1枚に。校正コメントは Figma のコメント機能でクライアントと同期

学会LP 情報整理多言語想定ワイヤーフレーム

飲食6業態デモHP群居酒屋 / カフェ / 寿司 / 焼肉 / ラーメン / バー

量産テンプレ

Astro のベーステンプレート _template-shop-demo を1本作り、業態別 config JSON（フォント名・カラーパレット・セクション順序）だけ差し替えて派生
フォントは Google Fonts + fontsource で自ホスティング。業態ごとに Oswald / Reggae One / Noto Serif JP など指名（例：焼肉=朱金黒 + Oswald）
ヒーロー画像・料理写真は ffmpeg で WebP 変換＋レスポンシブサイズ4段階を自動生成（<picture> srcset）
1コマンドで Cloudflare Pages Direct Upload（wrangler pages deploy）→ 業態別サブドメイン即発行
Higgsfield 生成の cinematic clip を ffmpeg で ~180フレーム列に分解 → Canvas scrub 再生する scroll-cinematic テンプレも整備

Astro レスポンシブ 1週間納品

自社ブランドサイト（AI業務自動化）綴 -TSUDURI- AI

自社LP

Astro + Tailwind の静的LP。ページ全体を1ファイルにまとめ、Lighthouse Performance 95+
21ペイン Before/After チェックリストは <details>/<summary> と Alpine.js の x-data でチェック数カウント→"あなたのペイン◯個"と動的表示
問い合わせフォームは Cloudflare Workers にPOST → Turnstile でCAPTCHA検証 → Slack Webhook 通知
CV率計測は GA4 + Microsoft Clarity。スクロール到達率イベントをカスタム発火

tsuduri-ai.pages.dev

Astro Tailwind CV導線設計

スマホ内DB音声検索AIアプリ PoC 設計研究開発企業向け（クラウドソーシング案件・仮契約・PowerPoint 12枚納品）

AI / システム設計

PPT納品物は python-pptx で生成。ページ・レイアウト・書式をコード管理し、改訂時は差分だけ再ビルド
アーキ図・シーケンス図は Mermaid で記述→mermaid-cli でSVG書き出し→PPT埋め込み。図の修正がテキスト差分で追える
5階層Q&A選択肢生成：SQLite プリコンパイル済みインデックスから 属性列の情報利得（entropy）計算で「次に聞くべき属性」を動的選出する擬似コード提示
Auto モード擬似コードは Kotlin風＋SQL埋め込みで AndroidView 側と DB 側を1画面で見せられる書式
結果画面Mockは Figma で3パターン（1件ヒット/複数分割/0件"見つかりません"）→ PNG書き出しをスライド挿入

Gemini Nano ML Kit on-device AI SQLite OCR

土木入札AI DX 設計書建設業向け・オンプレRAG・8章A4 PDF設計書

AI / システム設計

設計書ソースは Markdown で管理。Pandoc + LaTeX でA4 8章PDF（目次・ページ番号フッター・表組み・図版）を1コマンドで出力
オンプレRAG構成：Ollama（Llama 3）+ Chroma ベクタDB + LangChain の chain 設計をシーケンス図で明示
「第三者レビューAI」は Claude Agent SDK で独立エージェント（ビュー）を Agent(subagent_type) spawn → 提案文をレビュー2巡PASS
クラウド案（Cloudflare Workers AI + Vectorize）と閉域案（Ollama + Chroma on 社内サーバ）を並列記述、選定基準表を Mermaid で決定木化
入札公告のスクレイピングは Go + colly、コスト試算は Google Sheets を GAS API で読み書き

オンプレRAG 設計ドキュメント建設DX

開業クリニック向け医療AIシステム Google Workspace × ORCA × 段階的発注設計

AI / システム設計

Phase 1：Google Workspace API（Drive/Docs/Calendar）を Apps Script でラップ→請求書テンプレを HTML → PDF 化して自動送付
ORCA 連携は日医標榜の ORCA API（CLAIM SOAP / DBサーバ REST）で患者/レセプト同期。差分だけを cron で pull
Phase 2：訪問診療スケジュールを Google Calendar API と双方向同期。在庫は Sheets を DB 代替 → Cloudflare Workers で在庫アラート
Phase 3：問診票OCRは Google Cloud Vision API、要約生成は Gemini API。モバカルネット連携は既存CSV仕様に合わせて Node.js バッチ変換
各PhaseをGoogle Sheetsの見積台帳で管理し、機能単位で追加受注できるようデータベース設計を疎結合に

Google Workspace ORCA連携 OCR 医療DX

自動化基盤群（本番稼働中の裏方 3系統） TypeScript / CDP Chrome / Cloudflare Workers / launchd

自社運用

X 3アカ自動投稿：CDP（Chrome DevTools Protocol）で起動済みChrome（--remote-debugging-port=9222）に接続 → Runtime.evaluate で DOM を直接操作。Draft.js エディタの insertText が先頭1文字を落とす挙動を、ダミー半角スペース挿入＋normalize比較の完全一致ゲートで根絶。投稿確定は Input.dispatchMouseEvent の実座標クリック＋"Your post was sent"トースト検出
Instagram 両輪自動投稿：Instagram Graph API でリール/カルーセル/ストーリーを直接POST。動画は Remotion + ffmpeg でReactコンポーネントから生成、業態別テンプレを config だけで差し替え
LINEブリッジ Mac半永久版：ローカル Node.js サーバ ↔ cloudflared トンネル → Cloudflare Workers の LINE Webhook 受け口。launchd（KeepAlive + RunAtLoad）でスリープ復帰時も自動再起動。EADDRINUSE 無限ループ・KV URL 腐敗・stuck lock を全書き直しで解消

TypeScript CDP Chrome Cloudflare Workers Bun launchd cloudflared

05制作フローWORKFLOW

1 ヒアリング業態・訴求点・参考サイト・予算・納期を確認

2 構成 / ワイヤーページ構成・導線・コピー骨子を提示

3 デザイン Figmaカンプ、または動くHTMLモックで確認

4 実装 / 公開 Cloudflare Pages / サーバーへデプロイ

5 運用・改善 GA4計測・SNS導線・月次改善提案

06自己PRABOUT

営業2年・教職員6年の経歴を経て、Web制作エンジニアとして活動中。

要件定義からデザイン・実装・公開・運用改善まで一人称でフルサイクル対応できるのが最大の強みです。Astro / Cloudflare Pages の高速構成と WordPress（SWELL）の両輪で、買い切り¥10,000のスモールHPから中規模LP・イベントサイトまで幅広く対応可能。

教員経験を活かしたヒアリング力・ドキュメント作成・技術共有も得意としており、専門用語を使わずクライアントの温度感を汲み取る折衝を大切にしています。運用フェーズでもSNS導線・GA4分析・月次改善提案まで並走します。