shu_web

CS20年 × Webコーディング × AI活用

コードも、空気も、ととのえる

20年のCS経験を土台に、顧客と開発チームの間で認識をそろえ、手戻りのない進行に貢献する Webコーダーです。実装は Next.js / TypeScript / microCMS / WordPress。

長期・継続でチームに参画できる業務委託を探しています(可能であればフルリモートを希望)

// selected works

all works
このポートフォリオサイト(自作・個人開発)

このポートフォリオサイト(自作・個人開発)

自分のポートフォリオサイト。WordPress から Next.js + microCMS + Xserver静的配信へリニューアル。約220件の記事をmicroCMSへ移行し、記事URLを維持。output: 'export' で静的書き出しし、GitHub Actions でビルド→SSH+rsyncでXserverへ自動デプロイする構成。ソースコードはGitHubで公開している。

Next.jsTypeScriptTailwind CSSmicroCMSGitHub Actions
サイトを見る →
🔒 非公開案件(NDA)

保育園グループサイト(全70園規模)

全70園規模の保育園グループのWebサイト。各園を microCMS 上の1コンテンツとして登録し、一覧・詳細ページを動的生成。条件による検索・絞り込みと、住所データからの Google マップ自動生成を実装した。

Next.jsTypeScriptTailwind CSSmicroCMS
採用LP(建築関係企業)

採用LP(建築関係企業)

建築関係企業の採用ランディングページ。Adobe XD のデザインカンプをもとにコーディング。片側に寄せたスライダーや、ボタンで開閉するドロップダウンなど動きのあるパーツを実装し、制作期間5日で納品した。

HTMLCSSSassJavaScriptjQuery
サイトを見る →
写真家(カメラマン)のポートフォリオサイト

写真家(カメラマン)のポートフォリオサイト

写真家のポートフォリオサイト。デザインをもとにコーディングし、WordPress のオリジナルテーマとして構築。作品を見せる構成とレスポンシブ対応を行った。

HTMLCSSJavaScriptjQueryPHPWordPressFigma
サイトを見る →
禁酒サポートメディア(自社メディア・個人開発)

禁酒サポートメディア(自社メディア・個人開発)

脳科学と AI を切り口にした禁酒サポートメディア。要件定義・デザイン・コーディング・WordPress テーマ化まで一貫して個人開発。JavaScript による禁酒日数カウンターや、Gemini API と連携して用語集から自動でプロンプトを生成する機能を実装した。

HTMLCSSJavaScriptPHPWordPress
サイトを見る →
🔒 非公開案件(NDA)

大手通信会社のLPO案件(LP改修)

大手通信会社のランディングページ改修(LPO)案件。制作チームの一員として、指示書をもとに既存LPの改修・コンポーネント修正を担当した。

Next.jsTypeScript

// strength / 働き方

対話

顧客と開発チームの通訳

20年のCS経験に、自分でコードを書ける知見を重ねる。専門用語を顧客に、漠然とした要望を実装可能な形で開発側に、双方向に翻訳します。

協働

働きやすい空気をつくる

CSで培った傾聴と気配りで、チーム内外のやり取りを円滑に。関わる人が動きやすい雰囲気づくりに貢献し、長く続く関係を大切にします。

言語化

要件もプロンプトも言葉にする

曖昧な要望や頭の中の仕様を、精度高く言葉に落とす。同じ力で AI から狙った出力を引き出し着手を高速化。生成物は鵜呑みにせず、最終的な品質の責任は自分が持ちます。

すり合わせ

疑問はためこまず確認

作業中に出てきた疑問や確認点は、ためこまずすぐ相談。認識のずれは早く解けば小さく済むので、都度すり合わせて後からの大きな手戻りを防ぎます。

保守性

引き継ぎ前提の設計

BEM等の命名規則と部品のコンポーネント化で、他の担当者が読んで修正・追加しやすい状態を徹底します。

// skill set

HTML / CSS(SCSS)JavaScript / jQueryTypeScriptPHPNext.jsTailwind CSSmicroCMSWordPressFigma / Adobe XDPhotoshopGit / GitHubClaude Code(AI活用)Figma MCPGoogle Maps API / Gemini APIレスポンシブ / SSL化 / SEO

言語

  • HTML / CSS(SCSS)コーディング、レスポンシブ / クロスブラウザ対応
  • JavaScript / jQueryスライダー・ドロップダウン・カウンター等の動的パーツ実装
  • TypeScriptNext.js でのサイト構築、既存LPの改修
  • PHPWordPress テーマ開発の範囲

フレームワーク・ライブラリ

  • Next.jsサイト構築、LP改修
  • Tailwind CSSユーティリティベースのスタイリング

CMS

  • microCMSスキーマ設計、API連携、管理画面のカスタマイズ
  • WordPressオリジナルテーマ自作(デモ含め10件以上)、カスタム投稿 / カスタムフィールド

デザイン・制作

  • Figma / Adobe XDデザインデータからのコーディング、仕様の読み取り
  • Photoshop画像の書き出し、簡易加工

開発・その他

  • Git / GitHubバージョン管理、ブランチ運用
  • Claude Code(AI活用)初期実装の自動生成、業務効率化
  • Figma MCPデザインデータからAIで初期実装を生成
  • Google Maps API / Gemini API機能実装
  • レスポンシブ / SSL化 / SEOレスポンシブ・クロスブラウザ対応、SSL化、基本的なSEO対策

// profile

しゅうのプロフィール画像

Webコーダーのしゅうです。大手通信会社のドコモショップやアマゾンジャパンでの在宅カスタマーサポートなど、20年にわたる接客・CS経験に、Webコーディングの実装力とAIツールの活用を掛け合わせています。専門的な内容を予備知識のない相手へ伝わる言葉に置き換える力と、自分でコードを書ける技術的知見の両方を持つことが強みです。

作業を進める中で出てきた疑問や確認したいことは、ためこまずにこまめに相談します。認識のずれは早めに解くほど小さく済むため、都度すり合わせながら進め、後からの大きな手戻りを防ぎます。

AIコーディングツールを実務に組み込み、デザインデータからの初期実装を自動生成するなど、着手を高速化しています。生成物を鵜呑みにはせず、動くコード・引き継げるコードとしての最終的な責任は自分が持つ前提で扱っています。

デイトラのWeb制作コース・アドバンスコースを修了し、2025年5月にフリーランスとして独立。現在は Next.js / TypeScript / microCMS を用いたサイト構築から、WordPress オリジナルテーマ制作、LP実装まで担当しています。

在宅勤務での体調管理をきっかけに完全禁酒を達成し、ヨガ・瞑想・サイクリングを日課に心身を整えて働いています。チワワ1匹とネコ2匹との暮らしを大切にしたく、フルリモートでの実務に慣れていることもあり、働き方は、可能であれば完全リモートを希望しています。

稼働週30〜50h
形態フルリモート希望
連絡Slack / Chatwork / Discord / Zoom / Meet 等
レスポンス遅くとも3時間以内
拠点兵庫県明石市