プロジェクト概要
「Web制作・開発の現場から、余計なストレスを排除する」
ENVIEW TOOLS は、実務で頻繁に必要となる計算や変換処理を、圧倒的にシンプルかつ統一された UI で提供する開発補助ツール集です。
多くの無料ツールが抱える「広告によるノイズ」「バラバラのデザイン」「複雑な操作性」といった課題を解決するため、「広告なしの集中環境」「直感的に使えるUI」「実務に特化した機能群」をコンセプトに、企画からデザイン、実装までを一貫して手がけました。
開発の背景とコンセプト
開発者の、開発者による、開発者のための道具
既存のオンラインツールは、作業中に何度も広告を閉じたり、ツールごとに異なる操作を覚え直したりする必要があり、本来の集中を削いでしまうことが多々ありました。
本プロジェクトでは、自分自身の開発実務の中で感じた「もっと素早く、思考を止めずに作業したい」という切実な課題をベースに、同様の悩みを持つ開発者やデザイナーが迷いなく使える「プロのための道具箱」を目指しました。
主要機能・ツール
ブラウザ上で会員登録なしに利用でき、瞬時に結果を出力します。
- Clamp Calculator: CSS
clamp()関数の複雑な値を、画面幅に合わせ視覚的に計算。 - Byte Calculator: 文字数だけでなく、バイト数やトークン数もリアルタイムで算出。
- Diff Checker: コードやテキストの僅かな差分を、サイドバイサイドで正確に比較。
- Image Converter: WebP への変換など、次世代フォーマットへの最適化を一瞬で完了。
- SVG Optimizer/Generator: SVG の軽量化から、モダンな実装に欠かせないシンボル生成までをサポート。
デザイン思想：Neo-Brutalism
機能美としてのネオ・ブルータリズム
デザイン面では、情報の重要度を強調する「Neo-Brutalism（ネオ・ブルータリズム）」を採用しました。
太い黒ボーダーとハイコントラストな配色をあえて取り入れることで、装飾的なノイズを極限まで排除。どれが重要な情報で、どの要素が操作可能なのかを瞬時に視認できる UI を実現しました。このデザインは単なるトレンドの追求ではなく、現場での「迷わない操作体験」を最優先した技術的な選択です。
技術スタック
高速な動作とインタラクティブな体験の両立を重視し、以下の構成で構築しています。
- Framework: Astro (SSG/SSR による圧倒的な高速表示)
- UI Library: React (複雑な計算・変換ロジックの管理)
- Styling: Tailwind CSS
- Design: Figma (Neo-Brutalism デザインシステムの構築)
現場での開発効率を最大化するこのツール集は、現在も実務のニーズに合わせて新機能の拡充を続けています。