メインコンテンツへ移動

SHUNEI

Systems Architect

Structures that keep running.

手を離れても回る仕組みをつくり、あなたを次の一手へ。

事業が回り続けているとき、あなたはどこにいるべきか。現場の火消しに追われているなら、問題の場所がすでにずれている。私が担うのは、技術でもデザインでもなく、構造の設計だ。チームに入って混沌を秩序に変え、あなたが次の一手を考える余白をつくる。作業は完成した瞬間に止まる。仕組みは、完成した後も回り続ける。私がつくるのは、後者だ。

SYSTEMS_ARCHITECT_SPECS

  • EXP: 20_YEARS
  • LIC: INFO_SECURITY_SPECIALIST
  • ROLE: ARCHITECT / DEV_OPS
  • LOC: NAGANO_JAPAN

Core Values：任せる前に、どう判断するかを示す。

問題が来たとき、私はまず構造を見る。混沌の正体は、どのプロジェクトでも似ている。「誰かがいないと回らない」「なぜそうなっているかが引き継がれない」「最初の判断を誰も覚えていない」。これは技術の問題ではなく、構造の問題だ。判断を、属人から構造へ移す。そのために三つの原則を持っている。

  • Constraints as Design Input

    制約を、設計の入口にする。

    制約は排除すべき障害ではなく、構造を絞り込む情報だ。予算、チーム規模、既存コード、ブランドの縛り。それらが交わる地点にしか、「ここで回る仕組み」は生まれない。嘆くのではなく、逆算する。それが入口だ。

  • Decisions, Recorded

    判断を記録し、引き継ぎ可能にする。

    なぜそう作ったか、なぜそれを選ばなかったか。その判断の連鎖が失われた瞬間、仕組みは属人に戻る。だから設計と同時に、判断そのものを書き残す。担当者が変わっても、なぜそう作ったかが伝わる。公開後の運用を支えるのは、この引き継ぎ可能性だ。

  • Built to Be Handed Off

    手を離れる前提で設計する。

    私がいなくなった後も回るか。その問いを最初から持って作る。完成とは、引き継いだ人が自分で判断して動かせる状態になることだ。それ以外を完成とは呼ばない。品質は、注意力ではなく仕組みで安定する。

Service Scope：作業を請けるのではなく、仕組みをつくる。

作業者を探しているなら、私は合わない。私が動くのは、仕組みをゼロから設計する場面と、プロダクトを立ち上げて広げる場面だ。

  • Systems Architect

    仕組みをつくる右腕として

    チームが「なぜか毎回同じ問題にはまる」「作り直すたびに最初の判断が消える」という状態にあるとき、原因は技術の不足より設計の不在にあることが多い。CSS 設計からコンポーネント設計、開発フロー、品質基準まで、誰でも再現できる構造を引く。コーダーとして手を動かすこともあるが、コードを書くことは手段であって目的ではない。チームが私なしで判断できる状態になること。それが、このフェーズの完了条件だ。

    • Custom Theme: 将来の機能拡張や改修に備えた、保守性の高いPHPアーキテクチャの構築。
    • Security Hardening: 有資格者の知見に基づく、リスクを最小化するための堅実なサーバー・CMS設定。
    • CMS Customization: 現場の運用フローを解析し、担当者の学習コストを下げる直感的なインターフェース。
    • Block Editor Support: 更新する人の編集の自由度と、ブランドを損なわないデザイン統制の最適化。
    • Logical Implementation: 余白やタイポグラフィのルールをシステム的に変数化し、デザイン変更に強い構造を定義。
    • Responsive: あらゆるデバイスで情報の整合性を保ち、ユーザー体験を損なわない流動的なレイアウト設計。
    • JavaScript: パフォーマンスと保守性を高い次元で両立する、標準技術に準拠したモダンな実装。
    • Quality Control: 静的解析ツール等を用いた仕組み化により、属人性を排除した客観的なコード品質の維持。
    • Server / Domain: セキュアなドメイン管理と、トラフィック要件に最適なインフラの選定・移行支援。
    • Performance: 客観的指標（Core Web Vitals等）に基づく、論理的かつ継続的なパフォーマンスチューニング。
    • DevOps Support: Gitフローの導入やデプロイ自動化による、複数人開発におけるプロセスの仕組み化。
    • Maintenance: 依存ライブラリの適切な管理と、長期運用を見据えたセキュリティアップデート対応。

  • Co-founder

    プロダクトを広げる共同創業者として

    ゼロから設計する局面では、技術選択より先に「何をスケールさせるか」を考える。後から変えにくい部分（設計の骨格、情報構造、拡張の軸）を最初に固め、変えやすい部分を後に置く。アイデアをプロダクトに変え、最初のユーザーを獲得し、機能ではなく価値が届く構造を整える。アイデアが最初のユーザーに届くまで、技術とビジネスの両側から手を動かす。

