いま(2026年9月)
2026年の春に、Web制作のコーダーからフロントエンドエンジニアへの転向を決めました。
いまは転職用のポートフォリオとして、個人でWebアプリを作っています。
1作目の Plate Calculator は2026年7月に公開しました。
2作目の Hubpin は8月に最初の版を公開して、制作を続けています。
設計と判断は自分で行い、実装も原則自分で書いています。AIには手順書・レビュー・調査を任せています。
Web制作の受注は続けています。転向しても個人事業は畳まず、両方を持ったまま進める予定です。
このブログには、暮らし・学び・キャリアの記録を残しています。
うまくいったことだけでなく、落とした案や外した見立ても書いています。
- 個人開発の記録 — 作っているアプリの制作記録
- フロントエンドエンジニアになるまでの記録 — 転向の実績を起きた順に
- フロントエンドエンジニア転向ロードマップ — これからの計画
ここから下は、Web制作者としてのプロフィールです(2024年作成)。
プロフィール
松尾 赳治(まつお たけはる)
1996年生まれ。
愛知県を拠点にWEB製作者として活動をしています。

経歴
高校卒業後、自衛隊に入隊。
航空自衛官として飛行機の整備や飛行支援業務に従事しました。
WEB制作の道へ進んだきっかけは、店舗経営をスタートする知人の広報活動をサポートした経験です。
この時、「お客様に寄り添い、夢の実現をサポートする」という新たな使命を見つけ、WEB制作の世界に飛び込みました。
現在は、持ち前の生真面目さと責任感を活かし、クライアントのビジョンを形にするお手伝いをしています。
プロジェクトの目的やスケジュールを丁寧に共有し、柔軟な対応と綿密な打ち合わせを重ねながら進行。
お客様の期待を超える結果を提供することを目指しています。
スキル
Web制作の仕事で使っているものと、フロントエンドエンジニアへの転向にあたって個人開発で使っているものを、分けて書いています。
マークアップ・スタイリング
HTML / CSS設計(Sass)
タグの意味を理解して使い分け、FLOCSS・BEM の原則に沿った Sass で、あとから触りやすいコードを書くことを重視しています。
レスポンシブ対応
デザインカンプを忠実に再現しながら、スマートフォンから大きな画面まで崩れないように実装します。
クロスブラウザ対応
主要なブラウザで同じように見えるかを確認し、差が出た箇所を切り分けて直します。
JavaScript / jQuery
ドロワーメニュー・スライダー・アコーディオン・モーダル・スムーススクロールなど、動きのある部分を実装します。
WordPress
オリジナルテーマ制作
デザインに合わせてオリジナルのテーマを制作します。静的サイトからの構築も承ります。
既存テーマを使用した構築
主に有料テーマ「SWELL」を使用します。期間と費用を抑えた提案が可能です。
カスタム投稿機能の実装
カスタム投稿・カスタムタクソノミー・カスタムフィールドを設計し、お客様自身で更新しやすい形にします。
既存サイトの改修
運用中のサイトについてご要望を伺い、効果的に運用していくための改修を提案します。
お問い合わせフォーム
フォームを設置し、お客様の声を集められるようにします。
サーバーへの公開・更新
レンタルサーバー(ConoHa WING など)への公開作業と、SSH・Git を使った更新の仕組みづくりまで対応します。
フロントエンド(個人開発で使用)
TypeScript
型を付けた JavaScript で、公開している個人開発アプリ2本を書いています。
React
画面をコンポーネントに分けて組み立てます。1作目のアプリを React 19 で作りました。
Next.js(App Router)
2作目のアプリを Next.js 16 で作っています。サーバー側で動く部分とブラウザ側で動く部分を分けて実装します。
Supabase
データベース・ログイン機能・行単位のアクセス制御(RLS)を使っています。
Tailwind CSS
色や余白の定義を1か所に集約して、画面を組み立てます。
テスト・CI
Vitest でテストを書き、GitHub Actions で自動的に走らせています。1作目はテスト32件・Lighthouse 4項目とも100点でした。
開発の進め方
Git / GitHub
Issue で作業を切り出し、ブランチを分けて Pull Request にしてから反映します。個人開発でも同じ流れで進めています。
仕様書と工程管理
作る前に仕様書を書き、工程ごとに見積と実績の時間を記録しています。
AIの使い方
Claude Code を制作と学習に組み込んでいます。設計と判断は自分で行い、手順書・レビュー・調査を任せる形で使っています。
デザイン・周辺
Figma
デザインデータを読み取り、実装に落とし込みます。
Photoshop / Illustrator
画像の書き出しや簡単な加工を行います。
SEO・アクセス解析
見出し構造や内部リンクを整理し、GA4・Google Search Console・Microsoft Clarity で公開後の数字を確認します。
メッセージ
お客様の目標を実現するためのパートナーとして、信頼関係を築くことを大切にしています。
安心してご依頼いただけるように丁寧かつ柔軟に対応致しますので、お気軽にご相談ください。
関連サイト
Web制作の実績・ポートフォリオは portfolio.mt-tk.com にまとめています。
運営しているすべてのサイトは mt-tk.com(ハブサイト)から辿れます。
