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
デザイン
エンジニア
Front-end Engineering
フロントエンド
エンジニア
Motion Design
モーション
デザイナー
UIUX Design
UIUX
デザイナー
Web Design
WEB
デザイナー
Creative Coding
クリエイティブ
コーダー
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