masa-sumimoto.com

兵庫県神戸市に拠点を置きながらWEB開発などを行っている住本 雅彰 ( Masaaki Sumimoto )のポートフォリオサイトです。 様々な企業に参画しながら開発・デザインを行うフリーランサーです。 曲のリリースやクリエイティブコーディングなどアート面でも色々やっています🏃‍♂️🏃‍♂️

Private Works

俺たちの神戸メモ
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

デザイン寄りのフロントエンドが専門領域です。 Figmaデザインなどから参画し、Design to Codeを意識したDesignOpsおよびフロントエンド実装までをシームレスに担当することを得意としています。 以下のような職種は領域範囲内です。是非ご興味のある方はお気軽にご連絡ください🐈

Design Engineering
デザイン
エンジニア Design Engineering
Front-end Engineering
フロントエンド
エンジニア Front-end Engineering
Motion Design
モーション
デザイナー Motion Design
UIUX Design
UIUX
デザイナー UIUX Design
Web Design
WEB
デザイナー Web Design
Creative Coding
クリエイティブ
コーダー Creative Coding
Sound Creation
サウンド
クリエーター Sound Creation

Stacks

得意なものほど、強く示してます。記載の無いものでもご要望があれば即時学習し、ご要望にお答えいたします✌️

Design
  • Figma
  • AdobeXD
  • After Effects
  • Photoshop
  • Illustrator
Language
  • HTML5
  • CSS3
  • SCSS
  • JavaScript
  • TypeScript
  • PHP
  • Python
Web Frameworks
  • Next.js (React)
  • Nuxt.js (Vue.js)
  • Astro
  • WordPress
  • Laravel
  • Ruby on Rails
  • jQuery
CSS Frameworks
  • Tailwind CSS
  • Bootstrap
Animation Frameworks
  • p5.js
  • gsap
  • three.js
Version Control
  • git
  • gitHub
  • Bitbucket
Module Bundler / Runner
  • vite
  • webpack
  • gulp
Linters / Formatters
  • Prettier
  • ESLint
Package Managers
  • npm
  • yarn
  • pnpm
  • Bun
Testing
  • playwright
  • Jest
Mobile
  • Flutter
DevOps / Hosting
  • Docker
  • GitHub Actions
  • CircleCI
  • Jenkins
  • Vercel
  • Netlify
Sound
  • Ableton Live
  • Strudel REPL