トップページ

Squinter(スクインター)

Webアプリケーション

Squinterのリンク

使用した技術やツール

  • TypeScript

    TypeScript

  • Next.js

    Next.js

  • Vercel

    Vercel

  • Fabric.js

    Fabric.js

概要

画像に含まれているモザイクが薄くなったと錯覚させるWebアプリケーションです。

機能

  • 画像ファイルのアップロードまたは画像URLの入力による画像の描画
  • 描画された画像に対する、Canvas APIを用いた画像の加工
  • 加工した画像のダウンロード

こだわり

カッコいいデザインを目指しました。

当Webアプリケーションは単一のページで構成されていることと、画像の加工以外にできることがないことから、非常に質素なWebアプリケーションであると考えられます。

そうした質素な点を穴埋めするために、機能性以外の点で何かしらの特徴が必要であると考え、デザインに趣向を凝らすことにしました。


また、「モザイクが薄くなった、と錯覚できる」という当Webアプリケーションの実態は個人的にバカバカしさを感じます。

そうしたバカバカしい性質と相反する性質を持たせることでギャップが生じて、ユーザーの目を引くのではないかと考え、デザインによって向上させる性質を「カッコよさ」にしました。