この二つに共通するのは、完成した瞬間に終わらない仕事をする、という姿勢だ。だからベンダーとしてではなく、右腕として入る。

About Me：二十年、同じ問いで設計してきた。

Shunei（しゅんえい）

Web Engineer / Systems Architect

System Overview

対象が変わっても、構造設計は変わらない。

二十年ほど前、最初に設計した対象はシステムだった。医用機器・精密機器や製造ラインなど、情報の流れと依存関係を整理し、どこが変わってもほかが壊れないように設計してきた。やがて対象は Web になり、さらに CSS 設計手法を体系化し、仕様書とスターターキットにまとめ、書籍として世に出した。さらに、AI を組み込んで自分自身の判断を仕組みとして外に出す試みも始めている。領域は変わり続けたが、設計の問いは変わっていない。どう作れば後から変えやすいか。誰が触っても壊れないか。属人化せずに回るか。二十年かけて確信になったのは、技術力ではなく、構造を見る視点こそが領域が変わっても一貫して機能するという事実だ。だから私は、構造として設計できるかを問い続け、エンジニアリングを実践する。

Version History

  1. Phase 1.0 : Embedded Systems

    絶対的な品質が求められる領域での研鑽

    リソースの制約と高い信頼性が要求される環境下で、ファームウェア開発（C言語）に従事。「バグを未然に防ぐアーキテクチャ設計」の重要性を徹底的に体得しました。

  2. Phase 2.0 : DX & Automation

    論理による自動化と、品質の構造化

    検査ドメインに14年従事。独自のアルゴリズムを用いた画像検査システム構築により、品質判定の自動化を実現（検査・製造プロセス技術で登録特許4件の発明者、うち1件は筆頭発明者）。DevOps環境を自律的に構築し、「人の注意力ではなく、仕組みで品質を担保する」確固たる開発フローを確立しました。

  3. Phase 3.0 : Web Engineering (Current)

    システム・アーキテクチャのWeb適用

    長野を拠点に、システム開発で培った設計思想をWeb制作へ適用。堅牢で保守性の高い実装で、プロジェクトを構造から支えています。Awards: デイトラ実案件チャレンジ 優秀賞（外部技術審査の全項目で満点評価）。

System Specs

  • Location : Nagano, Japan

  • Work Style : Async & Focus (非同期 / 集中型)

    平日夜間・土日祝日をコアタイムとする「非同期通信」を前提とした開発スタイル。不要な同期コストを省き、要件の深掘りや実装に深く没入する高効率なワークフローを採用しています。

  • Engagement : 技術顧問 / チーム参画 / スポット設計支援

    単発の設計相談から長期の伴走まで。

  • Interests

    • Coffee: Hand Drip (Cafe Au Lait)
    • Tech: Automation / Vibe Coding

未来の負債を減らすための、賢明な初期投資

Works

All works

Technical Stack：読みたい人のための、技術的な裏付け。

