masa-sumimoto.com

兵庫県神戸市に拠点を置きながらWEB開発などを行っている住本 雅彰 ( Masaaki Sumimoto )のポートフォリオサイトです。 様々な企業に参画しながらAI x 開発・デザインを行うフリーランサーです。

Private Works

Green Holiday
Obsidian Theme

Green Holiday

マークダウンを管理するアプリObsidian用の緑をベースにしたカラーテーマ。

  • CSS
GitHub
Dreamcore Design System
Design System

Dreamcore Design System

AIコーディングエージェント向けのデザインシステム仕様書。Liminalな世界観と90年代デジタル記憶をテーマにしたDESIGN.mdを公開

  • DESIGN.md
GitHub
俺たちの神戸メモ
Web App

俺たちの神戸メモ

チャットのやり取りを起点に観光地を検索するという摩訶不思議UIで神戸を紹介しているWEBアプリ。（実際は個人的メモ）

  • Next.js
  • WordPress Rest API
Web
MapNJ
Node Module

MapNJ

SVGベースの図版にインタラクションを付与するスクリプトをNodeモジュールとして公開しています。

  • NPM
  • TypeScript
  • SVG
Web NPM GitHub
WordPress Admin for Wireframe
Figma Template

WordPress Admin for Wireframe

WordPressの管理画面をトレースしFigmaテンプレートとして公開しています。

  • Figma
DL
Color Scale Z
Figma Plugin

Color Scale Z

特定の色から段階的な色の組み合わせを生成できるデザイナー向けのFigmaプラグインを公開しています。

  • JavaScript
  • TypeScript
DL
Color Scale XD
Adobe XD Plugin

Color Scale XD

特定の色から段階的な色の組み合わせを生成できるデザイナー向けのAdobeXDプラグインを公開しています。

  • JavaScript
DL
Diary 2096
Website

Diary 2096

生成AI登場初期に作成。2096年の未来を題材にしたCSSアニメーション大活躍。

  • Next.js
  • TypeScript
  • Tailwind CSS
Show Web
Verse Tarot Voyage
Figma Template + Website

Verse Tarot Voyage

タロットカードを題材にした架空のゲームサイトのWEBサイトとFigmaテンプレートを同時公開しています。

  • Figma
  • Next.js
  • TypeScript
  • Tailwind CSS
Show Web DL Figma
Suuumin Musician SNS App
Figma Template

Suuumin Musician SNS App

音楽系SNSを題材としたFigmaデザインテンプレートを公開しています。（だいぶ古いので色々設定甘め）

  • Figma
DL Figma
Color Scale Web
Web App

Color Scale Web

特定の色から段階的な色の組み合わせを生成できるデザイナー向けのWEBアプリを公開しています。

  • React
  • Redux Toolkit
Show App
Suuumin Sampler UI
Web App + Design

Suuumin Sampler UI

電子音楽機器のサンプラーをWEB上で展開する試みです。 ReactソースコードとFigmaデザインの両方の公開しています。

  • React
  • TypeScript
  • Storybook
  • Figma
GitHub Preview
Dot Zombie
Design / Art

Dot Zombie

「ドット」 x 「定番キャラ」 x 「ゾンビ」はkawaiiだと思い、本当に可愛いか検証してみるプロジェクト。

  • Adobe XD
Show Design

Skill

デザイン領域にコミットできるフロントエンドエンジニアです。 エンジニアの知見からデザインシステムやAIを利用したDesignOps領域まで担当できます。 アートを意識したクリエイティブコーディングも得意です。是非ご興味のある方はお気軽にご連絡ください🐈

Blog

DESIGN.mdのレジストリdesignmd.shに登録してみた

READ →

Obsidianのテーマを作った （Green Holiday）

READ →

【戯言】 おっさん無自覚系ファンタジーから考察する承認欲求のトレンドと、おっさんの爆発力に期待する話

READ →

Stacks

よく利用しているものほど大きくしてます。✌️

  • Claude Code
  • Gemini CLI
  • Codex
  • Suno
  • perplexity
  • Figma
  • AdobeXD
  • After Effects
  • Photoshop
  • Illustrator
  • Canva
  • HTML5
  • CSS3
  • SCSS
  • JavaScript
  • TypeScript
  • Go
  • PHP
  • Python
  • React
  • Next.js
  • Vue.js
  • Nuxt.js
  • Astro
  • WordPress
  • Laravel
  • Ruby on Rails
  • jQuery
  • Tailwind CSS
  • Bootstrap
  • p5.js
  • gsap
  • three.js
  • git
  • gitHub
  • Bitbucket
  • vite
  • webpack
  • gulp
  • Prettier
  • ESLint
  • npm
  • yarn
  • pnpm
  • Bun
  • playwright
  • Jest
  • Flutter
  • Docker
  • GitHub Actions
  • CircleCI
  • Jenkins
  • Vercel
  • Netlify
  • Ableton Live
  • Strudel REPL