ABOUT US

UI / UX Designer - WEB engineer

Takahiro Sawada -- since 2015 - 2023

ABOUT US

(1)【経歴概要】

Web業界10年以上、UIUXデザイナーやWebエンジニアとしてのフリーランスとなって5年以上になります。

正社員での出発点は遅く、28歳の時に新卒で営業会社(B to C電話営業)を1年間経験後、職業訓練校に通ってWeb制作について学び、Web業界に転向しました。
Webデザイナー兼マークアップエンジニアとしての駆け出しの頃は、Webサイト新規制作・運用・リニューアル・デザイン・コーディング・ディレクション・法人営業・事業部立ち上げなどを経験しました。

フリーランスに転向してからは、個人またはチームでWeb媒体、事業DX化の流れに伴うUIUXデザインの領域やフロント実装、また新規サービス立ち上げやサイトリニューアル改善のためのディレクションなどを担当して参りました。

1Web制作事務所2015
2大手金融機関のWeb部門にて社員向けサービスの保守・更新業務2016
3大手自動車会社のWebチームメンバーとしてマークアップ・デザイン保守・更新など担当2017
4不動産関係のWebサービスを展開する会社にてマークアップ・デザイン保守・更新など担当2017
5不動産仲介会社のデジタルマーケティング部門にて責任者を後任・サイト分析やディレクション、新規デザインやコンテンツページ制作&リリースなど包括的に担当2018
6フリーランスとして、UIUXデザイナー兼WebエンジニアやWebディレクターなどの分野で活動2019

(2)【スキル関連】

現在は、デザインから実装まで一貫した「技術責任者」としての遂行が主な業務領域です。
競合分析やペルソナ分析、IA設計といった上流工程から、Figmaを用いたUIデザイン~実装連携、React / TypeScript / Tailwind CSS / Viteなどを用いたフロントエンド実装、VercelやVPS等によるインフラ構築まで、Web制作の全工程を一人で完結できる点が最大の強みです。
最近では、AIエージェントやMCP、画像生成などを駆使した開発効率や品質向上をプロダクト開発に取り入れました。

一方で、営業職の経験や不動産仲介会社でのマーケティング責任者、Webスクール講師としての実績があり、ビジネスロジックを理解した上でのデザイン・実装表現、SEO設計・各種ツール利用なども経験があります。

【経験ポジション】PM , FE , UIUXデザイナー , Webディレクター , ME , Webデザイナー , 講師
【WEBエンジニアスキル】< 2024 ~ 2025年主な使用技術 >
React / Astro / Vite / Tailwind.css / Vercel , V0 / Figma MCP , Figma Make / Three.js / GSAP / shadcn / Gemini 3.0 / Chat GPT5.0~
Laravel / Livewire / MySQL / VPS / Nginx / Cloudflare
Github Actions / Github MCP / Docker / Node.js

< 基本言語 >
HTML Living Standard / CSS3 / SCSS(5~10年) / Bootstrap(5~10年) / CSS frame work(5~10年) / JavaScript(5~10年) / PHP(5~10年)

< フレームワーク>
React(1~2年)/ PHP Laravel(5年以上), Livewire / Vue , Angular(1年)

< その他 >
Adobe Marketo Engage(1年)
【CMS】WordPress(10年以上) / Newt / Wix / CQ5 / WEB-CORE
【開発環境】Cursor / Codex / Visual Studio Code / GitHub / Docker / Linux / WSL2 , Ubuntsu
Chat GPT , Gemini , Claude 他…
【プロジェクトツール】GitHub / Backlog / Trello / Slack / Chatwork / Rhode Code / Miro
【デザインツール】Figma(5年~10年) / Adobe Photoshop(10年以上) / Adobe Illustrator(10年以上) / Adobe InDesign(2年) / Midjourney / Nano banana / Google Whisk
【プロトタイピングツール】Figma(5年~10年) / Adobe XD(4年) / Invision(1年)
【経験領域】● PM:
ハイブリッド開発 / 開発技術スタック選定・要件定義 / 生成AIやAIエージェント活用 / 各種MCP利用 / Vide Coding 導入 / SPA→SSR化対応 / VPSサーバー構築・セキュリティ対策 / サーバーレスデプロイ環境構築 / CICDパイプライン構築 / Docker・Git・Node.js開発環境導入 / フレームワーク利用によるMVP設計 / CloudflareやViteによるパフォーマンスチューニング / コンバージョンの最適化PDCAサイクル / サーバー移管作業など技術的課題の解決と先導 / 実装・デザインレビュー / タスク管理・コスト管理 / 部下マネジメント / SEO対策(AIO施策)など外部説明会への積極的参加