技術は主役ではなく、構造設計を支える道具だ。だから、採用する技術には理由がある。主軸は Astro と mFLOCSS。裏付けは推薦コメントではなく、検証できる事実で示す。

Languages & Libraries

フロントエンドからCMSまで、保守性を設計する実装基盤

  • HTML5

    • Semantic Markup: マシンリーダブルな構造化記述により、SEOとアクセシビリティの基盤を強固に構築。

  • CSS3

    • Architecture (mFLOCSS): 自作のCSS設計手法。規模が拡大しても破綻しにくく、本サイト自体がリファレンス実装（mflocss.dev で仕様公開）。

  • JavaScript

    • Vanilla JS / TypeScript: 型定義によるバグの抑制と、標準APIを活かした保守性の高い実装。
    • GSAP: 複雑なアニメーションの緻密な制御と、パフォーマンスへの影響を最小化するモダンな実装。

  • Astro

    • Content-first SSG: コンテンツ優先・ゼロJSデフォルトの静的サイト生成フレームワーク。本サイト自体の実装基盤。

  • WordPress

    • PHP / Architecture: セキュリティリスクを低減し、運用フェーズでのメンテナンスを容易にする堅牢なテーマ設計を実装します。

Quality Assurance

「人の注意力」に頼らない、機械的な検証プロセス

  • Automated Quality Control

    • Tools: ESLint / Stylelint / Prettier / PHP_CodeSniffer
    • Policy: 人為的なミスが発生する余地を最小限に抑え、チーム全体で均質化されたコード品質を維持します。

  • Supported Browsers

    • Cross-Browser Testing: 最新の主要ブラウザにおける表示と動作を、論理的かつ客観的な基準で検証し、エンドユーザーに安定した体験を届けます。
    • Chrome
    • Safari
    • Firefox
    • Edge

Development Environment

環境差異のストレスを排除する、堅牢な開発基盤

  • Environment & Build

    • Docker: 本番環境との整合性を保ち、チーム間での環境差異をなくすコンテナ技術の導入。
    • Vite / Gulp: 開発体験を向上させ、最適化されたアセットを出力するモダンなビルド環境。

Workflow & Design Implementation

意図を正確に汲み取る、透明性の高い進行管理

  • Version Control & Design

    • Git / GitHub: 変更履歴の透明性を確保し、安全でスムーズなバージョン管理を実現。
    • Figma (Dev Mode): デザインデータを数値として正確に読み取り、実装時の視覚的・構造的なズレを防止します。

  • AI-assisted Development

    • Spec-Driven Collaboration: 設計ドキュメント駆動のAI協業開発。仕様と検証ゲートで品質を担保し、人の判断を高度な仕事に集中させる。

Communication & Support

  • Communication Tools

    • Multi-Platform Support: 主要なコミュニケーションツールに柔軟に対応し、プロジェクトの円滑な進行を支援。
    • Slack
    • Chatwork
    • Backlog
    • Notion
    • Zoom

  • Certifications

    • 情報セキュリティスペシャリスト: 2015
    • ソフトウェア開発技術者: 2008
    • 3級ファイナンシャル・プランニング技能士: 2024
    • 第二種電気工事士: 2001
    • 危険物取扱者 乙種第4類: 1999
    • 日商簿記検定試験 3級: 2013

「頼みたい」ではなく、「一緒に設計したい」と感じたなら。

作業を外注する先を探しているなら、私は合わない。事業の構造を変える仕事に、外注先として関わることはしていないからだ。課題の整理から入れる。「何から手をつけるべきかわからない」という段階でも構わない。むしろその段階から一緒に考えることが、仕組みの設計にとって最も重要だ。私が関わった後、その仕組みは私なしでも回る。あなたは次の一手に集中できる。問い合わせフォームから一言で十分だ。「こういう状況で、こういう仕組みが欲しい」。その問いを一緒に考えるところから、始めたい。

プロジェクトについて相談する