SELF-MADE DEMOS

作ったもの

実際に手を動かして実装した動作デモのまとめです。
各デモはブラウザでそのまま動きます（架空プロダクトの自主制作サンプル）。

パワポ資料リデザインのプレビュー

パワポ資料リデザイン（Before→After）

会社説明会の既存パワポを「見やすく・オシャレに」再構成した作例。配色設計・カード化・ グラフ化・数字訴求を、編集可能な .pptx として作成（5枚／25枚へ拡張可）。Before/Afterで対比。

  • PowerPoint
  • 資料デザイン
  • グラフ・表
  • .pptx納品
デモを見る →
アニメーションLPのプレビュー

アニメーション LP

スクロール連動アニメーションを実装した1ページのランディングページ。 スクロール・リビール、数字のカウントアップ、ナビ追従などを実装。

  • HTML
  • CSS
  • Vanilla JS
  • 依存なし
デモを見る →
メンズサロンLPのプレビュー

メンズサロン LP（1ページ）

サロン向けの1ページLP。スクロール連動のフェードイン、矢印・ドット・スワイプ対応の ギャラリー横スライダー、Q&Aアコーディオン、ボタンのホバー効果をレスポンシブで実装。

  • HTML
  • CSS
  • Vanilla JS
  • レスポンシブ
  • 依存なし
デモを見る →
ピアノ教室ホームページのプレビュー

ピアノ教室 ホームページ

教室サイトの構成（トップ・教室紹介・コース料金・生徒の声・アクセス・お問い合わせ）を 1サイトで実装。お問い合わせフォームのクライアント側バリデーション付き。

  • HTML
  • CSS
  • Vanilla JS
  • レスポンシブ
  • フォーム
デモを見る →
現場向け業務システムUIのプレビュー

業務システム UI（タブレット）

屋外・タブレット利用を想定した業務システムのUI/UXサンプル。高コントラスト、大きな タッチターゲット、GNSS等の状態表示、画面切替・一覧・品質評価画面を実装。

  • UI/UX
  • 業務システム
  • タブレット
  • Vanilla JS
  • 依存なし
デモを見る →
CSV集計ツールのプレビュー

CSV 集計・可視化ツール

CSV を貼るだけで表・要約統計・棒グラフを生成。CSVパース、数値列の自動判定、 分類×数値の集計、Canvas での描画まで実装。データは端末内で完結。

  • Vanilla JS
  • Canvas
  • データ集計
  • 依存なし
デモを見る →
画像リサイズツールのプレビュー

画像リサイズ・一括圧縮

ドラッグ＆ドロップで複数画像をリサイズ・圧縮。最大幅・画質・形式を指定でき、 削減率を表示。FileReader と Canvas でブラウザ内処理、アップロードなし。

  • Vanilla JS
  • Canvas
  • 画像処理
  • 依存なし
デモを見る →