● FE:
新規サイト立ち上げ・サービスのリニューアルやリプレイス / デバッグ・コードリファクタリング / WebGLを利用したインタラクション / 動的データの連携(AJAX、DB連動)/ レスポンシブデザイン・MFI / CSS設計 / テンプレートエンジン / SEO内部対策・改善施策 / Core Web Vitals(CLS)改善 / EFO(フォーム最適化) / CMS導入 / Marketo HTMLメール環境作成・運用・改善 / 常時HTTPS対応(Reverse Proxy連動)/ CORS対策 / SSL更新

● UIUXデザイナー:
ワイヤーフレーム・プロトタイピング・モック作成 / ユーザーペルソナ / スタイルガイド作成 / デザインコンポーネント設計 / 成果物管理 / Webサイトデザイン・Webアプリデザイン・UIUXデザイン・グラフィックデザイン / バナー・OGP作成 / CV改善 / UIUX改善提案 / 画像レタッチ・画像素材生成 / UIUX講義用プレゼン資料作成

● Webディレクター:
対外向けサービス説明資料・サイトパフォーマンス改善施策資料、導入技術仕様書、画面設計書など作成 / IA設計 / ビジネス要件定義 / ブランディング / 工数スケジュール管理 / 作業工程抽出 / サービス導線設計・画面遷移図作成 / Webコンテンツ作成 / Webマーケティング / 外部業者間との連携・折衝 / 法人営業 / 打ち合わせ(英語)/ 部署間連携 / Google Analytics / Google Search Console / Facebook運用・連動
【資格など】・LPIC(Linux技術者認定)101/102
・TOEIC 720 / 英会話(日常~ビジネス)
【GitHub】https://github.com/Takahirostride

(3)【趣味】

・硬式テニス(大田区テニス連盟団体社会人テニスサークル代表。大田区の100人規模のサークルです。平日夜や休日の隙間時間で活動しています。)

・筋トレ、ジム通い、ランニング

・爬虫類、猫の世話

・ラーメン店巡り

● 最近のキャッチアップ・興味分野:
AI Agent , Agent Skills , Open Claw , Cursor , Codex , Claude Code , Anti Gravity , Vibe Coding , MCP , TypeScript , React , Next , Payload CMS , Ghost CMS , GraphQL , Prisma , Super Base , DDD , REST API , Remotion , Zod , Python , Google Cloud Platform , Vercel , n8n , Dify , NotebookKLM , 動画生成AI , 画像生成AI等

【WEB技術】
● Zenn
https://zenn.dev/

● note
https://note.com/

● Qiita
https://qiita.com/

● Developers.io
https://dev.classmethod.jp/

● daily.dev
https://daily.dev/

● dev.to
https://dev.to/
【マーケティング・SEO・IT製品比較】● Web担当者Forum
https://webtan.impress.co.jp/

● 海外SEOブログ
https://www.suzukikenichi.com/blog/about/

● IT review
https://www.itreview.jp/

● IT トレンド
https://it-trend.jp/
【WEB制作・フロント周辺】● web.dev
https://web.dev

● jser.info
https://jser.info/

● コリス
https://coliss.com/

● その他
https://javascriptpatterns.vercel.app/patterns

https://dev.to/liaowow/8-css-best-practices-to-keep-in-mind-4n5h
【学習】● udemy
https://www.udemy.com/

● freecodecamp
https://www.freecodecamp.org/

● Google Chrome Developers
https://youtu.be/GNuG-5m4Ud0