MSDDのロゴ MSDD

技術スタック

描くことも、作ることも、動かし続けることも。
Miiが使える技術と、このサイトがどう動いているかをまとめました。

Skills使える技術

コードCode

言語・Web

  • HTML / CSS / JavaScript
  • TypeScript
  • Node.js
  • Express
  • Canvas

データベース

  • SQL（PostgreSQL・MySQL・SQL Server）
  • Supabase

サーバー・公開

  • Linux（Ubuntu）
  • nginx
  • pm2
  • Let's Encrypt（HTTPS）
  • Cloudflare R2
  • Formspree

業務の自動化・ローコード

  • VBA（Excel）
  • Google Apps Script
  • Power Automate
  • Mendix

開発ツール

  • Git / GitHub
  • VS Code
  • DBeaver
  • Claude Code

このサイトも、ここに並んでいる技術で作っています（このサイトの作り）

イラストIllustration

使っているツール

  • CLIP STUDIO PAINT
  • Adobe Photoshop
  • Adobe Illustrator
  • Live2D（初歩）

できること

  • キャラクターデザイン
  • VLiverモデル制作
  • アイコン・立ち絵・一枚絵

グラフィックGraphic

使っているツール

  • Adobe Photoshop
  • Adobe Illustrator
  • Canva

できること

  • ロゴ・バナー制作
  • Webデザイン
  • サムネイル制作
  • SNS用クリエイティブ
  • 印刷物・イベント用グラフィック

動画Movie

使っているツール

  • Adobe Premiere Pro
  • Adobe After Effects
  • Adobe Photoshop
  • Canva

できること

  • YouTube動画編集
  • SNS向けショート動画
  • PV
  • テロップ・字幕
  • サムネイル制作

This siteこのサイトの作り

ページを開いてから表示されるまで

  1. あなたのブラウザ ページを開く
  2. nginx HTTPS で受け取って、サーバーへ渡す
  3. Node.js ＋ Express ページと API を返す（pm2 で動かし続ける）
  4. Supabase（PostgreSQL） 作品・お知らせ・いいねを保存

そのほかに使っているサービス

  • Cloudflare R2作品の画像・動画を置く場所。ブラウザが直接読み込む
  • Formspreeお問い合わせフォームの送り先
  • YouTube動画の作品の埋め込み
  • Google Fontsひな明朝・よもぎの文字

作るときに気をつけたこと

  • 手作りのHTML・CSS・JavaScript：フレームワークを使わず、軽く・長く手入れしやすい形に。ヘッダーやフッターは共通の部品にして、サーバーが各ページに差し込んでいます
  • シェアしたときの見え方：作品のページは、サーバーが作品ごとのタイトル・説明・画像を書き込んでから返すので、SNSでシェアすると作品の画像が表示されます
  • 軽さ：画像は表示する大きさに縮めて WebP に。トップページの画像は合計 3.6MB から 86KB になりました
  • 夜景：トップの夜景は写真ではなく、Canvas に光の点を描いています
  • だれでも使えるように：キーボードだけでも操作でき、読み上げソフトにもボタンの意味や状態が伝わるようにしています

「こんなものを作りたい」「ここだけ手伝ってほしい」も、お気軽に。お問い合わせ